/* ════════════════════════════════════════════════════════════
   AstroVerse · STYLES (Oracle theme)
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#060811; --bg2:#0a0e1c;
  --panel:rgba(16,20,36,.62); --panel-solid:#0e1426;
  --ink:#f0eefa; --muted:#abb1cd; --faint:#9298b8;   /* contrast pass 2026-07-01: muted/faint สว่างขึ้นอีก (เดิม #9ea4c0/#7d83a3) ให้ ~7-9:1 / ~6.5:1 อ่านง่ายทั้งเว็บ */
  --gold:#e7c87a; --gold-2:#d2af66; --gold-soft:rgba(231,200,122,.30);   /* gold-2 สว่างขึ้นนิด (เดิม #cba85f) — ใช้เป็น text/label หลายที่ */
  --blue:#4a5e91; --blue-glow:rgba(74,94,145,.5);
  --line:rgba(231,200,122,.24);        /* ขอบทอง ชัดขึ้น (เดิม .16) */
  --line-soft:rgba(155,162,196,.26);   /* เส้นแบ่ง/ขอบ ชัดขึ้น ไม่กลืน (เดิม rgba(139,145,173,.16)) */
  --emerald:#6fc79b; --rose:#e58fb0;
  /* nebula accents — cosmic light & colour */
  --violet:#a78bfa; --violet-soft:rgba(167,139,250,.34);
  --aqua:#5fd6c4; --aqua-soft:rgba(95,214,196,.30);
  --magenta:#f08fc0; --magenta-soft:rgba(240,143,192,.30);
  --amber:#f2b65a;
  --serif-en:"Cormorant Garamond",serif;
  --serif-th:"Noto Serif Thai",serif;
  --read-th:"Anuphan","IBM Plex Sans Thai",sans-serif;   /* บทอ่านยาว = humanist sans อ่านง่าย (heading คง serif-th) */
  --sans:"IBM Plex Sans Thai","IBM Plex Sans",sans-serif;
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(50% 36% at 14% 4%, rgba(167,139,250,.20), transparent 62%),
    radial-gradient(46% 40% at 88% 12%, rgba(95,214,196,.16), transparent 60%),
    radial-gradient(60% 44% at 50% -6%, rgba(74,94,145,.30), transparent 70%),
    radial-gradient(90% 90% at 50% 30%, #0a0e1c 0%, #060811 75%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
}
/* drifting nebula blobs (ambient colour) */
body::before, body::after{content:""; position:fixed; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(90px); opacity:.28; mix-blend-mode:screen}
body::before{width:46vw; height:46vw; left:-12vw; top:30vh;
  background:radial-gradient(circle, var(--violet-soft), transparent 70%);
  animation:drift1 26s ease-in-out infinite}
body::after{width:42vw; height:42vw; right:-10vw; top:54vh;
  background:radial-gradient(circle, var(--aqua-soft), transparent 70%);
  animation:drift2 32s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,-6vh) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,7vh) scale(1.12)}}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold-soft); color:#fff}
.starfield{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.7}

/* ── NAV ── */
nav{position:fixed; top:0; left:0; right:0; z-index:60; height:64px; display:flex; align-items:center; gap:8px;
  padding:0 28px; background:rgba(6,8,17,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)}
.brand{font-family:var(--serif-en); font-weight:500; font-size:24px; letter-spacing:.02em; margin-right:auto; cursor:pointer}
.brand .v{color:var(--gold); font-style:italic}
.nav-links{display:flex; gap:4px; align-items:center}
.nav-links button{background:none; border:none; color:var(--muted); font-family:var(--sans); font-size:14px;
  padding:9px 14px; border-radius:8px; cursor:pointer; transition:.25s}
.nav-links button:hover{color:var(--ink); background:rgba(231,200,122,.06)}
.nav-today{font-family:var(--sans); font-size:14px; color:#0a0e1c !important; background:var(--gold) !important;
  padding:9px 18px !important; border-radius:100px !important; transition:.3s; font-weight:500}
.nav-today:hover{background:#f3d98f !important; box-shadow:0 0 24px var(--gold-soft)}
.nav-burger{display:none; background:none;border:none;color:var(--ink);font-size:22px;cursor:pointer}

/* ── HERO ── */
.hero{position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 24px 80px; z-index:2}
/* Cosmic Aurora — living aurora curtains behind the wordmark (21st.dev cosmic-aurora vibe, pure CSS) */
.hero .aura{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(88vw,900px); height:min(72vh,660px);
  border-radius:50%; pointer-events:none; z-index:-1; filter:blur(40px); opacity:.58;
  background:radial-gradient(58% 42% at 50% 50%, rgba(74,94,145,.34) 0%, rgba(231,200,122,.06) 40%, transparent 70%);
  animation:auraBreathe 9s ease-in-out infinite}
.hero .aura::before, .hero .aura::after{content:""; position:absolute; inset:-16%; border-radius:46%; mix-blend-mode:screen}
.hero .aura::before{animation:auraSpin 42s linear infinite; opacity:.26;
  background:conic-gradient(from 200deg at 50% 50%, transparent 0deg, var(--violet-soft) 60deg, transparent 150deg, var(--gold-soft) 250deg, transparent 332deg)}
.hero .aura::after{animation:auraSpin 64s linear infinite reverse; opacity:.18;
  background:conic-gradient(from 30deg at 50% 50%, transparent 0deg, var(--aqua-soft) 82deg, transparent 168deg, var(--magenta-soft) 256deg, transparent 342deg)}
@keyframes auraBreathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.84}50%{transform:translate(-50%,-50%) scale(1.07);opacity:1}}
@keyframes auraSpin{to{transform:rotate(360deg)}}
.hero .logo-band{position:relative; width:min(940px,96vw); height:clamp(220px,42vh,420px); display:grid; place-items:center}
.hero #heroParticles{position:absolute; inset:0; width:100%; height:100%; z-index:1}
/* particles ARE the wordmark — the crisp <h1> is an invisible sizing anchor
   (particles read its font-size; kept in DOM for a11y/SEO). No sharp font on screen. */
.hero .wm{position:relative; z-index:2; font-family:var(--serif-en); font-weight:500; font-size:clamp(80px,16vw,210px); line-height:.96; letter-spacing:.01em; opacity:0; pointer-events:none}
.hero .wm .v{color:var(--gold); font-style:italic}
.hero .orbit{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:-1;
  width:min(42vw,460px); aspect-ratio:1; border:1px solid var(--gold-soft); border-radius:50%;
  animation:spin 48s linear infinite}
.hero .orbit::before{content:""; position:absolute; top:-5px; left:50%; width:9px;height:9px; margin-left:-4.5px; border-radius:50%; background:var(--gold); box-shadow:0 0 16px 3px var(--gold-soft)}
.hero .orbit.two{width:min(56vw,600px); border-color:rgba(167,139,250,.20); border-style:dashed; animation:spin 90s linear infinite reverse}
.hero .orbit.two::before{background:var(--aqua); box-shadow:0 0 16px 3px var(--aqua-soft)}
/* more concentric orbits (solar-system feel) — each with a small "planet" travelling the ring */
.hero .orbit.three{width:min(28vw,300px); border-color:rgba(95,214,196,.18); animation:spin 34s linear infinite}
.hero .orbit.three::before{width:6px; height:6px; margin-left:-3px; top:-3.5px; background:var(--aqua); box-shadow:0 0 12px 2px var(--aqua-soft)}
.hero .orbit.four{width:min(72vw,780px); border-color:rgba(167,139,250,.14); border-style:dashed; animation:spin 120s linear infinite reverse}
.hero .orbit.four::before{width:7px; height:7px; margin-left:-3.5px; background:var(--magenta); box-shadow:0 0 14px 2px var(--magenta-soft)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-soft); padding:7px 16px; border-radius:100px; margin-bottom:18px;
  opacity:0; animation:rise 1s ease 1s forwards}
