/* =========================================================================
   ApexSoul — Editorial Premium Layer  (loaded LAST, overrides only)
   Concept: Celestial Editorial × Personal Intelligence × Modern Codex
   Quiet luxury · deep neutral canvas · champagne accent · hairline structure
   ปลอดภัย: เป็น override ล้วน ถอดคืนได้โดยลบ <link> เดียว ไม่แก้ตรรกะใด ๆ
   ========================================================================= */

/* ---- 1. COLOR SYSTEM (override token ทั้งสองชุด) ---- */
:root,
body[data-theme="dark"] {
  /* CELESTIAL INTELLIGENCE palette — midnight canvas · celestial blue accent · silver */
  --cel-blue: #8BADE8;
  --cel-silver: #B8CCE8;
  /* --as-* system (หน้าแรก / editorial pages) */
  --as-void: #080D18;              /* midnight */
  --as-night: #0D1628;             /* deep navy surface */
  --as-plum: #090B10;              /* soft black */
  --as-card: #0D1628;              /* solid — เลิก glassmorphism */
  --as-card-solid: #0D1628;
  --as-card-soft: rgba(184,204,232,.035);
  --as-gold: #8BADE8;              /* PRIMARY accent = celestial blue (ไม่ใช่ทอง) */
  --as-gold-bright: #B8CCE8;       /* silver */
  --as-gold-deep: #5E82BE;
  --as-lilac: #8BADE8;             /* ตัดม่วง → celestial blue */
  --as-rose: #C98BA6;
  --as-ink: #F4F1E9;               /* warm ivory */
  --as-copy: #C7CEDA;
  --as-muted: #A9B1C0;             /* secondary text */
  --as-line: rgba(184,204,232,.13);   /* silvery hairline */
  --as-line-soft: rgba(184,204,232,.08);
  --as-shadow: 0 20px 54px rgba(0,0,0,.42);   /* depth เงียบ ไม่ glow */
  --as-radius: 16px;
  --as-focus: 0 0 0 3px rgba(139,173,232,.42);

  /* --bg/--text/--accent system (order, result, free-check, methodology ฯลฯ) */
  --bg-base: #080D18;
  --bg-elevated: #0D1628;
  --bg-input: #0D1628;
  --accent-gold: #8BADE8;          /* celestial blue globally */
  --accent-indigo: #8BADE8;
  --accent-red: #C98BA6;
  --accent-red-glow: #D79FB6;
  --text-primary: #F4F1E9;
  --text-secondary: #C7CEDA;
  --text-muted: #A9B1C0;
  --text-strong: #F4F1E9;
  --border-subtle: rgba(184,204,232,.13);
  --glass-light: #0D1628;          /* solid */
  --glass-border: rgba(184,204,232,.13);
  --bg-card: #0D1628;
  --border: rgba(184,204,232,.13);
}

/* ---- JUPITER pages only: warm gold accent (ยังอยู่ในระบบ ApexSoul) ---- */
body.as-jupiter {
  --as-gold: #D5AE6D;
  --as-gold-bright: #E3BE7A;
  --as-gold-deep: #A5854F;
  --as-lilac: #D5AE6D;
  --accent-gold: #D5AE6D;
  --accent-indigo: #D5AE6D;
}

/* Light theme — retune ให้เป็น warm paper editorial (ไม่ใช่ครีมเดิม) */
body[data-theme="light"] {
  --as-void: #F6F3EC;
  --as-night: #FFFFFF;
  --as-plum: #F1ECE1;
  --as-card: #FFFFFF;
  --as-card-solid: #FFFFFF;
  --as-card-soft: rgba(10,10,15,.03);
  --as-gold: #3F639E;              /* celestial blue (เข้มพอสำหรับ contrast บนพื้นสว่าง) */
  --as-gold-bright: #2E4E82;
  --as-gold-deep: #4A6FAA;
  --as-lilac: #3F639E;
  --as-ink: #14161C;
  --as-copy: #33383F;
  --as-muted: #5C6470;
  --as-line: rgba(20,30,50,.14);
  --as-line-soft: rgba(20,30,50,.08);
  --as-shadow: 0 16px 40px rgba(20,25,40,.10);
  --bg-base: #F4F1E9;
  --bg-elevated: #FFFFFF;
  --bg-input: #FFFFFF;
  --accent-gold: #3F639E;
  --accent-indigo: #3F639E;
  --text-primary: #16181F;
  --text-secondary: #3A3B42;
  --text-muted: #6B6A66;
  --text-strong: #16181F;
  --border-subtle: rgba(11,13,18,.12);
  --glass-light: #FFFFFF;
  --glass-border: rgba(11,13,18,.12);
  --bg-card: #FFFFFF;
}

