/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0f0f12;
  color: #e2e8f0;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* Typography */
h1 { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 4px; letter-spacing: 1px; }
.sub { text-align: center; color: #64748b; font-size: 14px; margin-bottom: 40px; }
.serif { font-family: "Noto Serif SC", "Songti SC", serif; }

/* Progress */
.progress { height: 4px; background: #1e293b; border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7); transition: width 0.3s ease; width: 0%; }
.progress-text { text-align: center; font-size: 12px; color: #475569; margin-bottom: 30px; }

/* Quiz */
.question { font-size: 18px; font-weight: 600; margin-bottom: 30px; min-height: 60px; line-height: 1.5; }
.options { display: flex; flex-direction: column; gap: 12px; }
.opt {
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 15px;
  line-height: 1.5;
}
.opt:hover { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.05); }
.opt:active { transform: scale(0.98); }

/* Result Card */
#result-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out;
}
#result-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}

.card-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.card-meta { font-size: 12px; color: #64748b; }
.card-meta .label { text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.card-id { font-family: monospace; color: #475569; }

.type-big {
  font-size: 64px;
  font-weight: 900;
  text-align: center;
  letter-spacing: -2px;
  margin: 10px 0;
  line-height: 1;
  animation: float 6s ease-in-out infinite;
}
.type-name { text-align: center; font-size: 18px; color: #94a3b8; margin-bottom: 24px; }

.quote {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  margin: 24px 0;
  padding: 0 8px;
}
.divider { width: 40px; height: 1px; background: rgba(255,255,255,0.15); margin: 16px auto; }

.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
.tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: #cbd5e1;
  transition: all 0.3s;
}
.tag:hover { background: rgba(255,255,255,0.12); transform: scale(1.05); }

.desc-box {
  background: rgba(0,0,0,0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.05);
}
.desc-title { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.desc-text { font-size: 14px; color: #cbd5e1; line-height: 1.8; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.stat-box { background: rgba(0,0,0,0.2); border-radius: 12px; padding: 16px; text-align: center; border: 1px solid rgba(255,255,255,0.05); }
.stat-value { font-size: 24px; font-weight: 700; color: #f8fafc; margin-bottom: 4px; }
.stat-label { font-size: 12px; color: #64748b; }

.relation-card {
  background: rgba(0,0,0,0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.05);
}
.relation-title { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.relation-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.relation-item { text-align: center; flex: 1; }
.relation-label { font-size: 12px; margin-bottom: 4px; }
.relation-label.good { color: #34d399; }
.relation-label.bad { color: #fb7185; }
.relation-value { font-size: 20px; font-weight: 700; color: #f8fafc; }
.relation-sub { font-size: 12px; color: #475569; margin-top: 2px; }
.relation-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  margin: 0 12px;
}
.relation-arrow.good { background: rgba(52,211,153,0.1); color: #34d399; }
.relation-arrow.bad { background: rgba(251,113,133,0.1); color: #fb7185; }

.relation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.relation-grid .label { font-size: 11px; color: #475569; margin-bottom: 4px; }
.relation-grid .value { font-size: 14px; font-weight: 500; color: #e2e8f0; }

.dodont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.do-box { background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.2); border-radius: 12px; padding: 16px; }
.dont-box { background: rgba(244,63,94,0.05); border: 1px solid rgba(244,63,94,0.2); border-radius: 12px; padding: 16px; }
.do-title { font-size: 12px; color: #34d399; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; }
.dont-title { font-size: 12px; color: #fb7185; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; }
.do-box ul, .dont-box ul { margin: 0; padding-left: 16px; font-size: 14px; color: #cbd5e1; }
.do-box li, .dont-box li { margin-bottom: 6px; }

.card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #475569;
}
.card-footer .hash { font-family: monospace; }

/* Actions */
.actions { display: flex; gap: 10px; margin-bottom: 16px; }
.btn { flex: 1; padding: 14px; border-radius: 12px; border: none; font-size: 15px; cursor: pointer; font-weight: 600; transition: all 0.2s; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: #fff; color: #0f0f12; }
.btn-primary:hover { background: #f1f5f9; transform: translateY(-1px); }
.btn-secondary { background: rgba(255,255,255,0.06); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.1); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* Rarity */
.rarity-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
.rarity-common { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }
.rarity-uncommon { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.rarity-rare { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.25); }
.rarity-epic { background: rgba(168,85,247,0.12); color: #c084fc; border: 1px solid rgba(168,85,247,0.25); }
.rarity-legendary { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }

/* Glows & Gradients per type */
.glow-intj { box-shadow: 0 0 60px -10px rgba(59,130,246,0.35); border-color: rgba(96,165,250,0.2); }
.text-gradient-intj { background: linear-gradient(135deg, #60a5fa, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-intp { box-shadow: 0 0 60px -10px rgba(6,182,212,0.3); border-color: rgba(34,211,238,0.2); }
.text-gradient-intp { background: linear-gradient(135deg, #22d3ee, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-entj { box-shadow: 0 0 60px -10px rgba(185,28,28,0.35); border-color: rgba(239,68,68,0.2); }
.text-gradient-entj { background: linear-gradient(135deg, #ef4444, #b91c1c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-entp { box-shadow: 0 0 60px -10px rgba(109,40,217,0.35); border-color: rgba(139,92,246,0.2); }
.text-gradient-entp { background: linear-gradient(135deg, #a78bfa, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-infj { box-shadow: 0 0 60px -10px rgba(126,34,206,0.35); border-color: rgba(168,85,247,0.2); }
.text-gradient-infj { background: linear-gradient(135deg, #c084fc, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-infp { box-shadow: 0 0 60px -10px rgba(124,58,237,0.3); border-color: rgba(167,139,250,0.2); }
.text-gradient-infp { background: linear-gradient(135deg, #a78bfa, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-enfj { box-shadow: 0 0 60px -10px rgba(180,83,9,0.3); border-color: rgba(251,191,36,0.2); }
.text-gradient-enfj { background: linear-gradient(135deg, #fbbf24, #b45309); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-enfp { box-shadow: 0 0 60px -10px rgba(217,119,6,0.3); border-color: rgba(251,191,36,0.2); }
.text-gradient-enfp { background: linear-gradient(135deg, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-istj { box-shadow: 0 0 60px -10px rgba(100,116,139,0.35); border-color: rgba(148,163,184,0.2); }
.text-gradient-istj { background: linear-gradient(135deg, #94a3b8, #cbd5e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-isfj { box-shadow: 0 0 60px -10px rgba(217,119,6,0.25); border-color: rgba(251,191,36,0.2); }
.text-gradient-isfj { background: linear-gradient(135deg, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-estj { box-shadow: 0 0 60px -10px rgba(30,58,138,0.35); border-color: rgba(59,130,246,0.2); }
.text-gradient-estj { background: linear-gradient(135deg, #3b82f6, #1e40af); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-esfj { box-shadow: 0 0 60px -10px rgba(219,39,119,0.3); border-color: rgba(244,114,182,0.2); }
.text-gradient-esfj { background: linear-gradient(135deg, #f472b6, #db2777); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-istp { box-shadow: 0 0 60px -10px rgba(234,88,12,0.3); border-color: rgba(251,146,60,0.2); }
.text-gradient-istp { background: linear-gradient(135deg, #fb923c, #ea580c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-isfp { box-shadow: 0 0 60px -10px rgba(16,185,129,0.3); border-color: rgba(52,211,153,0.2); }
.text-gradient-isfp { background: linear-gradient(135deg, #34d399, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-estp { box-shadow: 0 0 60px -10px rgba(239,68,68,0.35); border-color: rgba(248,113,113,0.2); }
.text-gradient-estp { background: linear-gradient(135deg, #f87171, #ef4444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-esfp { box-shadow: 0 0 60px -10px rgba(236,72,153,0.35); border-color: rgba(244,114,182,0.2); }
.text-gradient-esfp { background: linear-gradient(135deg, #f472b6, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Daily Page */
.daily-header { text-align: center; margin-bottom: 30px; }
.daily-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.daily-date { color: #64748b; font-size: 13px; }

.type-selector { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.type-btn {
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #94a3b8; font-size: 13px; cursor: pointer;
  transition: all 0.3s;
}
.type-btn:hover { border-color: rgba(99,102,241,0.3); color: #c7d2fe; }
.type-btn.active { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.4); color: #c7d2fe; }

.fortune-box { animation: fadeInUp 0.6s ease-out; }
.fortune-quote {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  padding: 24px 16px;
  margin-bottom: 16px;
}

/* Privacy Page */
.privacy-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px;
  margin-top: 20px;
}
.privacy-card h2 { font-size: 18px; margin: 24px 0 12px; color: #f8fafc; }
.privacy-card p { font-size: 14px; color: #94a3b8; line-height: 1.8; margin-bottom: 12px; }

/* Footer */
.footer { margin-top: 40px; text-align: center; font-size: 12px; color: #475569; }
.footer a { color: #6366f1; text-decoration: none; }
.footer .beian { margin-top: 12px; font-size: 11px; }
.footer .beian a { color: #475569; }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Utility */
.hidden { display: none !important; }
.text-center { text-align: center; }