/* ═══════════════════════════════════════════════
   真緣 HK V5 — ROMANTIC PALETTE + FULL RESPONSIVE
   Breakpoints: Mobile ≤480px | Tablet 481-900px | Desktop >900px
═══════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Romantic warm plum/rose palette */
  --ink:       #2a0e1e;
  --ink-mid:   #3d1a2d;
  --ink-light: #5e3350;
  --cream:     #fdf8f6;
  --cream-dark:#f5ece8;
  --gold:      #c9973a;
  --gold-light:#f0d898;
  --gold-pale: #fdf7e8;
  --rose:      #c45278;
  --rose-mid:  #d4688a;
  --rose-light:#f5d4df;
  --rose-pale: #fef5f8;
  --blush:     #f9e4ec;
  --petal:     #fdf0f5;
  --mauve:     #9b5070;
  --sage:      #4a7c6a;
  --sage-light:#d0e8e0;
  --sage-pale: #f0f8f5;
  --card:      #ffffff;
  --border:    #f0e0e8;
  --border-dark:#d8b8c8;
  --text:      #2a0e1e;
  --text-mid:  #6a4050;
  --text-muted:#a07888;
  --shadow-sm: 0 2px 12px rgba(42,14,30,0.07);
  --shadow:    0 6px 28px rgba(42,14,30,0.1);
  --shadow-lg: 0 16px 56px rgba(42,14,30,0.15);
  --radius:    18px;
  --radius-sm: 10px;
  --grad-hero: linear-gradient(135deg, #2a0e1e 0%, #4a1835 55%, #2a1040 100%);
  --grad-rose: linear-gradient(135deg, #c45278, #e07898);
  --grad-gold: linear-gradient(135deg, #c9973a, #dba83f);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; font-size: 16px; }
body {
  font-family: -apple-system, 'PingFang HK', 'Noto Sans HK', 'Microsoft JhengHei', sans-serif;
  background: var(--cream);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
textarea, input, select, button { font-family: inherit; }
.hidden { display: none !important; }

/* ─── PAGE SYSTEM + TRANSITIONS ─── */
.page { display: none; }
.page.active { display: block; animation: pageIn 0.3s cubic-bezier(0.25,0.46,0.45,0.94) both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.step-anim { animation: stepIn 0.28s cubic-bezier(0.25,0.46,0.45,0.94) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.step-back-anim { animation: stepBack 0.28s cubic-bezier(0.25,0.46,0.45,0.94) both; }
@keyframes stepBack {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── TYPOGRAPHY ─── */
.t-hero  { font-size: clamp(30px, 6.5vw, 66px); font-weight: 900; line-height: 1.1; letter-spacing: -0.5px; }
.t-h1    { font-size: clamp(22px, 3.5vw, 36px); font-weight: 800; line-height: 1.2; }
.t-h2    { font-size: clamp(17px, 2.5vw, 24px); font-weight: 700; line-height: 1.3; }
.t-h3    { font-size: 16px; font-weight: 700; }
.t-body  { font-size: 15px; line-height: 1.75; color: var(--text-mid); }
.t-small { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.t-label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); }
.grad-rose { background: var(--grad-rose); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad-gold { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ─── BUTTONS (min 44px touch target) ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 26px; border-radius: 50px; font-size: 15px; font-weight: 700;
  cursor: pointer; border: none; transition: all 0.2s ease; white-space: nowrap; line-height: 1;
  min-height: 44px; -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn-rose   { background: var(--grad-rose); color: white; }
.btn-rose:hover,   .btn-rose:active   { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,82,120,0.4); }
.btn-gold   { background: var(--grad-gold); color: white; }
.btn-gold:hover,   .btn-gold:active   { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,151,58,0.45); }
.btn-ink    { background: var(--ink); color: var(--cream); }
.btn-ink:hover,    .btn-ink:active    { background: var(--ink-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(42,14,30,0.3); }
.btn-ghost  { background: transparent; color: var(--text-mid); border: 1.5px solid var(--border-dark); }
.btn-ghost:hover  { border-color: var(--rose); color: var(--rose); }
.btn-outline-light { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.4); }
.btn-outline-light:hover { border-color: white; background: rgba(255,255,255,0.1); }
.btn-outline-white { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.35); }
.btn-outline-white:hover { border-color: white; }
.btn-lg     { padding: 17px 38px; font-size: 17px; }
.btn-sm     { padding: 9px 18px; font-size: 13px; min-height: 38px; }
.btn-block  { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
@media (max-width: 480px) {
  .btn       { padding: 15px 22px; font-size: 15px; min-height: 50px; }
  .btn-lg    { padding: 17px 30px; font-size: 16px; }
  .btn-sm    { padding: 10px 16px; font-size: 13px; min-height: 42px; }
}

/* ─── NAV ─── */
.nav {
  background: rgba(253,248,246,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); padding: 0 20px; height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
}
.nav-logo {
  font-size: 18px; font-weight: 900; color: var(--ink); letter-spacing: -0.3px;
  display: flex; align-items: center; gap: 6px;
}
.logo-heart { color: var(--rose); font-style: normal; }
.nav-right  { display: flex; gap: 8px; align-items: center; }
@media (max-width: 480px) {
  .nav { padding: 0 14px; }
  .nav-logo { font-size: 16px; }
}

/* ─── HERO ─── */
.hero {
  background: var(--grad-hero);
  color: white; padding: 72px 24px 90px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,82,120,0.18) 0%, transparent 70%);
  top: -120px; right: -80px; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute;
  width: 350px; height: 350px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,151,58,0.12) 0%, transparent 70%);
  bottom: -80px; left: -60px; pointer-events: none;
}
.hero-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(196,82,120,0.4); border-radius: 50px;
  padding: 6px 16px; margin-bottom: 28px;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.75); letter-spacing: 0.3px;
}
.hero-title { margin-bottom: 22px; }
.hero-title span { display: block; }
.hero-body {
  font-size: 16px; line-height: 1.72; color: rgba(255,255,255,0.72);
  margin-bottom: 10px; max-width: 520px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 52px; }