/* ---- 2. TYPOGRAPHY — serif display (รองรับไทยด้วย Noto Serif Thai) ---- */
.as-display,
.as-hero-copy h1,
.as-section-head h2,
.as-report-copy h2,
.as-final-cta h2,
.jl-hero h1 {
  font-family: 'Noto Serif Thai', 'Sarabun', Georgia, serif;
  letter-spacing: -0.005em;
  font-weight: 600;
}
.as-display { line-height: 1.08; }
.as-eyebrow {
  font-family: 'Prompt', sans-serif;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--as-gold);
  opacity: .95;
}

/* ---- 3. FLATTEN — kill glass / glow / heavy shadow ---- */
.as-card {
  background: var(--as-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--as-line);
  box-shadow: none;
  border-radius: var(--as-radius);
}
.as-orbit-card.as-card,
.as-report-preview.as-card,
.as-final-cta.as-card { box-shadow: var(--as-shadow); }

/* ---- 4. BUTTONS — quiet luxury (เลิก gold gradient ราคาถูก) ---- */
.as-button {
  border-radius: 10px;
  font-family: 'Prompt', sans-serif;
  letter-spacing: .01em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.as-button-primary {
  background: var(--as-gold) !important;
  color: #14110A !important;
  box-shadow: none !important;
  border: 1px solid var(--as-gold);
}
.as-button-primary:hover { transform: translateY(-2px); background: var(--as-gold-bright) !important; }
.as-button-secondary {
  background: transparent;
  color: var(--as-ink);
  border: 1px solid var(--as-line);
}
.as-button-secondary:hover { transform: translateY(-2px); border-color: var(--as-gold); }

/* ---- 5. DE-EMPHASIZE DISCOUNT (perception = depth ไม่ใช่ลดราคาแรง) ---- */
.as-price-card .price del { color: var(--as-muted); opacity: .55; font-weight: 400; margin-left: 8px; }
.as-price-card .price .as-off {
  color: var(--as-muted) !important;
  border-color: var(--as-line) !important;
  background: transparent !important;
  font-weight: 500 !important;
  opacity: .8;
}

/* ---- 6. GUARANTEE — trust note แบบ premium (เลิกโล่ emoji ใหญ่) ---- */
.as-guarantee .sh { display: none; }
.as-guarantee { border-left: 2px solid var(--as-gold); }
.as-guarantee strong::before {
  content: "◈"; color: var(--as-gold); margin-right: .5rem; font-size: .85em;
}

/* ---- 7. HAIRLINE STRUCTURE + focus-visible (a11y) ---- */
.as-section + .as-section { position: relative; }
:focus-visible { outline: none; box-shadow: var(--as-focus); border-radius: 6px; }
.as-orbit { border-color: var(--as-line); }

/* ---- 8. ANNOUNCEMENT (editorial drop — บางเงียบ ไม่เด่นกว่า hero) ---- */
.as-drop {
  display: block; text-decoration: none; text-align: center;
  background: var(--as-night);
  border-bottom: 1px solid var(--as-line);
  color: var(--as-copy);
  padding: .62rem 1rem;
  font: 500 .74rem/1 'Prompt', sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
}
.as-drop b { color: var(--as-gold); font-weight: 600; }
.as-drop .go { color: var(--as-gold); letter-spacing: 0; }

/* ---- 9. NAV — champagne active, hairline ---- */
.as-nav-cta { border-radius: 8px; }

/* ---- 10. MOTION — respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   RESULT REVEAL (.rp2) — retint hardcoded champagne/indigo → celestial
   ไม่แตะ template/analytics: override เฉพาะสีที่ฝังแข็งให้เข้าระบบใหม่
   ========================================================================= */
body[data-theme="dark"] .rp2-badge,
body[data-theme="dark"] .rp2-chip,
body[data-theme="dark"] .rp2-list li,
body[data-theme="dark"] .rp2-ic,
body[data-theme="dark"] .rp2-offer-chips span,
body[data-theme="dark"] .rp2-yearnote {
  background: var(--as-card-soft) !important;
  border-color: var(--as-line) !important;
}
.rp2-badge, .rp2-kicker, .rp2-chip svg, .rp2-ic,
.rp2-list li::before, .rp2-yearnote strong, .rp2-secondary-link {
  color: var(--cel-blue) !important;
}
/* ตัด glow/gradient — flatten ให้เงียบ */
.rp2-typecard::before, .rp2-next, .rp2-offer, .rp2-vision-body, .rp2-fastoffer { background: transparent !important; }
.rp2-typecard, .rp2-next, .rp2-offer, .rp2-fastoffer { border-color: var(--as-line) !important; box-shadow: none !important; }
.rp2-emblem-wrap {
  background: transparent !important;
  border: 1px solid var(--cel-blue);
  box-shadow: none !important;
}
.rp2-next { border-left: 2px solid var(--cel-blue); }
.rp2-yearnote { border-left-color: var(--cel-blue) !important; background: var(--as-card-soft) !important; }
/* energy-leak lens → silver (แยกด้วยรูป+label ไม่ใช่สีเดียว) */
.rp2-leak { border-color: var(--as-line) !important; }
.rp2-leak .rp2-ic { color: var(--cel-silver) !important; background: var(--as-card-soft) !important; border-color: var(--as-line) !important; }
/* locked chapters — hairline dossier look */
.rp2-lockitem { background: var(--as-card-soft) !important; border-color: var(--as-line) !important; }
.rp2-lockitem strong svg { color: var(--cel-blue) !important; }
/* bonus chip — keep subtle, ตัด gold gradient */
.rp2-offer-chips .rp2-bonus { background: var(--as-card-soft) !important; color: var(--as-ink) !important; border: 1px solid var(--cel-blue) !important; font-weight:600 !important; }

/* =========================================================================
   FREE-CHECK form — retint champagne→celestial + step progress + calc overlay
   ไม่แตะ POST/field/analytics: override เฉพาะ presentation
   ========================================================================= */
.free-check-kicker { color: var(--cel-blue) !important; letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; }
.free-check-title { font-family:'Noto Serif Thai','Sarabun',serif; }
.free-check-proof-row span { border-color: var(--as-line) !important; background: var(--as-card-soft) !important; color: var(--as-copy) !important; }
.free-check-card { border-color: var(--as-line) !important; box-shadow: var(--as-shadow) !important; background: var(--as-card) !important; }
.free-check-subheadline { color: var(--as-copy) !important; }
.free-check-fast-note { color: var(--as-copy) !important; background: var(--as-card-soft) !important; border-color: var(--as-line) !important; }
.unknown-time-row { background: var(--as-card-soft) !important; border-color: var(--as-line) !important; color: var(--as-copy) !important; }
.unknown-time-row[aria-checked="true"] { background: rgba(139,173,232,.10) !important; border-color: var(--cel-blue) !important; }
.field-help, .free-check-privacy { color: var(--as-muted) !important; }
.free-check-privacy a, .free-check-advanced summary { color: var(--cel-blue) !important; }
.province-dropdown { background: var(--as-night) !important; border-color: var(--as-line) !important; }
.province-option { color: var(--as-ink) !important; }
.province-option:hover, .province-option:focus { background: rgba(139,173,232,.14) !important; }

/* step progress rail (01 —— 02 —— 03) */
.fc-steps { display:flex; align-items:center; justify-content:center; gap:.5rem; margin:0 auto 1.4rem; max-width:340px; }
.fc-steps .st { font:600 .72rem/1 'Prompt',sans-serif; letter-spacing:.1em; color:var(--as-muted); border:1px solid var(--as-line); border-radius:999px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:color .2s,border-color .2s; }
.fc-steps .st.on { color:var(--cel-blue); border-color:var(--cel-blue); }
.fc-steps .ln { flex:1 1 auto; height:1px; background:var(--as-line); }
.fc-steps .ln.on { background:var(--cel-blue); }

/* CALCULATING overlay — celestial sequence */
.fc-calc { position:fixed; inset:0; z-index:200; background:rgba(8,13,24,.94); display:none; align-items:center; justify-content:center; flex-direction:column; gap:1.6rem; }
.fc-calc.show { display:flex; }
.fc-calc .orb { width:120px; height:120px; position:relative; }
.fc-calc .orb::before, .fc-calc .orb::after { content:''; position:absolute; inset:0; border:1px solid var(--as-line); border-top-color:var(--cel-blue); border-radius:50%; animation:fcspin 2.4s linear infinite; }
.fc-calc .orb::after { inset:22px; border-top-color:var(--cel-silver); animation-duration:1.6s; animation-direction:reverse; }
.fc-calc .orb i { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--cel-blue); font-size:1.6rem; }
.fc-calc .steps { text-align:center; }
.fc-calc .steps p { margin:.4rem 0; color:var(--as-muted); font:500 .95rem/1.4 'Prompt',sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.35; transition:opacity .3s,color .3s; }
.fc-calc .steps p.on { opacity:1; color:var(--as-ink); }
.fc-calc .steps p.on::before { content:'◈ '; color:var(--cel-blue); }
@keyframes fcspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .fc-calc .orb::before,.fc-calc .orb::after{animation:none;} }