/* ========================================
   国际学校择校小程序 - 样式表
   ======================================== */

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

:root {
  --primary: #2d7d6f;
  --primary-light: #e8f5f3;
  --primary-dark: #1a5a50;
  --secondary: #f0a050;
  --accent: #e74c3c;
  --success: #27ae60;
  --warning: #f39c12;
  --danger: #e74c3c;
  --text-primary: #1a1a2e;
  --text-secondary: #6c7293;
  --text-light: #999;
  --bg-page: #f5f6fa;
  --bg-card: #ffffff;
  --bg-section: #f9f9fb;
  --border: #e8e8ec;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ============ App Container ============ */
.app-container {
  min-height: 100vh;
  padding-bottom: 64px;
}

/* ============ Pages ============ */
.page {
  display: none;
  min-height: calc(100vh - 64px);
  padding: 16px;
}
.page.active {
  display: block;
}

/* ============ Bottom Tab Bar ============ */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 64px;
  background: #fff;
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-light);
  cursor: pointer;
  transition: color 0.2s;
  user-select: none;
}

.tab-item.active {
  color: var(--primary);
}

.tab-icon {
  font-size: 22px;
  line-height: 1;
}

.tab-label {
  font-size: 11px;
  font-weight: 500;
}

/* ============ Home Page ============ */
.home-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  margin-bottom: 16px;
  color: #fff;
}

.home-greeting h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.home-greeting p {
  font-size: 13px;
  opacity: 0.85;
}

.home-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  flex: 1;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 16px 8px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.home-actions {
  margin-bottom: 20px;
}

.action-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.15s;
}

.action-card:active {
  transform: scale(0.98);
}

.action-card.primary-action {
  background: linear-gradient(135deg, var(--primary-light), #fff);
  border: 1px solid var(--primary);
}

.action-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  border-radius: 12px;
  flex-shrink: 0;
}

.primary-action .action-icon {
  background: var(--primary);
}

.action-info {
  flex: 1;
}

.action-info h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.action-info p {
  font-size: 12px;
  color: var(--text-secondary);
}

.action-arrow {
  font-size: 24px;
  color: var(--text-light);
}

.home-features,
.home-courses {
  margin-bottom: 20px;
}

.home-features h3,
.home-courses h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.feature-item {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 14px 6px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.feature-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.feature-item span {
  font-size: 11px;
  color: var(--text-secondary);
}

.course-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-tag {
  padding: 6px 14px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

/* ============ Consult Form ============ */
.consult-header {
  margin-bottom: 16px;
}

.consult-progress {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}

.progress-bar {
  height: 6px;
  background: #eef0f4;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.step-container {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.step-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.step-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.form-label .required {
  color: var(--accent);
}

.form-label .hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-light);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
  background: #fff;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.radio-item input {
  display: none;
}

.radio-item.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.checkbox-item input {
  display: none;
}

.checkbox-item.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

/* Budget Slider */
.budget-slider-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.budget-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #eef0f4;
  border-radius: 3px;
  outline: none;
}

.budget-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(45,125,111,0.4);
}

.budget-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.budget-display {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  min-width: 80px;
  text-align: right;
}

.budget-hints {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-light);
}

/* Step Summary */
.step-summary {
  background: var(--bg-section);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 16px 0;
}

.step-summary h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--primary);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-label {
  color: var(--text-secondary);
}

.summary-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* Buttons */
.step-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:active {
  background: var(--primary-dark);
}

.btn-secondary {
  background: #f0f0f5;
  color: var(--text-secondary);
}

.btn-block {
  width: 100%;
}

.btn-large {
  padding: 14px 28px;
  font-size: 16px;
}

/* ============ Match Results ============ */
.result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.result-back,
.detail-back,
.report-back {
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
}

.result-header h2 {
  font-size: 18px;
  font-weight: 700;
}

.result-summary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  color: #fff;
}

.summary-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 14px;
}

.summary-stat {
  text-align: center;
}

.summary-stat-num {
  font-size: 28px;
  font-weight: 700;
}

.summary-stat-label {
  font-size: 12px;
  opacity: 0.85;
}

.summary-recommendation {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.95;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.result-actions {
  margin-bottom: 16px;
}

.match-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.match-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.15s;
}

.match-card:active {
  transform: scale(0.98);
}