.hero-proof {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1);
}
.proof-item { display: flex; flex-direction: column; }
.proof-num   { font-size: 22px; font-weight: 900; color: white; }
.proof-label { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
@media (max-width: 480px) {
  .hero { padding: 56px 18px 72px; }
  .hero-body { font-size: 15px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-proof { gap: 18px; }
  .proof-num { font-size: 18px; }
}

/* ─── SECTIONS ─── */
.how-section, .features-section { padding: 72px 24px; }
.how-section    { background: var(--cream); }
.features-section { background: white; }
.section-inner  { max-width: 800px; margin: 0 auto; }
.section-tag    { display: block; margin-bottom: 12px; }
@media (max-width: 480px) {
  .how-section, .features-section { padding: 52px 16px; }
}

/* ─── STEPS ─── */
.steps-list { display: flex; flex-direction: column; gap: 6px; margin-top: 36px; }
.step-row {
  display: flex; gap: 18px; align-items: flex-start;
  background: white; border-radius: var(--radius); padding: 22px 24px;
  border: 1px solid var(--border); transition: all 0.22s; cursor: default;
}
.step-row:hover { box-shadow: var(--shadow); border-color: var(--rose-light); transform: translateY(-2px); }
.step-num-badge {
  width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
  background: var(--grad-rose); color: white;
  font-size: 15px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
  flex-shrink: 0;
}
.step-content h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.step-content p  { font-size: 13px; color: var(--text-mid); line-height: 1.65; }
.step-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chip       { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 50px; }
.chip-gold  { background: var(--gold-pale); color: #7a5a10; border: 1px solid rgba(201,151,58,0.25); }
.chip-rose  { background: var(--rose-pale); color: #7a2840; border: 1px solid rgba(196,82,120,0.2); }
.chip-sage  { background: var(--sage-pale); color: #2a5040; border: 1px solid rgba(74,124,106,0.25); }
.chip-ink   { background: var(--cream-dark); color: var(--ink); border: 1px solid rgba(42,14,30,0.12); }
@media (max-width: 480px) {
  .step-row { padding: 18px 16px; gap: 14px; }
}

/* ─── FEATURES GRID ─── */
.feat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px;
}
.feat-card {
  background: var(--petal); border-radius: var(--radius); padding: 22px 18px;
  border: 1px solid var(--border); transition: all 0.22s;
}
.feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--rose-light); }
.fc-icon { font-size: 28px; margin-bottom: 10px; }
.feat-card h3 { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.feat-card p  { font-size: 13px; color: var(--text-mid); line-height: 1.6; }
@media (max-width: 700px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .feat-grid { grid-template-columns: 1fr; } }

/* ─── PRICING ─── */
.pricing-section { background: var(--ink); padding: 72px 24px; }
.pricing-inner   { max-width: 900px; margin: 0 auto; }
.free-cta-banner {
  text-align: center; margin-bottom: 48px; color: white;
}
.free-cta-banner h2 { font-size: clamp(20px, 3vw, 30px); font-weight: 900; margin-bottom: 10px; }
.free-cta-banner p  { font-size: 15px; color: rgba(255,255,255,0.65); margin-bottom: 24px; }
.price-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.price-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 28px 22px; color: white; position: relative;
}
.price-card.featured { background: rgba(196,82,120,0.18); border-color: rgba(196,82,120,0.5); }
.pc-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--grad-rose); color: white; font-size: 11px; font-weight: 700;
  padding: 3px 14px; border-radius: 50px; white-space: nowrap;
}
.pc-tier  { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.pc-price { font-size: 28px; font-weight: 900; margin-bottom: 4px; }
.pc-price small { font-size: 14px; font-weight: 400; opacity: 0.7; }
.pc-note  { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
.price-card ul { list-style: none; margin-bottom: 20px; }
.price-card li { font-size: 13px; padding: 5px 0; display: flex; gap: 8px; color: rgba(255,255,255,0.8); }
.price-card li::before { content: '✓'; color: var(--rose-mid); font-weight: 700; }
@media (max-width: 700px) {
  .price-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .price-card.featured { order: -1; }
}
@media (max-width: 480px) { .pricing-section { padding: 52px 16px; } }

/* ─── FOOTER ─── */
.footer {
  background: var(--ink-mid); color: rgba(255,255,255,0.65);
  padding: 40px 24px; text-align: center;
}
.f-logo { font-size: 18px; font-weight: 900; color: white; margin-bottom: 8px; }
.footer > p:not(.f-small) { font-size: 13px; margin-bottom: 14px; }
.f-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.f-links a { font-size: 12px; cursor: pointer; }
.f-links a:hover { color: var(--rose-mid); }
.f-small { font-size: 11px; opacity: 0.5; margin-top: 4px; }

/* ─── AUTH MODAL ─── */
.overlay {
  position: fixed; inset: 0; background: rgba(42,14,30,0.65); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(4px);
}
.modal {
  background: white; border-radius: var(--radius); padding: 36px 30px;
  max-width: 420px; width: 100%; position: relative;
  box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto;
}
.modal-anim { animation: modalIn 0.3s cubic-bezier(0.25,0.46,0.45,0.94) both; }
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--cream-dark); border: none; width: 30px; height: 30px;
  border-radius: 50%; font-size: 14px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; color: var(--text-mid);
  transition: background 0.15s;
}
.modal-close:hover { background: var(--rose-light); color: var(--rose); }
.modal h2 { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.modal-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 22px; }
.divider { text-align: center; position: relative; margin: 16px 0; }
.divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.divider span { background: white; padding: 0 12px; font-size: 12px; color: var(--text-muted); position: relative; }
.auth-switch { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 14px; }
.auth-switch a { color: var(--rose); font-weight: 700; cursor: pointer; }
.auth-terms { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 8px; }
@media (max-width: 480px) { .modal { padding: 28px 20px; border-radius: var(--radius) var(--radius) 0 0; } }