.hero h1{font-family:var(--serif-en); font-weight:500; font-size:clamp(54px,10vw,120px); line-height:1; margin:16px 0 4px}
.hero h1 .v{color:var(--gold); font-style:italic}
.hero .tagline{font-family:var(--serif-en); font-style:italic; font-size:clamp(17px,2.2vw,22px); opacity:0;
  background:linear-gradient(100deg, var(--gold) 28%, #fff6df 50%, var(--gold) 72%); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:rise 1s ease 1.05s forwards, shimmer 6.5s ease-in-out 2s infinite}
@keyframes shimmer{0%{background-position:140% center}100%{background-position:-40% center}}
.hero p.lead{font-family:var(--serif-th); color:var(--muted); font-size:clamp(15px,2vw,18px); line-height:1.8; max-width:32em; margin:18px auto 0; opacity:0; animation:rise 1s ease 1.2s forwards}
.hero .cta{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; opacity:0; animation:rise 1s ease 1.35s forwards}
/* minimal "click to start" hint replacing the loud CTA buttons */
.hero-hint{margin-top:30px; background:none; border:none; cursor:pointer; font-family:var(--serif-en); font-style:italic; color:var(--gold); font-size:clamp(16px,1.8vw,20px); letter-spacing:.02em; display:inline-flex; align-items:center; gap:12px; opacity:0; animation:rise 1s ease 1.3s forwards; transition:color .3s ease}
.hero-hint::before,.hero-hint::after{content:""; width:26px; height:1px; background:var(--gold-soft); transition:width .35s ease}
.hero-hint:hover{color:var(--gold-bright)}
.hero-hint:hover::before,.hero-hint:hover::after{width:42px}

/* hero flair removed (Gap 2026-06-24): no sharp-font glint · no letter rise-in · no mouse parallax · no shooting star — the particle wordmark stands alone */

/* scroll-reveal: cards fade + rise as they enter the viewport (IntersectionObserver adds .in) */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .hero .aura, .hero .aura::before, .hero .aura::after{animation:none}
  .hero .tagline{animation:rise 1s ease 1.05s forwards}
  .scroll-hint{animation:none}
  .aurora, .aurora::before, .aurora::after{animation:none}
  .stepper::after{transition:none}
}
.scroll-hint{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:var(--faint); font-size:12px; letter-spacing:.2em; animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* ── BUTTONS ── */
.btn{font-family:var(--sans); font-size:15px; letter-spacing:.02em; padding:15px 32px; border-radius:100px; cursor:pointer; transition:.35s; border:1px solid var(--gold-soft); color:var(--ink); background:rgba(231,200,122,.05)}
.btn:hover{background:rgba(231,200,122,.13); border-color:var(--gold); color:var(--gold); box-shadow:0 0 34px rgba(231,200,122,.2)}
.btn.solid{background:var(--gold); color:#0a0e1c; border-color:var(--gold)}
.btn.solid:hover{background:#f3d98f; color:#0a0e1c}
.btn.ghost{background:transparent; border-color:var(--line-soft); color:var(--muted)}
.btn.ghost:hover{border-color:var(--blue); color:var(--ink); box-shadow:0 0 26px var(--blue-glow)}
.btn.sm{padding:10px 20px; font-size:13.5px}

/* ── STEPPER ── */
.stepper-wrap{position:sticky; top:64px; z-index:50; background:rgba(6,8,17,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft)}
.stepper{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:14px 28px}
.step{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; cursor:pointer; border:1px solid transparent; transition:.3s; text-align:left}
.step:hover{background:rgba(231,200,122,.05)}
.step.active{background:linear-gradient(135deg, rgba(167,139,250,.18), rgba(74,94,145,.20)); border-color:var(--gold-soft); box-shadow:0 0 30px rgba(167,139,250,.14), inset 0 0 24px rgba(95,214,196,.06)}
.step .no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; font-family:var(--serif-en); font-size:16px; border:1px solid var(--gold-soft); color:var(--gold); transition:.3s}
.step.active .no{background:radial-gradient(circle at 30% 25%, #f3d98f, var(--gold) 70%); color:#0a0e1c; border-color:#f3d98f; box-shadow:0 0 18px var(--gold-soft), 0 0 4px #fff inset}
.step .lbl b{display:block; font-size:14px; font-weight:500}
.step .lbl span{display:block; font-size:12px; color:var(--muted); margin-top:1px}

/* ── SECTION SHELL ── */
.section{max-width:1180px; margin:0 auto; padding:54px 28px 90px}
.step-screen{display:none; animation:fadeUp .55s ease}
.step-screen.active{display:block}
.sec-head{text-align:center; margin-bottom:40px}
.sec-head .k{font-family:var(--serif-en); font-style:italic; color:var(--gold); font-size:17px; letter-spacing:.04em}
.sec-head h2{font-family:var(--serif-th); font-weight:500; font-size:clamp(28px,4.5vw,44px); margin-top:8px}
.sec-head p{color:var(--muted); font-size:15px; margin-top:12px; max-width:40em; margin-inline:auto; line-height:1.7}

/* ── CATEGORY GRID (step 1) ── */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.catc{position:relative; padding:34px 26px; border-radius:var(--r); cursor:pointer; overflow:hidden;
  border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(6px); transition:.42s; text-align:center}
.catc::before{content:""; position:absolute; inset:0; opacity:0; transition:.42s;
  background:radial-gradient(75% 90% at 50% 0%, rgba(74,94,145,.4), transparent 70%)}
.catc:hover{transform:translateY(-6px); border-color:var(--gold-soft); box-shadow:0 18px 54px rgba(6,8,17,.7)}
.catc:hover::before{opacity:1}
/* per-path colour identity */
.catc:nth-child(6n+1){--ac:var(--violet); --ac-soft:var(--violet-soft)}
.catc:nth-child(6n+2){--ac:var(--aqua); --ac-soft:var(--aqua-soft)}
.catc:nth-child(6n+3){--ac:var(--gold); --ac-soft:var(--gold-soft)}
.catc:nth-child(6n+4){--ac:var(--magenta); --ac-soft:var(--magenta-soft)}
.catc:nth-child(6n+5){--ac:var(--emerald); --ac-soft:rgba(111,199,155,.30)}
.catc:nth-child(6n+6){--ac:var(--blue); --ac-soft:var(--blue-glow)}
.catc::before{background:radial-gradient(75% 90% at 50% 0%, var(--ac-soft, rgba(74,94,145,.4)), transparent 70%)}
.catc:hover{border-color:var(--ac-soft)}
.catc .token{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--ac-soft, var(--gold-soft)); color:var(--ac, var(--gold)); font-size:26px; position:relative; transition:.42s;
  background:radial-gradient(circle, var(--ac-soft, rgba(231,200,122,.1)), transparent 72%)}
.catc:hover .token{box-shadow:0 0 34px var(--ac-soft, var(--gold-soft)); transform:scale(1.08)}
.catc h3{font-family:var(--serif-th); font-weight:500; font-size:22px; position:relative}
.catc .en{font-family:var(--serif-en); font-style:italic; color:var(--ac, var(--gold)); font-size:15px; margin-top:2px; position:relative}
.catc .desc{color:var(--muted); font-size:13.5px; margin-top:12px; line-height:1.6; position:relative}

/* ── TOPIC FILTER + GRID (step 2) ── */
.filters{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:28px; justify-content:center}
.field{position:relative}
.search, .select{font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--panel); border:1px solid var(--line-soft);
  border-radius:100px; padding:12px 18px; outline:none; transition:.3s; min-width:210px}
.search:focus,.select:focus{border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(231,200,122,.08)}
.select{appearance:none; cursor:pointer; padding-right:38px;
  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='%23e7c87a' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center}
/* auto-fit → หมวดที่มีศาสตร์น้อย การ์ดยืดเต็มความกว้าง (ใหญ่ขึ้นเอง) */
.topic-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px}
.topicc{--accent:var(--gold); position:relative; padding:30px 28px; border-radius:var(--r); cursor:pointer; border:1px solid var(--line-soft);
  background:var(--panel); backdrop-filter:blur(6px); transition:.38s; display:flex; flex-direction:column; min-height:208px; overflow:hidden}
.topicc::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; transition:.38s; opacity:.5;
  background:radial-gradient(130% 85% at 0% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%)}
.topicc:hover{transform:translateY(-5px); border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 16px 46px rgba(6,8,17,.6), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent)}
.topicc:hover::before{opacity:1}
.topicc>*{position:relative}
.topicc .row1{display:flex; justify-content:space-between; align-items:flex-start}
.topicc .glyph{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:24px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent)}
.topicc .go{font-family:var(--serif-en);font-style:italic;color:var(--accent);font-size:15px;opacity:0;transform:translateX(-6px);transition:.35s}
.topicc:hover .go{opacity:1;transform:none}
.topicc h4{font-family:var(--serif-th);font-weight:500;font-size:21px;margin-top:auto}
.topicc .en{font-family:var(--serif-en);font-style:italic;color:var(--muted);font-size:14px;margin-top:2px}
.topicc .tag{font-size:12.5px;color:var(--faint);margin-top:12px;letter-spacing:.02em}
.no-result{text-align:center; color:var(--muted); padding:50px; grid-column:1/-1; font-family:var(--serif-th)}

/* ── DASHBOARD (step 3) ── */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px}
.metric{position:relative; padding:22px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); overflow:hidden}
.metric::before{content:""; position:absolute; left:0; top:0; right:0; height:2px; background:var(--ac, var(--gold)); opacity:.8}
.metric::after{content:""; position:absolute; left:-20%; top:-60%; width:80%; height:120%; border-radius:50%; filter:blur(34px); opacity:.16; background:var(--ac, var(--gold)); pointer-events:none}
.metric:nth-child(4n+1){--ac:var(--violet)} .metric:nth-child(4n+2){--ac:var(--aqua)}
.metric:nth-child(4n+3){--ac:var(--gold)} .metric:nth-child(4n+4){--ac:var(--magenta)}
.metric .k{font-size:12.5px; color:var(--muted); letter-spacing:.02em; position:relative}
.metric .v{font-family:var(--serif-en); font-size:38px; line-height:1.1; margin-top:8px; position:relative}
.metric .v .u{font-size:18px; color:var(--gold); font-style:italic}
.metric .sub{font-size:12.5px; color:var(--gold-2); margin-top:6px; position:relative}
.lg-meta{font-size:12.5px; color:var(--gold-2); letter-spacing:.01em}
.lg-chart{padding:6px 6px 2px}
.lg-chart svg{display:block; width:100%; height:auto}
.lg-empty{padding:48px 20px; text-align:center; color:var(--muted); font-family:var(--serif-th); font-size:14.5px}
.dash{display:grid; grid-template-columns:1fr; gap:20px}
.panel{border:1px solid var(--line); background:var(--panel); border-radius:var(--r); overflow:hidden}
.panel-head{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; gap:12px}
.panel-head h3{font-family:var(--serif-th); font-weight:500; font-size:20px}
.panel-head .exp{display:flex; gap:8px}
table{width:100%; border-collapse:collapse; font-size:14px}
thead th{text-align:left; font-weight:500; color:var(--gold); font-family:var(--sans); padding:14px 22px; border-bottom:1px solid var(--line-soft); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase}
tbody td{padding:15px 22px; border-bottom:1px solid var(--line-soft); color:var(--ink)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(231,200,122,.04)}
.score-pill{display:inline-flex; align-items:center; gap:8px}
.score-bar{width:64px;height:6px;border-radius:6px;background:rgba(139,145,173,.2);overflow:hidden}
.score-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--aqua) 50%,var(--gold))}
.td-muted{color:var(--muted)}

/* ── HISTORY (step 4) ── */
.hist-toolbar{display:flex; gap:10px; justify-content:center; margin-bottom:26px; flex-wrap:wrap}
.hist-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.hist-card{border:1px solid var(--line-soft); background:var(--panel); border-radius:var(--r); padding:20px 22px; position:relative; transition:.3s}
.hist-card:hover{border-color:var(--gold-soft)}
.hist-card .hc-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.hist-card .hc-topic{font-family:var(--serif-th); font-weight:500; font-size:17px}
.hist-card .hc-cat{font-size:12px; color:var(--gold); border:1px solid var(--gold-soft); padding:3px 10px; border-radius:100px; white-space:nowrap}
.hist-card .hc-meta{font-size:12.5px; color:var(--muted); margin-top:6px}
.hist-card .hc-excerpt{font-family:var(--serif-th); color:var(--muted); font-size:14px; margin-top:12px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.hist-card .hc-del{position:absolute; top:14px; right:14px; background:none; border:none; color:var(--faint); cursor:pointer; font-size:16px; transition:.25s; opacity:0}
.hist-card:hover .hc-del{opacity:1}
.hist-card .hc-del:hover{color:var(--rose)}
.empty{text-align:center; color:var(--muted); padding:60px 20px; font-family:var(--serif-th)}
.empty .big{font-size:42px; color:var(--gold-soft); margin-bottom:14px}

/* ── MODAL ── */
.modal-veil{position:fixed; inset:0; z-index:100; background:rgba(4,6,14,.78); backdrop-filter:blur(8px);
  display:none; align-items:flex-start; justify-content:center; padding:40px 18px; overflow-y:auto}
.modal-veil.show{display:flex; animation:fadeIn .3s ease}
.modal{width:min(760px,100%); background:linear-gradient(180deg,#0c1122,#0a0e1c); border:1px solid var(--gold-soft);
  border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.6); overflow:hidden; animation:popIn .4s cubic-bezier(.2,.9,.2,1); margin:auto}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; padding:24px 28px 18px; border-bottom:1px solid var(--line-soft); position:relative}
.modal-head .m-cat{font-family:var(--serif-en); font-style:italic; color:var(--gold); font-size:15px}
.modal-head h2{font-family:var(--serif-th); font-weight:500; font-size:26px; margin-top:3px}
.modal-close{background:none; border:1px solid var(--line-soft); color:var(--muted); width:38px;height:38px;border-radius:50%;
  cursor:pointer; font-size:18px; transition:.25s; flex:0 0 auto}