.match-rank {
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.match-card:nth-child(1) .match-rank {
  background: var(--accent);
}

.match-card:nth-child(2) .match-rank {
  background: var(--secondary);
}

.match-card:nth-child(3) .match-rank {
  background: var(--warning);
}

.match-card-body {
  flex: 1;
}

.match-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.match-school-name {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  margin-right: 8px;
}

.match-score {
  padding: 3px 10px;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.match-level {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.match-school-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.info-tag {
  padding: 2px 8px;
  background: var(--bg-section);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.match-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.highlight-tag {
  padding: 2px 8px;
  background: #fff5e6;
  color: var(--secondary);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.match-reasons {
  margin-bottom: 6px;
}

.reason-item {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  align-items: flex-start;
}

.reason-icon {
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

.match-concerns {
  margin-bottom: 6px;
}

.concern-item {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--warning);
  margin-bottom: 4px;
  align-items: flex-start;
}

.concern-icon {
  color: var(--warning);
  font-weight: 700;
  flex-shrink: 0;
}

.match-card-footer {
  text-align: right;
  margin-top: 6px;
}

.view-detail {
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}

/* ============ School Detail ============ */
.detail-header {
  margin-bottom: 12px;
}

.school-detail {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.detail-hero {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  padding: 24px 20px;
  color: #fff;
}

.detail-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

.detail-name-en {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 12px;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-tag {
  padding: 3px 10px;
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  font-size: 12px;
}

.detail-score-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.detail-score-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.detail-score-num {
  font-size: 26px;
  font-weight: 700;
}

.detail-score-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.detail-match-level {
  font-size: 16px;
  font-weight: 600;
}

.detail-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.detail-section:last-child {
  border-bottom: none;
}

.detail-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-light);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.info-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-size: 11px;
  color: var(--text-light);
}

.info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.detail-atmosphere {
  font-size: 13px;
  color: var(--text-secondary);
}

.strengths-list,
.reasons-list,
.concerns-list,
.requirements-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.strength-item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  align-items: flex-start;
}

.strength-icon {
  color: var(--secondary);
  flex-shrink: 0;
}

.reason-detail-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  align-items: flex-start;
}

.reason-detail-type {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--success);
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.reason-detail-type.highlight {
  background: var(--secondary);
}

.reason-detail-text {
  font-size: 12px;
  color: var(--text-secondary);
}

.concern-detail-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: #fff8e1;
  align-items: flex-start;
}

.concern-detail-item.severity-high {
  background: #ffebee;
}

.concern-detail-dimension {
  font-size: 12px;
  font-weight: 700;
  color: var(--warning);
  margin-bottom: 2px;
}

.concern-detail-item.severity-high .concern-detail-dimension {
  color: var(--danger);
}

.concern-detail-text {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Score Breakdown */
.score-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.score-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.score-bar-label {
  font-weight: 600;
  color: var(--text-primary);
}

.score-bar-value {
  color: var(--text-secondary);
}

.score-bar-track {
  height: 6px;
  background: #eef0f4;
  border-radius: 3px;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.score-bar-detail {
  font-size: 11px;
  color: var(--text-light);
}

.facilities-tags,
.university-tags,
.accreditation-tags,
.suitable-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.facility-tag,
.university-tag,
.accreditation-tag,
.suitable-tag {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.facility-tag {
  background: #e3f2fd;
  color: #1976d2;
}

.university-tag {
  background: #f3e5f5;
  color: #7b1fa2;
}

.accreditation-tag {
  background: #e8f5e9;
  color: #388e3c;
}

.suitable-tag {
  background: #fff3e0;
  color: #e65100;
}

.requirement-item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  align-items: flex-start;
}

.requirement-icon {
  color: var(--primary);
  flex-shrink: 0;
}

/* ============ Report Page ============ */
.report-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  box-shadow: var(--shadow-sm);
}

.report-header-bar h2 {
  font-size: 17px;
  font-weight: 700;
}

.report-action-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}

.report-section {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.report-header-section {
  text-align: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
}

.report-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.report-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.report-meta-item {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0.9;
}

.report-meta-item span {
  opacity: 0.7;
}

.report-section-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--primary);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-light);
}

.report-section-intro {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.analysis-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analysis-item {
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.analysis-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.analysis-dimension {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.analysis-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

.analysis-detail {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.analysis-summary {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--primary-dark);
  line-height: 1.6;
}

/* Report Match Summary */
.report-match-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 14px;
}

.report-stat-item {
  text-align: center;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-section);
  min-width: 80px;
}

.report-stat-item.highlight {
  background: var(--primary-light);
}

.report-stat-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.report-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.report-match-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
}