/* ─── FORMS ─── */
.form-group  { margin-bottom: 14px; }
.form-label  { display: block; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: 0.2px; }
.form-input  {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm); font-size: 16px; /* 16px prevents iOS zoom */
  color: var(--text); background: white; transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 46px;
}
.form-input:focus  { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(196,82,120,0.12); }
.form-select       { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a07888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
textarea.form-input { resize: vertical; min-height: 80px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .form-row-2 { grid-template-columns: 1fr; } }

/* ─── PRECISE INPUTS ─── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }
.precise-input-wrap { position: relative; display: flex; align-items: center; }
.precise-input-wrap .form-input { padding-right: 46px; }
.input-unit { position: absolute; right: 14px; font-size: 13px; font-weight: 700; color: var(--text-muted); pointer-events: none; }
.field-hint { font-size: 11px; color: var(--rose); margin-top: 4px; font-weight: 600; }
.precision-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--rose-pale); color: var(--rose); border: 1px solid var(--rose-light);
  border-radius: 50px; padding: 3px 10px; font-size: 11px; font-weight: 700; margin-bottom: 8px;
}
.range-row { display: flex; align-items: center; gap: 8px; }
.range-row .form-input { flex: 1; min-width: 0; text-align: center; }
.range-sep  { font-size: 16px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.range-unit { font-size: 13px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }

/* ─── DUAL SLIDER ─── */
.dual-slider-wrap { margin: 12px 0 6px; }
.dual-slider-track { position: relative; height: 6px; background: var(--cream-dark); border-radius: 50px; margin: 14px 8px; }
.dual-slider-fill  { position: absolute; height: 100%; background: var(--grad-rose); border-radius: 50px; }
.dual-slider-wrap input[type=range] { position: absolute; top: -7px; width: 100%; height: 20px; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; }
.dual-slider-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: white; border: 2px solid var(--rose); pointer-events: all; cursor: pointer; box-shadow: 0 2px 8px rgba(42,14,30,0.18); }
.dual-slider-wrap input[type=range]::-moz-range-thumb    { width: 22px; height: 22px; border-radius: 50%; background: white; border: 2px solid var(--rose); pointer-events: all; cursor: pointer; box-shadow: 0 2px 8px rgba(42,14,30,0.18); }
.slider-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* ─── SETUP FLOW ─── */
.setup-wrap  { background: var(--cream); min-height: calc(100vh - 58px); padding: 24px 16px 60px; }
.setup-body  { max-width: 600px; margin: 0 auto; }
.setup-progress-wrap { margin-bottom: 20px; }
.setup-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sph-step    { font-size: 12px; font-weight: 700; color: var(--rose); text-transform: uppercase; letter-spacing: 0.5px; }
.sph-name    { font-size: 13px; font-weight: 700; color: var(--text-mid); }
.progress-bar  { height: 5px; background: var(--rose-light); border-radius: 50px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--grad-rose); border-radius: 50px; transition: width 0.4s ease; }
.setup-card  { background: white; border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.setup-card h2 { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.sc-desc     { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.65; }
.setup-nav   { display: flex; gap: 10px; margin-top: 20px; }
@media (max-width: 480px) {
  .setup-card { padding: 22px 16px; }
}

/* ─── PHOTO UPLOAD ─── */
.photo-zone {
  border: 2px dashed var(--rose-light); border-radius: var(--radius); padding: 28px 16px;
  cursor: pointer; transition: all 0.2s; background: var(--petal);
}
.photo-zone:hover { border-color: var(--rose); background: var(--rose-pale); }

/* ─── BAZI RESULT ─── */
.bazi-result { background: var(--ink); border-radius: var(--radius-sm); padding: 16px; margin: 12px 0; display: none; }
.bazi-result-header { font-size: 12px; color: var(--gold-light); font-weight: 700; letter-spacing: 0.3px; margin-bottom: 12px; }
.bazi-pillars { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 12px; }
.bazi-pillar { border-radius: var(--radius-sm); padding: 10px 6px; text-align: center; background: rgba(255,255,255,0.06); }
.bp-label   { font-size: 9px; color: rgba(249,246,240,0.4); margin-bottom: 3px; }
.bp-stem    { font-size: 22px; font-weight: 900; color: var(--cream); line-height: 1; }
.bp-branch  { font-size: 14px; font-weight: 800; color: var(--cream); margin-top: 2px; }
.bp-element { font-size: 10px; margin-top: 3px; }
.ele-wood   { color: #5aba68; } .ele-fire   { color: #f07060; } .ele-earth  { color: #d4a060; }
.ele-metal  { color: #a0b8c8; } .ele-water  { color: #60a8e0; }
.ele-bg-wood   { background: rgba(46,120,60,0.15) !important; }
.ele-bg-fire   { background: rgba(180,60,48,0.15) !important; }
.ele-bg-earth  { background: rgba(160,120,48,0.15) !important; }
.ele-bg-metal  { background: rgba(140,160,180,0.12) !important; }
.ele-bg-water  { background: rgba(48,120,200,0.12) !important; }
.bazi-info-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bazi-info-item { background: rgba(255,255,255,0.07); border-radius: 8px; padding: 8px 12px; flex: 1; min-width: 70px; }
.bii-label  { font-size: 9px; color: rgba(255,255,255,0.4); margin-bottom: 3px; }
.bii-val    { font-size: 14px; font-weight: 800; color: var(--cream); }

/* ─── QUIZ ─── */
.quiz-q   { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.quiz-q:last-child { border-bottom: none; }
.quiz-q p { font-size: 14px; font-weight: 700; margin-bottom: 10px; line-height: 1.5; }
.quiz-opts { display: flex; flex-direction: column; gap: 7px; }
.quiz-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.quiz-opt  {
  padding: 12px 14px; border: 1.5px solid var(--border-dark); border-radius: var(--radius-sm);
  background: white; font-size: 13px; color: var(--text-mid); cursor: pointer;
  text-align: left; transition: all 0.15s; line-height: 1.45; min-height: 44px;
}
.quiz-opt:hover { border-color: var(--rose-mid); color: var(--rose); background: var(--rose-pale); }
.quiz-opt.sel   { border-color: var(--rose); background: var(--rose-pale); color: var(--rose); font-weight: 700; }
.quiz-progress  { font-size: 12px; color: var(--rose); font-weight: 700; text-align: center; padding: 8px; }
@media (max-width: 480px) {
  .quiz-2col { grid-template-columns: 1fr; }
}

/* ─── INTERESTS ─── */
.interest-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.interest-tag  {
  padding: 8px 14px; border: 1.5px solid var(--border-dark); border-radius: 50px;
  font-size: 13px; cursor: pointer; transition: all 0.15s; background: white; min-height: 38px;
  display: flex; align-items: center;
}
.interest-tag:hover { border-color: var(--rose-mid); }
.interest-tag.sel   { border-color: var(--rose); background: var(--rose-pale); color: var(--rose); font-weight: 700; }

/* ─── CHOICE GRID ─── */
.choice-grid { display: grid; gap: 8px; }
.choice-btn  {
  padding: 12px 14px; border: 1.5px solid var(--border-dark); border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer; transition: all 0.15s; background: white;
  display: flex; align-items: center; gap: 8px; min-height: 46px;
}
.choice-btn:hover { border-color: var(--rose-mid); background: var(--rose-pale); }
.choice-btn.sel   { border-color: var(--rose); background: var(--rose-pale); color: var(--rose); font-weight: 700; }
.choice-icon      { font-size: 16px; }

/* ─── TRUST ITEMS ─── */
.trust-items { display: flex; flex-direction: column; gap: 8px; }
.trust-item-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--petal); }
.tir-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.tir-icon.done { background: var(--sage); color: white; }
.tir-icon.pend { background: var(--gold-pale); color: var(--gold); border: 1px solid rgba(201,151,58,0.3); }
.tir-icon.lock { background: var(--cream-dark); color: var(--text-muted); }
.tir-body   { flex: 1; }
.tir-name   { font-size: 13px; font-weight: 700; }
.tir-sub    { font-size: 11px; color: var(--text-muted); }
.tir-pts    { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 50px; }
.tir-pts.done { background: var(--sage-pale); color: #1a6040; }
.tir-pts.pend { background: var(--gold-pale); color: #7a4a10; }
.tir-pts.lock { background: var(--cream-dark); color: var(--text-muted); }

/* ─── REPORT PAGE ─── */
.report-wrap { background: var(--cream); min-height: calc(100vh - 58px); }
.report-body { max-width: 680px; margin: 0 auto; padding: 28px 20px 60px; }
.report-header {
  background: var(--ink); border-radius: var(--radius); padding: 28px 24px;
  color: white; margin-bottom: 20px; position: relative; overflow: hidden;
}
.report-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 0%, rgba(196,82,120,0.25) 0%, transparent 60%); pointer-events: none; }
.rh-inner  { position: relative; z-index: 1; }
.rh-label  { font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.rh-name   { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.rh-sub    { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.rh-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.rh-badge  { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 50px; border: 1px solid; }
.rh-badge-gold { color: var(--gold-light); border-color: rgba(201,151,58,0.4); background: rgba(201,151,58,0.1); }
.rh-badge-rose { color: #f4b8c8; border-color: rgba(196,82,120,0.4); background: rgba(196,82,120,0.1); }
.rh-badge-sage { color: #8ad8c0; border-color: rgba(74,124,106,0.4); background: rgba(74,124,106,0.1); }
.rs-card   { background: white; border-radius: var(--radius); padding: 22px 20px; border: 1px solid var(--border); margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.rs-card h3 { font-size: 16px; font-weight: 900; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.rsc-icon  { font-size: 18px; }

/* ─── MBTI BARS ─── */
.pbar    { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pbar-l  { font-size: 12px; font-weight: 700; width: 64px; flex-shrink: 0; color: var(--text); }
.pbar-r  { font-size: 12px; font-weight: 700; width: 64px; text-align: right; flex-shrink: 0; color: var(--text-muted); }
.pbar-track { flex: 1; height: 8px; background: var(--cream-dark); border-radius: 50px; overflow: hidden; }
.pbar-fill  { height: 100%; border-radius: 50px; transition: width 0.6s ease; background: var(--grad-rose); }

/* ─── ATTACHMENT ─── */
.attach-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.attach-card  { padding: 14px 10px; border-radius: var(--radius-sm); text-align: center; border: 1.5px solid var(--border); background: var(--petal); }
.attach-card.active { border-color: var(--rose); background: var(--rose-pale); }
.aci { font-size: 24px; margin-bottom: 4px; }
.acn { font-size: 12px; font-weight: 700; }
.acp { font-size: 11px; color: var(--text-muted); }

/* ─── LOVE LANGUAGE ─── */
.ll-row   { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ll-icon  { font-size: 16px; width: 22px; }
.ll-name  { font-size: 12px; font-weight: 700; width: 76px; flex-shrink: 0; }
.ll-track { flex: 1; height: 9px; background: var(--cream-dark); border-radius: 50px; overflow: hidden; }
.ll-fill  { height: 100%; border-radius: 50px; background: var(--grad-rose); }
.ll-pct   { font-size: 11px; font-weight: 700; color: var(--rose); width: 30px; text-align: right; }

/* ─── TAROT CARD ─── */
.tarot-card { background: linear-gradient(160deg, var(--ink), #3d1040); border-radius: var(--radius); padding: 24px; color: white; text-align: center; border: 1px solid rgba(255,255,255,0.06); margin-bottom: 14px; position: relative; overflow: hidden; }
.tarot-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(196,82,120,0.2) 0%, transparent 60%); }
.tc-inner   { position: relative; z-index: 1; }
.tc-week    { font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 12px; }
.tc-glyph   { font-size: 52px; margin-bottom: 12px; line-height: 1; }
.tc-name    { font-size: 20px; font-weight: 900; color: var(--gold-light); margin-bottom: 4px; }
.tc-name-zh { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.tc-meaning { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 400px; margin: 0 auto 14px; }
.tc-affirmation { background: rgba(196,82,120,0.12); border: 1px solid rgba(196,82,120,0.25); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; color: var(--rose-mid); font-style: italic; }

/* ─── IDEAL PARTNER ─── */
.ideal-box  { background: var(--petal); border-radius: var(--radius-sm); padding: 16px; }
.ideal-list { list-style: none; }
.ideal-list li { font-size: 13px; padding: 5px 0; display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; color: var(--text-mid); }
.ideal-list li::before { content: '◆'; color: var(--rose); font-size: 8px; flex-shrink: 0; margin-top: 5px; }

/* ─── DASHBOARD ─── */
.dash-wrap    { display: flex; min-height: calc(100vh - 58px); }
.dash-sidebar {
  width: 230px; background: white; border-right: 1px solid var(--border);
  padding: 18px 14px; flex-shrink: 0; display: flex; flex-direction: column;
}
.user-pill        { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.user-pill-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; border: 2px solid var(--rose-light); }
.user-pill-name   { font-size: 14px; font-weight: 800; }
.user-pill-trust  { font-size: 11px; color: var(--sage); font-weight: 700; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: all 0.15s; margin-bottom: 2px; min-height: 44px;
}
.sidebar-nav a:hover, .sidebar-nav a.act { background: var(--rose-pale); color: var(--rose); }
.sidebar-spacer { flex: 1; }
.dash-main { flex: 1; padding: 22px 20px; overflow-y: auto; background: var(--cream); }
.dash-hd   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.dash-hd h1 { font-size: 20px; font-weight: 900; }

/* ─── MATCH CARDS (AI ranked grid) ─── */
.ai-rank-section { margin-bottom: 22px; }
.air-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.air-title  { font-size: 16px; font-weight: 900; }
.air-sub    { font-size: 12px; color: var(--text-muted); }
.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mcard {
  background: white; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow-sm);
}
.mcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--rose-light); }
.mcard.top-pick { border-color: var(--rose); box-shadow: 0 0 0 2px rgba(196,82,120,0.2), var(--shadow); }
.mcard-photo { width: 100%; height: 175px; background: linear-gradient(160deg, var(--blush), var(--rose-pale)); display: flex; align-items: center; justify-content: center; font-size: 52px; position: relative; overflow: hidden; }
.mcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.mcard-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; }
.badge-ai    { background: var(--grad-rose); color: white; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 50px; display: flex; align-items: center; gap: 3px; }
.badge-score { background: var(--ink); color: white; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 50px; }
.badge-trust { background: rgba(74,124,106,0.85); color: white; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 50px; }
.mcard-body  { padding: 12px; }
.mcard-name  { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.mcard-sub   { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.mcard-tags  { display: flex; gap: 4px; flex-wrap: wrap; }
.mcard-tag   { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 50px; background: var(--petal); color: var(--text-mid); border: 1px solid var(--border); }
@media (max-width: 480px) { .match-grid { grid-template-columns: repeat(2,1fr); } }

/* ─── MATCH DETAIL MODAL ─── */
.match-modal { max-width: 480px; }
.mm-photo-wrap { margin: -36px -30px 20px; height: 220px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(160deg, var(--blush), var(--rose-pale)); display: flex; align-items: center; justify-content: center; font-size: 80px; position: relative; }
.mm-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.mm-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(42,14,30,0.8)); padding: 20px; color: white; }
.mm-name-big { font-size: 22px; font-weight: 900; }
.mm-meta     { font-size: 13px; opacity: 0.8; }
.compat-section { background: var(--petal); border-radius: var(--radius-sm); padding: 16px; margin: 14px 0; }
.compat-section h4 { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.comp-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.comp-lbl  { font-size: 12px; font-weight: 600; width: 70px; flex-shrink: 0; }
.comp-track { flex: 1; height: 7px; background: var(--border); border-radius: 50px; overflow: hidden; }
.comp-fill  { height: 100%; border-radius: 50px; }
.comp-val  { font-size: 11px; font-weight: 700; width: 28px; text-align: right; }
@media (max-width: 480px) { .mm-photo-wrap { margin: -28px -20px 18px; } }

/* ─── TRUST PANEL ─── */
.trust-panel  { background: white; border-radius: var(--radius); padding: 22px; border: 1px solid var(--border); margin-bottom: 14px; }
.trust-score-display { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.trust-ring   { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.trust-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.trust-ring-num .trn { font-size: 20px; font-weight: 900; }
.trust-ring-num .trl { font-size: 9px; color: var(--text-muted); }

/* ─── ADMIN PANEL ─── */
.admin-wrap  { background: var(--cream); min-height: calc(100vh - 58px); padding: 24px; }
.admin-body  { max-width: 960px; margin: 0 auto; }
.admin-card  { background: white; border-radius: var(--radius); padding: 24px; border: 1px solid var(--border); margin-bottom: 16px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; overflow-x: auto; display: block; }
.admin-table th { text-align: left; padding: 10px 12px; background: var(--petal); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--petal); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--petal); border-radius: var(--radius-sm); padding: 16px; border: 1px solid var(--border); }
.stat-num  { font-size: 26px; font-weight: 900; color: var(--rose); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* ─── FACE VERIFY ─── */
.fv-modal  { max-width: 340px; text-align: center; }
.fv-circle { width: 180px; height: 180px; border-radius: 50%; border: 3px solid var(--rose); margin: 16px auto; background: var(--petal); display: flex; align-items: center; justify-content: center; font-size: 60px; overflow: hidden; position: relative; }
.scan-line { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--rose), transparent); animation: scanAnim 2s linear infinite; }
@keyframes scanAnim { from { top: 0; } to { top: 100%; } }

/* ─── TOAST ─── */
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--ink); color: white; padding: 11px 22px; border-radius: 50px; font-size: 14px; font-weight: 600; z-index: 9999; box-shadow: var(--shadow-lg); animation: toastIn 0.3s ease; pointer-events: none; white-space: nowrap; max-width: 90vw; }
@keyframes toastIn { from { opacity:0; transform: translateX(-50%) translateY(14px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }

/* ─── BOTTOM NAV (mobile) ─── */
.bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid var(--border); z-index: 300; box-shadow: 0 -4px 20px rgba(42,14,30,0.08); }
.bottom-nav a { flex: 1; padding: 10px 4px 8px; text-align: center; font-size: 10px; font-weight: 600; color: var(--text-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 54px; transition: color 0.15s; }
.bottom-nav a .bni { font-size: 22px; }
.bottom-nav a.act { color: var(--rose); }
@media (max-width: 700px) {
  .dash-sidebar { display: none; }
  .bottom-nav { display: flex; }
  .dash-main { padding-bottom: 70px; }
}

/* ─── SPINNER ─── */
.spin { width: 32px; height: 32px; border: 2.5px solid var(--border); border-top-color: var(--rose); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── UNLOCK GATE ─── */
.unlock-gate { background: linear-gradient(135deg, var(--gold-pale), var(--rose-pale)); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; text-align: center; }
.unlock-gate .ug-icon { font-size: 32px; margin-bottom: 10px; }
.unlock-gate h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.unlock-gate p  { font-size: 13px; color: var(--text-mid); margin-bottom: 16px; line-height: 1.6; }

/* ─── SECTION HEADER ─── */
.section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-hd h2 { font-size: 15px; font-weight: 900; }

/* ─── PREFS EDIT PANEL ─── */
.prefs-edit-panel { background: white; border-radius: var(--radius); padding: 22px; border: 1px solid var(--border); margin-bottom: 14px; }
.prefs-edit-panel h3 { font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.prefs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .prefs-grid { grid-template-columns: 1fr; } }

/* ─── LEGAL ─── */
.legal-wrap { max-width: 680px; margin: 0 auto; padding: 40px 22px; }
.legal-wrap h1 { font-size: 26px; font-weight: 900; margin-bottom: 6px; }
.legal-updated { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
.legal-section { margin-bottom: 24px; }
.legal-section h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.legal-section p, .legal-section ul { font-size: 14px; color: var(--text-mid); line-height: 1.75; }
.legal-section ul { padding-left: 20px; }
.legal-section li { margin-bottom: 4px; }

/* ─── TABLET SPECIFIC ─── */
@media (min-width: 481px) and (max-width: 900px) {
  .hero { padding: 64px 28px 80px; }
  .match-grid { grid-template-columns: repeat(3, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .setup-body { max-width: 100%; }
}