.modal-close:hover{border-color:var(--gold-soft); color:var(--gold); transform:rotate(90deg)}
.modal-body{padding:24px 28px 28px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label.fld{display:block; margin-bottom:14px}
label.fld .lab{font-size:13px; color:var(--muted); margin-bottom:6px; display:block; letter-spacing:.02em}
.inp{width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:rgba(6,8,17,.6); border:1px solid var(--line-soft);
  border-radius:10px; padding:13px 15px; outline:none; transition:.3s}
.inp:focus{border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(231,200,122,.08)}
textarea.inp{resize:vertical; min-height:84px; font-family:var(--serif-th); line-height:1.6}
input.inp[type=date]{color-scheme:dark}
input.inp[type=time]{color-scheme:dark}

/* ── AUTH (nav chip + profile modal) ── */
#authSlot{position:relative; display:flex; align-items:center; margin-left:8px}
.login-btn{white-space:nowrap}
.user-chip{display:flex; align-items:center; gap:9px; cursor:pointer; padding:5px 13px 5px 6px; border:1px solid var(--line-soft); border-radius:100px; transition:.25s}
.user-chip:hover{border-color:var(--gold-soft)}
.user-chip .ava{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:#0a0e1c; font-family:var(--serif-en); font-size:16px; font-weight:600; flex:0 0 auto}
.user-chip .uname{font-size:14px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-menu{position:absolute; top:50px; right:0; background:var(--panel-solid); border:1px solid var(--line-soft); border-radius:12px; padding:6px; min-width:160px; display:none; z-index:70; box-shadow:0 16px 44px rgba(0,0,0,.5)}
.user-menu.open{display:block}
.user-menu button{display:block; width:100%; text-align:left; background:none; border:none; color:var(--ink); font-family:var(--sans); font-size:14px; padding:10px 12px; border-radius:8px; cursor:pointer; transition:.2s}
.user-menu button:hover{background:rgba(231,200,122,.08); color:var(--gold)}
.auth-modal{width:min(460px,100%)}
.auth-sub{color:var(--muted); font-family:var(--serif-th); font-size:14.5px; line-height:1.7; margin-bottom:20px}
/* profile picture */
.pf-avatar-row{ display:flex; align-items:center; gap:16px; margin-bottom:20px }
.pf-avatar{ width:76px; height:76px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(231,200,122,.28), rgba(124,77,208,.22)); border:1px solid var(--gold-soft) }
.pf-avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.pf-ava-ini{ font-family:var(--serif-en); font-size:32px; color:var(--gold) }
.pf-avatar-actions{ display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.pf-upload{ cursor:pointer; margin:0 }
.pf-avatar-rm{ background:none; border:none; color:var(--faint); font-family:var(--sans); font-size:12.5px; cursor:pointer; padding:2px 0 }
.pf-avatar-rm:hover{ color:var(--rose) }
.user-chip .ava{ overflow:hidden }
.user-chip .ava img{ width:100%; height:100%; object-fit:cover; display:block }
/* "reading for {profile}" line in the reading modal (identity fields moved to the profile) */
.reading-for{ font-size:13px; color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.reading-for b{ color:var(--ink); font-weight:500 }
.rf-edit{ background:none; border:1px solid var(--line-soft); color:var(--gold); font-family:var(--sans); font-size:12px; border-radius:999px; padding:4px 12px; cursor:pointer; transition:.2s }
.rf-edit:hover{ border-color:var(--gold-soft); background:rgba(231,200,122,.06) }

/* ── SUBJECT toggle (ดูให้ตัวเอง/คนอื่น) ── */
.subj-toggle{margin-bottom:18px}
.subj-seg{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-soft); border-radius:100px; overflow:hidden; background:rgba(6,8,17,.5)}
.subj-seg button{background:none; border:none; color:var(--muted); font-family:var(--sans); font-size:14px; padding:12px; cursor:pointer; transition:.25s}
.subj-seg button.on{background:var(--gold); color:#0a0e1c; font-weight:500}
.subj-hint{font-size:12.5px; color:var(--gold-2); margin-top:11px; text-align:center; display:none}

/* aspect chips (เลือกหัวข้อทำนาย) */
.aspect-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:4px}
.aspect-chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:14px; color:var(--ink);
  background:rgba(6,8,17,.5); border:1px solid var(--line-soft); border-radius:100px; padding:9px 16px; cursor:pointer; transition:.25s}
.aspect-chip .ag{color:var(--gold); font-size:14px}
.aspect-chip:hover{border-color:var(--gold-soft)}
.aspect-chip.on{background:rgba(231,200,122,.14); border-color:var(--gold); color:var(--gold)}
.aspect-chip.on .ag{color:var(--gold)}

/* locked landing — เห็นแค่ hero จนกว่าจะล็อกอิน */
body.locked .stepper-wrap, body.locked main.section, body.locked footer, body.locked .scroll-hint{display:none !important}

/* ── CARD TOOL ── */
.card-tool{margin:6px 0 18px; padding:20px; border:1px solid var(--line); border-radius:14px; background:rgba(74,94,145,.08)}
.ct-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px}
.ct-head .t{font-family:var(--serif-th); font-size:16px}
.ct-controls{display:flex; gap:10px; align-items:center}
.count-seg{display:flex; border:1px solid var(--line-soft); border-radius:100px; overflow:hidden}
.count-seg button{background:none; border:none; color:var(--muted); font-family:var(--sans); font-size:14px; padding:8px 18px; cursor:pointer; transition:.25s}
.count-seg button.on{background:var(--gold); color:#0a0e1c}
.reshuffle-btn{background:rgba(231,200,122,.06); border:1px solid var(--gold-soft); color:var(--gold); font-family:var(--sans); font-size:13px; padding:8px 16px; border-radius:100px; cursor:pointer; transition:.25s; white-space:nowrap}
.reshuffle-btn:hover{background:rgba(231,200,122,.16); box-shadow:0 0 20px var(--gold-soft)}

/* fan — กรีดไพ่เป็นรูปพัด */
.fan{position:relative; height:248px; max-width:660px; margin:6px auto 0}
.pcard{position:absolute; left:50%; bottom:8px; width:80px; height:124px; margin-left:-40px;
  transform-origin:50% 232%; transform:rotate(var(--a,0deg)); cursor:pointer; perspective:900px;
  transition:transform .6s cubic-bezier(.2,.85,.25,1), opacity .45s ease}
.pcard.dealing{transform:rotate(0deg) translateY(36px) scale(.96); opacity:0}
.pcard:hover{transform:rotate(var(--a,0deg)) translateY(-18px); z-index:30 !important}
.pcard.picked{transform:rotate(var(--a,0deg)) translateY(-30px) scale(1.04)}
.pcard.picked:hover{transform:rotate(var(--a,0deg)) translateY(-36px) scale(1.05)}
.pcard-inner{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pcard.picked .pcard-inner{transform:rotateY(180deg)}
.pcard .face{position:absolute; inset:0; border-radius:9px; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.45)}
.pcard .back{background:radial-gradient(circle at 50% 30%, #2a3a63, #0c1024); border:1px solid var(--gold-soft)}
.pcard .back::after{content:"✦"; color:var(--gold-soft); font-size:17px; opacity:.85}
.pcard .front{background:linear-gradient(180deg,#161d35,#0c1024); border:1px solid var(--gold); transform:rotateY(180deg); flex-direction:column; padding:7px 5px; text-align:center}
.pcard .front .fg{color:var(--gold); font-size:21px}
.pcard .front .fn{font-family:var(--serif-en); font-size:9.5px; color:var(--ink); line-height:1.12; margin-top:4px}
.pcard.picked .front{box-shadow:0 0 0 2px var(--gold), 0 0 30px var(--gold-soft)}
.pcard.rev .front{transform:rotateY(180deg) rotate(180deg)}
.picked-row{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; min-height:8px; justify-content:center}
.picked-chip{font-size:12.5px; color:var(--gold); border:1px solid var(--gold-soft); border-radius:100px; padding:5px 12px}
.picked-chip span{color:var(--muted)}
.ct-hint{font-size:12.5px; color:var(--muted); margin-top:10px; text-align:center}

/* ── LOADERS ── */
.loader{display:none; padding:40px 10px; text-align:center}
.loader.show{display:block; animation:fadeIn .3s}
.orbit-load{position:relative; width:120px; height:120px; margin:0 auto 22px}
.orbit-load .core{position:absolute; inset:0; margin:auto; width:18px;height:18px;border-radius:50%;background:var(--gold); box-shadow:0 0 26px var(--gold); animation:pulse 1.6s ease-in-out infinite}
.orbit-load .ring{position:absolute; inset:0; border:1px solid var(--gold-soft); border-radius:50%; animation:spin2 3s linear infinite}
.orbit-load .ring::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.orbit-load .ring.r2{inset:18px; animation:spin2 2.1s linear infinite reverse; border-color:rgba(231,200,122,.2)}
.orbit-load .ring.r3{inset:36px; animation:spin2 1.4s linear infinite; border-style:dashed}
@keyframes spin2{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.7}}
.flip-load{display:flex; gap:14px; justify-content:center; margin-bottom:22px}
.flip-load .fc{width:46px;height:70px;border-radius:8px;border:1px solid var(--gold-soft);
  background:linear-gradient(180deg,#243155,#0c1024); animation:cardflip 1.4s ease-in-out infinite}
.flip-load .fc:nth-child(2){animation-delay:.18s} .flip-load .fc:nth-child(3){animation-delay:.36s}
@keyframes cardflip{0%,100%{transform:rotateY(0);box-shadow:0 0 0 transparent}50%{transform:rotateY(180deg);box-shadow:0 0 24px var(--gold-soft)}}
.loader .lmsg{font-family:var(--serif-th); color:var(--gold); font-size:16px; letter-spacing:.02em}
.loader .lscan{width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:16px auto 0;position:relative;overflow:hidden}
.loader .lscan::after{content:"";position:absolute;inset:0;background:var(--gold);width:40px;animation:scan 1.4s linear infinite}
@keyframes scan{0%{transform:translateX(-60px)}100%{transform:translateX(220px)}}

/* ── READING RESULT ── */
.result{display:none; animation:fadeUp .5s ease}
.result.show{display:block}

/* ════════ TAROT — immersive reading (pilot: real RWS images, engine-drawn spreads) ════════ */
.modal:has(.trt){ max-width:min(94vw,820px) }
.trt{ position:relative; margin:-2px -2px 0; padding:20px 16px 8px; border-radius:18px;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(124,77,208,.24), transparent 60%),
    radial-gradient(90% 70% at 50% 118%, rgba(43,28,90,.5), transparent 64%),
    linear-gradient(180deg,#170f30,#100a20);
  box-shadow:inset 0 1px 0 rgba(231,200,122,.10), inset 0 0 90px rgba(124,77,208,.12); }
.trt-q{ text-align:center; font-family:var(--serif-en); font-style:italic; color:#e7d6f7; font-size:16px; margin:2px 0 16px; }
.trt-tabs{ display:flex; flex-wrap:wrap; gap:7px; padding-bottom:12px; }   /* wrap so the last tab (Celtic Cross) ไม่โดนตัดขอบ */
.trt-tab{ flex:none; white-space:nowrap; font-family:var(--sans); font-size:13px; color:var(--muted);
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft); border-radius:999px; padding:8px 15px; cursor:pointer; transition:.25s }
.trt-tab:hover{ color:#e7d6f7; border-color:rgba(181,139,224,.5) }
.trt-tab.on{ color:#fff; background:linear-gradient(90deg, rgba(124,77,208,.5), rgba(181,139,224,.34)); border-color:rgba(181,139,224,.6) }
.trt-lock{ opacity:.7; font-size:11px }
.tarot-spread{ display:grid; gap:13px; grid-template-columns:1fr; margin-top:4px }
@media (min-width:560px){ .tarot-spread{ grid-template-columns:repeat(auto-fill,minmax(228px,1fr)) } }
.tarot-spread.one{ grid-template-columns:1fr; max-width:360px; margin:4px auto 0 }
.tcard{ position:relative; background:linear-gradient(165deg,#241a42,#150f2c); border:1px solid rgba(181,139,224,.3); border-radius:16px; padding:15px 16px; overflow:hidden; animation:cardIn .55s cubic-bezier(.2,.7,.2,1) both }
.tcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--suit-c,#b58be0); opacity:.85 }
.tcard.su-major{ --suit-c:linear-gradient(90deg,#d4af37,#c9a6f5) }
.tcard.su-wands{ --suit-c:linear-gradient(90deg,#ff7a45,#ffb061) }
.tcard.su-cups{ --suit-c:linear-gradient(90deg,#4f9dff,#7fd6ff) }
.tcard.su-swords{ --suit-c:linear-gradient(90deg,#8aa0c0,#c0d4e8) }
.tcard.su-pent{ --suit-c:linear-gradient(90deg,#4fb06a,#d4af37) }
@keyframes cardIn{ from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none} }
.tc-pos{ font-size:11px; letter-spacing:1px; color:var(--faint); text-transform:uppercase; display:flex; flex-direction:column; gap:2px; margin-bottom:10px }
.tc-posn{ font-size:11px; letter-spacing:0; text-transform:none; color:var(--muted) }
.tc-face{ display:flex; align-items:flex-start; gap:12px }
.tcard.big .tc-face{ flex-direction:column; align-items:center; text-align:center }
.tc-art{ width:74px; flex:none; aspect-ratio:74/124; border-radius:9px; overflow:hidden; background:rgba(0,0,0,.3); display:grid; place-items:center; box-shadow:0 5px 16px -7px rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.12) }
.tcard.big .tc-art{ width:154px }
.tc-img{ width:100%; height:100%; object-fit:cover; display:block }
.tcard.rev .tc-img{ transform:rotate(180deg) }
.tc-name b{ font-family:var(--serif-en); font-size:16px; color:#f0e9da; display:block }
.tc-name small{ font-size:11.5px; color:var(--faint) }
.tc-rev{ position:absolute; top:13px; right:13px; font-size:10px; letter-spacing:.5px; color:#e6a98f; border:1px solid #e6a98f55; border-radius:999px; padding:3px 8px }
.tc-kw{ display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 0 }
.tc-kw span{ font-size:11px; color:#c9a6f5; background:rgba(124,77,208,.16); border-radius:999px; padding:3px 9px }
.tc-gen{ font-size:13px; color:var(--ink); opacity:.92; line-height:1.7; margin:11px 0 0 }
.tc-doms{ display:flex; flex-direction:column; gap:9px; margin-top:12px }
.tc-dom{ display:flex; flex-direction:column; gap:2px }
.tc-dl{ font-size:11.5px; color:var(--gold) }
.tc-dt{ font-size:12.5px; color:var(--muted); line-height:1.65 }
.trt-synth{ margin-top:15px; padding:16px 18px; border-radius:14px; background:linear-gradient(165deg, rgba(40,28,74,.7), rgba(22,15,48,.7)); border:1px solid rgba(181,139,224,.28) }
.trt-eyebrow{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#c9a6f5; margin-bottom:8px }
.trt-summary{ font-size:14.5px; line-height:1.82; color:var(--ink) }
.trt-pill{ display:inline-block; margin-top:12px; font-size:12px; color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:5px 12px }
.trt-combo{ margin-top:12px; padding:14px 16px; border-radius:14px; border:1px solid rgba(201,166,245,.4); background:linear-gradient(165deg,#281c4a,#160f30) }
.trt-combo-h{ font-size:12px; letter-spacing:1px; color:#c9a6f5; margin-bottom:9px }
.trt-combo ul{ list-style:none; display:flex; flex-direction:column; gap:8px }
.trt-combo li{ font-size:13px; color:var(--muted); line-height:1.6; padding-left:17px; position:relative }
.trt-combo li::before{ content:"✦"; position:absolute; left:0; color:#c9a6f5 }
.trt-combo-kind{ font-size:10px; color:#c9a6f5; border:1px solid rgba(201,166,245,.4); border-radius:999px; padding:1px 7px; margin-left:6px }

/* ════════ IMMERSIVE per-system reading (.imr) — each divination system gets its own "world" ════════ */
.modal:has(.imr){ max-width:min(94vw,760px) }
.imr{ position:relative; margin:-2px -2px 0; padding:22px 16px 8px; border-radius:18px;
  --imr-1:#7c4dd0; --imr-2:#b58be0; --imr-glow:rgba(124,77,208,.18);
  /* พื้นทึบขึ้น (กัน starfield/aurora ทะลุหลังตัวอักษร) + ลด glow ในให้ฟุ้งน้อยลง = อ่านยาวสบายตา */
  background:radial-gradient(120% 70% at 50% -8%, rgba(124,77,208,.10), transparent 56%), linear-gradient(180deg, rgba(16,13,32,.86), rgba(11,9,22,.9));
  box-shadow:inset 0 1px 0 rgba(231,200,122,.08), inset 0 0 60px rgba(124,77,208,.06) }
.imr-hero{ text-align:center; padding:4px 6px 14px }
.imr-eyebrow{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--imr-2); margin-bottom:11px }
.imr-lead{ font-family:var(--serif-th); font-size:17px; font-weight:500; line-height:1.85; color:var(--ink); max-width:46ch; margin:0 auto }
/* Writer layer — บทเล่าเชิงสังเคราะห์ (story/answer/close) */
.imr-story{ max-width:48ch; margin:10px auto 0 }
.imr-story p{ font-family:var(--serif-th); font-size:16.5px; font-weight:500; line-height:1.9; color:var(--ink); margin:0 0 14px; text-wrap:pretty }
.imr-story p:last-child{ margin-bottom:0 }
.imr-answer{ padding:13px 16px; margin:2px 0 14px; border-radius:13px; background:var(--imr-glow); border:1px solid var(--line-soft) }
.imr-close{ padding-top:12px; border-top:1px solid rgba(255,255,255,.11); opacity:.93 }
/* TL;DR — สรุปสั้น 2-3 จุดก่อนเนื้อยาว (อ่านเร็ว โดยเฉพาะมือถือ) */
.imr-tldr{ max-width:48ch; margin:14px auto 6px; padding:13px 16px; border-radius:14px; background:rgba(231,200,122,.05); border:1px solid var(--gold-soft) }
.imr-tldr-h{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--gold-2); margin-bottom:9px }
.tl-row{ display:flex; flex-wrap:wrap; gap:3px 12px; padding:6px 0 }
.tl-row + .tl-row{ border-top:1px solid rgba(255,255,255,.1) }
.tl-k{ flex:0 0 84px; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--gold) }
.tl-v{ flex:1; min-width:60%; font-family:var(--serif-th); font-size:14px; line-height:1.55; color:var(--ink) }
/* freemium tease + คำเชิญ (ล่อแบบไม่ล่อ) */
.imr-tease{ color:var(--muted) }
.imr-invite{ max-width:48ch; margin:20px auto 0; padding:18px; border-radius:16px; background:var(--imr-glow); border:1px solid var(--line-soft); text-align:center }
.imr-invite-h{ font-family:var(--serif-th); font-size:16px; color:var(--ink); margin-bottom:13px }
.imr-invite ul{ list-style:none; margin:0 auto 16px; padding:0; display:flex; flex-direction:column; gap:7px; text-align:left; max-width:33ch }
.imr-invite li{ font-size:13px; color:var(--muted); line-height:1.5; padding-left:18px; position:relative }
.imr-invite li::before{ content:"✦"; position:absolute; left:0; color:var(--imr-2) }
.imr-invite-cta{ font-size:14px; color:#0f0b1e; background:linear-gradient(135deg,var(--imr-2),var(--gold)); border:none; border-radius:999px; padding:10px 28px; cursor:pointer; font-weight:600 }
/* card invite = "ดูหลายใบ/ลึกขึ้น" (เชิญชวน ไม่ใช่ล็อก) — เบากว่า invite ปกติ */
.imr-invite-card{ background:none; border-style:dashed; opacity:.94 }
.imr-pill{ display:inline-block; margin-top:14px; font-size:12px; color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:5px 13px }
.imr-sec-h{ font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--imr-2); margin:20px 2px 11px }
.imr-highlights{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:0 }
.imr-highlights li{ font-size:14px; color:var(--muted); line-height:1.72; padding-left:18px; position:relative }
.imr-highlights li::before{ content:"✦"; position:absolute; left:0; color:var(--imr-2) }
.imr-domains{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:2px }
@media (min-width:560px){ .imr-domains{ grid-template-columns:1fr 1fr } }
.imr-domain{ background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border:1px solid var(--line-soft); border-radius:14px; padding:14px 16px }
.imr-domain-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px }
.imr-domain-t{ font-family:var(--serif-en); font-size:16px; color:var(--ink) }
.imr-sent{ font-size:10.5px; letter-spacing:.5px; border-radius:999px; padding:2px 10px; border:1px solid var(--line-soft); color:var(--muted) }
.imr-domain.s-good .imr-sent, .imr-domain.s-positive .imr-sent, .imr-domain.s-favorable .imr-sent, .imr-domain.s-very_favorable .imr-sent, .imr-domain.s-strong .imr-sent{ color:var(--emerald); border-color:rgba(111,199,155,.4) }
.imr-domain.s-caution .imr-sent, .imr-domain.s-bad .imr-sent, .imr-domain.s-negative .imr-sent, .imr-domain.s-unfavorable .imr-sent, .imr-domain.s-very_unfavorable .imr-sent, .imr-domain.s-challenging .imr-sent, .imr-domain.s-difficult .imr-sent, .imr-domain.s-weak .imr-sent{ color:var(--rose); border-color:rgba(229,143,176,.4) }
.imr-factors{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px }
.imr-factor{ font-size:10.5px; color:var(--imr-2); background:var(--imr-glow); border-radius:999px; padding:2px 9px }
.imr-domain-p{ font-size:13px; color:var(--muted); line-height:1.74 }
.imr-advice-item{ font-size:13.5px; color:var(--ink); line-height:1.72; padding:11px 15px; border-radius:12px; background:rgba(231,200,122,.06); border:1px solid rgba(231,200,122,.16); margin-bottom:8px }
/* per-system "world" theming (accent + backdrop) */
.imr[data-system='thai_astrology']{ --imr-1:#caa24a; --imr-2:#e7c87a; --imr-glow:rgba(202,162,74,.15);
  background:radial-gradient(120% 80% at 50% -8%, rgba(202,162,74,.17), transparent 60%), radial-gradient(90% 70% at 50% 118%, rgba(40,30,70,.45), transparent 64%), linear-gradient(180deg,#161028,#0f0b1e) }
.imr[data-system='chinese_astrology']{ --imr-1:#d4622e; --imr-2:#f0a24a; --imr-glow:rgba(212,98,46,.15);
  background:radial-gradient(120% 80% at 50% -8%, rgba(212,98,46,.18), transparent 60%), linear-gradient(180deg,#1c1110,#140b0b) }
.imr[data-system='western_astrology']{ --imr-1:#4a6cc0; --imr-2:#86a6e6; --imr-glow:rgba(74,108,192,.16);
  background:radial-gradient(120% 80% at 50% -8%, rgba(74,108,192,.18), transparent 60%), linear-gradient(180deg,#0e1430,#0a0e22) }
.imr[data-system='vedic_astrology']{ --imr-1:#c9772e; --imr-2:#e3a85f; --imr-glow:rgba(201,119,46,.15);
  background:radial-gradient(120% 80% at 50% -8%, rgba(201,119,46,.16), transparent 60%), linear-gradient(180deg,#1a1226,#110b1c) }
.imr[data-system='numerology']{ --imr-1:#3a9d8e; --imr-2:#6fd6c4; --imr-glow:rgba(58,157,142,.14);
  background:radial-gradient(120% 80% at 50% -8%, rgba(58,157,142,.15), transparent 60%), linear-gradient(180deg,#0c1c1e,#0a1416) }
.imr[data-system='dream']{ --imr-1:#6a5acd; --imr-2:#a78bfa; --imr-glow:rgba(106,90,205,.16);
  background:radial-gradient(120% 80% at 50% -8%, rgba(106,90,205,.18), transparent 60%), linear-gradient(180deg,#14122e,#0d0b20) }
.imr[data-system='name_analysis']{ --imr-1:#b07cc0; --imr-2:#d6a6e6; --imr-glow:rgba(176,124,192,.15) }
.imr[data-system='auspicious_timing']{ --imr-1:#3a9d6a; --imr-2:#6fd69b; --imr-glow:rgba(58,157,106,.14);
  background:radial-gradient(120% 80% at 50% -8%, rgba(58,157,106,.15), transparent 60%), linear-gradient(180deg,#0c1c14,#0a1610) }
.imr[data-system='daily']{ --imr-1:#caa24a; --imr-2:#e7c87a; --imr-glow:rgba(202,162,74,.15);
  background:radial-gradient(120% 80% at 50% -8%, rgba(202,162,74,.17), transparent 60%), radial-gradient(80% 60% at 50% 120%, rgba(74,108,192,.16), transparent 64%), linear-gradient(180deg,#101428,#0b0e1e) }
/* ── ดวงวันนี้ (daily) bespoke bits ── */
.dly-date{ font-family:var(--serif-en); font-size:24px; color:var(--ink); margin:2px 0 4px }
.dly-score{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px }
.dly-score .imr-pill{ margin-top:0 }
.dly-num{ font-family:var(--serif-en); font-size:34px; color:var(--gold); line-height:1 }
.dly-of{ font-size:13px; color:var(--faint); margin-right:4px }
.dly-lucks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px }
@media (max-width:480px){ .dly-lucks{ grid-template-columns:1fr } }
.dly-luck{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:12px; padding:10px 13px }
.dly-luck-l{ font-size:12px; color:var(--muted); flex:none; min-width:54px }
.dly-chips{ display:flex; flex-wrap:wrap; gap:6px }
.dly-chip{ font-size:12px; color:var(--gold); background:rgba(231,200,122,.1); border:1px solid var(--gold-soft); border-radius:999px; padding:2px 10px }
.dly-chip.num{ font-family:var(--serif-en); font-weight:600 }
.dly-chip.avoid{ color:var(--rose); background:rgba(229,143,176,.08); border-color:rgba(229,143,176,.3) }
.dly-week{ display:flex; gap:6px; justify-content:space-between }
.dly-day{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; background:rgba(255,255,255,.025); border:1px solid var(--line-soft); border-radius:12px; padding:9px 3px }
.dly-wd{ font-size:11px; color:var(--muted) }
.dly-bar{ width:8px; height:46px; border-radius:999px; background:rgba(255,255,255,.06); display:flex; align-items:flex-end; overflow:hidden }
.dly-bar>span{ width:100%; background:linear-gradient(180deg,var(--imr-2),var(--imr-1)); display:block; border-radius:999px }
.dly-day.s-good .dly-bar>span{ background:linear-gradient(180deg,#6fc79b,#3a9d6a) }
.dly-day.s-bad .dly-bar>span{ background:linear-gradient(180deg,#e58fb0,#c05a82) }
.dly-d{ font-size:11px; color:var(--faint) }
/* ════ reading: clickable topics (easy reading) + full technical detail (Myhora-style) ════ */
.rd-topics{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px }
.rd-topic{ font-family:var(--sans); font-size:13px; color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--line-soft); border-radius:999px; padding:7px 14px; cursor:pointer; transition:.2s }
.rd-topic:hover{ color:var(--ink); border-color:var(--imr-2) }
.rd-topic.on{ color:#0a0e1c; background:var(--imr-2); border-color:var(--imr-2); font-weight:500 }
.rd-topic-panel{ background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border:1px solid var(--line-soft); border-radius:14px; padding:15px 17px }
.rd-topic-text{ font-size:14px; color:var(--ink); line-height:1.8; margin-top:4px }
.rd-det{ border:1px solid var(--line-soft); border-radius:12px; margin-bottom:9px; overflow:hidden; background:rgba(255,255,255,.02) }
.rd-det>summary{ cursor:pointer; padding:12px 15px; font-size:13.5px; color:var(--imr-2); font-family:var(--sans); list-style:none; display:flex; align-items:center; justify-content:space-between }
.rd-det>summary::-webkit-details-marker{ display:none }
.rd-det>summary::after{ content:"⌄"; color:var(--faint); font-size:16px; transition:transform .25s }
.rd-det[open]>summary::after{ transform:rotate(180deg) }
.rd-det>summary:hover{ color:var(--ink) }
.rd-det-body{ padding:4px 15px 14px }
.rd-tbl-wrap{ overflow-x:auto }
.rd-tbl{ width:100%; border-collapse:collapse; font-size:12.5px }
.rd-tbl th{ text-align:left; color:var(--faint); font-weight:400; font-size:11px; padding:6px 8px; border-bottom:1px solid var(--line-soft); white-space:nowrap }
.rd-tbl td{ padding:7px 8px; border-bottom:1px solid rgba(255,255,255,.09); color:var(--muted); white-space:nowrap }
.rd-tbl .rd-t-name{ color:var(--ink); font-family:var(--serif-en) }
.rd-tbl tr:last-child td{ border-bottom:none }
.rd-row{ padding:9px 0; border-bottom:1px solid rgba(255,255,255,.09) }
.rd-row:last-child{ border-bottom:none }
.rd-row-h{ font-size:14px; color:var(--ink); margin-bottom:4px }
.rd-row-h b{ font-family:var(--serif-en); font-weight:500 }
.rd-row p{ font-size:14px; color:var(--muted); line-height:1.8 }
.rd-dig{ font-size:11px; color:var(--imr-2); border:1px solid var(--line-soft); border-radius:999px; padding:1px 8px; margin-left:4px }
.rd-now{ color:var(--gold) !important }
.rd-flag{ font-size:10.5px; color:var(--rose); border:1px solid rgba(229,143,176,.3); border-radius:999px; padding:1px 8px }
.rd-tks{ display:grid; grid-template-columns:1fr 1fr; gap:7px }
.rd-tk{ display:flex; justify-content:space-between; gap:8px; background:rgba(255,255,255,.03); border-radius:9px; padding:7px 11px; font-size:12.5px }
.rd-tk-l{ color:var(--muted) }
.rd-tk-v{ color:var(--ink); font-family:var(--serif-en) }
/* ── BaZi (chinese) detail bits ── */
.bazi-tbl th, .bazi-tbl td{ text-align:center }
.bazi-tbl td:first-child, .bazi-tbl th:first-child{ text-align:left }
.bazi-tbl b{ font-family:var(--serif-en); font-size:17px; color:var(--ink) }
.bazi-tbl small{ color:var(--faint); font-size:10.5px }
.bazi-els{ display:flex; flex-direction:column; gap:7px }
.bazi-el{ display:flex; align-items:center; gap:9px }
.bazi-el-l{ width:34px; font-size:12.5px; color:var(--muted); flex:none }
.bazi-el-bar{ flex:1; height:7px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden }
.bazi-el-bar>span{ display:block; height:100%; background:linear-gradient(90deg,var(--imr-1),var(--imr-2)); border-radius:999px }
.bazi-el-n{ font-size:12px; color:var(--ink); width:16px; text-align:right; flex:none }
.rd-now2{ font-size:13px; color:var(--ink); line-height:1.72; margin-top:10px; padding:12px 14px; background:rgba(231,200,122,.06); border:1px solid rgba(231,200,122,.16); border-radius:11px }
.rd-sub{ font-size:11.5px; color:var(--faint); margin-bottom:4px }
.rd-tbl tr.luck-good td:last-child{ color:var(--emerald) }
.rd-tbl tr.luck-bad td:last-child{ color:var(--rose) }
/* ── สมพงษ์ (compatibility) ── */
.imr[data-system='compatibility']{ --imr-1:#c0507e; --imr-2:#e58fb0; --imr-glow:rgba(229,143,176,.15);
  background:radial-gradient(120% 80% at 50% -8%, rgba(229,143,176,.18), transparent 60%), radial-gradient(80% 60% at 50% 120%, rgba(176,124,192,.16), transparent 64%), linear-gradient(180deg,#15101c,#0c0a14) }
.cmp-gauge{ display:flex; align-items:baseline; justify-content:center; gap:5px; margin:8px 0 4px }
.cmp-pair{ font-family:var(--serif-th); font-size:15px; color:var(--ink); margin-top:2px }
.cmp-narr{ font-size:14px; color:var(--muted); line-height:1.82; text-wrap:pretty; margin:14px 2px 2px; padding:14px 16px; background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:14px }
.cmp-dims{ display:flex; flex-direction:column; gap:13px }
.cmp-dim-h{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px }
.cmp-dim-l{ font-family:var(--serif-en); font-size:15px; color:var(--ink) }
.cmp-dim-n{ font-family:var(--serif-en); font-size:17px; color:var(--imr-2) }
.cmp-bar{ display:block; height:8px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden }
.cmp-bar>span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--imr-1),var(--imr-2)) }
.cmp-bar>span.lvl-good{ background:linear-gradient(90deg,#3a9d6a,#6fc79b) }
.cmp-bar>span.lvl-mid{ background:linear-gradient(90deg,#caa24a,#e7c87a) }
.cmp-bar>span.lvl-low{ background:linear-gradient(90deg,#c05a82,#e58fb0) }
.cmp-dim-note{ font-size:12px; color:var(--muted); line-height:1.6; margin-top:6px }
/* ── ปฏิทินไทย (calendar) ── */
.imr[data-system='calendar']{ --imr-1:#4a6cc0; --imr-2:#86a6e6; --imr-glow:rgba(74,108,192,.15);
  background:radial-gradient(120% 80% at 50% -8%, rgba(74,108,192,.16), transparent 60%), radial-gradient(80% 60% at 50% 120%, rgba(108,124,176,.13), transparent 64%), linear-gradient(180deg,#0e1326,#0a0d1c) }
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px }
.cal-title{ font-family:var(--serif-th); font-weight:500; font-size:19px; color:var(--gold) }
.cal-nav{ width:38px; height:38px; border-radius:12px; border:1px solid var(--line-soft); background:rgba(255,255,255,.03); color:var(--imr-2); font-size:20px; line-height:1; cursor:pointer; transition:.2s }
.cal-nav:hover{ border-color:var(--imr-2); color:var(--ink) }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px }
.cal-dow{ text-align:center; font-size:11.5px; color:var(--faint); padding:4px 0 6px }
.cal-cell{ position:relative; min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; padding:6px 2px 5px; border:1px solid var(--line-soft); border-radius:10px; background:rgba(255,255,255,.02); color:var(--ink); cursor:pointer; font:inherit; transition:.18s }
.cal-cell:hover{ border-color:var(--imr-2); background:rgba(134,166,230,.08) }
.cal-cell.cal-empty{ border:none; background:none; cursor:default; min-height:0 }
.cal-cell.sel{ border-color:var(--imr-2); box-shadow:0 0 0 1px var(--imr-2) inset }
.cal-d{ font-family:var(--serif-en); font-size:16px; color:var(--ink); line-height:1 }
.cal-kham{ font-size:10.5px; color:var(--muted); line-height:1.1 }
.cal-cell.cal-phra{ background:rgba(231,200,122,.08); border-color:var(--gold-soft) }
.cal-cell.cal-phra .cal-d{ color:var(--gold) }
.cal-cell.cal-good::after{ content:""; position:absolute; top:5px; right:5px; width:5px; height:5px; border-radius:50%; background:var(--emerald) }
.cal-legend{ display:flex; flex-wrap:wrap; gap:12px; margin:14px 2px 0; font-size:11.5px; color:var(--muted) }
.cal-lg{ position:relative; padding-left:16px }
.cal-lg::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:3px }
.cal-lg-phra::before{ background:rgba(231,200,122,.5); border:1px solid var(--gold-soft) }
.cal-lg-good::before{ background:var(--emerald); border-radius:50% }
.cal-lg-moon{ padding-left:0 }
.cal-lg-moon::before{ display:none }
.cal-detail{ margin-top:14px }
.cal-detail:empty{ display:none }
.cal-detail-h{ font-family:var(--serif-th); font-size:16px; color:var(--gold); margin-bottom:8px }
.cal-drow{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:13px }
.cal-drow:last-child{ border-bottom:none }
.cal-dl{ color:var(--muted); flex:none }
.cal-dv{ color:var(--ink); text-align:right }
.cal-note{ font-size:11px; color:var(--faint); line-height:1.6; margin-top:12px }
/* ── partner sub-form (สมพงษ์) ── */
.partner-grp{ margin-top:4px; padding:13px 14px; border:1px solid var(--line-soft); border-radius:14px; background:rgba(229,143,176,.05) }
.partner-head{ font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--rose); margin-bottom:10px }
.partner-grp .fld{ margin-bottom:10px }
.partner-grp .fld:last-child{ margin-bottom:0 }
.partner-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.partner-row .fld{ margin-bottom:0 }
@media (max-width:420px){ .partner-row{ grid-template-columns:1fr } }
.rd-title{font-family:var(--serif-th); font-weight:500; font-size:22px; margin-bottom:16px; color:var(--gold)}
.rd-p{font-family:var(--serif-th); line-height:1.85; color:var(--ink); margin-bottom:14px; font-size:15.5px}
.rd-box{border:1px solid var(--line); background:rgba(74,94,145,.08); border-radius:12px; padding:16px 18px; margin-bottom:16px}
.rd-box-t{font-size:12.5px; color:var(--gold); letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px}
.rd-chips{display:flex; flex-wrap:wrap; gap:10px}
.rd-chip{display:flex; flex-direction:column; min-width:90px; border:1px solid var(--line-soft); border-radius:10px; padding:9px 14px; background:rgba(6,8,17,.4)}
.rd-chip span{font-size:11.5px; color:var(--muted)} .rd-chip b{font-family:var(--serif-en); font-size:22px; color:var(--ink); font-weight:500; margin-top:2px}
.rd-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px}
.rd-cell{border:1px solid var(--line-soft); border-radius:10px; padding:14px}
.rd-cell-t{font-size:12.5px; color:var(--gold); margin-bottom:6px}
.rd-cell{font-family:var(--serif-th); font-size:14px; line-height:1.7; color:var(--muted)}
.rd-advice{font-family:var(--serif-th); font-size:15.5px; color:var(--gold); border-left:2px solid var(--gold); padding:6px 0 6px 16px; margin:18px 0 6px}
.rd-personal-h{font-family:var(--serif-th); font-weight:500; font-size:19px; color:var(--gold); margin:22px 0 12px; padding-top:18px; border-top:1px solid var(--line-soft)}
.rd-lead{color:var(--ink); font-weight:600}
.rd-p .rd-lead{color:var(--gold)}
.rd-spread{display:grid; gap:12px; margin-bottom:16px}
.rd-card{border:1px solid var(--gold-soft); border-radius:12px; padding:14px 16px; background:rgba(231,200,122,.04)}
.rd-pos{font-size:12px; color:var(--gold); letter-spacing:.06em; text-transform:uppercase}
.rd-name{font-family:var(--serif-th); font-size:18px; font-weight:500; margin:4px 0 6px}
.rd-name span{font-family:var(--serif-en); font-style:italic; color:var(--muted); font-size:14px}
.rd-name em{color:var(--rose); font-style:italic; font-size:14px}
.rd-mean{font-family:var(--serif-th); color:var(--muted); font-size:14.5px; line-height:1.6}
.rd-meter{position:relative; height:30px; border-radius:100px; background:rgba(139,145,173,.18); overflow:hidden; display:flex; align-items:center}
.rd-meter-bar{position:absolute; left:0;top:0;bottom:0; background:linear-gradient(90deg,var(--violet),var(--aqua) 55%,var(--gold)); border-radius:100px}
.rd-meter span{position:relative; margin-left:auto; margin-right:14px; color:#0a0e1c; font-weight:600; font-size:14px; mix-blend-mode:luminosity}
.result-actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}

/* ── LANG TOGGLE ── */
.lang{position:fixed; bottom:24px; right:24px; z-index:80; display:flex; font-family:var(--serif-en); font-size:14px; letter-spacing:.06em;
  border:1px solid var(--gold-soft); border-radius:100px; overflow:hidden; background:rgba(6,8,17,.7); backdrop-filter:blur(8px)}
.lang button{background:none;border:none;color:var(--muted);padding:8px 15px;cursor:pointer;transition:.3s;font:inherit}
.lang button.on{background:var(--gold);color:#0a0e1c}
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:90; background:var(--gold); color:#0a0e1c;
  font-family:var(--sans); font-size:14px; padding:12px 24px; border-radius:100px; opacity:0; transition:.4s; pointer-events:none; box-shadow:0 10px 30px rgba(231,200,122,.3)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
footer{text-align:center; padding:40px 20px 90px; color:var(--faint); font-family:var(--serif-en); font-style:italic; font-size:15px; position:relative; z-index:2}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .cat-grid,.topic-grid{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .stepper{grid-template-columns:repeat(2,1fr)}
  .fan{max-width:560px}
}
@media(max-width:640px){
  nav{padding:0 16px}
  .nav-links{display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; background:rgba(6,8,17,.96); padding:10px; border-bottom:1px solid var(--line-soft)}
  .nav-links.open{display:flex}
  .nav-links button{width:100%; text-align:left}
  .nav-burger{display:inline-grid; place-items:center}
  .stepper-wrap{position:static}
  .stepper{grid-template-columns:1fr 1fr; gap:8px; padding:12px 16px}
  .step .lbl span{display:none}
  .section{padding:36px 16px 80px}
  .cat-grid,.topic-grid,.hist-grid,.rd-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .fan{transform:scale(.66); transform-origin:top center; height:200px; margin-bottom:-40px}
  .modal-body{padding:20px 18px}
  .lang{bottom:16px; right:16px}
}

/* ════════════════════════════════════════════════════════════
   7-item list — ออราเคิลสเปรด / ฝัน / ชื่อ / กรรม / สมพงษ์ / ปฏิทินตาราง / loader เซียมซี
   ════════════════════════════════════════════════════════════ */
/* per-system themes ที่ยังไม่มี */
.imr[data-system='oracle_cards']{ --imr-1:#5b78c4; --imr-2:#9fc0f0; --imr-glow:rgba(127,176,232,.16) }
.imr[data-system='past_life_karma']{ --imr-1:#7a6bc4; --imr-2:#b5a6e8; --imr-glow:rgba(155,139,214,.16) }

/* ── MOON ORACLE spread ── */
.orc-q{ font-family:var(--serif-en); font-style:italic; color:var(--imr-2); font-size:15px; margin-top:6px }
.oracle-spread{ display:grid; grid-template-columns:1fr; gap:16px; margin:8px 0 4px }
@media(min-width:600px){ .oracle-spread{ grid-template-columns:repeat(3,1fr) } }
.ocard{ border:1px solid var(--line-soft); border-radius:16px; padding:20px 18px 18px; text-align:center; opacity:0; animation:popIn .5s ease forwards;
  background:radial-gradient(120% 90% at 50% 0%, var(--imr-glow), transparent 70%), var(--panel) }
.oc-pos{ font-size:11.5px; letter-spacing:.03em; color:var(--imr-2); margin-bottom:10px; min-height:2.4em; display:flex; align-items:center; justify-content:center }
.oc-art{ position:relative; width:94px; height:94px; margin:0 auto 12px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.4)) }
.moon-art{ width:100%; height:100%; display:block }
.oc-sign{ position:absolute; right:-3px; bottom:-3px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:16px;
  color:var(--imr-2); background:rgba(8,11,20,.92); border:1px solid var(--imr-1) }
.oc-name b{ display:block; font-family:var(--serif-th); font-weight:500; font-size:18px; color:var(--ink) }
.oc-name small{ display:block; font-family:var(--serif-en); font-style:italic; color:var(--muted); font-size:12.5px; margin-top:1px }
.oc-kw{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:10px 0 }
.oc-kw span{ font-size:11px; color:var(--imr-2); border:1px solid var(--line-soft); border-radius:999px; padding:2px 9px }
.oc-mean{ font-family:var(--serif-th); font-size:13px; line-height:1.7; color:var(--muted) }
.oc-adv{ margin-top:10px; font-size:12.5px; color:var(--ink); background:var(--imr-glow); border-radius:10px; padding:8px 10px; line-height:1.6 }
.orc-foot{ font-size:11.5px; color:var(--faint); margin-top:14px; text-align:center; font-style:italic }

/* ── DREAM (สไตล์เก่า) ── */
.dream-syms{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px }
.dream-sym{ font-family:var(--serif-th); font-size:14px; color:var(--ink); border:1px solid var(--line-soft); border-radius:999px; padding:4px 13px; display:inline-flex; align-items:center; gap:6px }
.dream-sym i{ font-style:normal; font-size:11px }
.dream-sym.pos{ border-color:rgba(111,199,155,.5) } .dream-sym.pos i{ color:#6fc79b }
.dream-sym.neg{ border-color:rgba(229,143,176,.5) } .dream-sym.neg i{ color:#e58fb0 }
.dream-sym.neu i{ color:var(--faint) }
.dream-nums{ display:flex; flex-wrap:wrap; gap:10px }
.dream-num{ font-family:var(--serif-en); font-weight:600; font-size:22px; min-width:44px; height:44px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--imr-2); border:1px solid var(--imr-1); border-radius:12px; background:var(--imr-glow) }

/* ── NAME (สไตล์เก่า) ── */
.name-big{ font-family:var(--serif-th); font-size:24px; color:var(--ink); margin-top:4px }
.name-sum{ font-size:14px; color:var(--muted); margin-top:6px }
.name-sum b{ font-family:var(--serif-en); color:var(--imr-2); font-size:18px }
.nm-pos{ color:#6fc79b } .nm-neg{ color:#e58fb0 } .nm-neu{ color:var(--gold) }
.rd-dig.nm-pos{ border-color:rgba(111,199,155,.5) } .rd-dig.nm-neg{ border-color:rgba(229,143,176,.5) }
.warn-kala{ background:rgba(229,143,176,.06); border-radius:10px; padding:4px 12px }

/* ── KARMA (เจาะลึก) ── */
.karma-axes{ display:grid; grid-template-columns:1fr; gap:12px }
.karma-axis{ border:1px solid var(--line-soft); border-radius:14px; padding:16px 18px;
  background:radial-gradient(130% 95% at 0% 0%, var(--imr-glow), transparent 60%), var(--panel) }
.karma-axis.karma-ketu{ --imr-1:#8a7fc4; --imr-2:#b9a6f0 }
.karma-axis.karma-rahu{ --imr-1:#5b8fc4; --imr-2:#8fc0f0 }
.karma-axis.karma-saturn{ --imr-1:#7a6a9a; --imr-2:#a596c4 }
.ka-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px }
.ka-planet{ font-family:var(--serif-th); font-weight:500; font-size:16px; color:var(--ink); background:var(--imr-glow); border:1px solid var(--imr-1); border-radius:999px; padding:2px 13px }
.ka-role{ font-size:12px; color:var(--imr-2) }
.ka-house{ font-size:11.5px; color:var(--faint); margin-left:auto }
.ka-intro{ font-family:var(--serif-th); font-size:12.5px; color:var(--faint); line-height:1.65; margin-bottom:7px }
.ka-text{ font-family:var(--serif-th); font-size:14px; color:var(--ink); line-height:1.72 }
.ka-practice{ font-size:12.5px; color:var(--muted); margin-top:9px; padding:8px 11px; background:rgba(255,255,255,.03); border-radius:10px; line-height:1.6 }
.ka-practice b{ color:var(--imr-2) }
.karma-debt{ background:var(--imr-glow); border-radius:10px; padding:6px 13px }

/* ── COMPAT (จัดใหม่) ── */
.cmp-verdict{ display:inline-block; margin-left:10px; font-family:var(--serif-th); font-size:14px; padding:3px 13px; border-radius:999px; vertical-align:middle }
.cmp-verdict.lvl-good{ color:#6fc79b; background:rgba(111,199,155,.12) }
.cmp-verdict.lvl-mid{ color:var(--gold); background:rgba(231,200,122,.12) }
.cmp-verdict.lvl-low{ color:#e58fb0; background:rgba(229,143,176,.12) }
.cmp-meter{ height:8px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; max-width:320px; margin:12px auto 0 }
.cmp-meter>span{ display:block; height:100%; border-radius:999px }
.cmp-meter>span.lvl-good{ background:linear-gradient(90deg,#3a9d6a,#6fc79b) }
.cmp-meter>span.lvl-mid{ background:linear-gradient(90deg,#caa24a,#e7c87a) }
.cmp-meter>span.lvl-low{ background:linear-gradient(90deg,#c05a82,#e58fb0) }
.cmp-pair-l{ color:var(--faint); font-size:12px; margin-right:4px }

/* ── CALENDAR + ฤกษ์ deep table ── */
.cal-summary{ display:grid; gap:8px; margin:6px 0 14px }
.cal-sum-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; font-size:13px }
.cal-sum-l{ font-size:12px; padding:2px 11px; border-radius:999px }
.cal-sum-l.b-good{ color:#6fc79b; background:rgba(111,199,155,.12) }
.cal-sum-l.b-phra{ color:var(--gold); background:rgba(231,200,122,.12) }
.cal-sum-v{ font-family:var(--serif-en); color:var(--ink); letter-spacing:.05em }
.cal-cell{ cursor:default }
.cal-tbl td{ vertical-align:top; font-size:12.5px }
.cal-tbl small{ display:block; color:var(--faint); font-size:10.5px; font-weight:400 }
.cal-tbl tr.r-phra{ background:rgba(231,200,122,.06) }
.cal-tbl tr.r-good{ background:rgba(111,199,155,.05) }
.cal-td-day b{ font-family:var(--serif-en); font-size:14px; color:var(--ink) }
.cal-td-st{ white-space:normal }
.cal-dim{ color:var(--faint) }
.cal-badge{ display:inline-block; font-size:10.5px; padding:1px 8px; border-radius:999px; margin:1px 2px 1px 0; white-space:nowrap }
.cal-badge.b-good{ color:#6fc79b; background:rgba(111,199,155,.12); border:1px solid rgba(111,199,155,.3) }
.cal-badge.b-warn{ color:#e58fb0; background:rgba(229,143,176,.12); border:1px solid rgba(229,143,176,.3) }
.cal-badge.b-phra{ color:var(--gold); background:rgba(231,200,122,.12); border:1px solid var(--gold-soft) }

/* ── LOADER: เขย่ากระบอกเซียมซี ── */
.siamsi-load{ display:none; flex-direction:column; align-items:center; margin-bottom:22px }
.siam-cup{ position:relative; width:74px; height:104px; transform-origin:50% 92%; animation:siamShake 1s ease-in-out infinite }
.siam-tube{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:54px; height:72px; border-radius:9px 9px 13px 13px;
  background:linear-gradient(180deg,#b9863f,#7a5526); border:1px solid #d9a85f; box-shadow:inset 0 7px 11px rgba(0,0,0,.32), 0 5px 16px rgba(0,0,0,.45) }
.siam-tube::after{ content:""; position:absolute; top:0; left:5px; right:5px; height:9px; border-radius:50%; background:rgba(0,0,0,.4) }
.siam-sticks{ position:absolute; bottom:50px; left:50%; transform:translateX(-50%); display:flex; gap:3px; align-items:flex-end; z-index:1 }
.siam-sticks i{ display:block; width:3px; height:30px; border-radius:2px 2px 0 0; background:linear-gradient(180deg,#f3dca0,#caa24a); animation:siamJitter .5s ease-in-out infinite }
.siam-sticks i:nth-child(odd){ height:26px; animation-delay:.12s }
.siam-sticks i:nth-child(3n){ height:34px; animation-delay:.24s }
.siam-sticks i.pop{ height:50px; background:linear-gradient(180deg,#ffe9b0,#e7c87a); box-shadow:0 0 8px rgba(231,200,122,.5); animation:siamPop 1.7s ease-in-out infinite }
@keyframes siamShake{ 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
@keyframes siamJitter{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
@keyframes siamPop{ 0%,68%,100%{transform:translateY(0)} 82%{transform:translateY(-16px)} }

/* ── FREEMIUM gate (ฟรี=สรุป · สมาชิก=เจาะลึก) ── */
.av-gate{ text-align:center; padding:26px 22px; border:1px dashed var(--line-gold,rgba(231,200,122,.32)); border-radius:16px; margin:14px 0 6px;
  background:radial-gradient(120% 100% at 50% 0%, var(--imr-glow,rgba(231,200,122,.1)), transparent 70%) }
.av-gate-ic{ font-size:25px; display:block; margin-bottom:8px; opacity:.85 }
.av-gate-t{ font-family:var(--serif-th); font-size:17px; color:var(--ink); margin-bottom:6px }
.av-gate-d{ font-size:12.5px; color:var(--muted); line-height:1.6; max-width:30em; margin:0 auto 14px }
.av-gate-btn{ font-family:var(--sans,inherit); font-size:13.5px; color:#1a1205; font-weight:500; cursor:pointer; border:none; border-radius:999px; padding:9px 20px;
  background:linear-gradient(180deg,var(--gold-bright,#f3dca0),var(--gold,#e7c87a)); box-shadow:0 6px 18px rgba(231,200,122,.25); transition:.2s }
.av-gate-btn:hover{ transform:translateY(-1px); box-shadow:0 9px 24px rgba(231,200,122,.35) }

/* plan toggle (แพ็กเกจ) ในโปรไฟล์ */
.plan-seg{ display:inline-flex; border:1px solid var(--line-soft); border-radius:999px; padding:3px; gap:2px }
.plan-seg button{ font-family:var(--sans,inherit); font-size:13px; color:var(--muted); background:none; border:none; border-radius:999px; padding:6px 20px; cursor:pointer; transition:.2s }
.plan-seg button.on{ background:linear-gradient(180deg,var(--gold-bright,#f3dca0),var(--gold,#e7c87a)); color:#1a1205; font-weight:500 }
.plan-hint{ display:block; font-size:11.5px; color:var(--faint); margin-top:8px }

/* ── PSYCHOLOGY QUIZ (เฟส B) — cosmic, ไม่เหมือนแบบฟอร์ม ── */
.quiz-modal{ max-width:560px }
.quiz-dots{ display:flex; gap:7px; justify-content:center; margin:2px 0 18px }
.quiz-dot{ width:7px; height:7px; border-radius:50%; background:var(--line-soft); transition:.3s }
.quiz-dot.done{ background:var(--gold-soft) }
.quiz-dot.on{ background:var(--gold); box-shadow:0 0 10px var(--gold-soft); transform:scale(1.25) }
.quiz-intro{ text-align:center; font-family:var(--serif-th); font-size:14px; color:var(--gold-2); line-height:1.7; margin:0 auto 16px; max-width:30em }
.quiz-q{ text-align:center; font-family:var(--serif-th); font-size:20px; color:var(--ink); line-height:1.55; margin:6px auto 22px; max-width:24em }
.quiz-opts{ display:grid; gap:12px; margin-bottom:6px }
.quiz-opts.opts-3{ gap:10px }
.quiz-opts.opts-4{ grid-template-columns:1fr 1fr }
@media(max-width:430px){ .quiz-opts.opts-4{ grid-template-columns:1fr } }
.quiz-opt{ display:flex; align-items:center; gap:14px; text-align:left; width:100%; cursor:pointer;
  font-family:var(--sans); font-size:15.5px; color:var(--ink); padding:16px 20px; border-radius:14px;
  border:1px solid var(--line-soft); background:rgba(231,200,122,.04); transition:.25s }
.quiz-opt:hover{ border-color:var(--gold-soft); background:rgba(231,200,122,.09); transform:translateY(-2px); box-shadow:0 10px 30px rgba(6,8,17,.5) }
.quiz-opt.on{ border-color:var(--gold); background:radial-gradient(120% 130% at 0% 0%, rgba(231,200,122,.16), rgba(167,139,250,.08)); box-shadow:0 0 24px rgba(231,200,122,.18) }
.quiz-opt-g{ font-size:24px; flex:0 0 auto; width:34px; text-align:center; filter:drop-shadow(0 0 8px rgba(231,200,122,.25)) }
.quiz-opt-t{ flex:1 }
.quiz-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px }
.quiz-skip{ background:none; border:none; color:var(--faint); font-family:var(--sans); font-size:13px; cursor:pointer; padding:8px 10px; transition:.2s }
.quiz-skip:hover{ color:var(--muted) }
.quiz-consent{ margin-top:14px; padding-top:13px; border-top:1px solid var(--line-soft); font-size:11px; color:var(--faint); line-height:1.65; text-align:center }

/* ════════════════════════════════════════════════════════════
   LANDING (pre-login gate) — cosmic, theme-consistent
   ════════════════════════════════════════════════════════════ */
.landing-veil{ position:fixed; inset:0; z-index:120; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(74,94,145,.34), transparent 70%),
    radial-gradient(50% 36% at 12% 8%, var(--violet-soft), transparent 64%),
    radial-gradient(46% 40% at 90% 14%, var(--aqua-soft), transparent 62%),
    radial-gradient(120% 120% at 50% 30%, #0a0e1c 0%, #060811 78%);
  overflow-y:auto; }
.landing-veil.show{ display:flex; }
body.pre-auth{ overflow:hidden; }
.lp-aura{ position:absolute; width:520px; height:520px; top:-120px; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, var(--gold-soft), transparent 68%); filter:blur(40px); opacity:.5; pointer-events:none; }
.lp-card{ position:relative; width:100%; max-width:560px; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:40px 34px 30px; backdrop-filter:blur(14px);
  box-shadow:0 30px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.lp-brand{ font-family:var(--serif-en); font-size:30px; letter-spacing:.04em; color:var(--gold); margin-bottom:14px; }
.lp-brand .v{ color:var(--ink); }
.lp-title{ font-family:var(--serif-th); font-weight:600; font-size:27px; line-height:1.25; margin-bottom:12px; color:var(--ink); }
.lp-lead{ color:var(--muted); font-size:15px; line-height:1.7; max-width:46ch; margin:0 auto 22px; }
.lp-lead b{ color:var(--gold-2); font-weight:600; }
.lp-feats{ list-style:none; text-align:left; display:grid; gap:12px; margin:0 auto 26px; max-width:430px; }
.lp-feats li{ display:flex; gap:13px; align-items:flex-start; }
.lp-ic{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:#241803; font-size:18px; line-height:1;
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols2",var(--sans);
  background:linear-gradient(150deg, #f3dd9e, var(--gold-2)); box-shadow:0 3px 12px var(--gold-soft); }
.lp-feats div b{ display:block; font-size:14.5px; color:var(--ink); margin-bottom:1px; font-weight:600; }
.lp-feats div span{ display:block; font-size:12.5px; color:var(--faint); line-height:1.5; }
.lp-actions{ display:flex; flex-direction:column; gap:10px; max-width:340px; margin:0 auto 12px; }
.lp-google{ display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.lp-g{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:#fff; color:#4285f4; font-weight:800; font-family:Arial,sans-serif; font-size:14px; }
.lp-fb[disabled]{ opacity:.42; cursor:not-allowed; }
.lp-fbic{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:#1877f2; color:#fff; font-weight:800; font-family:Georgia,'Times New Roman',serif; font-size:15px; line-height:1; }
.lp-dev{ background:none; border:none; color:var(--faint); font-size:12px; cursor:pointer;
  text-decoration:underline dotted; padding:4px; margin-bottom:8px; }
.lp-dev:hover{ color:var(--muted); }
.lp-note{ color:var(--faint); font-size:11.5px; line-height:1.6; max-width:38ch; margin:6px auto 0; }
@media (max-width:520px){ .lp-card{ padding:30px 20px 24px; } .lp-title{ font-size:23px; } }

/* plan status (subscription) in profile modal — real Stripe state (db mode) */
.plan-status{ margin-top:6px; }
.ps-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ps-badge{ font-size:13px; padding:4px 13px; border-radius:100px; background:rgba(139,145,173,.14);
  color:var(--muted); border:1px solid var(--line-soft); }
.ps-badge.ps-pro{ background:linear-gradient(150deg, #f3dd9e, var(--gold-2)); color:#241803; border:none; font-weight:600; }
.ps-note{ display:block; margin-top:8px; font-size:12px; color:var(--faint); line-height:1.5; }

/* ภาพรวมรายด้านต่อเดือน — แถวเดียวต่อด้าน: พลัง + วันเด่น (รวมร่างจาก powerBlock+card grid เดิม) */
.mh-wrap{ margin-bottom:22px; }
.mh-ic{ color:var(--gold); font-size:15px; line-height:1; }
.mh2-list{ display:flex; flex-direction:column; margin-top:6px; }
.mh2{ padding:15px 2px 16px; border-top:1px solid var(--line-soft); }
.mh2:first-child{ border-top:none; padding-top:4px; }
.mh2-top{ display:flex; align-items:center; gap:10px; }
.mh2-name{ flex:0 0 76px; font-family:var(--serif-th); font-weight:600; font-size:15px; color:var(--ink); }
.mh2-track{ flex:1; height:8px; border-radius:100px; background:rgba(139,145,173,.16); overflow:hidden; }
.mh2-fill{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,var(--gold-2),var(--gold));
  transform-origin:left; animation:mh2grow .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes mh2grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.mh2-lv{ flex:0 0 auto; min-width:50px; text-align:right; font-size:12px; color:var(--gold-2); white-space:nowrap; }
/* สีประจำด้าน (glyph + แถบพลัง) — แทน side-stripe เดิม */
.mh-career .mh-ic{ color:var(--amber); } .mh-love .mh-ic{ color:var(--magenta); }
.mh-health .mh-ic{ color:var(--aqua); } .mh-luck .mh-ic{ color:var(--violet); }
.mh-career .mh2-fill{ background:linear-gradient(90deg,#b98a36,var(--amber)); }
.mh-love   .mh2-fill{ background:linear-gradient(90deg,#a85a86,var(--magenta)); }
.mh-health .mh2-fill{ background:linear-gradient(90deg,#379683,var(--aqua)); }
.mh-luck   .mh2-fill{ background:linear-gradient(90deg,#6f5bc0,var(--violet)); }
.mh2-sub{ display:flex; align-items:center; gap:10px; margin:11px 0 9px; font-size:11.5px; }
.mh2-yam{ color:var(--gold-2); }
.mh2-cnt{ margin-left:auto; color:var(--faint); }
.mh2-days{ display:flex; flex-wrap:wrap; gap:7px; }
.mh2-chip{ display:inline-flex; align-items:baseline; gap:6px; padding:4px 9px 5px; border-radius:9px;
  border:1px solid var(--line-soft); background:rgba(139,145,173,.05); transition:transform .15s ease, box-shadow .15s ease; }
.mh2-chip b{ font-weight:500; font-size:13px; color:var(--ink); }
.mh2-chip i{ font-style:normal; font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mh2-chip.is-top{ border-color:transparent; background:linear-gradient(155deg, rgba(243,221,158,.18), rgba(231,200,122,.09));
  box-shadow:inset 0 0 0 1px var(--gold-soft); }
.mh2-chip.is-top b{ color:var(--gold-2); font-weight:600; }
.mh2-chip.is-top i{ color:var(--gold-2); opacity:.85; }
.mh2-chip:hover{ transform:translateY(-1px); box-shadow:inset 0 0 0 1px var(--gold-soft), 0 4px 12px rgba(0,0,0,.25); }
/* วันพีคสุดของแต่ละด้าน (★ ดีที่สุด) — ให้ตัดสินใจได้เร็วโดยไม่ต้องไล่อ่านทุกวัน */
.mh2-chip.is-peak{ background:linear-gradient(155deg, rgba(243,221,158,.30), rgba(231,200,122,.15)); box-shadow:inset 0 0 0 1.5px var(--gold-2), 0 0 16px rgba(231,200,122,.13); }
.mh2-chip.is-peak b{ color:var(--gold-2); }
.mh2-star{ font-style:normal; color:var(--gold); font-size:10px; line-height:1; }
.mh2-best{ font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--gold); white-space:nowrap; letter-spacing:.01em; }
/* hero — บอกคุณค่าทันทีเหนือปฏิทิน */
.mh-hero{ text-align:center; margin:2px 4px 18px; }
.mh-hero-h{ font-family:var(--serif-th); font-weight:600; font-size:18px; line-height:1.45; color:var(--ink); text-wrap:balance; }
.mh-hero-sub{ font-family:var(--sans); font-size:12.5px; line-height:1.65; color:var(--muted); margin-top:7px; max-width:42ch; margin-inline:auto; }
.mh2-note{ margin-top:11px; font-size:11.5px; color:var(--muted); line-height:1.55; }
.mh2-empty{ margin-top:10px; font-size:12.5px; color:var(--faint); }
@media (prefers-reduced-motion: reduce){ .mh2-chip,.mh2-fill{ transition:none; } .mh2-chip:hover{ transform:none; } }

/* ปุ่มเพิ่มลงปฏิทิน (.ics export) */
.mh-cal{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:16px 0 2px; text-align:center; }
.mh-cal-hint{ font-size:11.5px; color:var(--faint); line-height:1.5; }

/* home section — ภาพรวมเดือนนี้ (พลัง + ปฏิทิน) บนหน้าแรก */
.home-hl{ max-width:980px; margin:8px auto 34px; }
.home-hl .hl-head{ font-family:var(--serif-th); font-weight:600; font-size:21px; color:var(--gold); text-align:center; margin-bottom:16px; letter-spacing:.01em; }

/* ════ choose-prediction page polish — adapted from UX pass 2026-06-26 ════ */
.path-bridge{ max-width:760px; margin:-16px auto 40px; padding:18px 24px; text-align:center;
  border-top:1px solid var(--gold-soft); border-bottom:1px solid var(--violet-soft);
  background:linear-gradient(90deg, transparent, rgba(231,200,122,.05), var(--violet-soft), transparent); }
.path-bridge-line{ font-family:var(--serif-th); font-size:19px; color:var(--ink); line-height:1.55; }
.path-bridge-sub{ font-size:13.5px; color:var(--muted); line-height:1.7; margin-top:6px; max-width:46em; margin-inline:auto; }
/* category cards: samples pinned to bottom + recommended badge + select animation */
.catc{ display:flex; flex-direction:column; align-items:center; }
.catc.recommended{ border-color:rgba(231,200,122,.46); box-shadow:0 0 0 1px rgba(231,200,122,.08), 0 16px 50px rgba(6,8,17,.45); }
.rec-badge{ position:absolute; top:14px; right:14px; z-index:2; font-size:11px; color:#241803; font-weight:500;
  background:linear-gradient(150deg,#f3dd9e,var(--gold-2)); border-radius:100px; padding:4px 11px; box-shadow:0 6px 18px var(--gold-soft); }
.catc .samples{ margin-top:auto; padding-top:18px; color:var(--ac, var(--gold)); font-size:12.5px; line-height:1.55; opacity:.72; position:relative; transition:.32s; }
.catc:hover .samples, .catc.chosen .samples{ opacity:1; }
.catc.chosen{ transform:translateY(-8px) scale(1.03); border-color:var(--ac, var(--gold)); box-shadow:0 24px 70px rgba(6,8,17,.75), 0 0 38px var(--ac-soft, var(--gold-soft)); }
.catc.chosen::before{ opacity:1; }
.catc.dimmed{ opacity:.34; transform:scale(.98); }
/* 2-digit step numbers + subtle progress line */
.step .no{ font-size:13px; }
.stepper{ position:relative; }
.stepper::before{ content:""; position:absolute; left:50px; right:50px; top:50%; height:1px; transform:translateY(-50%); z-index:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--line), transparent); }
.stepper::after{ content:""; position:absolute; left:50px; top:50%; height:1px; z-index:0; pointer-events:none;
  width:calc(100% - 100px); transform-origin:left center; transform:translateY(-50%) scaleX(var(--progress,0));
  background:linear-gradient(90deg, var(--gold), rgba(167,139,250,.7)); box-shadow:0 0 14px var(--gold-soft); transition:transform .5s ease; }
.step{ position:relative; z-index:1; }

/* ════ Pro benefits CTA — landing-style membership card (แทน invite เส้นปะ) ════ */
.pro-cta{ position:relative; overflow:hidden; max-width:560px; margin:24px auto 6px; padding:30px 30px 24px; text-align:center;
  border-radius:20px; border:1px solid var(--gold-soft);
  background:linear-gradient(160deg, rgba(231,200,122,.07), var(--panel) 42%); backdrop-filter:blur(10px);
  box-shadow:0 24px 70px rgba(6,8,17,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.pro-cta-aura{ position:absolute; top:-90px; left:50%; transform:translateX(-50%); width:360px; height:200px; pointer-events:none;
  background:radial-gradient(circle, var(--gold-soft), transparent 68%); filter:blur(30px); opacity:.5; }
.pro-cta-eyebrow{ position:relative; font-family:var(--serif-en); font-style:italic; letter-spacing:.05em; color:var(--gold); font-size:15px; }
.pro-cta-title{ position:relative; font-family:var(--serif-th); font-weight:600; font-size:23px; color:var(--ink); margin:4px 0 9px; }
.pro-cta-lead{ position:relative; font-family:var(--serif-th); font-size:14px; color:var(--muted); line-height:1.65; max-width:36ch; margin:0 auto 20px; }
.pro-benefits{ position:relative; list-style:none; margin:0 auto 22px; padding:0; display:grid; gap:13px; text-align:left; max-width:430px; }
.pro-benefits li{ display:flex; gap:13px; align-items:flex-start; }
.pb-ic{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#241803; font-size:16px; line-height:1;
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols2",var(--sans); background:linear-gradient(150deg,#f3dd9e,var(--gold-2)); box-shadow:0 3px 11px var(--gold-soft); }
.pro-benefits div b{ display:block; font-size:14.5px; color:var(--ink); font-weight:600; margin-bottom:1px; }
.pro-benefits div span{ display:block; font-size:12.5px; color:var(--faint); line-height:1.5; }
.pro-cta-foot{ position:relative; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.pro-price b{ font-family:var(--serif-en); font-size:30px; color:var(--gold); }
.pro-price span{ font-size:13px; color:var(--muted); margin-left:2px; }
.pro-cta-btn{ font-size:15px; padding:11px 34px; }
.pro-trial{ position:relative; margin-top:14px; font-size:12px; color:var(--faint); }
@media(max-width:520px){ .pro-cta{ padding:24px 20px; } .pro-cta-title{ font-size:20px; } }

/* ════════ a11y + layout fixes (UX audit 2026-07-01) ════════ */
/* H2 — กัน horizontal scroll จาก full-bleed bg layers (starfield/aurora) */
/* color-scheme:dark = native control (date/time picker, scrollbar, autofill) เรนเดอร์มืดสม่ำเสมอ
   — แก้ native date picker "มองไม่เห็น/เพี้ยน" บนธีมมืด (เดิมตั้งแค่ที่ input → document ยัง light-scheme) */
html{ overflow-x:clip; color-scheme:dark; }
/* placeholder อ่านออก (เดิม default จาง) */
input::placeholder, textarea::placeholder{ color:var(--faint); opacity:1; }
/* C1 — visible keyboard focus (cosmic gold ring) บนทุก interactive · เดิมมีแค่ input */
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible,
.catc:focus-visible, .topicc:focus-visible, .mh2-chip:focus-visible, .user-chip:focus-visible,
.rd-topic:focus-visible, .imr-invite-cta:focus-visible, .pro-cta-btn:focus-visible{
  outline:2px solid var(--gold-2); outline-offset:2px; border-radius:8px;
}
/* C2 — tap target ≥ 44px (เดิม nav 41 · avatar 40 · lang 34 · close 38) */
.nav-today, .nav-links button{ min-height:44px; display:inline-flex; align-items:center; }
.user-chip{ min-height:44px; }
.modal-close{ width:44px; height:44px; display:grid; place-items:center; }
.nav-burger{ min-width:44px; min-height:44px; }
.lang button{ min-height:40px; }
/* M1 — ดันตัวอักษร label ที่อ่านจริงเป็น ≥12px (เดิม 11px · audit readable-font-size) */
.rd-tbl th, .dly-wd, .dly-d, .cal-note, .quiz-consent{ font-size:12px; }
/* บทอ่านยาว → Anuphan (humanist sans อ่านง่าย · Gap เลือก) · headings/hero/labels คง serif-th */
.imr-lead, .imr-story p, .tl-v, .rd-p, .rd-cell, .rd-mean, .rd-advice,
.ka-text, .ka-intro, .oc-mean, .cmp-pair, .hc-excerpt{ font-family:var(--read-th); }