.report-top-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-top-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
}

.report-top-rank {
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.report-top-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.report-top-score {
  padding: 2px 8px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* Report School Card */
.report-school-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
}

.report-school-card:last-child {
  margin-bottom: 0;
}

.report-school-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.report-school-rank {
  font-size: 12px;
  color: var(--primary);
  font-weight: 700;
}

.report-school-name {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 2px;
}

.report-school-name-en {
  font-size: 11px;
  color: var(--text-light);
}

.report-school-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
}

.report-school-score span {
  font-size: 20px;
  font-weight: 700;
}

.report-school-score small {
  font-size: 9px;
}

.report-school-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
}

.rs-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rs-info span {
  font-size: 10px;
  color: var(--text-light);
}

.rs-info strong {
  font-size: 12px;
  color: var(--text-primary);
}

.report-school-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.report-subsection {
  margin-bottom: 12px;
}

.report-subsection h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.report-reason-item,
.report-concern-item {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  align-items: flex-start;
  font-size: 12px;
}

.report-reason-item {
  background: #e8f5e9;
}

.report-reason-item.highlight {
  background: #fff3e0;
}

.report-reason-icon {
  color: var(--success);
  font-weight: 700;
}

.report-reason-item strong {
  display: block;
  margin-bottom: 2px;
}

.report-reason-item p {
  color: var(--text-secondary);
}

.report-concern-item {
  background: #fff8e1;
}

.report-concern-item.severity-high {
  background: #ffebee;
}

.report-concern-icon {
  color: var(--warning);
  font-weight: 700;
}

.report-concern-item.severity-high .report-concern-icon {
  color: var(--danger);
}

.report-concern-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--warning);
}

.report-concern-item.severity-high strong {
  color: var(--danger);
}

.report-concern-item p {
  color: var(--text-secondary);
}

.report-strengths {
  list-style: none;
  padding-left: 0;
}

.report-strengths li {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0 4px 16px;
  position: relative;
}

.report-strengths li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--secondary);
}

/* Report Score Breakdown */
.report-score-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rsb-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rsb-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.rsb-bar {
  height: 5px;
  background: #eef0f4;
  border-radius: 3px;
  overflow: hidden;
}

.rsb-fill {
  height: 100%;
  border-radius: 3px;
}

.report-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.report-req-tag {
  padding: 4px 10px;
  background: var(--bg-section);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.report-atmosphere {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Comparison Table */
.comparison-table {
  overflow-x: auto;
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.comparison-table th {
  background: var(--primary);
  color: #fff;
  padding: 8px 6px;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}

.comparison-table th:first-child {
  text-align: left;
  padding-left: 12px;
}

.comparison-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  color: var(--text-secondary);
}

.comparison-table td:first-child {
  text-align: left;
  padding-left: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.comparison-table tr:nth-child(even) td {
  background: var(--bg-section);
}

.comp-score {
  font-weight: 700;
  color: var(--primary);
}

/* Action Plan */
.action-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.action-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.action-step-num {
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.action-step-content {
  flex: 1;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.action-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.action-step-header h4 {
  font-size: 14px;
  font-weight: 600;
}

.action-step-time {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
}

.action-step-content p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.personalized-advice {
  background: #fff8e1;
  border-radius: var(--radius-sm);
  padding: 12px;
}

.personalized-advice h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--warning);
}

.advice-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.advice-icon {
  flex-shrink: 0;
}

/* Disclaimer */
.report-disclaimer {
  background: var(--bg-section);
}

.report-disclaimer h3 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.report-disclaimer p {
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.6;
}

/* ============ Schools Database ============ */
.schools-header,
.reports-header {
  margin-bottom: 16px;
}

.schools-header h2,
.reports-header h2 {
  font-size: 20px;
  font-weight: 700;
}

.schools-header p,
.reports-header p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.schools-filter {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: #fff;
  font-family: inherit;
}

.schools-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.school-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.15s;
}

.school-card:active {
  transform: scale(0.98);
}

.school-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.school-card-name {
  font-size: 15px;
  font-weight: 700;
}

.school-card-name-en {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}

.school-card-type {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 4px;
  white-space: nowrap;
}

.school-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.school-tag {
  padding: 2px 6px;
  background: var(--bg-section);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}

.school-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.school-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.feature-mini {
  padding: 2px 6px;
  background: #fff5e6;
  color: var(--secondary);
  border-radius: 3px;
  font-size: 10px;
}

.no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
  font-size: 14px;
}

/* ============ Reports List ============ */
.reports-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}

