:root {
  color-scheme: light;
  --paper: #f5f1e8;
  --paper-deep: #ebe4d6;
  --surface: #fffdf8;
  --surface-soft: #f0ece3;
  --ink: #161b2e;
  --ink-soft: #586071;
  --muted: #8c918f;
  --line: rgba(24, 32, 47, .12);
  --night: #091e24;
  --night-2: #123a3c;
  --night-3: #1b5550;
  --jade: #3fc496;
  --jade-soft: #dff2e8;
  --gold: #ffc35a;
  --gold-deep: #e59a27;
  --coral: #ee725e;
  --shadow: 0 28px 80px rgba(19, 32, 35, .12);
  --shadow-soft: 0 13px 36px rgba(19, 32, 35, .07);
}

:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #081416;
  --paper-deep: #0c1a1c;
  --surface: #102124;
  --surface-soft: #14292b;
  --ink: #f5f2e9;
  --ink-soft: #bcc8c4;
  --muted: #80918e;
  --line: rgba(220, 243, 235, .12);
  --jade-soft: #153a34;
  --shadow: 0 28px 80px rgba(0, 0, 0, .28);
  --shadow-soft: 0 13px 36px rgba(0, 0, 0, .2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(255,195,90,.11), transparent 24rem),
    radial-gradient(circle at 92% 28%, rgba(63,196,150,.08), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(30,56,56,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(30,56,56,.025) 1px,transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom,#000 0,transparent 72%);
}
button, select { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
svg { display: block; }
h1,h2,h3,p { margin-top: 0; }
.app-shell,.topbar-inner,.footer-inner { width:min(2520px,calc(100% - clamp(32px,5.2vw,150px))); margin-inline:auto; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* Header */
.topbar { position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 85%,transparent); backdrop-filter:blur(22px) saturate(1.25); }
.topbar-inner { min-height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.brand { display:inline-flex; align-items:center; gap:12px; width:max-content; color:var(--ink); text-decoration:none; }
.brand-mark { position:relative; width:40px; height:40px; overflow:hidden; border-radius:14px 14px 14px 4px; background:linear-gradient(145deg,var(--night-3),#0f5d50); box-shadow:0 9px 24px rgba(14,91,75,.25); }
.brand-mark::before { content:""; position:absolute; width:19px; height:19px; left:10px; top:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 16px rgba(255,195,90,.35); }
.brand-mark::after { content:""; position:absolute; width:20px; height:20px; left:17px; top:7px; border-radius:50%; background:#0d5148; }
.brand-mark i { position:absolute; z-index:2; width:4px; height:4px; right:7px; bottom:7px; border-radius:50%; background:rgba(255,255,255,.8); }
.brand-name { font-size:18px; font-weight:950; letter-spacing:-.035em; }
.brand-name span { color:var(--coral); }
.main-nav { display:flex; align-items:center; gap:5px; padding:5px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface) 87%,transparent); box-shadow:var(--shadow-soft); }
.main-nav a { padding:9px 17px; border-radius:999px; color:var(--ink-soft); font-size:11px; font-weight:800; text-decoration:none; transition:.22s ease; }
.main-nav a.active,.main-nav a:hover { background:var(--night); color:#fff; }
.top-actions { justify-self:end; display:flex; align-items:center; gap:15px; }
.thai-time { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:10px; white-space:nowrap; }
.thai-time i { width:7px; height:7px; border-radius:50%; background:#54ce99; box-shadow:0 0 0 5px rgba(84,206,153,.13); }
.theme-button { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); cursor:pointer; box-shadow:var(--shadow-soft); transition:transform .25s ease,background .25s ease; }
.theme-button:hover { transform:rotate(15deg) scale(1.04); }
.theme-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.moon-icon { display:none; }
[data-theme="night"] .sun-icon { display:none; }
[data-theme="night"] .moon-icon { display:block; }

/* Immersive hero */
.lunar-hero { --mx:55%; --my:20%; position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(260px,.7fr) minmax(335px,.82fr); gap:clamp(18px,2.3vw,38px); min-height:650px; margin-top:30px; padding:clamp(34px,3.6vw,60px); overflow:hidden; border:1px solid rgba(199,243,226,.12); border-radius:42px; background:
  radial-gradient(circle at var(--mx) var(--my),rgba(87,210,161,.19),transparent 28%),
  radial-gradient(circle at 80% 100%,rgba(42,128,115,.32),transparent 34%),
  linear-gradient(135deg,#071b21 0%,#0b292d 47%,#0b3a38 100%);
  color:#fff; box-shadow:0 35px 100px rgba(7,27,33,.25); transition:background-position .2s ease; }
.lunar-hero::before { content:""; position:absolute; z-index:-4; inset:0; opacity:.22; background-image:linear-gradient(rgba(183,232,214,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(183,232,214,.075) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(115deg,#000,transparent 66%); }
.lunar-hero::after { content:""; position:absolute; z-index:-3; width:700px; height:700px; left:38%; top:-420px; border:1px solid rgba(255,255,255,.06); border-radius:50%; box-shadow:0 0 0 80px rgba(255,255,255,.012),0 0 0 160px rgba(255,255,255,.009); }
.hero-aura { position:absolute; z-index:-2; left:36%; bottom:-55%; width:52%; height:80%; border-radius:50%; background:rgba(28,114,101,.34); filter:blur(55px); transform:rotate(-18deg); }
.star-field { position:absolute; inset:0; pointer-events:none; }
.star-field i { position:absolute; z-index:-1; width:3px; height:3px; border-radius:50%; background:#eafbf4; box-shadow:0 0 9px #fff; opacity:.58; animation:twinkle 3s ease-in-out infinite; }
.star-field i:nth-child(1){left:8%;top:18%}.star-field i:nth-child(2){left:31%;top:11%;animation-delay:-1s}.star-field i:nth-child(3){left:49%;top:22%;animation-delay:-2s}.star-field i:nth-child(4){left:67%;top:10%;width:2px;height:2px}.star-field i:nth-child(5){left:91%;top:18%;animation-delay:-1.4s}.star-field i:nth-child(6){left:73%;top:69%;width:2px;height:2px}.star-field i:nth-child(7){left:41%;top:76%;animation-delay:-.4s}.star-field i:nth-child(8){left:19%;top:64%;width:2px;height:2px}
.hero-copy { position:relative; z-index:5; display:flex; flex-direction:column; align-items:flex-start; padding:7px 0 35px; }
.hero-eyebrow { width:100%; display:flex; align-items:center; justify-content:space-between; gap:15px; color:rgba(230,246,240,.56); font-size:10px; font-weight:800; letter-spacing:.08em; }
.hero-eyebrow span { display:flex; align-items:center; gap:9px; }
.hero-eyebrow span i { width:7px; height:7px; border-radius:50%; background:var(--jade); box-shadow:0 0 0 6px rgba(63,196,150,.11); }
.hero-eyebrow b { padding:6px 10px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:rgba(255,255,255,.48); font-size:9px; }
.hero-question { margin:auto 0 9px; color:var(--gold); font-size:13px; font-weight:900; }
.hero-copy h1 { max-width:590px; margin:0; color:#fff; font-size:clamp(54px,5vw,84px); font-weight:850; line-height:.99; letter-spacing:-.065em; text-wrap:balance; }
.hero-lunar { min-height:29px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:13px; color:rgba(230,246,240,.67); font-size:12px; }
.hero-lunar > i { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.26); }
.hero-lunar b:empty { display:none; }
.hero-lunar b { padding:5px 9px; border-radius:999px; background:rgba(255,195,90,.12); color:var(--gold); font-size:9px; }
.hero-status { display:flex; align-items:center; min-height:79px; margin-top:35px; padding:14px 20px 14px 14px; border:1px solid rgba(255,255,255,.1); border-radius:19px; background:rgba(255,255,255,.055); backdrop-filter:blur(14px); }
.countdown-ring { --progress:50%; width:50px; height:50px; display:grid; place-items:center; margin-right:12px; border-radius:50%; background:conic-gradient(var(--gold) var(--progress),rgba(255,255,255,.1) 0); }
.countdown-ring::before { content:""; width:39px; height:39px; border-radius:50%; background:#0c2a2e; }
.countdown-ring span { position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; }
.countdown-copy,.phase-copy { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:5px; }
.countdown-copy > span,.phase-copy > span { grid-column:1/-1; color:rgba(224,243,236,.47); font-size:9px; }
.countdown-copy strong { color:var(--gold); font-size:30px; line-height:1; }
.countdown-copy small { color:#fff; font-size:10px; font-weight:800; }
.status-divider { width:1px; height:38px; margin:0 20px; background:rgba(255,255,255,.11); }
.phase-copy strong { grid-column:1/-1; margin-top:2px; color:#fff; font-size:12px; }
.answer-actions { display:flex; gap:9px; margin-top:20px; }
.answer-button { min-height:49px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 17px; border:1px solid rgba(255,255,255,.15); border-radius:14px; background:rgba(255,255,255,.065); color:#fff; font-size:11px; font-weight:850; cursor:pointer; backdrop-filter:blur(9px); transition:.22s ease; }
.answer-button.primary { border-color:var(--gold); background:var(--gold); color:#24251f; box-shadow:0 12px 28px rgba(255,195,90,.16); }
.answer-button:hover { transform:translateY(-3px); background:rgba(255,255,255,.13); }
.answer-button.primary:hover { background:#ffd17a; }
.answer-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.celestial-stage { position:relative; z-index:2; display:grid; place-items:center; min-width:0; }
.moon-halo { position:absolute; width:225px; height:225px; border-radius:50%; background:rgba(255,195,90,.08); box-shadow:0 0 80px rgba(255,195,90,.15),0 0 0 42px rgba(255,255,255,.018); }
.moon-disc { position:relative; z-index:3; width:164px; height:164px; overflow:hidden; border-radius:50%; background:radial-gradient(circle at 34% 30%,#ffecb5 0,#ffc860 46%,#efa238 100%); box-shadow:0 0 70px rgba(255,194,83,.3),inset -18px -15px 27px rgba(158,86,17,.18); animation:moonFloat 6s ease-in-out infinite; }
.moon-disc::after { content:""; position:absolute; inset:-8px -8px -8px 51%; border-radius:50%; background:#0c2c30; box-shadow:-7px 0 18px rgba(8,29,34,.28); transition:.5s ease; }
.moon-disc[data-phase="waning"]::after { inset:-8px 51% -8px -8px; box-shadow:7px 0 18px rgba(8,29,34,.28); }
.moon-disc[data-day="15"]::after { transform:translateX(110%); }
.moon-disc[data-phase="waning"][data-day="14"]::after,.moon-disc[data-phase="waning"][data-day="15"]::after { inset:-4px; transform:none; background:#0b292d; box-shadow:inset 13px 0 25px rgba(255,195,90,.09); }
.moon-disc > i { position:absolute; z-index:1; border-radius:50%; background:rgba(149,84,19,.13); }
.moon-disc > i:nth-child(1){width:18px;height:18px;left:36px;top:31px}.moon-disc > i:nth-child(2){width:28px;height:28px;left:60px;bottom:27px}.moon-disc > i:nth-child(3){width:10px;height:10px;left:22px;bottom:56px}
.orbit { position:absolute; border:1px solid rgba(210,241,229,.1); border-radius:50%; animation:orbitRotate 24s linear infinite; }
.orbit-one { width:330px; height:330px; }
.orbit-two { width:430px; height:430px; animation-direction:reverse; animation-duration:35s; }
.orbit i { position:absolute; width:7px; height:7px; left:50%; top:-4px; border-radius:50%; background:var(--jade); box-shadow:0 0 12px var(--jade); }
.orbit-two i { left:auto; right:13%; top:8%; width:4px; height:4px; background:var(--gold); box-shadow:0 0 10px var(--gold); }
.moon-caption { position:absolute; right:0; bottom:65px; padding-left:13px; border-left:1px solid rgba(255,255,255,.14); color:rgba(229,246,239,.42); font-size:8px; line-height:1.7; }
.moon-caption b { color:rgba(255,255,255,.74); font-size:9px; }

.upcoming-panel { position:relative; z-index:4; align-self:stretch; display:flex; min-width:0; flex-direction:column; padding:clamp(24px,2.3vw,34px); border:1px solid rgba(255,255,255,.13); border-radius:30px; background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.045)); box-shadow:0 22px 60px rgba(0,0,0,.12); backdrop-filter:blur(18px); }
.planner-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section-label { color:#16896f; font-size:9px; font-weight:950; letter-spacing:.14em; }
.section-label.light { color:#79d5b4; }
.planner-head h2 { margin:6px 0 0; color:#fff; font-size:clamp(23px,2vw,31px); letter-spacing:-.045em; }
.planner-head a { color:rgba(236,250,244,.45); font-size:9px; font-weight:800; text-decoration:none; white-space:nowrap; }
.planner-head a span { margin-left:3px; color:var(--gold); font-size:14px; }
.upcoming-track { display:flex; flex-direction:column; gap:7px; }
.upcoming-card { position:relative; display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:13px; align-items:center; min-height:86px; padding:11px 13px; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(1,16,20,.16); color:#fff; cursor:pointer; transition:.22s ease; }
.upcoming-card:hover { transform:translateX(-4px); border-color:rgba(255,195,90,.28); background:rgba(255,255,255,.1); }
.upcoming-date { display:grid; place-items:center; align-content:center; width:54px; height:57px; border-radius:13px; background:rgba(255,255,255,.08); }
.upcoming-date strong { color:var(--gold); font-size:23px; line-height:1; }
.upcoming-date span { margin-top:3px; color:rgba(255,255,255,.48); font-size:7px; }
.upcoming-copy { min-width:0; }
.up-index { display:flex; align-items:center; gap:7px; color:rgba(232,247,241,.38); font-size:7px; }
.up-index i { width:3px; height:3px; border-radius:50%; background:var(--jade); }
.upcoming-card h3 { margin:5px 0 1px; overflow:hidden; color:#fff; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.upcoming-card p { margin:0; overflow:hidden; color:rgba(230,245,239,.48); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.up-special { display:block; margin-top:2px; color:var(--gold); font-size:7px; font-weight:850; }
.upcoming-arrow { color:rgba(255,255,255,.28); font-size:14px; transition:.2s ease; }
.upcoming-card:hover .upcoming-arrow { color:var(--gold); transform:translateX(2px); }
.today-status { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:17px; border-top:1px solid rgba(255,255,255,.1); color:rgba(235,249,243,.4); font-size:8px; }
.today-status strong { color:#fff; font-size:9px; text-align:right; }
.hero-architecture { position:absolute; z-index:0; left:0; right:0; bottom:-1px; height:85px; opacity:.22; }
.hero-architecture::before { content:""; position:absolute; left:0; right:0; bottom:0; height:22px; background:#06171c; }
.hero-architecture i { position:absolute; bottom:20px; width:52px; height:35px; border-radius:50% 50% 0 0; background:#06171c; }
.hero-architecture i::before { content:""; position:absolute; left:50%; bottom:27px; width:2px; height:32px; background:#06171c; transform:translateX(-50%); }
.hero-architecture i::after { content:""; position:absolute; left:50%; bottom:54px; width:10px; height:10px; border:2px solid #06171c; border-bottom:0; transform:translateX(-50%) rotate(45deg); }
.hero-architecture i:nth-child(1){left:4%;transform:scale(.7)}.hero-architecture i:nth-child(2){left:19%;transform:scale(1.1)}.hero-architecture i:nth-child(3){left:47%;transform:scale(.8)}.hero-architecture i:nth-child(4){right:22%;transform:scale(1.2)}.hero-architecture i:nth-child(5){right:5%;transform:scale(.65)}

/* Utility ribbon */
.trust-ribbon { position:relative; z-index:8; display:grid; grid-template-columns:repeat(3,1fr) auto; align-items:center; gap:12px; width:calc(100% - 70px); min-height:104px; margin:-28px auto 0; padding:17px 20px; border:1px solid var(--line); border-radius:23px; background:color-mix(in srgb,var(--surface) 92%,transparent); box-shadow:var(--shadow); backdrop-filter:blur(20px); }
.trust-ribbon > div { display:flex; align-items:center; gap:13px; min-width:0; padding:5px 14px; border-right:1px solid var(--line); }
.trust-icon { min-width:45px; color:#11856b; font-size:22px; font-weight:950; }
.trust-ribbon > div:nth-child(n+2) .trust-icon { font-size:11px; }
.trust-ribbon p { display:flex; flex-direction:column; margin:0; }
.trust-ribbon strong { font-size:10px; }
.trust-ribbon small { margin-top:2px; color:var(--muted); font-size:8px; }
.trust-ribbon > a { display:flex; align-items:center; gap:12px; padding:12px 15px; border-radius:13px; background:var(--night); color:#fff; font-size:9px; font-weight:850; text-decoration:none; }
.trust-ribbon > a span { color:var(--gold); font-size:13px; }

/* Calendar */
.calendar-section { padding:115px 0 105px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:32px; }
.heading-copy h2 { margin:7px 0 7px; font-size:clamp(48px,5vw,78px); line-height:.94; letter-spacing:-.07em; }
.heading-copy h2 span { margin-left:11px; color:#13866d; }
.heading-copy p { margin:0; color:var(--muted); font-size:11px; }
.calendar-tools { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.today-button { display:flex; align-items:center; gap:7px; padding:5px 10px; border:0; border-radius:8px; background:transparent; color:#12846b; font-size:9px; font-weight:850; cursor:pointer; }
.today-button:hover { background:var(--jade-soft); }
.today-button i { width:6px; height:6px; border-radius:50%; background:var(--jade); }
.calendar-controls { display:flex; gap:7px; }
.icon-button,.select-wrap select { height:48px; border:1px solid var(--line); background-color:var(--surface); color:var(--ink); box-shadow:var(--shadow-soft); cursor:pointer; }
.icon-button { width:48px; border-radius:14px; font-weight:900; transition:.2s ease; }
.icon-button:hover { border-color:var(--night); background:var(--night); color:#fff; transform:translateY(-2px); }
.select-wrap select { appearance:none; min-width:150px; padding:0 40px 0 15px; border-radius:14px; background-image:linear-gradient(45deg,transparent 50%,#13866d 50%),linear-gradient(135deg,#13866d 50%,transparent 50%); background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px; background-size:5px 5px; background-repeat:no-repeat; font-size:11px; font-weight:850; }
.select-wrap.year-select select { min-width:125px; }
.calendar-layout { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:18px; align-items:start; }
.calendar-layout > * { min-width:0; }
.calendar-card,.month-panel { overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--surface); box-shadow:var(--shadow); }
.calendar-card { padding:26px; }
.calendar-title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:2px 4px 20px; }
.calendar-title-row > div:first-child { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:10px; }
.calendar-kicker { grid-column:1/-1; margin-bottom:3px; color:#16896f!important; font-size:8px!important; font-weight:900; letter-spacing:.08em; }
.calendar-title-row strong { font-size:25px; letter-spacing:-.035em; }
.calendar-title-row > div:first-child > span:last-child { color:var(--muted); font-size:9px; }
.legend { display:flex; gap:15px; color:var(--muted); font-size:8px; }
.legend span { display:flex; align-items:center; gap:6px; }
.legend i { width:8px; height:8px; border-radius:50%; }
.legend .holy { background:#178c72; box-shadow:0 0 0 4px rgba(23,140,114,.1); }
.legend .today { border:2px solid var(--coral); }
.weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.weekdays { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.weekdays span { padding:13px 4px; color:var(--muted); text-align:center; font-size:8px; font-weight:850; }
.weekdays span:first-child { color:var(--coral); }
.calendar-grid { padding-top:8px; }
.calendar-day { position:relative; min-width:0; min-height:91px; margin:3px; padding:10px; border:1px solid transparent; border-radius:15px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; transition:.2s ease; }
.calendar-day.empty { opacity:0; pointer-events:none; }
.calendar-day:not(.empty):hover { z-index:2; transform:translateY(-3px); border-color:var(--line); background:var(--surface-soft); box-shadow:var(--shadow-soft); }
.calendar-day .number { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; font-size:13px; font-weight:900; }
.calendar-day .lunar-mini { display:block; margin-top:10px; overflow:hidden; color:var(--muted); font-size:7.5px; white-space:nowrap; text-overflow:ellipsis; }
.calendar-day.is-holy { border-color:rgba(21,136,109,.1); background:linear-gradient(145deg,var(--jade-soft),color-mix(in srgb,var(--jade-soft) 35%,transparent)); }
.calendar-day.is-holy .number { background:#11866c; color:#fff; box-shadow:0 7px 17px rgba(17,134,108,.22); }
.calendar-day.is-holy .lunar-mini { color:#10735e; font-weight:850; }
[data-theme="night"] .calendar-day.is-holy .lunar-mini { color:#75d1af; }
.calendar-day.is-holy::after { content:""; position:absolute; width:6px; height:6px; right:10px; top:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(255,195,90,.12); }
.calendar-day.is-today { outline:2px solid var(--coral); outline-offset:-2px; }
.calendar-day.is-today::before { content:"วันนี้"; position:absolute; right:7px; bottom:6px; color:var(--coral); font-size:6px; font-weight:900; }
.month-panel { position:sticky; top:100px; }
.month-panel-head { position:relative; isolation:isolate; min-height:125px; display:flex; align-items:flex-end; justify-content:space-between; padding:25px; overflow:hidden; background:linear-gradient(140deg,var(--night),var(--night-2)); color:#fff; }
.panel-orbit { position:absolute; z-index:-1; width:190px; height:190px; right:-70px; top:-86px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 30px rgba(255,255,255,.015),0 0 0 60px rgba(255,255,255,.01); }
.month-panel-head span:not(.panel-orbit) { display:block; margin-bottom:4px; color:rgba(255,255,255,.5); font-size:8px; }
.month-panel-head strong { font-size:18px; }
.month-panel-head b { display:grid; place-items:center; min-width:45px; height:32px; padding:0 10px; border-radius:999px; background:var(--gold); color:#25251e; font-size:9px; }
.holy-list-item { display:grid; grid-template-columns:45px minmax(0,1fr) auto; gap:13px; align-items:center; width:100%; min-height:79px; padding:13px 20px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; cursor:pointer; transition:.18s ease; }
.holy-list-item:hover { padding-left:25px; background:var(--jade-soft); }
.date-box { text-align:center; }
.date-box strong { display:block; color:#16866d; font-size:23px; line-height:1; }
.date-box span { color:var(--muted); font-size:7px; }
.holy-list-item h3 { margin:0 0 2px; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.holy-list-item p { margin:0; overflow:hidden; color:var(--muted); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.holy-list-item .special { display:block; margin-top:2px; color:var(--coral); font-size:7px; font-weight:900; }
.list-arrow { color:var(--muted); }
.panel-note { display:grid; grid-template-columns:23px 1fr; gap:10px; padding:18px 20px; background:var(--surface-soft); }
.panel-note > span { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--jade-soft); color:#13836a; font-size:9px; font-weight:900; }
.panel-note p { margin:0; color:var(--muted); font-size:7.5px; line-height:1.65; }

/* Editorial guide */
.guide-section { position:relative; isolation:isolate; display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; min-height:440px; margin-bottom:25px; padding:clamp(46px,5vw,78px); overflow:hidden; border-radius:36px; background:linear-gradient(135deg,#0a1d24,#0d3536 67%,#175044); color:#fff; box-shadow:0 30px 80px rgba(8,31,35,.2); }
.guide-section::before { content:""; position:absolute; z-index:-2; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(110deg,#000,transparent 60%); }
.guide-copy { align-self:center; }
.guide-copy h2 { margin:10px 0 18px; font-size:clamp(43px,4vw,67px); line-height:1.04; letter-spacing:-.055em; }
.guide-copy h2 em { color:var(--gold); font-style:normal; }
.guide-copy p { max-width:440px; margin:0; color:rgba(231,247,240,.58); font-size:11px; line-height:1.8; }
.practice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-self:center; }
.practice-grid article { min-height:240px; padding:24px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:rgba(255,255,255,.055); backdrop-filter:blur(10px); transition:.25s ease; }
.practice-grid article:hover { transform:translateY(-6px); border-color:rgba(255,195,90,.24); background:rgba(255,255,255,.09); }
.practice-grid article > span { color:rgba(255,255,255,.3); font-size:9px; }
.practice-icon { width:44px; height:44px; display:grid; place-items:center; margin:43px 0 18px; border-radius:14px; background:rgba(255,195,90,.13); color:var(--gold); font-size:20px; }
.practice-grid h3 { margin:0 0 7px; font-size:17px; }
.practice-grid p { margin:0; color:rgba(231,247,240,.48); font-size:8px; line-height:1.65; }
.guide-moon { position:absolute; z-index:-1; width:380px; height:380px; left:-230px; bottom:-270px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.014),0 0 0 110px rgba(255,255,255,.01); }
.data-note { display:flex; align-items:baseline; gap:25px; margin-bottom:80px; padding:21px 24px; border-left:3px solid var(--gold); border-radius:0 14px 14px 0; background:rgba(255,195,90,.08); }
.data-note strong { flex:0 0 auto; font-size:10px; }
.data-note p { margin:0; color:var(--muted); font-size:8px; line-height:1.75; }

/* Footer and feedback */
footer { border-top:1px solid var(--line); }
.footer-inner { min-height:105px; display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:center; color:var(--muted); font-size:9px; }
.footer-inner p { margin:0; }
.footer-inner .brand-mark { width:33px; height:33px; border-radius:11px 11px 11px 4px; }
.footer-inner .brand-mark::before { width:15px; height:15px; left:8px; top:8px; }
.footer-inner .brand-mark::after { width:17px; height:17px; left:13px; top:6px; }
.footer-inner .brand-name { font-size:14px; }
.day-dialog { width:min(440px,calc(100% - 28px)); padding:36px; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--surface); color:var(--ink); box-shadow:0 38px 110px rgba(4,17,21,.45); }
.day-dialog::backdrop { background:rgba(4,17,21,.76); backdrop-filter:blur(9px); }
.dialog-close { position:absolute; z-index:3; right:16px; top:16px; width:35px; height:35px; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:20px; cursor:pointer; }
.dialog-visual { position:relative; height:125px; display:grid; place-items:center; margin:-36px -36px 29px; overflow:hidden; background:linear-gradient(145deg,var(--night),var(--night-2)); }
.dialog-orbit { position:absolute; width:155px; height:155px; border:1px solid rgba(255,255,255,.11); border-radius:50%; box-shadow:0 0 0 27px rgba(255,255,255,.018); }
.dialog-moon { position:relative; width:66px; height:66px; overflow:hidden; border-radius:50%; background:var(--gold); box-shadow:0 0 38px rgba(255,195,90,.28); }
.dialog-moon::after { content:""; position:absolute; width:67px; height:67px; left:32px; border-radius:50%; background:var(--night-2); }
.dialog-label { color:#14856b; font-size:8px; font-weight:950; letter-spacing:.13em; }
.day-dialog h2 { margin:7px 0 5px; font-size:29px; letter-spacing:-.04em; }
.day-dialog > p { color:var(--muted); font-size:12px; }
.dialog-badge { min-height:23px; margin:17px 0 23px; color:var(--coral); font-size:10px; font-weight:900; }
.dialog-action { width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:14px; background:#117e68; color:#fff; font-weight:850; cursor:pointer; }
.toast { position:fixed; z-index:100; left:50%; bottom:25px; display:flex; align-items:center; gap:10px; padding:12px 17px; border-radius:14px; background:var(--night); color:#fff; box-shadow:var(--shadow); opacity:0; transform:translate(-50%,20px); pointer-events:none; transition:.25s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast span { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--jade); }
.toast p { margin:0; font-size:9px; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }

@keyframes moonFloat { 0%,100%{transform:translateY(-5px) rotate(-2deg)}50%{transform:translateY(7px) rotate(2deg)} }
@keyframes orbitRotate { to{transform:rotate(360deg)} }
@keyframes twinkle { 0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.85;transform:scale(1.25)} }

@media (min-width:1700px) {
  .lunar-hero { min-height:700px; }
  .calendar-layout { grid-template-columns:minmax(0,1fr) 420px; }
  .calendar-day { min-height:101px; }
}

@media (min-width:2200px) {
  .lunar-hero { grid-template-columns:minmax(0,1.05fr) minmax(400px,.75fr) minmax(480px,.78fr); min-height:760px; padding:72px; }
  .hero-copy h1 { max-width:760px; font-size:100px; }
  .moon-disc { width:205px; height:205px; }
  .moon-halo { width:280px; height:280px; }
  .orbit-one { width:410px; height:410px; }
  .orbit-two { width:530px; height:530px; }
  .upcoming-card { min-height:98px; }
  .calendar-layout { grid-template-columns:minmax(0,1fr) 480px; }
  .calendar-day { min-height:120px; }
  .guide-section { min-height:520px; }
}

@media (max-width:1250px) {
  .lunar-hero { grid-template-columns:minmax(0,1fr) minmax(280px,.75fr); min-height:auto; }
  .hero-copy { min-height:530px; }
  .celestial-stage { position:absolute; z-index:1; width:35%; height:420px; left:43%; top:75px; opacity:.86; }
  .upcoming-panel { grid-column:1/-1; }
  .upcoming-track { display:grid; grid-template-columns:repeat(4,1fr); }
  .upcoming-card { grid-template-columns:44px minmax(0,1fr); }
  .upcoming-date { width:44px; height:51px; }
  .upcoming-arrow { display:none; }
  .today-status { margin-top:17px; }
}

@media (max-width:1020px) {
  .main-nav { display:none; }
  .topbar-inner { grid-template-columns:1fr 1fr; }
  .trust-ribbon { width:calc(100% - 34px); grid-template-columns:repeat(3,1fr); }
  .trust-ribbon > a { grid-column:1/-1; justify-content:center; }
  .trust-ribbon > div:nth-child(3) { border-right:0; }
  .calendar-layout { grid-template-columns:1fr; }
  .month-panel { position:static; display:grid; grid-template-columns:1fr 1.35fr; }
  .month-panel-head,.panel-note { grid-column:1; }
  .month-list { grid-column:2; grid-row:1/3; }
  .guide-section { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .app-shell,.topbar-inner,.footer-inner { width:min(2520px,calc(100% - 24px)); }
  .topbar-inner { min-height:70px; }
  .brand-mark { width:35px; height:35px; border-radius:12px 12px 12px 4px; }
  .brand-name { font-size:15px; }
  .thai-time { max-width:110px; overflow:hidden; text-overflow:ellipsis; font-size:8px; }
  .theme-button { width:37px; height:37px; }
  .lunar-hero { display:block; margin-top:18px; padding:28px; border-radius:29px; }
  .hero-copy { min-height:520px; padding:0 0 26px; }
  .hero-eyebrow b { display:none; }
  .hero-question { margin:auto 0 8px; }
  .hero-copy h1 { max-width:480px; padding-right:15px; font-size:clamp(42px,11vw,59px); }
  .celestial-stage { width:230px; height:230px; left:auto; right:-37px; top:65px; opacity:.72; }
  .moon-disc { width:110px; height:110px; }
  .moon-halo { width:155px; height:155px; }
  .orbit-one { width:205px; height:205px; }
  .orbit-two { width:285px; height:285px; }
  .moon-caption { display:none; }
  .hero-status { margin-top:27px; }
  .upcoming-panel { padding:23px; border-radius:23px; }
  .upcoming-track { grid-template-columns:repeat(2,1fr); }
  .trust-ribbon { grid-template-columns:1fr; gap:0; width:calc(100% - 20px); margin-top:-18px; padding:14px 17px; }
  .trust-ribbon > div { border-right:0; border-bottom:1px solid var(--line); padding:11px 5px; }
  .trust-ribbon > div:nth-child(3) { border-bottom:0; }
  .trust-ribbon > a { grid-column:auto; margin-top:10px; }
  .calendar-section { padding:82px 0 78px; }
  .section-heading { display:block; }
  .heading-copy h2 { font-size:52px; }
  .heading-copy h2 span { display:block; margin:4px 0 0; }
  .calendar-tools { align-items:stretch; margin-top:23px; }
  .today-button { align-self:flex-end; }
  .calendar-controls { display:grid; grid-template-columns:42px 1fr 1fr 42px; }
  .icon-button { width:42px; height:45px; }
  .select-wrap select,.select-wrap.year-select select { width:100%; min-width:0; height:45px; padding-left:10px; font-size:9px; }
  .calendar-card { padding:10px 6px 16px; border-radius:21px; }
  .calendar-title-row { padding:13px 8px 13px; }
  .calendar-title-row strong { font-size:20px; }
  .calendar-kicker,.legend { display:none; }
  .weekdays span { padding:10px 2px; font-size:7px; }
  .calendar-day { min-height:62px; margin:1px; padding:5px 3px; border-radius:10px; }
  .calendar-day .number { width:25px; height:25px; font-size:10px; }
  .calendar-day .lunar-mini { margin-top:4px; font-size:6px; }
  .calendar-day.is-holy::after,.calendar-day.is-today::before { display:none; }
  .month-panel { display:block; }
  .guide-section { gap:40px; min-height:auto; padding:42px 25px; border-radius:27px; }
  .practice-grid { grid-template-columns:1fr; }
  .practice-grid article { min-height:155px; }
  .practice-icon { margin:23px 0 13px; }
  .data-note { display:block; margin-bottom:55px; }
  .data-note p { margin-top:7px; }
  .footer-inner { grid-template-columns:1fr; gap:10px; padding:30px 0; }
}

@media (max-width:480px) {
  .top-actions { gap:8px; }
  .thai-time { max-width:72px; }
  .lunar-hero { padding:23px; }
  .hero-copy { min-height:500px; }
  .celestial-stage { right:-61px; top:-5px; }
  .hero-copy h1 { font-size:40px; }
  .hero-lunar { max-width:275px; font-size:10px; }
  .hero-status { width:100%; padding:12px; }
  .countdown-ring { width:45px; height:45px; }
  .countdown-ring::before { width:35px; height:35px; }
  .countdown-copy strong { font-size:26px; }
  .status-divider { margin:0 13px; }
  .answer-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .answer-button { min-width:0; width:100%; }
  .upcoming-track { grid-template-columns:1fr; }
  .upcoming-card { grid-template-columns:48px minmax(0,1fr) auto; }
  .upcoming-date { width:48px; }
  .upcoming-arrow { display:block; }
  .calendar-controls { gap:4px; grid-template-columns:39px minmax(0,1fr) minmax(0,1fr) 39px; }
  .icon-button { width:39px; }
  .select-wrap select,.select-wrap.year-select select { padding-right:24px; background-position:calc(100% - 12px) 19px,calc(100% - 7px) 19px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}