.report-card-main {
  flex: 1;
  cursor: pointer;
}

.report-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.report-card-id {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 600;
}

.report-card-date {
  font-size: 11px;
  color: var(--text-light);
}

.report-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.report-card-info {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.report-card-match {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

.report-card-score {
  font-weight: 700;
  color: var(--primary);
}

.report-card-delete {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
  white-space: nowrap;
  align-self: center;
}

/* ============ Empty State ============ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.empty-state p {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 20px;
}

/* ============ Loading ============ */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-box {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 36px;
  text-align: center;
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-box p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ============ Toast ============ */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 14px;
  opacity: 0;
  transition: all 0.3s;
  z-index: 9999;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ Responsive ============ */
@media (max-width: 360px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .info-grid,
  .report-school-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   测试通用样式（MBTI + 入学测试共用）
   ======================================== */

.test-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  box-shadow: var(--shadow-sm);
}

.test-header h2 {
  font-size: 16px;
  font-weight: 700;
}

.test-back {
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
}

.test-progress-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.test-save-btn {
  font-size: 14px;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}

.test-progress-bar {
  height: 4px;
  background: #eef0f4;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}

.test-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
  transition: width 0.3s ease;
}

.test-difficulty-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #fff3e0;
  color: var(--secondary);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.test-question-container {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.test-question-num {
  font-size: 12px;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 10px;
}

.test-question-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.test-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.test-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.test-option:active {
  transform: scale(0.98);
  border-color: var(--primary);
  background: var(--primary-light);
}

.test-option-letter {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-section);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.test-option-text {
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
}

.test-nav {
  display: flex;
  justify-content: flex-start;
}

/* ========================================
   MBTI 结果样式
   ======================================== */

.mbti-result-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mbti-result-hero {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  color: #fff;
}

.mbti-type-badge {
  display: inline-block;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 8px 24px;
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  margin-bottom: 12px;
}

.mbti-type-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

.mbti-type-nickname {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 12px;
}

.mbti-student-name {
  font-size: 13px;
  opacity: 0.9;
}

.mbti-test-meta {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
}

.mbti-result-section {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.mbti-result-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--primary);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-light);
}

.mbti-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.mbti-traits,
.mbti-careers,
.mbti-school-fit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mbti-trait-tag {
  padding: 4px 12px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.mbti-career-tag {
  padding: 6px 14px;
  background: #e3f2fd;
  color: #1565c0;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

.mbti-fit-tag {
  padding: 6px 14px;
  background: #fff3e0;
  color: var(--secondary);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

.mbti-learning {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.mbti-fit-note {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 10px;
  font-style: italic;
}

.mbti-result-actions {
  padding: 4px 0 8px;
}

/* MBTI 维度条 */
.mbti-dimensions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mbti-dim-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mbti-dim-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.mbti-dim-bar {
  height: 24px;
  background: #eef0f4;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
}

.mbti-dim-fill-e,
.mbti-dim-fill-s,
.mbti-dim-fill-t,
.mbti-dim-fill-j {
  height: 100%;
  border-radius: 12px 0 0 12px;
  transition: width 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.mbti-dim-fill-e { background: linear-gradient(90deg, #e74c3c, #e67e22); }
.mbti-dim-fill-s { background: linear-gradient(90deg, #3498db, #2980b9); }
.mbti-dim-fill-t { background: linear-gradient(90deg, #27ae60, #229954); }
.mbti-dim-fill-j { background: linear-gradient(90deg, #8e44ad, #7d3c98); }

.mbti-dim-result {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  font-weight: 600;
}

/* ========================================
   入学测试样式
   ======================================== */

.test-setup-container {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.test-intro-card {
  text-align: center;
  padding: 20px 16px;
  background: linear-gradient(135deg, var(--primary-light), #fff);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.test-intro-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.test-intro-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--primary);
}

.test-intro-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.test-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.test-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}

.subject-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subject-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.subject-card:active {
  transform: scale(0.98);
}

.subject-card.completed {
  background: #f1f8f4;
  border-color: var(--success);
}

.subject-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-section);
  border-radius: 10px;
  flex-shrink: 0;
}

.subject-info {
  flex: 1;
}

.subject-name {
  font-size: 15px;
  font-weight: 600;
}

.subject-status {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.subject-card.completed .subject-status {
  color: var(--success);
  font-weight: 500;
}

.subject-arrow {
  font-size: 20px;
  color: var(--text-light);
}

/* 测试结果页 */
.test-result-container,
.test-report-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test-result-hero {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  color: #fff;
}

.test-result-score {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.test-result-label {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 6px;
}

.test-result-meta {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 10px;
}

.test-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.test-stat-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.test-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
}

.test-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.test-result-section {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.test-result-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
}

/* 技能条 */
.skill-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.skill-name {
  font-size: 13px;
  font-weight: 500;
  min-width: 80px;
}

.skill-bar {
  flex: 1;
  height: 8px;
  background: #eef0f4;
  border-radius: 4px;
  overflow: hidden;
}

.skill-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.skill-bar-fill.strength {
  background: var(--success);
}

.skill-bar-fill.weakness {
  background: var(--danger);
}

.skill-rate {
  font-size: 12px;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

/* 难度图表 */
.difficulty-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding: 8px 0;
  border-bottom: 2px solid var(--border);
}

.diff-bar {
  flex: 1;
  min-width: 8px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
}

.diff-bar.correct {
  background: var(--success);
}

.diff-bar.wrong {
  background: var(--danger);
}

.diff-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-color.correct {
  background: var(--success);
}

.legend-color.wrong {
  background: var(--danger);
}

.test-result-actions {
  padding: 4px 0 8px;
}

/* 综合报告 */
.test-report-hero {
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  color: #fff;
}

.test-report-student {
  font-size: 22px;
  font-weight: 700;
}

.test-report-grade {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 4px;
}

.test-report-date {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
}

.test-report-level {
  display: inline-block;
  font-size: 28px;
  font-weight: 800;
  padding: 6px 20px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  margin-top: 16px;
}

.test-report-level-desc {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 10px;
  line-height: 1.6;
}

.test-report-overview {
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.overview-stat {
  text-align: center;
}

.overview-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.overview-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.test-report-section {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.test-report-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.subject-result-card {
  padding: 14px;
  background: var(--bg-section);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

.subject-result-card:last-child {
  margin-bottom: 0;
}

.subject-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.subject-result-name {
  font-size: 15px;
  font-weight: 600;
}

.subject-result-level {
  font-size: 13px;
  font-weight: 700;
}

.subject-result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.subject-result-bar {
  height: 6px;
  background: #eef0f4;
  border-radius: 3px;
  overflow: hidden;
}

.subject-result-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.all-skills {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.all-skill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

.all-skill-item.strength {
  background: #e8f5e9;
}

.all-skill-item.weakness {
  background: #ffebee;
}

.all-skill-subject {
  font-size: 11px;
  color: var(--text-light);
  min-width: 60px;
}

.all-skill-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.all-skill-rate {
  font-size: 13px;
  font-weight: 700;
}

.all-skill-item.strength .all-skill-rate {
  color: var(--success);
}

.all-skill-item.weakness .all-skill-rate {
  color: var(--danger);
}

.test-advice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* MBTI 开始页 */
.mbti-intro-container {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.mbti-intro-info {
  margin: 16px 0;
  padding: 14px;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
}

.mbti-intro-info p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.mbti-intro-info p:last-child {
  margin-bottom: 0;
}

/* ========================================
   MBTI 详细报告样式
   ======================================== */

.mbti-report-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mbti-trait-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mbti-trait-item {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.mbti-trait-item.strength {
  background: #e8f5e9;
  color: #2e7d32;
}

.mbti-trait-item.weakness {
  background: #fff3e0;
  color: #e65100;
}

.mbti-trait-item.neutral {
  background: var(--bg-section);
  color: var(--text-secondary);
}

.mbti-trait-icon {
  flex-shrink: 0;
  font-weight: 700;
  width: 18px;
  text-align: center;
}

.mbti-trait-item.strength .mbti-trait-icon {
  color: var(--success);
}

.mbti-trait-item.weakness .mbti-trait-icon {
  color: var(--warning);
}

.mbti-trait-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* 功能运用 */
.mbti-functions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mbti-function-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
}

.mbti-function-item.dominant {
  background: #e3f2fd;
  border-color: #1565c0;
}

.mbti-function-item.auxiliary {
  background: #e8f5e9;
  border-color: #2e7d32;
}

.mbti-function-item.third {
  background: #fff3e0;
  border-color: #e65100;
}

.mbti-function-item.inferior {
  background: #ffebee;
  border-color: #c62828;
}

.mbti-function-label {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 600;
  white-space: nowrap;
  min-width: 60px;
}

.mbti-function-name {
  font-size: 13px;
  font-weight: 700;
  min-width: 80px;
}

.mbti-function-desc {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
}

/* 岗位特质 */
.mbti-job-traits {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mbti-job-trait-item {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  align-items: flex-start;
}

/* 职业类型 */
.mbti-career-field {
  padding: 12px;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.mbti-career-field-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.mbti-career-jobs {
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.6;
}

.mbti-career-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.mbti-avoid-careers {
  margin-top: 10px;
  padding: 10px 12px;
  background: #ffebee;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #c62828;
  line-height: 1.6;
}

/* 工作环境 */
.mbti-work-env {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 14px;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  line-height: 1.6;
}

/* 成功秘诀 */
.mbti-success-secret {
  padding: 10px 14px;
  background: #e3f2fd;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #1565c0;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* 大学专业 */
.mbti-major-item {
  padding: 12px;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.mbti-major-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.mbti-major-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.mbti-major-rating {
  font-size: 13px;
  color: var(--secondary);
}

.mbti-major-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 名人 */
.mbti-celebrities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mbti-celebrity-tag {
  padding: 6px 14px;
  background: #f3e5f5;
  color: #7b1fa2;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

/* ============ 管理后台 ============ */
.admin-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-header h2 { margin: 0; font-size: 18px; }
.admin-back {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.admin-tabs {
  display: flex;
  background: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
  padding: 0 8px;
  position: sticky;
  top: 57px;
  z-index: 9;
}
.admin-tab {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .2s;
}
.admin-tab.active {
  color: #6c5ce7;
  border-bottom-color: #6c5ce7;
}
.admin-panel { display: none; padding: 12px; }
.admin-panel.active { display: block; }

.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  overflow: hidden;
}
.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .2s;
}
.admin-card-header:hover { background: #f8f9fa; }
.admin-card-header.expanded { background: #f0f4ff; }
.admin-card-header.expanded .admin-expand-icon { transform: rotate(180deg); }

.admin-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
.admin-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #888;
  flex-shrink: 0;
}
.admin-expand-icon { transition: transform .3s; font-size: 12px; }

.admin-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.mbti-badge { background: #6c5ce7; }
.test-badge { background: #00b894; }
.report-badge { background: #e17055; }

.admin-date {
  color: #aaa;
  font-size: 12px;
}

.admin-detail-row {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid #f0f0f0;
}
.admin-detail-row.show { display: block; }

.admin-detail-section {
  margin-top: 14px;
}
.admin-detail-section h4 {
  font-size: 14px;
  color: #333;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}

.admin-scores { display: flex; flex-direction: column; gap: 8px; }
.admin-score-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.admin-score-item span:first-child { width: 55px; color: #555; flex-shrink: 0; }
.admin-score-item span:last-child { width: 100px; text-align: right; font-size: 12px; color: #888; flex-shrink: 0; }
.admin-score-bar {
  flex: 1;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}
.admin-score-fill {
  height: 100%;
  background: linear-gradient(90deg, #6c5ce7, #a29bfe);
  border-radius: 4px;
  transition: width .5s;
}

.admin-answers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-answers-table th {
  background: #f8f9fa;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 2px solid #e0e0e0;
}
.admin-answers-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f0f0f0;
}
.admin-answers-table tr:hover td { background: #fafbfc; }

.admin-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-tag {
  background: #f0f4ff;
  color: #4a6cf7;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.admin-subject-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.admin-subject-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 4px;
}
.admin-subject-header span { color: #888; font-size: 12px; }
.admin-subject-detail {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.admin-stat-card {
  flex: 1;
  min-width: 90px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.admin-stat-card strong {
  display: block;
  font-size: 22px;
  color: #6c5ce7;
}
.admin-stat-card span {
  font-size: 11px;
  color: #888;
}
.login-badge { background: #0984e3; }

.login-modal label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}
.login-modal input:focus {
  border-color: #6c5ce7 !important;
  box-shadow: 0 0 0 3px rgba(108,92,231,0.1);
}