:root {
  --bg: #180606;
  --bg-soft: #260b0b;
  --panel: #fffaf8;
  --panel-2: #fff3ef;
  --ink: #201614;
  --muted: #756763;
  --brand: #a20c0c;
  --brand-dark: #760808;
  --gold: #d5a12e;
  --gold-soft: #fff1c8;
  --line: #ead9d3;
  --blue: #1a58a8;
  --green: #23864f;
  --theme-top: #4c0909;
  --theme-bottom: #0e0505;
  --theme-glow: rgba(213, 161, 46, 0.2);
  --theme-title: #ffe08b;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Th Sarabun New", "Noto Sans Thai", Tahoma, Arial, sans-serif;
  background-color: #070417; /* deep space base */
}
/* ── Cosmic night sky: deep space + multi-galaxy nebula + twinkling starfield ── */
body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -3;
  pointer-events: none;
  /* --neb-1/2/3 are set per birth-day (traditional Thai day colors) by
     applyLunarBirthTheme(); the fallbacks here = default multi-galaxy (no chart yet). */
  background:
    radial-gradient(40% 34% at 20% 22%, var(--neb-1, rgba(126, 58, 222, 0.36)), transparent 72%),
    radial-gradient(44% 36% at 82% 28%, var(--neb-2, rgba(40, 144, 230, 0.26)), transparent 72%),
    radial-gradient(46% 40% at 76% 84%, var(--neb-3, rgba(226, 60, 152, 0.26)), transparent 74%),
    radial-gradient(34% 28% at 30% 88%, rgba(28, 196, 178, 0.16), transparent 72%),
    radial-gradient(28% 24% at 50% 50%, rgba(213, 161, 46, 0.12), transparent 70%);
  animation: nebulaDrift 38s ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.16) translate3d(-2.5%, -2%, 0); }
}
#cosmosStars { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Photographic nebula sky (above the gradient fallback at -3, below the stars at -1).
   Shown only once the image loads (body.has-sky); hue-rotated per birth-day color. */
#skyImage {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: #070417 left center / cover no-repeat;
  opacity: 0; transition: opacity 1.4s ease, filter 1.1s ease;
  filter: hue-rotate(var(--sky-rotate, 0deg)) saturate(var(--sky-sat, 1.05));
  animation: skyDrift 80s ease-in-out infinite;
}
body.has-sky #skyImage { opacity: 1; }
@keyframes skyDrift { 0%,100% { transform: scale(1.06) translate(0,0); } 50% { transform: scale(1.11) translate(-1.6%, 1.2%); } }
@media (prefers-reduced-motion: reduce) { #skyImage { animation: none; transform: scale(1.04); } }
.cosmo-star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  animation: cosmoTwinkle var(--dur, 4s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.cosmo-star.bright { background: #fff6d6; box-shadow: 0 0 6px 1px rgba(255, 246, 214, 0.85); }
@keyframes cosmoTwinkle {
  0%   { opacity: 0.1; transform: scale(0.6); }
  100% { opacity: var(--peak, 0.9); transform: scale(1.12); }
}
.cosmo-sun {
  position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.95), 0 0 22px 7px rgba(255,238,190,0.6), 0 0 34px 10px rgba(213,161,46,0.3);
  animation: sunPulse 5.5s ease-in-out infinite alternate;
}
.cosmo-sun::before, .cosmo-sun::after { content: ""; position: absolute; left: 50%; top: 50%; }
.cosmo-sun::before { width: 50px; height: 2px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, rgba(255,246,214,0.85), transparent); }
.cosmo-sun::after { width: 2px; height: 50px; transform: translate(-50%, -50%); background: linear-gradient(180deg, transparent, rgba(255,246,214,0.85), transparent); }
@keyframes sunPulse { 0% { opacity: 0.78; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .cosmo-star { animation: none; opacity: var(--peak, 0.7); }
  .zw-spin { animation: none; }
  .cosmo-sun { animation: none; }
}
.zw-spin { transform-box: fill-box; transform-origin: center; animation: zwSpin 120s linear infinite; }
@keyframes zwSpin { to { transform: rotate(360deg); } }

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh; /* iOS: 100vh รวมแถบ URL ที่ยุบได้ → กระโดด/ล้นก้น */
  padding: 18px;
  /* status bar = black-translucent → เนื้อหาวาดใต้รอยบาก: กันชนขอบจอ (env = 0 บนเครื่องไม่มีรอยบาก) */
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-left: calc(18px + env(safe-area-inset-left));
  padding-right: calc(18px + env(safe-area-inset-right));
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #fff9eb;
  margin: 0 auto 14px;
  max-width: 1680px;
}

.topbar h1 {
  font-size: clamp(25px, 2.2vw, 38px);
  line-height: 1.12;
  margin: 2px 0 0;
  color: var(--theme-title);
  letter-spacing: 0;
}

.eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
}

.top-actions,
.rules-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Main tab bar (lives above workspace so it's first in DOM) ── */
.main-tabs {
  max-width: 1680px;
  margin: 0 auto 10px;
}

/* ── Sidebar compact bar (mobile only, shown after calculation) ── */
.sidebar-compact-bar {
  display: none; /* shown via JS on mobile */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-bottom: 8px;
}
.sidebar-compact-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--brand);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(320px, 410px) 1fr;
  gap: 14px;
  max-width: 1680px;
  margin: 0 auto;
}

/* คุณหมอ 2026-07-19: ไม่ collapse ฟอร์มบน desktop — แถบซ้ายแสดงยาวเต็ม (ดู .sidebar ล่าง) */
.sidebar,
.results {
  min-width: 0;
}

.panel,
.tool-panel,
.table-wrap {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow-x: auto;            /* wide สมผุส tables (15 cols) scroll instead of being clipped/แหว่ง */
  -webkit-overflow-scrolling: touch;
}

.panel {
  padding: 16px;
  margin-bottom: 14px;
}

.panel-head,
.section-title,
.summary-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Collapsible sidebar panels (ข้อมูลกำเนิด / วันประสงค์) */
.panel.collapsible > .panel-head { cursor: pointer; user-select: none; }
.panel.collapsible > .panel-head h2::after {
  content: "▾";
  margin-left: 8px;
  font-size: 0.75em;
  opacity: 0.6;
  display: inline-block;
  transition: transform 0.2s ease;
}
.panel.collapsible.collapsed > .panel-head h2::after { transform: rotate(-90deg); }
.panel.collapsible.collapsed > *:not(.panel-head) { display: none; }
.panel.collapsible.collapsed { padding-bottom: 16px; }

.section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

h2,
h3 {
  margin: 0;
  color: var(--brand);
  line-height: 1.2;
}

.panel h2 {
  font-size: 22px;
}

.form-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

label {
  display: grid;
  gap: 6px;
  color: #2a1814;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  color: #231514;
  background: #fff;
  border: 1px solid #d8c8c1;
  border-radius: 6px;
  padding: 10px 12px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(213, 161, 46, 0.18);
}

.time-now-field {
  position: relative;
  display: block;
}

.time-now-field input {
  padding-right: 48px;
}

.time-now-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  color: #111;
  background: transparent;
  cursor: pointer;
}

.time-now-btn:hover,
.time-now-btn:focus-visible {
  background: rgba(213, 161, 46, 0.16);
}

.time-now-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date-select-row {
  display: grid;
  grid-template-columns: minmax(78px, 0.55fr) minmax(150px, 1.25fr) minmax(142px, 1fr);
  gap: 8px;
}

.split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* minmax(0,..) กัน grid blowout: 1fr มี min-width:auto → เนื้อหากว้างดันกริดล้น .panel */
  gap: 10px;
}
.split-row > label { min-width: 0; }
.split-row input { min-width: 0; max-width: 100%; }

.map-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* กัน grid blowout จากปุ่ม "ใช้ลิงก์ Google Maps" (ลาตินไม่ตัดคำ) ที่ดัน .panel ล้น = "แหว่ง" */
  gap: 8px;
}
.map-actions > button { min-width: 0; }
/* selects ในฟอร์มด้านซ้ายต้องหดได้ ไม่ดันแผงล้น (เขต/อำเภอชื่อยาว เช่น "เขตป้อมปราบศัตรูพ่าย") */
.sidebar select { min-width: 0; max-width: 100%; }

.map-helper {
  font-size: 14px;
  line-height: 1.45;
}

.map-picker-modal {
  align-items: center;
  background: rgba(10, 8, 4, 0.72);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 1100;
}

.map-picker-modal.active {
  display: flex;
}

.map-picker-dialog {
  background: #fffdfb;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  max-height: calc(100vh - 36px);
  max-width: 1180px;
  overflow: auto;
  padding: 18px;
  width: min(1180px, 100%);
}

.map-picker-head,
.map-picker-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.map-picker-head h2 {
  color: var(--brand);
  margin: 0;
}

.map-picker-head p {
  color: var(--muted);
  margin: 4px 0 0;
}

.map-picker-body {
  display: grid;
  gap: 14px;
  grid-template-columns: 280px minmax(0, 1fr);
  margin-top: 14px;
}

.map-picker-side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.map-picker-side input {
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  padding: 10px 12px;
  width: 100%;
}

.map-picker-side textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  min-height: 90px;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}

.map-picker-map {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 560px;
  overflow: hidden;
}

.map-picker-actions {
  justify-content: flex-start;
  margin-top: 14px;
}

.birth-map-marker {
  background: transparent;
  border: 0;
}

.birth-map-marker span {
  background: #d93a2f;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  display: block;
  height: 28px;
  transform: rotate(-45deg);
  width: 28px;
}

.birth-map-marker span::after {
  background: #fff;
  border-radius: 50%;
  content: "";
  display: block;
  height: 8px;
  margin: 7px;
  width: 8px;
}

.solid-btn,
.ghost-btn,
.icon-btn,
.tab {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
}

.solid-btn {
  color: #fff;
  background: var(--brand);
  padding: 10px 16px;
}

.solid-btn:hover {
  background: var(--brand-dark);
}

.ghost-btn,
.icon-btn {
  color: var(--brand);
  background: var(--gold-soft);
  padding: 10px 14px;
}
/* ปุ่มสถานะซิงค์ประวัติ (ประวัติผูกดวง) — ให้เห็นชัดว่า cloud ซิงค์อยู่/พัง */
#historySyncBtn.sync-ok { color: #1f7a3d; }
#historySyncBtn.sync-off { color: #9a6654; }
#historySyncBtn.sync-error { color: #b30b0b; background: #fdeeee; border: 1px solid #e79a9a; font-weight: 800; }

/* ติดตั้งแอพ (PWA install) */
.install-btn {
  background: linear-gradient(135deg, #2e7d4f, #1f5e3a);
  box-shadow: 0 2px 10px rgba(31, 94, 58, 0.35);
}
.install-btn:hover {
  background: linear-gradient(135deg, #2a724a, #194d30);
}
.install-btn[hidden] {
  display: none !important;
}

.icon-btn {
  padding: 6px 10px;
  min-height: 44px; /* WCAG touch target — was ~28px, too small to tap on mobile */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wide {
  width: 100%;
  margin-top: 14px;
}

.compact {
  padding: 8px 12px;
}

.chip,
.badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--brand);
  font-family: "Noto Serif Thai", serif;
  background: var(--gold-soft);
  border: 1px solid #edd184;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 15px;
  font-weight: 800;
}

.badge-subtle {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  opacity: 0.85;
}

.chip-button {
  cursor: pointer;
  font-family: inherit;
}

.chip-button:hover,
.chip-button:focus-visible {
  color: #fff;
  background: var(--brand);
  outline: none;
}

.intl-check,
.transit-diff-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
/* คลิกได้เฉพาะกล่อง+ตัวอักษร — ไม่ให้พื้นที่ว่างขวามือเป็น label (กันกดโดนติ๊กถูกโดยไม่ตั้งใจ) */
.intl-check { width: fit-content; }
.transit-diff-check {
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
}
/* กรอบจัดกลุ่ม option (สถานที่ + ตั้งค่าการคำนวณ) ให้แยกชัดจากวันที่/เวลา */
.form-subgroup {
  margin-top: 16px;
  padding: 12px 12px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}
.form-subgroup > label { margin-top: 10px; }
.form-subgroup > label:first-of-type { margin-top: 2px; }
.form-subgroup-title {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: 6px;
  text-transform: none;
}
.intl-check input[type="checkbox"],
.transit-diff-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}
.transit-loc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.transit-loc-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--brand);
}
.history-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  color: #8a6a4a;
}
.history-pager .hp-info {
  margin-right: auto;
}
.history-pager .hp-btn {
  min-width: 30px;
  height: 28px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  color: var(--brand);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.history-pager .hp-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.history-pager .hp-btn:not(:disabled):hover {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.history-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: var(--gold-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
}
.history-search {
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.history-search:focus {
  outline: none;
  border-color: var(--gold);
}
.history-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  /* คุณหมอ 2026-07-19: เลิก cap ความสูง — โชว์ประวัติผูกดวงยาวเต็ม ๆ ลงมา ไม่บีบ scroll ในกล่องเล็ก ดูง่าย */
  padding-right: 4px;
}

.history-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 8px;
}

.history-open {
  min-width: 0;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 2px;
  cursor: pointer;
}

.history-open strong {
  display: block;
  color: var(--brand);
}

.history-open span {
  color: var(--muted);
  font-size: 14px;
}

.history-open small {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  color: #8f6407;
  background: #fff4c9;
  border: 1px solid #edd184;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 800;
}

.history-delete {
  border: 1px solid #edd184;
  background: var(--gold-soft);
  color: var(--brand);
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 800;
  cursor: pointer;
}

.history-delete:hover,
.history-delete:focus-visible {
  background: #ffd96b;
}

.tabs {
  display: flex;
  flex-wrap: wrap; /* จอแคบ (เช่น Fold7 ~344px): 5 แท็บห่อบรรทัดแทนล้น/ถูกตัด — แท็บแอดมิน/กฎ ไม่หาย */
  gap: 6px;
  background: rgba(255, 250, 248, 0.88);
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.tab {
  color: var(--brand);
  background: transparent;
  padding: 10px 18px;
}

.tab.active {
  color: #fff;
  background: var(--brand);
}

.tab-page {
  display: none;
}

.tab-page.active {
  display: block;
}

.summary-band {
  background: var(--panel);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 12px;
  font-family: "Noto Serif Thai", serif;
  box-shadow: var(--shadow);
}

.summary-band h2 {
  font-size: 30px;
  margin: 2px 0 6px;
}

.summary-band p {
  margin: 0;
}
#summaryBirth { line-height: 1.95; font-size: 16px; }
.summary-band .sb-label {
  display: inline-block;
  min-width: 128px;
  color: var(--brand);
  font-weight: 700;
  opacity: 0.95;
}
.summary-band .summary-sky {
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.6;
  opacity: 0.85;
  white-space: normal;
}

.age-box {
  min-width: 210px;
  border: 1px solid #efc9c9;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
}

.age-box span {
  display: block;
  color: var(--muted);
  font-size: 15px;
}

.age-box strong {
  color: var(--brand);
  font-size: 24px;
}

.chart-grid {
  display: grid;
  grid-template-columns: minmax(440px, 1.2fr) minmax(300px, 0.8fr);
  gap: 12px;
}

.tool-panel {
  padding: 14px;
  min-width: 0;
}

.large-chart {
  grid-row: span 2;
}

.wide-panel {
  grid-column: 1 / -1;
}

.chart-host {
  min-height: 440px;
  display: grid;
  place-items: center;
}

.chart-host.small {
  min-height: 300px;
}

.chart-host.biwheel svg {
  max-width: 800px; /* wider to fit transit outer ring */
  width: 100%;
}

.chart-host svg {
  width: 100%;
  max-width: 620px;
  height: auto;
}

.chart-inline-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(239, 204, 115, 0.65);
}

.compact-title {
  margin-bottom: 6px;
}

/* ตัวเลข/ตัวอักษรในราศีจักรทั้งหมดใช้ฟอนต์ไทยที่โหลดจริง (Noto Serif Thai)
   ไม่ตกไปฟอนต์ระบบ (Tahoma/sans) ที่อ่านยากและต่างกันในแต่ละเครื่อง */
.planet-glyph,
.sign-label,
.house-label,
.thai-sign-label,
.thai-sign-number,
.thai-bhava-label,
.thai-planet-glyph,
.thai-asc-glyph,
.transit-outer-glyph,
.tanuset-cross,
.degree-label {
  font-family: "Noto Serif Thai", serif;
}

.planet-glyph {
  font-size: 26px;
  font-weight: 800;
}

.sign-label {
  font-size: 18px;
  font-weight: 800;
}

.house-label {
  fill: var(--green);
  font-size: 16px;
  font-weight: 800;
}

.thai-sign-label {
  fill: #111;
  font-size: 21px;
  font-weight: 900;
}

.thai-sign-number {
  fill: #ff245f;
  font-size: 22px;
}

.thai-bhava-label {
  fill: var(--green);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.kanok-border {
  opacity: 0.95;
}

.thai-planet-glyph,
.thai-asc-glyph {
  font-size: 38px;
  /* คุณหมอ 2026-07-09: เลขในวงเอาแบบภาพตัวอย่าง ไม่หนาไป — 900→700 (THAI_GLYPH_INK วัดที่ 900 = เผื่อกว้างกว่าจริงเล็กน้อย ปลอดภัย) */
  font-weight: 700;
}

.thai-asc-glyph {
  font-size: 42px;
}

.tanuset-cross {
  fill: #b20d0d;
  font-size: 17px;
  font-weight: 800;
}

.degree-label {
  fill: #3f3533;
  font-size: 13px;
}

.taksa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 0;
  margin-top: 12px;
}

.taksa-cell {
  min-height: 70px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
  border-right: 1px solid #efcc73;
  border-bottom: 1px solid #efcc73;
}

.taksa-grid {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.taksa-grid-inline {
  max-width: 520px;
}

.taksa-cell {
  min-height: 82px;
  border-color: #222;
  background: #fffdfb;
  font-family: "Noto Serif Thai", serif;
}

.taksa-cell:nth-child(3n) {
  border-right: 0;
}

.taksa-cell:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.taksa-cell strong {
  display: block;
  color: #0d1965;
}

.taksa-cell span {
  display: block;
  color: #111;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.taksa-cell small {
  color: #9a6654;
  font-size: 15px;
  font-weight: 800;
}

.taksa-center span,
.taksa-center small {
  color: #999;
}

.taksa-active span {
  color: #b30b0b;
}

.taksa-active small {
  color: #b30b0b;
}

.tri-grid {
  margin-top: 12px;
}

.triwai-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  font-family: "Noto Serif Thai", serif;
}

.triwai-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #efcc73;
  border-radius: 999px;
  color: #5d3a08;
  background: #fff8df;
  font-size: 14px;
  font-weight: 800;
}

.triwai-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: "Noto Serif Thai", serif;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid #efcc73;
  border-radius: 8px;
  color: #4b1b1b;
  background: #fff4c9;
  font-size: 16px;
  font-weight: 800;
}

.triwai-current strong {
  color: #941313;
  font-size: 20px;
}

.triwai-current b {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border: 2px solid #d94a2a;
  border-radius: 999px;
  color: #4b1b1b;
  background: #fffdfb;
  line-height: 1;
}

.triwai-current em {
  color: #9b6a07;
  font-style: normal;
}

.compact-table-panel {
  padding-bottom: 12px;
}

.mini-table-scroll {
  overflow-x: auto;
  margin-top: 12px;
}

.astro-mini-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Noto Serif Thai", serif;
  background: #fffdfb;
  border: 1px solid #efcc73;
  border-radius: 8px;
  overflow: hidden;
}

.astro-mini-table th,
.astro-mini-table td {
  border: 0;
  border-right: 1px solid #efcc73;
  border-bottom: 1px solid #efcc73;
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
}

.astro-mini-table th:last-child,
.astro-mini-table td:last-child {
  border-right: 0;
}

.astro-mini-table tbody tr:last-child td {
  border-bottom: 0;
}

.astro-mini-table th {
  color: var(--brand);
  background: linear-gradient(180deg, #fff8df, #fffdfb);
  font-weight: 900;
}

.triwai-table th strong {
  display: block;
  color: #931414;
  font-size: 18px;
}

.triwai-table th span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.triwai-table td b {
  display: block;
  color: #4b1b1b;
  font-size: 22px;
  line-height: 1.1;
}

.triwai-table td small {
  display: block;
  margin-top: 3px;
  color: #9b6a07;
  font-size: 12px;
  font-weight: 800;
}

.triwai-house-label {
  display: block;
  margin-top: 2px;
  color: #1b245d;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.triwai-cell-range {
  display: block;
  margin-top: 4px;
  color: #8c675f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.triwai-table .active {
  background: #fff4c9;
  box-shadow: inset 0 0 0 2px rgba(213, 161, 46, 0.18);
}

.triwai-table .seed-cell {
  background: #fff0b8;
}

.triwai-table .current-triwai-cell b {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  margin: 0 auto;
  border: 3px solid #d94a2a;
  border-radius: 999px;
  background: #fffdfb;
}

.triwai-range {
  display: inline-block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.empty-mini-table {
  padding: 14px;
  border: 1px dashed #efcc73;
  border-radius: 8px;
  color: var(--muted);
  background: #fffdfb;
  font-weight: 800;
  text-align: center;
}

.current-age {
  display: inline-flex;
  color: #fff;
  background: var(--brand);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 14px;
  font-weight: 800;
}

.navamsa-table {
  min-width: 720px;
}

.navamsa-table th,
.navamsa-table td {
  text-align: left;
}

.navamsa-table th:nth-child(3),
.navamsa-table th:nth-child(4),
.navamsa-table td:nth-child(3),
.navamsa-table td:nth-child(4) {
  text-align: center;
}

.navamsa-table .primary-row {
  background: #fff8df;
}

.planet-pill {
  --planet-color: #111;
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  margin-right: 6px;
  color: var(--planet-color);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1;
}

/* ── Rules tab bar ──────────────────────────────────────────────────────── */
.rules-tab-bar {
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
  flex-wrap: wrap;
}
.rules-tab {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}
.rules-tab:hover { border-color: var(--gold); background: var(--gold-soft); }
.rules-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Bhava/sign prediction cards ────────────────────────────────────────── */
.prediction.bhava {
  border-left-color: #1a7f5a;
  background: #f6fdf9;
}
.prediction.bhava .prediction-tag { background: #1a7f5a; }
.prediction.bhava strong { color: #1a5c40; }
.pred-keywords {
  font-size: 12px;
  color: #5a7a6a;
  margin: 3px 0 4px;
  line-height: 1.4;
  font-style: italic;
}

.prediction-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.prediction-section-label {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 4px 2px 0;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.prediction-section-label:first-child { border-top: none; margin-top: 0; }

.prediction {
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 12px;
  background: #fff;
  position: relative;
}
.prediction.inherent {
  border-left-color: var(--brand);
  background: #fffdf8;
}
.prediction.custom {
  border-left-color: #9b59b6;
  background: #fdfaff;
}

.prediction-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  border-radius: 3px;
  padding: 1px 6px;
  margin-bottom: 5px;
}
.prediction.custom .prediction-tag { background: #9b59b6; }

.prediction strong {
  color: var(--brand);
  display: block;
}
.prediction.custom strong { color: #6c3483; }

.prediction p {
  margin: 6px 0 0;
  color: #473936;
}

.prediction small {
  color: var(--muted);
}

.table-wrap {
  overflow: auto;
  padding: 14px;
  margin-bottom: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
  font-family: "Noto Serif Thai", serif;
}

th,
td {
  border: 1px solid #d8d8d8;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--brand);
  background: #eef5f8;
}

.motion-mark {
  margin-left: 3px;
  font-weight: 800;
}

.motion-mark.retrograde {
  color: #b20d0d;
}

.rules-layout {
  display: grid;
  grid-template-columns: minmax(460px, 1fr) minmax(260px, 340px);
  gap: 12px;
}

textarea {
  min-height: 520px;
  resize: vertical;
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}

.helper,
.status-line {
  color: var(--muted);
  margin: 10px 0 0;
}

.condition-help {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.condition-help code {
  background: #f4e9e5;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
}

/* ── AI tab: two-column grid (chat left | biwheel+sidebar right) ───── */
.ai-layout {
  display: grid;
  /* 0.85fr→0.74fr คู่กับเพดาน 1780px ด้านล่าง: ที่จอกว้าง คอลัมน์ขวาคง ~572px เท่าเดิมเป๊ะ
     ส่วนที่เพิ่มทั้งหมดไหลเข้าคอลัมน์กลาง (คำทำนาย/แชท) = กว้างขึ้น ~15% (คุณหมอ 2026-07-23) */
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.74fr);
  gap: 12px;
  align-items: stretch;   /* chat column matches the right column's height — no half-empty column */
}
/* หน้าปรึกษา: ขยายเพดานรวม 1680→1780 (สูตร: กลางเดิม 672px × 1.15 ≈ 772px; ซ้าย 410 + ขวา 572 คงเดิม)
   ขยาย topbar/main-tabs ตามด้วย ไม่ให้หัวเหลื่อมกับเนื้อหา */
body[data-active-tab="ai"] .topbar,
body[data-active-tab="ai"] .main-tabs,
body[data-active-tab="ai"] .workspace { max-width: 1780px; }
/* AI tab fills the results column so the chat panel grows to the form's height
   instead of leaving an empty cosmic gap below it. Scoped to #tab-ai only, so the
   chart/table tabs keep their natural height. */
.results { display: flex; flex-direction: column; min-height: 0; }
.results > #tab-ai.active, .results > #tab-auspicious.active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#tab-ai > .ai-layout { flex: 1 1 auto; min-height: 0; }

/* Desktop: the form sidebar becomes a sticky, viewport-tall scroll panel (same
   pattern as the AI right column) so a long form no longer dictates a giant grid
   row that leaves the result columns half-empty. grid-template-rows:1fr then lets
   the AI tab's columns fill that capped row height. */
@media (min-width: 1081px) {
  /* คุณหมอ 2026-07-19: เลิกบีบ sidebar เป็นกล่อง sticky สูงเท่าจอที่ scroll ในตัว —
     ให้แถบซ้าย (ฟอร์มผูกดวง + ประวัติผูกดวง) ไหลยาวเต็มลงมาตามเนื้อหา ดูง่าย ไม่มีช่องว่าง */
  .sidebar { min-width: 0; }
}

/* Right column — sticky while chat scrolls */
.ai-right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* เลิก sticky + cap เท่าจอ — ปล่อยประวัติแชท/ประวัติหาฤกษ์ไหลยาวลงมาเต็มตามเนื้อหา (คุณหมอ 07-22: ถูกตัด เหลือที่ว่างข้างล่างเยอะ) */
}
.ai-right-col::-webkit-scrollbar { width: 5px; }
.ai-right-col::-webkit-scrollbar-track { background: transparent; }
.ai-right-col::-webkit-scrollbar-thumb { background: #e8d9b8; border-radius: 4px; }

/* Biwheel wrapper in right col */
.ai-biwheel-wrap {
  background: #fffaf8;
  border: 1px solid #e8d9b8;
  border-radius: 10px;
  padding: 8px 8px 4px;
}
.ai-biwheel-wrap .section-title {
  margin-bottom: 4px;
}

/* Biwheel chart container in AI tab */
.chart-host.biwheel.ai-biwheel {
  display: flex;
  justify-content: center;
  width: 100%;
}
.chart-host.biwheel.ai-biwheel svg {
  width: 100%;
  height: auto;
  max-width: 100%;       /* fill full right column */
}
.chart-host.biwheel.ai-biwheel:empty {
  display: none;
}
/* การ์ดฤกษ์: breakdown (ซ้าย) + วงล้อราศีจักร ณ ฤกษ์ (ขวา) แบบเดียวกับราศีจักรกำเนิดหน้าแรก — เฉพาะดวงฤกษ์วันนั้น */
.ausp-card-row { display: flex; gap: 14px; align-items: flex-start; }
.ausp-card-main { flex: 1 1 auto; min-width: 0; }
.ausp-card-chart { flex: 0 0 380px; max-width: 380px; align-self: center; }
.ausp-card-chart-cap { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted, #9a7a3a); margin-bottom: 2px; }
.ausp-card-wheel { width: 100%; cursor: zoom-in; }
.ausp-card-wheel svg { width: 100%; height: auto; display: block; }
/* เลือกประเภทกิจการ (karaka domain) + โน้ตการกะในการ์ด */
.ausp-domain-sel { width: 100%; padding: 7px 10px; border: 1px solid var(--border, rgba(180,140,60,.3)); border-radius: 8px; background: var(--panel-2, #fff); color: inherit; font-size: 14px; margin-bottom: 4px; }
.ausp-sub-hint { font-weight: 400; color: var(--muted, #9a7a3a); font-size: 12px; }
.ausp-karaka-note { margin: 4px 0 2px; padding: 6px 10px; border-radius: 8px; background: var(--panel-2, rgba(255,250,245,.6)); border: 1px dashed var(--border, rgba(180,140,60,.35)); font-size: 12.5px; line-height: 1.55; }
.ausp-karaka-note .kk-bad { color: #a20c0c; }
.ausp-karaka-note .kk-good { color: #1f7a3d; }
@media (max-width: 900px) {
  .ausp-card-row { flex-direction: column; }
  .ausp-card-chart { flex-basis: auto; max-width: 420px; align-self: center; width: 100%; }
}

/* ── AI sidebar compact sections (ทักษา / ตรีวัย) ────────────────── */
.ai-sidebar-section {
  border-top: 1px solid #eee0c4;
  padding-top: 8px;
  margin-top: 4px;
}

/* ทักษา grid ใน AI sidebar — ขนาดเต็ม เหมือนหน้าหลัก */
.ai-taksa-grid.taksa-grid {
  max-width: 100%;     /* override หน้าหลักที่ lock 300px */
  margin: 6px 0 0;
}
.ai-taksa-grid .taksa-cell {
  min-height: 72px;
  padding: 8px 4px;
}
.ai-taksa-grid .taksa-cell strong { font-size: 13px; }
.ai-taksa-grid .taksa-cell span   { font-size: 26px; }
.ai-taksa-grid .taksa-cell small  { font-size: 13px; }

/* ตรีวัย summary box ใน AI sidebar */
.ai-triwai-compact { font-size: 13px; }
.ai-triwai-current-box {
  background: #fff8e8;
  border: 1px solid #e8c96a;
  border-radius: 8px;
  padding: 10px 13px;
  font-family: "Noto Serif Thai", serif;
  line-height: 1.7;
}
.ai-triwai-current-box .twc-stage  { font-weight: 700; color: var(--brand); font-size: 14px; }
.ai-triwai-current-box .twc-planet { font-size: 17px; font-weight: 700; color: var(--brand); }
.ai-triwai-current-box .twc-house  { color: #444; font-size: 13px; }
.ai-triwai-current-box .twc-meaning {
  color: #6b3a1f; font-size: 12px; margin-top: 4px;
  border-top: 1px dashed #e8c96a; padding-top: 4px;
}

.ai-chat-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-messages {
  display: grid;
  align-content: start;
  gap: 5px;
  flex: 1 1 auto;        /* grow to fill the chat panel so the empty area isn't a cosmic gap */
  min-height: 140px;
  max-height: none;
  overflow-y: auto;      /* long conversations scroll inside the filled panel */
  padding-right: 4px;
  margin-top: 8px;
}

/* ── Q&A Turn wrapper ─────────────────────────────────────────────────── */
.ai-turn {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
  background: #fffdfb;
}
.ai-turn.latest { border-color: #d4a94a; }
.ai-turn.auto-overview { border-color: #b89a3e; background: #fffcf2; }
.ai-turn.auto-overview .ai-turn-header { background: #fffaec; }
.ai-turn.auto-overview .ai-turn-q { color: #8a6a00; font-style: italic; }

/* Header row: question + preview + action buttons */
.ai-turn-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: default;
  user-select: none;
  background: #fffdfb;
  min-width: 0;
}
.ai-turn-q { user-select: text; cursor: text; }
.ai-turn-chevron { cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.ai-turn-chevron:hover { background: rgba(0,0,0,0.07); }
.ai-turn.latest .ai-turn-header { background: #fff8e8; }
.ai-turn-header:hover { background: #fff3d0; }

.ai-turn-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.ai-turn-chevron {
  font-size: 12px;
  color: var(--brand);
  flex-shrink: 0;
}
.ai-turn-q {
  font-size: 15px; /* 13→15px (+15%) — ฟ้อนต์คำถามบนหัว turn อ่านง่ายขึ้น (คุณหมอ 2026-07-23) */
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-turn.expanded .ai-turn-q {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.ai-turn-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ai-turn-preview {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  display: none;
}
.ai-turn.collapsed .ai-turn-preview { display: block; }

.ai-turn-btns {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.1s;
}
.ai-turn:hover .ai-turn-btns,
.ai-turn:focus-within .ai-turn-btns { opacity: 1; }

.ai-turn-body {
  border-top: 1px solid var(--line);
  padding: 0;
}

/* Token/cost footer at bottom-right of each answer */
.ai-turn-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px dashed var(--line);
  margin-top: 8px;
  padding-top: 6px;
}
.ai-usage-footer {
  text-align: right;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.ai-rating-widget {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
}
.ai-rating-label {
  color: var(--muted);
  font-size: 11px;
  margin-right: 2px;
}
.ai-star {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #ccc;
  padding: 0 1px;
  line-height: 1;
  transition: color 0.1s, transform 0.1s;
}
.ai-star:hover, .ai-star.active { color: #d5a12e; }
.ai-star:hover { transform: scale(1.2); }
.ai-rating-sent { font-size: 11px; color: #1a7f5a; font-weight: 700; margin-left: 4px; }
.feedback-summary { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0; font-size: 14px; }

/* The assistant answer inside a turn */
.ai-turn-body .ai-message {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 10px 12px;
}

.ai-thinking {
  padding: 10px 12px;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
}

/* Legacy: keep .ai-message for any existing use */
.ai-message {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fffdfb;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

/* ── Rendered Markdown Styles (Claude-like readable typography) ───────── */
.ai-message {
  font-family: "Noto Serif Thai", "Noto Serif", Georgia, serif;
  font-size: calc(19px * var(--read-scale, 1));
  line-height: 1.85;
  color: #2a2320;
}
/* keep tables & code in sans/mono for tidy alignment */
.ai-message .ai-table { font-family: "Noto Serif Thai", serif; }
.ai-message .ai-code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.ai-message .ai-h2 {
  font-size: 1.27em;
  font-weight: 800;
  color: var(--brand);
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold-soft);
  letter-spacing: -0.01em;
}
.ai-message .ai-h3 {
  font-size: 1.09em;
  font-weight: 800;
  color: var(--brand);
  margin: 22px 0 8px;
  letter-spacing: -0.01em;
}
.ai-message .ai-h4 {
  font-size: 0.94em;
  font-weight: 700;
  color: var(--ink);
  margin: 16px 0 6px;
}
/* first heading shouldn't push a big gap at the very top */
.ai-message > .ai-h2:first-child,
.ai-message > .ai-h3:first-child { margin-top: 2px; }
.ai-message .ai-p {
  margin: 0 0 12px;
  line-height: 1.8;
}
.ai-message .ai-para-gap { height: 10px; }
.ai-message .ai-hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}
.ai-message .ai-list {
  margin: 8px 0 14px 6px;
  padding-left: 20px;
  line-height: 1.8;
}
.ai-message .ai-list li { margin-bottom: 8px; padding-left: 4px; }
.ai-message .ai-list li::marker { color: var(--gold); }
.ai-message strong, .ai-message b { font-weight: 800; color: var(--ink); }
.ai-message .ai-code {
  background: #f4ede6;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.88em;
}
.ai-plain-text { white-space: pre-wrap; line-height: 1.7; }

/* ── AI Table ─────────────────────────────────────────────────────────── */
.ai-table-wrap {
  overflow-x: auto;
  margin: 14px 0 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold, #c9a24a) transparent;
}
.ai-table-wrap::-webkit-scrollbar { height: 9px; -webkit-appearance: none; }
.ai-table-wrap::-webkit-scrollbar-thumb { background: var(--gold, #c9a24a); border-radius: 5px; }
.ai-table-wrap::-webkit-scrollbar-track { background: rgba(120,100,70,.08); border-radius: 5px; }
/* right-edge fade cue while there's more table to the right */
.ai-table-wrap.is-scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%); mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
.ai-table-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--brand, #8a5012); font-weight: 600;
  margin: 10px 0 -6px;
}
.ai-table-hint span { font-size: 15px; animation: tableHintNudge 1.6s ease-in-out infinite; }
@keyframes tableHintNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.ai-table {
  width: max-content;
  max-width: none;
  border-collapse: collapse;
  font-size: 14px;
}
.ai-table th {
  background: var(--gold-soft);
  color: var(--brand-dark, #7a3a08);
  font-weight: 800;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--gold);
  white-space: nowrap;
}
.ai-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.6;
}
.ai-table tr:last-child td { border-bottom: none; }
.ai-table tr:nth-child(even) td { background: #fdf8f4; }
/* ── End Rendered Markdown ────────────────────────────────────────────── */

.ai-empty-state {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 12px;
  background: #fffdfb;
}

/* User messages: compact — typically short questions */
.ai-message.user {
  border-color: #e6c25f;
  background: #fff8dc;
  padding: 6px 10px;
  font-size: 0.92em;
}

.ai-message small,
.knowledge-item small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

/* Action buttons: hidden by default, appear on hover/focus */
.ai-message-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.15s ease, margin-top 0.1s;
}

.ai-message:hover .ai-message-actions,
.ai-message:focus-within .ai-message-actions {
  max-height: 44px;
  margin-top: 6px;
}

.ai-history-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.mini-action {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff8dc;
  color: var(--brand-dark);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 4px 9px;
}

.mini-action:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.mini-action.danger { color: #b33; border-color: rgba(180,50,50,0.3); }
.mini-action.danger:hover { background: rgba(180,50,50,0.08); border-color: #b33; }
.mini-action.approve { color: #1d6b32; border-color: rgba(29,107,50,.35); font-weight: 700; }
.mini-action.approve:hover { background: rgba(29,107,50,.1); border-color: #1d6b32; }

/* ── รายชื่อผู้ใช้ + สถานะอนุมัติ (คุณหมอ 2026-07-16: ต้องอนุมัติก่อนถึงใช้ AI ได้) ── */
.users-pending-banner {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 9px; font-size: 13.5px;
  background: rgba(200, 130, 20, .1); border: 1px solid rgba(200, 130, 20, .35); color: #8a5a10;
}
.user-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(0,0,0,.07);
}
.user-row + .user-row { margin-top: 5px; }
.user-row .user-name { font-weight: 600; }
.user-row .user-actions { margin-left: auto; display: flex; gap: 6px; }
.user-row .user-when { color: #8a8378; font-size: 11.5px; }
.user-row.is-pending { background: rgba(200, 130, 20, .07); border-color: rgba(200, 130, 20, .3); }
.user-row.is-test { opacity: .62; }
.user-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.user-badge.admin { background: rgba(90, 45, 6, .12); color: #5a2d06; }
.user-badge.ok    { background: rgba(29, 107, 50, .12); color: #1d6b32; }
.user-badge.wait  { background: rgba(200, 130, 20, .16); color: #8a5a10; }

.ai-question-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 8px;
  align-items: stretch;
  position: sticky;
  top: 10px;
  z-index: 5;
  background: #fff8f7;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 6px 14px rgba(75, 0, 24, 0.07);
}

.danger-btn {
  color: #b33 !important;
  border-color: rgba(180, 50, 50, 0.35) !important;
}
.danger-btn:hover {
  background: rgba(180, 50, 50, 0.08) !important;
  border-color: #b33 !important;
}

.ai-question-row textarea,
.knowledge-search input,
.full-label textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}

#aiQuestion,
#aiTestPrompt,
#auspQuestion {
  min-height: 60px;
}

/* Transit date badge — never truncate, wraps to next line if needed */
.transit-section-title {
  flex-wrap: wrap;
  row-gap: 4px;
}
.transit-date-badge {
  font-size: 13px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  max-width: 100%;
}

.transit-table-caption {
  caption-side: top;
  text-align: left;
  padding: 6px 8px 4px;
  font-size: 12px;
  color: var(--muted, #7a6a50);
  border-bottom: 1px solid rgba(184,137,42,0.15);
  letter-spacing: 0.01em;
}

#aiSystemInstruction {
  min-height: 220px;
}

/* ── AI Starter / Follow-up Chips ───────────────────────────────────────── */
.ai-starter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.ai-chip {
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--brand-dark);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 11px;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.ai-chip:hover {
  background: var(--gold);
  border-color: var(--brand);
  color: #fff;
}
/* ปุ่มพื้นดวง (default แรก) — เด่นกว่า chip ทั่วไป กดแล้วทำนายเลย */
.ai-chip.ai-chip-basechart {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 15px;
  box-shadow: 0 2px 7px rgba(162, 12, 12, .22);
}
.ai-chip.ai-chip-basechart:hover {
  background: var(--brand-dark, #7a0a0a);
  border-color: var(--brand-dark, #7a0a0a);
  color: #fff;
}
.ai-chip.followup {
  background: #f4f0ff;
  border-color: #c4b5f5;
  color: #5b3fa0;
}
.ai-chip.followup:hover {
  background: #7c5cc4;
  border-color: #7c5cc4;
  color: #fff;
}

.ai-followup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 10px;
  border-top: 1px dashed var(--line);
  background: #faf8ff;
}
/* ── AI Clarify Card (อาจารย์ซักถามกลับ) ─────────────────────────────────── */
.ai-clarify-card {
  margin: 10px 12px 4px;
  padding: 14px 16px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--gold-soft) 0%, #fffdf6 100%);
  box-shadow: 0 2px 10px rgba(213, 161, 46, 0.12);
}
.ai-clarify-head {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 12px;
}
.ai-clarify-list { display: grid; gap: 12px; }
.ai-clarify-item { display: grid; gap: 5px; }
.ai-clarify-q-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
}
.ai-clarify-q {
  font-size: 14px;
  font-weight: 600;
  color: #4a3a1a;
  line-height: 1.5;
  flex: 1;
}
.ai-clarify-ask {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-dark, #7a3a08);
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.ai-clarify-ask:hover { background: var(--gold-soft); }
.ai-clarify-ask:active { transform: scale(0.96); }
.ai-clarify-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid #e2d3a8;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-clarify-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(213, 161, 46, 0.2);
}
.ai-clarify-submit { margin-top: 14px; width: 100%; }
/* ── End AI Clarify Card ─────────────────────────────────────────────────── */

/* ── Share link modal ────────────────────────────────────────────────────── */
.share-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(40, 25, 10, 0.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.share-modal-card {
  background: #fffdf8;
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.share-modal-card h3 { margin: 0 0 8px; color: var(--brand-dark, #7a3a08); font-size: 18px; }
.share-modal-card p { margin: 0 0 14px; font-size: 14px; opacity: 0.85; }
.share-modal-card input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid #e2d3a8;
  border-radius: 8px;
  background: #fcf7ee;
  margin-bottom: 14px;
}
.share-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.share-modal-actions .solid-btn { text-decoration: none; display: inline-block; }

/* ── End AI Chips ────────────────────────────────────────────────────────── */

.ai-answer-level {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.ai-answer-level span {
  color: var(--muted);
  font-weight: 700;
}

.ai-answer-level select {
  width: 100%;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--gold-soft);
  color: var(--brand-dark);
  font: inherit;
  font-weight: 800;
  padding: 10px 12px;
}

.knowledge-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.ai-side-stack {
  display: grid;
  gap: 10px;
}

/* Each section in the side stack gets its own card */
.ai-side-stack .ai-side-section {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
}

.ai-side-section {
  display: grid;
  gap: 8px;
}

.ai-chat-history,
.ai-pinned-notes {
  display: grid;
  gap: 8px;
  /* ยกเลิก cap ความสูง — ปล่อยให้ยาวลงมาเต็มตามเนื้อหา (คุณหมอ 07-22: ประวัติแชทถูกตัด ไม่เต็ม + ที่ว่างข้างล่างเยอะ) */
}

.ai-history-item,
.ai-note-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfb;
  padding: 10px;
}

.ai-history-item strong,
.ai-note-item strong {
  display: block;
  color: var(--brand-dark);
  line-height: 1.25;
}

.ai-history-item p,
.ai-note-item p {
  color: #51423d;
  margin: 4px 0 0;
}

.ai-history-item small,
.ai-note-item small {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.ai-history-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 10px;
  background: #fffdfb;
}

.knowledge-results,
.knowledge-status {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.knowledge-ai-answer {
  margin-top: 10px;
  border-left: 3px solid var(--brand);
  background: linear-gradient(135deg, #fff8f6 0%, #fffaf8 100%);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  font-size: 15.5px;
  line-height: 1.7;
}

.knowledge-ai-header {
  font-weight: 700;
  font-size: 14px;
  color: var(--brand);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.knowledge-ai-text {
  color: var(--ink);
  font-size: calc(15.5px * var(--read-scale, 1));
  line-height: 1.85;
}

.knowledge-ai-loading {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

.knowledge-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fffdfb;
}

.knowledge-item strong {
  display: block;
  margin-bottom: 5px;
}

.knowledge-item p {
  margin: 0;
  color: #51423d;
}

.admin-ai-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.admin-ai-output {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfb;
  color: #2e2420;
  margin-top: 12px;
  min-height: 92px;
  padding: 12px;
  white-space: pre-wrap;
}

.admin-ai-output.error {
  border-color: #d99393;
  background: #fff4f2;
}

.admin-ai-debug {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.admin-ai-debug div,
.admin-ai-result-card div,
.admin-ai-audit div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfb;
  padding: 9px 10px;
}

.admin-ai-result-card,
.admin-ai-audit {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.admin-ai-result-card.error div {
  border-color: #d99393;
  background: #fff4f2;
}

.admin-ai-debug span,
.admin-ai-result-card span,
.admin-ai-audit span,
.admin-ai-audit small {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.admin-ai-debug strong,
.admin-ai-result-card strong,
.admin-ai-audit strong {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.danger-helper {
  color: #9d2d1f;
  font-weight: 800;
}

/* ── PDF Upload Panel ─────────────────────────────────────────────────────── */
.pdf-upload-panel {
  padding: 16px;
}

.pdf-drop-zone {
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: #fffaf8;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  margin-top: 12px;
  padding: 24px 16px;
  user-select: none;
  outline: none;
}

.pdf-drop-zone:hover,
.pdf-drop-zone:focus {
  border-color: var(--brand);
  background: #fff5f2;
}

.pdf-drop-zone.drag-over {
  border-color: var(--brand);
  background: #fff0eb;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.pdf-drop-icon {
  font-size: 36px;
  line-height: 1;
  filter: grayscale(0.2);
}

.pdf-drop-label {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.pdf-drop-sub {
  font-size: 13px;
  color: var(--muted);
}

.pdf-drop-link {
  color: var(--brand);
  text-decoration: underline;
  cursor: pointer;
}

.pdf-file-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.pdf-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfb;
  padding: 8px 12px;
  font-size: 13px;
}

.pdf-file-item .pdf-file-name {
  flex: 1;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-file-item .pdf-file-size {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.pdf-file-item .pdf-file-status {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.pdf-file-item .pdf-file-status.pending  { color: var(--muted); }
.pdf-file-item .pdf-file-status.uploading { color: #c86a00; }
.pdf-file-item .pdf-file-status.done      { color: #2a7d4f; }
.pdf-file-item .pdf-file-status.error     { color: #c0392b; }

.pdf-file-item .pdf-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.pdf-file-item .pdf-remove-btn:hover { color: #c0392b; }

.upload-spinner {
  font-size: 13px;
  color: var(--brand);
  font-style: italic;
  animation: fade-pulse 1.2s ease-in-out infinite;
}

@keyframes fade-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.pdf-r2-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfb;
  margin-top: 12px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.pdf-r2-header {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}

.pdf-r2-loading,
.pdf-r2-empty,
.pdf-r2-error {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

.pdf-r2-error { color: #c0392b; font-style: normal; }

/* ── Knowledge Index Panel ── */
.knowledge-index-content { margin-top: 8px; }
.ki-loading { color: var(--muted); font-size: 13px; padding: 10px 0; }
.ki-error { color: #c0392b; font-size: 13px; padding: 6px 0; }

.ki-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.ki-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 16px;
  min-width: 80px;
}
.ki-stat-wide {
  flex-direction: row;
  gap: 6px;
  align-items: center;
  min-width: unset;
}
.ki-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.1;
}
.ki-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ki-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 8px;
  line-height: 1.5;
}
.ki-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.ki-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--fg);
}
.ki-tag-planet {
  background: #fff8e6;
  border-color: #d8bf75;
  color: #7a5a00;
}

.ki-files-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.ki-files-list { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.ki-file-row {
  display: grid;
  grid-template-columns: 1fr 120px 60px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.ki-file-row:hover { background: var(--panel-2); }
.ki-file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg);
  font-size: 12px;
}
.ki-file-bar-wrap {
  background: var(--bg-soft);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
}
.ki-file-bar {
  background: var(--brand);
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}
.ki-file-count {
  text-align: right;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.ki-file-pct { font-weight: 400; color: var(--muted); }

.app-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1000;
  max-width: min(420px, calc(100vw - 28px));
  border: 1px solid #d8bf75;
  border-radius: 8px;
  background: #fff8dc;
  box-shadow: 0 18px 40px rgba(29, 20, 12, 0.18);
  color: #2b211c;
  font-weight: 800;
  padding: 12px 14px;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 180ms ease, transform 180ms ease;
}

.app-toast.error {
  border-color: #d99393;
  background: #fff4f2;
  color: #8d2419;
}

.app-toast.hide {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full-label {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-weight: 800;
}

@media (max-width: 1080px) {
  .workspace,
  .chart-grid,
  .rules-layout,
  .ai-layout {
    grid-template-columns: 1fr;
  }

  .large-chart,
  .wide-panel {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 680px) {
  .app-shell {
    padding: 8px;
  }

  /* ── Tab bar: break out of app-shell padding, stick to top ── */
  .main-tabs {
    position: sticky;
    top: 0;
    z-index: 50;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 0;
    margin: 0 -8px 10px;   /* break out of app-shell 8px padding */
    background: rgba(255,250,248,0.97);
    box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  }
  .main-tabs::-webkit-scrollbar { display: none; }
  .tab {
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 15px;
    flex-shrink: 0;
  }

  .topbar,
  .summary-band {
    align-items: stretch;
    flex-direction: column;
  }
  /* มือถือ: หัวข้อ (สุริยคติ/สถานที่เกิด/...) ขึ้นบรรทัดเอง ค่าอยู่ใต้ — เลิก "หัว-ค่าซ้อน" ที่ค่ายาวๆ wrap ใต้หัว */
  .summary-band { padding: 14px; }
  .summary-band h2 { font-size: 23px; line-height: 1.25; }
  #summaryBirth { line-height: 1.5; font-size: 15px; }
  .summary-band .sb-label {
    display: block;
    min-width: 0;
    margin-top: 11px;
    font-size: 13px;
    opacity: 0.85;
  }
  #summaryBirth br { display: none; }

  .split-row,
  .date-select-row {
    grid-template-columns: 1fr;
  }

  .ai-question-row,
  .knowledge-search,
  .compact-grid,
  .map-picker-body {
    grid-template-columns: 1fr;
  }

  .map-picker-map {
    min-height: 420px;
  }

  /* ── Charts: full width, taller ── */
  .chart-host {
    min-height: 92vw;    /* near-square on phone */
  }
  .chart-host.small {
    min-height: 80vw;
  }
  .chart-host svg,
  .chart-host.biwheel svg {
    max-width: 100%;
    width: 100%;
  }

  /* ── Transit section title: badge wraps below title ── */
  .section-title {
    flex-wrap: wrap;
    gap: 6px;
  }
  .section-title .badge {
    font-size: 11px;
    padding: 3px 8px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Very small phones — ensure charts don't shrink below usable size */
@media (max-width: 400px) {
  .chart-host       { min-height: 88vw; }
  .chart-host.small { min-height: 78vw; }
}

@media print {
  body {
    background: #fff;
  }

  .sidebar,
  .main-tabs,
  .top-actions {
    display: none;
  }

  .workspace,
  .chart-grid {
    display: block;
  }

  .tool-panel,
  .summary-band {
    box-shadow: none;
    break-inside: avoid;
    margin-bottom: 10px;
  }
}


/* ==========================================================================
   🔑 Premium API Keys Dark Modal Styles
   ========================================================================== */

.api-keys-modal {
  position: fixed;
  inset: 0;
  /* พื้นมืด 82% แทน backdrop-filter:blur — blur เบลอทั้งหน้า (SVG ดวงหนัก) ต่อเนื่อง = GPU หนัก/แลค
     โดยเฉพาะตอน composite/แคปหน้าจอ ทั้งที่พื้นมืดก็บังข้างหลังอยู่แล้ว (เห็นผลของ blur น้อยมาก) */
  background: rgba(8, 7, 5, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.api-keys-modal.active {
  display: flex;
}

.api-keys-dialog {
  background: #111111;
  color: #dddddd;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.api-keys-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.api-keys-head h2 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.api-keys-subtitle {
  color: #888888;
  font-size: 12px;
  margin: 6px 0 0;
  line-height: 1.4;
}

.api-keys-head .close-btn {
  background: transparent;
  border: none;
  color: #777777;
  font-size: 26px;
  cursor: pointer;
  padding: 0;
  line-height: 0.8;
  transition: color 0.15s;
}

.api-keys-head .close-btn:hover {
  color: #ffffff;
}

.api-keys-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  max-height: 55vh;
}

.api-keys-section {
  margin-bottom: 24px;
}

.api-keys-section:last-child {
  margin-bottom: 8px;
}

.section-hdr {
  font-size: 11px;
  font-weight: 700;
  color: #888888;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}

.section-sub {
  font-size: 11px;
  color: #555555;
  margin: 0 0 16px;
}

.api-key-row {
  margin-bottom: 18px;
}

.api-key-row:last-child {
  margin-bottom: 0;
}

.row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.provider-label {
  font-size: 14px;
  font-weight: 600;
  color: #eeeeee;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #333333;
  display: inline-block;
  transition: background-color 0.25s, box-shadow 0.25s;
}

.status-dot.active {
  background-color: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
}

.status-text {
  font-size: 11px;
  font-weight: 700;
  color: #444444;
  letter-spacing: 0.5px;
  display: none; /* Let the screenshot guide us, standard green dot next to title is clean. We can show it inline or hide text if dot is clear, showing SET in green is very clear! */
}

.status-text.active {
  display: inline-block;
  color: #22c55e;
}

.get-key-link {
  font-size: 11px;
  font-weight: 600;
  color: #666666;
  text-decoration: none;
  transition: color 0.15s;
}

.get-key-link:hover {
  color: #ff4f1a;
}

.api-key-input {
  width: 100%;
  background: #181818;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.api-key-input::placeholder {
  color: #444444;
}

.api-key-input:focus {
  border-color: #ff4f1a;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 79, 26, 0.15);
  background: #1b1b1b;
}

.row-sub {
  font-size: 11px;
  color: #666666;
  margin-top: 5px;
  line-height: 1.35;
}

.api-keys-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0d0d0d;
}

.footer-badge {
  font-size: 11px;
  font-weight: 700;
  color: #777777;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
}

.footer-actions {
  display: flex;
  gap: 10px;
}

.api-keys-footer .ghost-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #aaaaaa;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.api-keys-footer .ghost-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.api-keys-footer .solid-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: filter 0.15s, transform 0.1s;
}

.api-keys-footer .solid-btn:hover {
  filter: brightness(1.1);
}

.api-keys-footer .solid-btn:active {
  transform: scale(0.97);
}


/* ── Custom model picker with provider logos ── */
.model-picker-native { display: none; }
.model-picker { position: relative; margin-bottom: 8px; min-width: 0; max-width: 100%; }
/* กัน trigger ล้นออกนอกช่องไปทับฟิลด์ข้าง ๆ (คุณหมอ 2026-07-23: "มันทับกัน") — ชื่อโมเดลยาวต้องถูกตัด ไม่ใช่ดันกล่อง */
.model-picker .mp-trigger { max-width: 100%; min-width: 0; overflow: hidden; }
.model-picker .mp-trigger > * { min-width: 0; }
.mp-trigger-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #d8c8c1;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
}
.mp-trigger:hover { border-color: var(--gold); }
.mp-trigger .mp-caret { margin-left: auto; color: var(--muted); }
.mp-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  background: #f4eee9;
  font-size: 15px;
}
.mp-logo svg { display: block; }
.mp-trigger-text, .mp-row-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mp-trigger-text b, .mp-row-text b { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-trigger-text small, .mp-row-text small { font-size: 11px; color: var(--muted); font-weight: 400; }
.mp-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.22);
  padding: 6px;
}
.mp-group { padding: 4px 0; }
.mp-group + .mp-group { border-top: 1px solid var(--line); }
.mp-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mp-group-head svg { width: 14px; height: 14px; }
.mp-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.mp-row:hover { background: var(--gold-soft); }
.mp-row.active { background: rgba(213,161,46,0.18); }
.mp-row .mp-check { margin-left: auto; color: var(--brand); font-weight: 800; }

/* ── User login modal ── */
.user-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 4, 0.6);
  padding: 18px;
}
.user-modal.active { display: flex; }
.user-dialog {
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.4);
  width: min(440px, 100%);
  padding: 22px;
}
.user-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.user-modal-head h2 { font-size: 20px; }
.user-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
#userPinInput { letter-spacing: 0.4em; font-size: 20px; text-align: center; }

/* Login gate: opaque backdrop so previous user's data isn't visible behind it */
.user-modal.gate-locked {
  background: var(--theme-top);
  background:
    radial-gradient(circle at 50% 30%, rgba(213,161,46,0.18), transparent 45%),
    linear-gradient(180deg, var(--theme-top), var(--bg));
  backdrop-filter: blur(6px);
}

/* Admin user-management list */
.users-list { margin-top: 10px; display: grid; gap: 6px; }
.user-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px;
}

/* Pinned turn indicator */
.mini-action.pin-btn { opacity: 0.5; filter: grayscale(1); }
.mini-action.pin-btn.pinned { opacity: 1; filter: none; background: var(--gold-soft); border-color: var(--gold); }

/* Admin login inside the gate */
.admin-login-details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.admin-login-details summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600; }
.admin-login-details[open] summary { color: var(--brand); }

/* Usage stats panel */
.usage-panel { margin-top: 8px; display: grid; gap: 12px; }
.usage-grand { font-size: 15px; color: var(--brand); padding: 6px 0; }
.usage-section-title { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--line); }
.usage-user { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--panel-2); }
.usage-user-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; font-size: 14px; }
.usage-u-name { min-width: 0; overflow-wrap: anywhere; }
.usage-u-sum { white-space: nowrap; color: var(--muted); }
.usage-u-sum b { color: var(--brand); font-size: 15px; }
.usage-u-last { font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }
/* แถวโมเดล = flex ไม่ใช่ <table> — global table{min-width:860px} ทำให้ต้องเลื่อนซ้ายขวาบนมือถือ */
.usage-models { display: grid; gap: 4px; }
.usage-m {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 5px 7px; border-radius: 6px; background: var(--panel);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.usage-m-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.usage-m-stat { color: var(--muted); }
.usage-m-cost { margin-left: auto; font-weight: 700; white-space: nowrap; }
/* ตาราง UI ต้องไม่โดน global table{min-width:860px} (นั่นมีไว้ให้ตารางดวง/สมผุสที่กว้างจริง) */
.usage-table, .usage-panel table { min-width: 0; width: 100%; border-collapse: collapse; font-size: 14px; }
.usage-table th, .usage-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.usage-table th { text-align: left; color: var(--muted); font-weight: 600; }
/* per-user cost chart (donut + bars) */
.usage-chart { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 10px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.usage-donut { width: 138px; height: 138px; flex: none; }
.usage-donut-c { font-size: 17px; font-weight: 800; fill: var(--ink, #2b2b2b); }
.usage-donut-s { font-size: 9px; fill: var(--muted); }
.usage-bars { flex: 1; min-width: 220px; display: grid; gap: 7px; }
.usage-bar-row { display: grid; grid-template-columns: 11px minmax(64px, 1.1fr) 3fr auto; gap: 8px; align-items: center; font-size: 13px; }
.usage-bar-dot { width: 10px; height: 10px; border-radius: 50%; }
.usage-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink, #444); }
.usage-bar-track { height: 9px; border-radius: 6px; background: var(--line); overflow: hidden; }
.usage-bar-fill { display: block; height: 100%; border-radius: 6px; }
.usage-bar-val { font-variant-numeric: tabular-nums; color: var(--ink, #333); font-weight: 600; }
.usage-details { margin-top: 14px; }
.usage-details > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--brand); padding: 6px 0; list-style: none; }
.usage-details > summary::-webkit-details-marker { display: none; }
.usage-details > summary::before { content: "▸ "; }
.usage-details[open] > summary::before { content: "▾ "; }
.usage-details .usage-user { margin-top: 8px; }
.user-row .mini-action.danger { background: #fdecec; color: #c0392b; border: 1px solid #f3c0c0; }
.usage-clean-btn { margin: 0 0 10px; width: 100%; background: #fdecec; color: #c0392b; border: 1px solid #f3c0c0; border-radius: 8px; padding: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.usage-clean-btn:hover { background: #fbdada; }

/* Secondary dignities (อุจจาภิมุข/อุจจาวิลาส/อุจจาวิราช) — shown but de-emphasised */
.dignity-secondary {
  color: var(--muted, #9a8b72);
  font-style: italic;
  opacity: 0.75;
}

/* ══ ถามอาจารย์กรณ์ — floating LINE-style chat ══════════════════════════════ */
.master-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9000;
  right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); /* กัน home indicator ทับ */
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #5a2d06, #b9892f);
  color: #fff5e0; font-family: "Noto Sans Thai", sans-serif; font-weight: 800; font-size: 15px;
  box-shadow: 0 8px 24px rgba(90, 45, 6, 0.45);
  transition: transform .15s, box-shadow .15s;
}
.master-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(90,45,6,.55); }
.master-fab.hidden { display: none; }
.master-fab-icon { font-size: 20px; animation: masterGlow 2.6s ease-in-out infinite; }
@keyframes masterGlow { 0%,100% { filter: drop-shadow(0 0 0 #ffd87a); } 50% { filter: drop-shadow(0 0 6px #ffd87a); } }

.master-chat {
  position: fixed; right: 20px; bottom: 20px; z-index: 9001;
  right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom));
  width: 480px; max-width: calc(100vw - 24px); height: 680px; max-height: calc(100dvh - 40px);
  display: none; flex-direction: column; overflow: hidden;
  background: #ece5da; border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  font-family: "Noto Serif Thai", "Noto Serif", Georgia, serif; /* match answer box; Noto Sans Thai wasn't loaded → fell to system sans (hard to read) */
}
.master-chat.open { display: flex; }
.master-chat.expanded { width: 576px; height: 816px; } /* ~20% larger — desktop only (mobile stays full-screen below) */
.master-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: linear-gradient(135deg, #4a2505, #8a5012); color: #fff;
}
.master-head-left { display: flex; align-items: center; gap: 10px; }
.master-avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff2d4; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.master-name { font-weight: 800; font-size: 16px; }
.master-status { font-size: 11px; opacity: .85; color: #b6f0c0; }
.link-btn { background: none; border: none; color: var(--brand, #8a5012); font-size: 13px; cursor: pointer; padding: 8px 2px 0; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { opacity: .8; }

/* Customer view: hide admin/technical chrome for a clean look */
.role-customer #aiModeBadge,
.role-customer #aiVersionBadge,
.role-customer .app-version-badge,
.role-customer #knowledgeResults,
.role-customer .knowledge-results-label { display: none !important; }
/* Customers DO see their own chat history + pinned notes (per-account data); hide only the admin knowledge-search tool */
.role-customer .ai-side-section:has(.knowledge-search) { display: none !important; }

/* A− / A+ reading-size controls (elderly-friendly) */
.read-controls { display: inline-flex; align-items: center; gap: 3px; }
.read-controls button { background: rgba(205,162,80,.15); color: var(--brand, #8a5012); border: 1px solid rgba(205,162,80,.45); border-radius: 7px; cursor: pointer; font-weight: 800; line-height: 1; padding: 3px 7px; }
.read-controls button:hover { background: rgba(205,162,80,.32); }
.read-controls .rc-sm { font-size: 12px; }
.read-controls .rc-lg { font-size: 16px; }
.read-controls .rc-label { font-size: 11px; color: var(--muted, #9a8c72); margin-right: 1px; }
.master-head .read-controls button { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.35); }
.master-head .read-controls button:hover { background: rgba(255,255,255,.3); }
.credits-badge { cursor: pointer; background: rgba(6,199,85,.12); color: #0a8a44; border: 1px solid rgba(6,199,85,.4); font-weight: 700; }
.credits-badge:hover { background: rgba(6,199,85,.2); }
.credits-badge.low { background: rgba(220,80,40,.12); color: #b0401f; border-color: rgba(220,80,40,.4); }
.credits-dialog { max-width: 460px; }
.credits-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 10px; }
.credit-tier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 8px; border: 1.5px solid var(--line, #e3d8c4); border-radius: 14px; background: #fffdf9; cursor: pointer; transition: border-color .15s, transform .1s; }
.credit-tier:hover { border-color: var(--gold, #d5a12e); transform: translateY(-2px); }
.credit-tier.popular { border-color: var(--gold, #d5a12e); background: #fffaef; }
.credit-tag { position: absolute; top: -9px; right: 8px; background: #06c755; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 8px; }
.credit-tier.popular .credit-tag { background: var(--gold, #d5a12e); color: #4a2505; }
.credit-amt { font-weight: 800; font-size: 14px; color: #2a2320; }
.credit-price { font-weight: 800; font-size: 20px; color: var(--brand, #8a5012); }
.credit-per { font-size: 11px; color: var(--muted, #9a8c72); }
@media (max-width: 480px) { .credits-tiers { grid-template-columns: repeat(2, 1fr); } }

.google-login-wrap { margin: 4px 0 10px; }
.google-btn-slot { display: flex; justify-content: center; min-height: 40px; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--muted); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: rgba(120,100,70,.25); }

.master-head-actions { display: flex; align-items: center; gap: 4px; }
.master-share { background: none; border: none; color: #fff; font-size: 17px; cursor: pointer; opacity: .85; padding: 2px 4px; line-height: 1; border-radius: 8px; transition: opacity .15s, background .15s; }
.master-share:hover { opacity: 1; background: rgba(255,255,255,.14); }
.master-share:disabled { opacity: .45; cursor: default; }
.master-close { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; opacity: .8; padding: 2px 4px; line-height: 1; }
.master-expand { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; opacity: .85; padding: 2px 4px; line-height: 1; border-radius: 8px; transition: opacity .15s, background .15s; }
.master-expand:hover { opacity: 1; background: rgba(255,255,255,.15); }
.master-chat.expanded .master-expand { transform: rotate(180deg); }
.master-close:hover { opacity: 1; }

.master-body { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; background:
  radial-gradient(circle at 20% 10%, rgba(213,161,46,.06), transparent 40%), #e8e1d5; }
.master-row { display: flex; align-items: flex-end; gap: 6px; max-width: 88%; }
.master-time { font-size: 11px; color: #9a8c72; flex-shrink: 0; padding-bottom: 3px; white-space: nowrap; }
.tts-play { background: rgba(74,37,5,.06); border: 1px solid rgba(74,37,5,.15); border-radius: 50%; width: 26px; height: 26px; flex-shrink: 0; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; align-self: flex-end; margin-bottom: 2px; }
.tts-play:hover { background: rgba(74,37,5,.14); }
.tts-provider-pick { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 7px; font-size: 11px; padding: 2px 4px; cursor: pointer; max-width: 120px; }
.tts-provider-pick option { color: #2a2320; }
.role-customer .tts-provider-pick { display: none; }
.master-date-sep { align-self: center; display: flex; justify-content: center; margin: 6px 0 2px; }
.master-date-sep span { background: rgba(74,37,5,.10); color: #7a5a30; font-size: 11px; padding: 3px 12px; border-radius: 12px; }
.master-row.user { align-self: flex-end; }
.master-row.assistant { align-self: flex-start; }
.master-bubble-avatar { width: 28px; height: 28px; border-radius: 50%; background: #fff2d4; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.master-bubble {
  padding: 10px 14px; border-radius: 16px; word-break: break-word;
  font-family: "Noto Serif Thai", "Noto Serif", Georgia, serif; /* readable loaded font, like the answer box */
  font-size: calc(16px * var(--read-scale, 1)); line-height: 1.8;
}
.master-row.assistant .master-bubble { background: #fff; color: #2a2320; border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.master-row.user .master-bubble { background: #06c755; color: #fff; border-top-right-radius: 4px; }
.master-bubble .ai-h2, .master-bubble .ai-h3, .master-bubble .ai-h4 { font-size: 1.04em; margin: 4px 0; color: var(--brand); }
.master-bubble .ai-p { margin: 0 0 6px; }
.master-bubble p:last-child, .master-bubble .ai-p:last-child { margin-bottom: 0; }
.master-bubble .ai-list { margin: 4px 0 4px 18px; }

.master-typing { display: flex; gap: 4px; align-items: center; }
.master-typing span { width: 7px; height: 7px; border-radius: 50%; background: #c0b39a; animation: masterBlink 1.2s infinite; }
.master-typing span:nth-child(2) { animation-delay: .2s; }
.master-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes masterBlink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

.master-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px; max-height: 84px; overflow-y: auto; background: #e8e1d5; }
.master-quick:not(:empty) { padding: 8px 12px; }
.master-quick-chip {
  border: 1px solid var(--gold); background: #fff; color: var(--brand-dark, #7a3a08);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.master-quick-chip:hover { background: var(--gold-soft); }

.master-input-bar { display: flex; gap: 8px; padding: 10px 12px; background: #fff; align-items: flex-end; }
.master-input-bar textarea {
  flex: 1; resize: none; border: 1px solid #ddd2bd; border-radius: 18px; padding: 9px 14px;
  font-family: inherit; font-size: 14px; line-height: 1.4;
  min-height: 42px !important; height: 42px; max-height: 90px !important; box-sizing: border-box;
}
.master-body { min-height: 0; }
.master-input-bar { flex: 0 0 auto; }
.master-quick { flex: 0 0 auto; }
.master-input-bar textarea:focus { outline: none; border-color: var(--gold); }
.master-send {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #5a2d06, #b9892f); color: #fff; font-size: 16px;
}
.master-send:hover { filter: brightness(1.08); }

@media (max-width: 520px) {
  /* full-screen → ยกเลิก inset ของ .master-chat แล้วให้ input bar กัน home indicator เองแทน */
  .master-chat, .master-chat.expanded { right: 0; bottom: 0; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; } /* mobile always full-screen; ignore expand */
  .master-chat .master-input-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .master-fab-text { display: none; }
  .master-fab { padding: 14px; }
}

/* อาจารย์กรณ์ persona editor (admin) */
.persona-edit { display: grid; gap: 10px; margin-top: 8px; }
.persona-photo-row { display: flex; gap: 14px; align-items: center; }
.persona-photo-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); background: #fff2d4; }
#masterChat .master-avatar { background-color: #fff2d4; overflow: hidden; }

/* Bio textarea in admin persona — override the global textarea{min-height:520px} */
.persona-edit textarea { min-height: 70px !important; max-height: 200px !important; height: 80px; box-sizing: border-box; }

/* ── Admin LINE panel ──────────────────────────────────────────────────────── */
.line-stats-row { display: flex; gap: 10px; margin: 12px 0 16px; }
.line-stat { flex: 1; text-align: center; padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(213, 161, 46, 0.06); }
.line-stat-num { display: block; font-size: 1.5rem; font-weight: 800; color: var(--gold); line-height: 1.1; }
.line-stat-label { display: block; font-size: 0.78rem; opacity: 0.72; margin-top: 4px; }
.line-richmenu-status { font-size: 0.9rem; line-height: 1.65; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.06); margin: 8px 0; }

/* ── Premium auth modal (login / signup) ───────────────────────────────────── */
.auth-dialog {
  position: relative;
  background: linear-gradient(180deg, #2a0c0c, #190707);
  border: 1.5px solid rgba(213, 161, 46, 0.45);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  width: min(420px, 100%);
  padding: 30px 26px 24px;
  text-align: center;
}
.auth-close { position: absolute; top: 12px; right: 12px; color: #d5a12e; opacity: 0.85; }
.auth-emblem { display: flex; justify-content: center; margin: 2px 0 10px; }
.auth-title { font-size: 26px; font-weight: 800; color: #fff1c8; margin: 0; }
.auth-sub { font-size: 13px; color: #d5a12e; opacity: 0.9; margin: 4px 0 18px; }

.auth-social { display: grid; gap: 10px; }
.auth-social .google-btn-slot { display: flex; justify-content: center; min-height: 0; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 50px; border-radius: 25px; border: none;
  font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: filter .15s, transform .05s;
}
.social-btn:hover { filter: brightness(1.06); }
.social-btn:active { transform: scale(0.99); }
.social-line { background: #06C755; color: #fff; }
.social-facebook { background: #1877F2; color: #fff; }
.social-apple { background: #000; color: #fff; }
.social-ic { flex: 0 0 auto; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: #d5a12e; opacity: 0.75; font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(213, 161, 46, 0.3); }

.auth-dialog .full-label { text-align: left; display: block; margin-bottom: 12px; }
.auth-dialog .full-label > span { color: #fff1c8; font-size: 14px; font-weight: 600; display: block; margin-bottom: 6px; }
.auth-dialog input[type="text"], .auth-dialog input[type="password"] {
  width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px;
  background: #2c1010; border: 1.5px solid rgba(213, 161, 46, 0.3); border-radius: 12px;
  color: #fff1c8; font-size: 16px; font-family: inherit;
}
.auth-dialog input::placeholder { color: #8d7a72; }
.auth-dialog input:focus { outline: none; border-color: #d5a12e; }
.auth-dialog #userPinInput { letter-spacing: 0.25em; }
.auth-dialog #userPinInput::placeholder { letter-spacing: normal; }
.auth-helper { color: #c9b8a6 !important; font-size: 12px; text-align: left; margin: 0 0 14px; opacity: 0.9; }
.auth-warn { color: #c9a05a !important; font-size: 12px; text-align: left; margin: -4px 0 10px; opacity: 0.8; }

.auth-dialog .user-modal-footer { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 8px; }
.auth-dialog #userLogoutBtn {
  width: 100%; height: 46px; border-radius: 23px; cursor: pointer;
  background: transparent; color: #e9a6a6; border: 1.5px solid rgba(220, 110, 110, 0.45);
  font-size: 15px; font-weight: 600; font-family: inherit;
}
.auth-dialog #userLogoutBtn:hover { background: rgba(220, 110, 110, 0.12); border-color: rgba(220, 110, 110, 0.7); }
.auth-primary {
  width: 100%; height: 52px; border-radius: 26px; border: none; cursor: pointer;
  background: linear-gradient(180deg, #e6b23a, #c98f1e); color: #241006;
  font-size: 17px; font-weight: 800;
}
.auth-primary:hover { filter: brightness(1.05); }
.auth-dialog .link-btn { color: #d5a12e; display: block; margin: 14px auto 0; }
.auth-dialog .admin-login-details { border-top-color: rgba(213, 161, 46, 0.25); }
.auth-dialog .admin-login-details summary { color: #b89a7a; }
.auth-dialog .admin-login-details[open] summary { color: #d5a12e; }

/* ── Landing page (premium home) ───────────────────────────────────────────── */
.landing { position: fixed; inset: 0; z-index: 1500; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  background: linear-gradient(160deg, #1f0909 0%, #170707 55%, #100505 100%); color: #fff1c8; font-family: "Noto Serif Thai", system-ui, serif; }
body.landing-active .master-fab, body.landing-active .master-chat { display: none !important; }
.landing-eyebrow { color: #d5a12e; font-size: clamp(15px,1.4vw,20px); font-weight: 600; letter-spacing: 0.02em; margin: 0 0 14px; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 20px 28px; }
.landing-brand { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; color: #fff1c8; }
.landing-nav-right { display: flex; gap: 10px; }
.landing-ghost { background: transparent; border: 1.5px solid rgba(213,161,46,0.5); color: #fff1c8; border-radius: 22px; padding: 9px 18px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.landing-ghost:hover { background: rgba(213,161,46,0.12); }
.landing-hero { display: flex; align-items: center; gap: 30px; max-width: 1240px; margin: 0 auto; padding: 40px 28px 20px; }
.landing-hero-text { flex: 1.2; min-width: 0; }
.landing-hero-text h1 { font-size: clamp(36px,4.6vw,70px); font-weight: 800; line-height: 1.4; padding-top: 0.1em; margin: 0 0 18px; color: #fff1c8; }
.landing-hero-text .gold { color: #d5a12e; }
.landing-sub { font-size: clamp(17px,1.6vw,24px); line-height: 1.7; color: #d8c4b0; margin: 0 0 6px; max-width: 620px; }
.landing-sub-en { font-size: clamp(14px,1.2vw,20px); color: #9a8576; margin: 0 0 28px; }
.landing-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.landing-cta { background: linear-gradient(180deg,#e8b43c,#c8901c); color: #2a1206; border: none; border-radius: 34px; padding: 18px 34px; font-size: clamp(18px,1.6vw,26px); font-weight: 800; cursor: pointer; font-family: inherit; }
.landing-cta:hover { filter: brightness(1.06); }
.landing-note { font-size: 15px; color: #9a8576; }
.landing-hero-art { flex: 1; max-width: 460px; aspect-ratio: 1 / 1; }
@media (max-width: 820px) { .landing-hero-art { display: none; } }
.landing-hero-inner { position: relative; width: 100%; height: 100%; animation: heroFloat 6s ease-in-out infinite; }
.landing-hero-logo {
  width: 100%; height: 100%; object-fit: contain;
  /* hero = โลโก้พื้นโปร่ง (floodfill พื้นนอกออก) → ลอยบนพื้นเว็บ ไม่มีกรอบตัด; เลิกใช้ radial mask (จะ fade ปลาย flourish) */
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* ดาวใน O กระพริบวิบวับ (glint) — parent .landing-hero-inner ทำ heroFloat, ดาว scale เอง = ไม่ชน transform; top/left จูนตรงดาว (449,352)/900 */
.hero-star {
  position: absolute; top: 39.1%; left: 49.9%; width: 30px; height: 30px;
  transform: translate(-50%,-50%); pointer-events: none; z-index: 2; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,251,235,1) 0%, rgba(255,224,150,0.75) 26%, rgba(255,200,96,0.24) 54%, rgba(255,200,96,0) 74%);
  animation: heroTwinkle 3.2s ease-in-out infinite;
}
.hero-star::before, .hero-star::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.hero-star::before { width: 2px; height: 56px; background: linear-gradient(rgba(255,250,230,0) 0%, rgba(255,250,230,0.90) 50%, rgba(255,250,230,0) 100%); }
.hero-star::after  { width: 56px; height: 2px; background: linear-gradient(90deg, rgba(255,250,230,0) 0%, rgba(255,250,230,0.90) 50%, rgba(255,250,230,0) 100%); }
@keyframes heroTwinkle {
  0%, 100% { opacity: 0.4;  transform: translate(-50%,-50%) scale(0.7); }
  50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.25); }
}
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 48px; height: 48px; border-radius: 50%; flex: none; box-shadow: 0 0 14px rgba(213, 161, 46, 0.4); }
@media (prefers-reduced-motion: reduce) { .landing-hero-inner, .hero-star { animation: none; } }
.landing-steps { max-width: 1240px; margin: 30px auto 0; padding: 0 28px; text-align: center; }
.landing-steps h2, .landing-cta-band h2 { font-size: clamp(28px,3vw,40px); font-weight: 700; color: #fff1c8; margin: 0 0 26px; }
.landing-step-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 760px) { .landing-step-grid { grid-template-columns: 1fr; } }
.landing-step { background: #26100f; border: 1.5px solid rgba(213,161,46,0.4); border-radius: 18px; padding: 24px 22px; text-align: left; }
.landing-step .ls-num { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #d5a12e; color: #2a1206; font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.landing-step h3 { font-size: 26px; font-weight: 700; color: #fff1c8; margin: 0 0 6px; }
.landing-step p { font-size: 18px; color: #c2ab98; margin: 0 0 8px; }
.landing-step .ls-en { font-size: 15px; color: #9a8576; }
.landing-features { max-width: 1240px; margin: 36px auto; padding: 0 28px; text-align: center; color: #d5a12e; font-size: clamp(15px,1.5vw,22px); line-height: 1.8; }
.landing-cta-band { max-width: 1180px; margin: 0 auto; padding: 46px 28px; text-align: center; background: #26100f; border: 1.5px solid rgba(213,161,46,0.45); border-radius: 26px; }
.landing-cta-band p { font-size: 18px; color: #c2ab98; margin: 0 0 22px; }
.landing-foot { text-align: center; color: #7a6657; font-size: 15px; padding: 30px 0 40px; }

/* Login modal: opaque branded backdrop (never show the tool/chart behind) + above landing */
#userModal { z-index: 1600; background: linear-gradient(160deg, #1f0909 0%, #170707 60%, #100505 100%); }
#userModal.gate-locked { background: linear-gradient(160deg, #1f0909 0%, #170707 60%, #100505 100%); backdrop-filter: none; }

/* Chat history grouped per person/ดวง */
.ai-history-group { border: 1px solid var(--line); border-radius: 8px; background: #fffdfb; margin-bottom: 2px; }
/* NOTE: summary is a plain BLOCK (not flex) and the group has NO overflow:hidden —
   a flex <summary> inside an overflow-hidden <details> can be clipped to 0 height
   in Chrome, which made the names render invisible despite a dark, visible color. */
.ai-history-group > summary { cursor: pointer; padding: 9px 11px; display: block; list-style: none; line-height: 1.45; }
.ai-history-group > summary::-webkit-details-marker { display: none; }
.ai-history-group > summary::before { content: "▸ "; color: var(--brand, #8a5012); font-weight: 700; }
.ai-history-group[open] > summary::before { content: "▾ "; }
.ai-history-group > summary:hover { background: var(--gold-soft, #fff1c8); }
.ai-history-group .ahg-name { font-weight: 700; color: var(--brand-dark, #5a2a08); font-size: 14px; }
.ai-history-group .ahg-meta { display: block; font-size: 12px; color: var(--muted, #8a7a6a); padding-left: 14px; margin-top: 2px; }
.ai-history-group[open] > summary { border-bottom: 1px solid var(--line); }
.ai-history-group-body { display: grid; gap: 6px; padding: 8px; }
.ai-hist-more { width: 100%; justify-content: center; text-align: center; margin-top: 2px; } /* ปุ่ม "แสดงเพิ่ม" ประวัติแชท (ทีละ 15) */
.ai-history-group-body .ai-history-item { background: #ffffff; }

.lang-select { padding: 6px 10px; cursor: pointer; font-size: 14px; min-width: 86px; }
.landing-nav .lang-select { background: transparent; border: 1.5px solid rgba(213,161,46,0.5); color: #fff1c8; border-radius: 22px; }
/* ── Minimal header controls: compact, equal height, auto-width (no full-width selects) ── */
.top-actions { gap: 6px; }
.top-actions > .ghost-btn,
.top-actions > .solid-btn {
  height: 34px; padding: 0 11px; font-size: 13px; font-weight: 700;
  border-radius: 8px; display: inline-flex; align-items: center; gap: 5px;
}
.top-actions > select {
  height: 34px; padding: 0 24px 0 11px; font-size: 13px; font-weight: 700;
  border-radius: 8px; width: auto; min-width: 0; max-width: 9.5em; box-sizing: border-box;
}
#notationToggle, #themeToggle { padding: 0 10px; }
#userMenuBtn { max-width: 12em; min-width: 0; overflow: hidden; white-space: nowrap; }
/* name lives in an inner span — text-overflow:ellipsis can't truncate the text node
   of a flex button directly, so the span (a flex item) ellipsizes with min-width:0 */
#userMenuBtn .umb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 680px) {
  .top-actions { justify-content: flex-start; }
  .top-actions > .ghost-btn,
  .top-actions > .solid-btn,
  .top-actions > select { flex: 0 0 auto; width: auto; }
}

/* ── Results empty-state (no chart yet → invite to fill the birth form) ───── */
.results-placeholder { display: none; }
body.awaiting-birth .results > *:not(#resultsPlaceholder):not(#tab-numerology):not(#tab-admin):not(#tab-phone):not(#tab-usage) { display: none !important; }
/* numerology & admin & phone & usage are standalone tools — don't show the "enter birth details" placeholder there */
body[data-active-tab="numerology"] #resultsPlaceholder,
body[data-active-tab="admin"] #resultsPlaceholder,
body[data-active-tab="phone"] #resultsPlaceholder,
body[data-active-tab="usage"] #resultsPlaceholder { display: none !important; }
body.awaiting-birth #resultsPlaceholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 18px; min-height: clamp(360px, 62vh, 640px); padding: 56px 28px;
}
#resultsPlaceholder .rp-orb {
  position: relative;                 /* anchor for the twinkle glint */
  width: 152px; height: 152px; border-radius: 24px; display: grid; place-items: center;
  background: none; overflow: hidden;
  /* gentle glow only — NO transform, so the fine gold lines never shimmer/flicker */
  box-shadow: 0 0 0 1px rgba(213,161,46,0.30), 0 18px 50px rgba(213,161,46,0.30);
  animation: rpGlow 6s ease-in-out infinite;
}
#resultsPlaceholder .rp-orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes rpGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(213,161,46,0.24), 0 16px 44px rgba(213,161,46,0.22); }
  50%     { box-shadow: 0 0 0 1px rgba(213,161,46,0.42), 0 20px 58px rgba(213,161,46,0.40); }
}
/* Warm glow sitting at the CENTER of the "O" — reads like the sun at the heart of
   the solar system, with the zodiac wheel orbiting it. The only thing that moves,
   so the fine gold lines never shimmer. top/left tuned to the O; nudge if art changes. */
.rp-orb .rp-orb-star {
  position: absolute; top: 46.8%; left: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 2;
  background: radial-gradient(circle, rgba(255,250,230,0.98) 0%, rgba(255,216,128,0.70) 30%, rgba(255,196,90,0.24) 56%, rgba(255,196,90,0) 76%);
  border-radius: 50%;
  animation: rpSunGlow 3.4s ease-in-out infinite;
}
.rp-orb .rp-orb-star::before, .rp-orb .rp-orb-star::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.rp-orb .rp-orb-star::before { width: 1.4px; height: 22px; background: linear-gradient(rgba(255,250,230,0) 0%, rgba(255,250,230,0.70) 50%, rgba(255,250,230,0) 100%); }
.rp-orb .rp-orb-star::after  { width: 22px; height: 1.4px; background: linear-gradient(90deg, rgba(255,250,230,0) 0%, rgba(255,250,230,0.70) 50%, rgba(255,250,230,0) 100%); }
@keyframes rpSunGlow {
  0%, 100% { opacity: 0.60; transform: translate(-50%,-50%) scale(0.90); }
  50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  #resultsPlaceholder .rp-orb { animation: none; }
  .rp-orb .rp-orb-star { animation: none; opacity: 0.75; }
}
#resultsPlaceholder h2 { margin: 6px 0 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--gold-soft); }
#resultsPlaceholder p { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.7; color: #d8c4b0; }
#resultsPlaceholder #placeholderFillBtn {
  margin-top: 6px; padding: 13px 30px; border: none; border-radius: 30px; cursor: pointer;
  font-family: inherit; font-size: 18px; font-weight: 700; color: #2a1206;
  background: linear-gradient(180deg, #e8b43c, #c8901c);
  box-shadow: 0 12px 30px rgba(213,161,46,0.32); transition: transform .15s ease, box-shadow .15s ease;
}
#resultsPlaceholder #placeholderFillBtn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(213,161,46,0.42); }

/* ════════════════════════════════════════════════════════════════════════
   Admin dashboard (tab "admin") — full-width, no birth sidebar, balanced cards
   ════════════════════════════════════════════════════════════════════════ */
/* Hide the birth-input sidebar on the admin tab; give the workspace full width. */
body[data-active-tab="admin"] .sidebar,
body[data-active-tab="usage"] .sidebar { display: none; }
body[data-active-tab="admin"] .workspace,
body[data-active-tab="usage"] .workspace {
  grid-template-columns: 1fr;
  max-width: 1680px; /* เท่าแถบเมนู/topbar — เดิม 1480 ทำให้ 3 คอลัมน์ดูแคบกว่าเมนูข้างบน (คุณหมอ 2026-07-23) */
}

/* Header bar */
.admin-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding: 20px 26px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 18px;
  background:
    radial-gradient(130% 180% at 0% 0%, rgba(213,161,46,0.16), transparent 58%),
    linear-gradient(135deg, #fffaf0, #fff6e6 70%);
  box-shadow: 0 10px 30px rgba(160,120,30,0.08);
}
.admin-header-text h2 {
  margin: 0; font-size: 22px; font-weight: 800; color: #3a2a16; letter-spacing: -0.01em;
}
.admin-header .admin-sub { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.admin-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(213,161,46,0.14); color: #8a6a1e;
  font-size: 12px; font-weight: 700; border: 1px solid rgba(213,161,46,0.32);
}

/* Masonry of cards — balanced column heights, responsive, cards never split */
/* คุณหมอ 2026-07-23: เดิม `columns: 3 380px` (multi-column) คอลัมน์เท่ากันเสมอ ทำให้ช่องซ้าย
   (ตั้งค่าแหล่ง AI — ใช้บ่อยสุด) แคบจนข้อความล้น → เปลี่ยนเป็น grid ให้ซ้ายกว้างกว่าได้ */
.admin-dash {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 2fr); /* ซ้าย 1 คอลัมน์กว้าง + ขวา 2 คอลัมน์ = 3 คอลัมน์รวม */
  gap: 16px;
  align-items: start;
}
/* ขวา = masonry จริง (columns) → การ์ดไหลต่อกันไม่เหลือช่องโหว่แบบ grid แถว */
.admin-side {
  columns: 2;
  column-gap: 16px;
  min-width: 0;
}
.admin-side > .tool-panel { break-inside: avoid; margin-bottom: 16px; } /* masonry ต้องใช้ margin คุมระยะแนวตั้ง (column-gap คุมแค่แนวนอน) */
/* กันข้อความยาว (ชื่อโมเดล/endpoint) ดันกริดล้น — บทเรียน v1.5.235 */
.admin-dash > .tool-panel { min-width: 0; }
.admin-dash input,
.admin-dash select,
.admin-dash textarea { max-width: 100%; }
@media (max-width: 1280px) { .admin-dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .admin-side { columns: 1; } }
@media (max-width: 900px)  { .admin-dash { grid-template-columns: 1fr; } .admin-side { columns: 1; } }
.admin-dash > .tool-panel {
  margin: 0;        /* grid ใช้ gap แล้ว — margin-bottom เดิมของ masonry ทำให้ระยะซ้อน */
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel, #fff);
  box-shadow: 0 4px 16px rgba(120,90,30,0.05);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.admin-dash > .tool-panel:hover {
  box-shadow: 0 10px 28px rgba(120,90,30,0.12);
  border-color: rgba(213,161,46,0.40);
}
/* Card header: title + accent underline */
.admin-dash .section-title {
  align-items: center;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(213,161,46,0.16);
}
.admin-dash .section-title h3 {
  font-size: 15px; font-weight: 800; color: #3a2a16; margin: 0;
}
/* Featured (primary) config card stands out regardless of masonry position */
.admin-dash .admin-featured {
  border-color: rgba(213,161,46,0.45);
  box-shadow: 0 8px 26px rgba(160,120,30,0.13);
}
.admin-dash .admin-featured .section-title h3 { color: #8a5a12; }

/* Sane textarea heights inside admin (override the global textarea{min-height:520px}) */
.admin-dash .full-label textarea { min-height: 90px; }
.admin-dash #aiSystemInstruction { min-height: 230px; }
.admin-dash #aiTestPrompt { min-height: 84px; }
.admin-dash #indexTextArea { min-height: 130px; }
.admin-dash #lineWelcomeTh,
.admin-dash #lineWelcomeEn { min-height: 96px; }

.admin-dash .admin-ai-actions { margin-top: 10px; }

/* Responsive: fewer columns as the viewport narrows */
@media (max-width: 1180px) { .admin-dash { columns: 2 340px; } }
@media (max-width: 760px)  { .admin-dash { columns: 1; } }

/* ════════ #tab-usage — full-width left-rail dashboard (ผู้ใช้/สถิติ) ════════ */
/* คุณหมอ 07-19: เลิก masonry 3 คอลัมน์แคบ → sidebar ซ้าย + ตารางกว้างอ่านง่าย */
.udash-shell { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; }
.udash-rail {
  position: sticky; top: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px; box-shadow: 0 6px 20px rgba(120,90,30,0.07);
}
.udash-rail-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 6px 10px 10px;
}
.udash-nav { display: flex; flex-direction: column; gap: 4px; }
.udash-navbtn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 11px; background: transparent;
  color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: pointer; text-align: left;
  transition: background .15s ease, color .15s ease;
}
.udash-navbtn:hover { background: var(--panel-2); }
.udash-navbtn .udash-ico { font-size: 16px; line-height: 1; }
.udash-navbtn.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; box-shadow: 0 6px 16px rgba(162,12,12,0.24);
}
.udash-count {
  margin-left: auto; min-width: 22px; text-align: center;
  padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(213,161,46,0.16); color: #8a5a12;
}
.udash-navbtn.active .udash-count { background: rgba(255,255,255,0.24); color: #fff; }
.udash-count:empty { display: none; }

.udash-content { min-width: 0; }
.udash-pane { display: none; }
.udash-pane.active { display: block; }
/* usage & feedback panes carry loose content (headings, budget rows, tables) — the app bg is a
   dark starfield, so wrap them in a cream surface (the users pane uses its own floating cards). */
.udash-pane[data-udash-pane="usage"],
.udash-pane[data-udash-pane="feedback"] {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 4px 16px rgba(120,90,30,0.05);
}
.udash-pane[data-udash-pane="usage"] .udash-stat { background: var(--panel-2); }
.udash-pane[data-udash-pane="usage"] .udash-stat.gold { background: linear-gradient(135deg, #fffaf0, #fff4de); }
.udash-pane-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.udash-pane-head h3 { margin: 0; font-family: "Noto Serif Thai", serif; font-size: 19px; font-weight: 800; color: #3a2a16; }

/* Stat cards */
.udash-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.udash-stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 3px 12px rgba(120,90,30,0.05);
}
.udash-stat .lab { color: var(--muted); font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.udash-stat .val { font-family: "Noto Serif Thai", serif; font-size: 26px; font-weight: 800; color: #3a2a16; line-height: 1.1; }
.udash-stat.gold { border-color: rgba(213,161,46,0.55); background: linear-gradient(135deg, #fffaf0, #fff4de); }
.udash-stat.gold .val { color: #8a5a12; }
.udash-stat.gold .lab { color: #a07a2e; }

/* Toolbar: search + filter chips */
.udash-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.udash-search { position: relative; flex: 1; min-width: 220px; }
.udash-search input {
  width: 100%; height: 40px; padding: 0 14px 0 40px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink);
  font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.udash-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213,161,46,0.22); }
.udash-mag { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: 0.7; pointer-events: none; }
.udash-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.udash-fchip {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.udash-fchip:hover { border-color: var(--gold); color: #8a5a12; }
.udash-fchip.active { background: #fdeede; border-color: var(--gold); color: #8a5a12; }

/* Collapsible add-user */
.udash-adduser {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  padding: 4px 14px; margin-bottom: 14px;
}
.udash-adduser > summary {
  list-style: none; cursor: pointer; padding: 9px 4px; font-size: 14px; font-weight: 700; color: var(--brand-dark);
}
.udash-adduser > summary::-webkit-details-marker { display: none; }
.udash-adduser > summary:hover { color: var(--brand); }
.udash-adduser[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.udash-adduser .split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.udash-adduser .split-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.udash-adduser .split-row input {
  height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 14px;
}
.udash-adduser .split-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213,161,46,0.2); }
.udash-adduser .toggle-label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink); margin: 6px 0 10px; }
.udash-adduser .admin-ai-actions { display: flex; gap: 8px; padding-bottom: 10px; }

/* Users table */
.udash-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 3px 14px rgba(120,90,30,0.05); }
.udash-usertable { width: 100%; border-collapse: collapse; font-size: 14px; }
.udash-usertable thead th {
  background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; text-align: left;
  padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
/* หัวคอลัมน์ที่กดเรียงได้ (คุณหมอ 07-25) — ต้องดูออกว่ากดได้ และรู้ว่ากำลังเรียงคอลัมน์ไหน */
.udash-usertable thead th.udash-sortable { cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s; }
.udash-usertable thead th.udash-sortable:hover { background: #fdf3e7; color: var(--ink); }
.udash-usertable thead th.udash-sortable:focus-visible { outline: 2px solid var(--gold, #c9a227); outline-offset: -2px; }
.udash-usertable thead th.udash-sortable.active { color: var(--ink); background: #fdf0e0; }
.udash-usertable tbody td { padding: 11px 14px; border-bottom: 1px solid #f3e7e2; color: var(--ink); vertical-align: middle; }
.udash-usertable tbody tr:last-child td { border-bottom: 0; }
.udash-usertable tbody tr:hover { background: #fffdf7; }
.udash-usertable tr.udash-testrow { opacity: 0.5; }
.udash-empty { text-align: center; color: var(--muted); padding: 22px 14px !important; }
.udash-userc { display: flex; align-items: center; gap: 10px; }
.udash-av {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f7d79b, #e6b866); color: #6a4406;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em;
}
.udash-uname { font-weight: 700; color: #3a2a16; }
.udash-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.udash-role { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.udash-role.admin { background: linear-gradient(135deg, #fbe6c2, #f7d79b); color: #7a4d05; }
.udash-role.user { background: #f1efe8; color: #5f5e5a; }
.udash-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.udash-status .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.udash-status.ok { color: #17795a; }
.udash-status.ok .dot { background: #1d9e75; }
.udash-status.blocked { color: #a5301f; }
.udash-status.blocked .dot { background: #c0392b; }
.udash-actions { display: inline-flex; gap: 6px; white-space: nowrap; }
.udash-usertable .mini-action { padding: 5px 11px; font-size: 12.5px; }

/* Feedback recent: comment cell */
.udash-content .fb-cmt { max-width: 420px; white-space: normal; line-height: 1.45; }
.udash-content .fb-date { white-space: nowrap; color: var(--muted); font-size: 13px; }

@media (max-width: 820px) {
  .udash-shell { grid-template-columns: 1fr; }
  .udash-rail { position: static; padding: 8px; }
  .udash-rail-title { display: none; }
  .udash-nav { flex-direction: row; overflow-x: auto; gap: 6px; -webkit-overflow-scrolling: touch; }
  .udash-navbtn { width: auto; white-space: nowrap; flex: 0 0 auto; }
}
@media (max-width: 620px) {
  .udash-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .udash-adduser .split-row { grid-template-columns: 1fr; }
}

/* ════════ Theme: COSMIC dark-glass (opt-in via <html data-theme="cosmic">) ════════ */
html[data-theme="cosmic"] {
  --panel: rgba(26, 18, 42, 0.52);
  --panel-2: rgba(40, 28, 58, 0.55);
  --ink: #f1e7dd;
  --muted: #b6a79c;
  --brand-dark: #f3a9b5;
  --line: rgba(213, 161, 46, 0.20);
  --gold: #e7b53e;
}
html[data-theme="cosmic"] .topbar,
html[data-theme="cosmic"] .main-tabs,
html[data-theme="cosmic"] .tabs,
html[data-theme="cosmic"] .panel,
html[data-theme="cosmic"] .tool-panel,
html[data-theme="cosmic"] .ai-side-section,
html[data-theme="cosmic"] .auth-dialog {
  background: rgba(24, 16, 40, 0.5) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  color: var(--ink);
  border-color: rgba(213, 161, 46, 0.18);
}
html[data-theme="cosmic"] .summary-band { background: rgba(36, 24, 54, 0.55) !important; color: var(--ink); }
html[data-theme="cosmic"] .tab { color: #d8c9bd; }
html[data-theme="cosmic"] .tab.active { background: rgba(213, 161, 46, 0.18) !important; color: #ffe9b8 !important; }
html[data-theme="cosmic"] .chip, html[data-theme="cosmic"] .chip-button { background: rgba(48, 34, 64, 0.6) !important; color: #f1e2cf !important; border-color: rgba(213, 161, 46, 0.25); }
html[data-theme="cosmic"] .ai-history-item,
html[data-theme="cosmic"] .ai-note-item,
html[data-theme="cosmic"] .ai-history-group,
html[data-theme="cosmic"] .ai-history-group-body .ai-history-item,
html[data-theme="cosmic"] .ai-history-empty { background: rgba(40, 28, 58, 0.5) !important; color: var(--ink); border-color: rgba(213, 161, 46, 0.16); }
html[data-theme="cosmic"] .ai-history-item p, html[data-theme="cosmic"] .ai-note-item p { color: #cdbcae; }
html[data-theme="cosmic"] .ai-history-item small, html[data-theme="cosmic"] .ai-note-item small { color: #9a8d82; }
html[data-theme="cosmic"] input,
html[data-theme="cosmic"] select,
html[data-theme="cosmic"] textarea { background: rgba(14, 9, 26, 0.62) !important; color: var(--ink) !important; border-color: rgba(213, 161, 46, 0.28); }
html[data-theme="cosmic"] .user-modal { background: linear-gradient(160deg, #1f0e2a 0%, #140a1e 70%, #0e0716 100%); }

/* Consultation framing: hide the AI-provider badge + internal analysis-version badge
   from customers (role-customer). Only the admin/owner sees them — to a visitor the
   app reads as a genuine consultation with Master Korn, not an "AI". */
#aiModeBadge,
#aiVersionBadge { display: none !important; }  /* provider (Gemini/OpenAI) + analysis-version hidden from the chat header — feels like a real consultation; provider still set in admin settings */

/* ── เลขศาสตร์ admin tab ─────────────────────────────────────────────────── */
/* left column = input (top) + AI search (fills the empty space below); right column = result */
/* Numerology is a standalone naming tool — hide the birth sidebar, go full width. */
body[data-active-tab="numerology"] .sidebar { display: none; }
body[data-active-tab="numerology"] .workspace { grid-template-columns: 1fr; max-width: 1480px; }

/* Naming page: mode toggle (full width) · left rail .num-side stacks controls · right .num-main = big result/agent */
.num-layout { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.num-mode-toggle { grid-column: 1 / -1; justify-self: start; display: inline-flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow); }
.num-mode-btn { flex: 0 0 auto; border: 0; background: transparent; color: var(--brand); font-weight: 800; font-size: 15px; padding: 9px 18px; border-radius: 9px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.num-mode-btn:hover { background: rgba(213,161,46,.12); }
.num-mode-btn.active { background: var(--brand); color: #fff; }
.num-side, .num-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* input grid: ถึง label จะตัดบรรทัดไม่เท่ากัน ก็ดันกล่อง input ชิดล่าง → กล่องตรงแถวเดียวกัน ดูเท่ากัน */
#tab-numerology .num-input-panel .compact-grid label { grid-template-rows: 1fr auto; }
.num-layout.mode-check .num-mode-search-only { display: none; }
.num-layout.mode-search .num-mode-check-only { display: none; }
@media (max-width: 980px) { .num-layout { grid-template-columns: 1fr; } }

/* Name calculation history (last 100) */
.num-history-list { display: flex; flex-direction: column; gap: 6px; max-height: 72vh; overflow-y: auto; }
.num-history-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.num-history-item:hover { background: rgba(213,161,46,.10); border-color: rgba(213,161,46,.42); }
.num-history-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num-history-meta { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--brand); }
.num-history-del { flex-shrink: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; line-height: 1; }
.num-history-del:hover { background: rgba(162,12,12,.12); color: var(--brand); }
.num-history-empty { color: var(--muted); font-size: 13px; padding: 10px 4px; }
/* ตั้งชื่อ: ปุ่ม action (ปักหมุด / แชร์ / ตีความ) — กลุ่มห่อบรรทัดได้ */
.num-result-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#tab-numerology .num-result-panel .section-title { flex-wrap: wrap; }
.num-pinned-on { background: var(--brand) !important; color: #fff !important; }
/* ตั้งชื่อ: รายการปักหมุด (เหนือประวัติ) */
.num-pinned-list { display: flex; flex-direction: column; gap: 6px; }
.num-pinned-list:not(:empty) { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.num-pinned-head { font-weight: 800; font-size: 12px; color: var(--brand); margin: 2px 0 4px; }
.num-pinned-item { border-color: rgba(213,161,46,.5); background: rgba(213,161,46,.10); }
.num-pinned-item:hover { background: rgba(213,161,46,.18); }
.num-admin-pill { font-size: 11px; font-weight: 600; color: var(--brand); background: rgba(162,12,12,.1);
  border: 1px solid rgba(162,12,12,.3); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.num-result { display: flex; flex-direction: column; gap: 12px; }
.num-name-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel-2); }
.num-name-row.num-grand { background: rgba(213,161,46,.1); border-color: rgba(213,161,46,.45); }
.num-name-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.num-name-label { font-size: 12px; color: var(--muted); }
.num-name-text { font-size: 18px; }
.num-total { font-weight: 800; font-size: 18px; color: var(--brand); }
.num-badge { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.num-good { background: rgba(35,134,79,.14); color: var(--green); border: 1px solid rgba(35,134,79,.35); }
.num-bad { background: rgba(162,12,12,.12); color: var(--brand); border: 1px solid rgba(162,12,12,.32); }
.num-mixed { background: rgba(214,140,30,.16); color: #b5710a; border: 1px solid rgba(214,140,30,.46); }
.num-neutral { background: rgba(117,103,99,.12); color: var(--muted); border: 1px solid var(--line); }
.num-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* letter+value tile: ตัวอักษรบน · ค่าเลขล่าง — ทุกชิปขนาดสม่ำเสมอ (แทนเลข superscript จิ๋ว 11px เดิมที่ดูเล็กบ้างใหญ่บ้าง) */
.num-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 34px; font-size: 18px; font-weight: 700; line-height: 1.15; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; }
.num-chip b { font-size: 12px; font-weight: 700; color: var(--blue); }
.num-chip-kala { background: rgba(162,12,12,.1); border-color: var(--brand); color: var(--brand); }
.num-chip-kala b { color: var(--brand); }
.num-ayatana { margin-top: 4px; font-size: 15px; }
/* เลขหัวข้อ (พลังเงา/อายตนะ) = ระดับเดียวกับ "เลขรวม" 18px → ไม่เล็กบ้างใหญ่บ้าง */
.num-ayatana strong { font-size: 18px; font-weight: 800; color: var(--brand); }
.num-taksa-wrap { margin-top: 6px; }
table.num-taksa { width: 100%; border-collapse: collapse; font-size: 14px; }
table.num-taksa caption { text-align: left; font-weight: 700; color: var(--ink); padding-bottom: 6px; }
table.num-taksa th { text-align: left; width: 96px; color: var(--muted); font-weight: 600; padding: 5px 8px;
  border: 1px solid var(--line); background: var(--panel-2); }
table.num-taksa td { padding: 5px 8px; border: 1px solid var(--line); font-size: 16px; letter-spacing: 2px; }
tr.num-taksa-kala th, tr.num-taksa-kala td { background: rgba(162,12,12,.09); color: var(--brand); font-weight: 700; }
.num-warn { color: var(--brand); font-weight: 600; margin: 8px 0 2px; }
.num-ok { color: var(--green); font-weight: 600; margin: 8px 0 2px; }
.num-interpret { margin-top: 12px; padding: 12px; border: 1px solid rgba(213,161,46,.4);
  border-radius: 12px; background: rgba(213,161,46,.07); line-height: 1.65; }
.num-check { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; cursor: pointer; }
.num-check input { width: auto; }
.num-search-actions { display: flex; gap: 8px; margin-top: 10px; }
.num-search-actions input { flex: 1; }
.num-search-result { margin-top: 12px; }
.num-suggest-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
.num-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel); cursor: pointer; }
.num-suggest:hover { border-color: var(--gold); background: var(--panel-2); }
.num-suggest strong { font-size: 16px; }

/* ── timezone: auto-derived from place; manual override hidden behind a toggle ── */
.tz-toggle { display: inline-block; background: none; border: 0; color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; text-align: left; }
.tz-toggle:hover { text-decoration: underline; }
.tz-field { display: none; }
body.tz-show .tz-field { display: grid; }

/* numerology: Thai vs English spelling section headers */
.num-section-head { font-weight: 800; font-size: 14px; color: var(--brand); margin: 4px 0 2px; padding-top: 8px; border-top: 1px dashed var(--line); }
.num-result > .num-section-head:first-child { border-top: 0; padding-top: 0; }

/* numerology: อายตนะ meaning text */
.num-meaning { font-size: 14px; line-height: 1.72; color: var(--ink); background: rgba(213,161,46,.08); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 9px 13px; margin: 3px 0 5px; }
.num-reduce-note { display: inline-block; font-size: 11px; font-weight: 700; color: var(--brand); background: rgba(162,12,12,.08); border-radius: 6px; padding: 1px 7px; margin-right: 4px; }

/* ตุ๊กตาไขนาม doll diagram */
.num-tukkata { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tk-doll { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; background: rgba(213,161,46,.05); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tk-figure { position: absolute; top: 8px; bottom: 8px; left: 50%; transform: translateX(-50%); height: calc(100% - 16px); width: auto; z-index: 0; pointer-events: none; }
.tk-row { position: relative; z-index: 1; display: flex; gap: 10px; justify-content: center; }
.tk-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 104px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,253,251,.82); backdrop-filter: blur(2px); }
.tk-cell.tk-has { border-width: 2px; }
.tk-cell.tk-good.tk-has { border-color: var(--green); background: rgba(35,134,79,.12); }
.tk-cell.tk-bad.tk-has { border-color: var(--brand); background: rgba(162,12,12,.12); }
.tk-pos { font-size: 11px; color: var(--muted); }
.tk-base { font-size: 12px; font-weight: 700; color: #6a5a2a; }
.tk-base i { font-style: normal; color: var(--muted); font-weight: 600; }
.tk-cell.tk-good .tk-base { color: var(--green); }
.tk-cell.tk-bad .tk-base { color: var(--brand); }
.tk-letters { font-size: 20px; font-weight: 800; letter-spacing: 2px; min-height: 26px; color: var(--ink); }
.tk-cell.tk-good.tk-has .tk-letters { color: var(--green); }
.tk-cell.tk-bad.tk-has .tk-letters { color: var(--brand); }
.tk-row-head .tk-cell { min-width: 128px; }
.tk-sequence { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 10px; background: rgba(213,161,46,.06); border-radius: 10px; }
.tk-seq-label { font-weight: 700; color: var(--muted); margin-right: 2px; }
.tk-seq-item { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 3px 7px; border-radius: 8px; font-weight: 800; }
.tk-seq-item i { font-style: normal; font-size: 11px; font-weight: 600; }
.tk-seq-item.tk-good { background: rgba(35,134,79,.14); color: var(--green); }
.tk-seq-item.tk-bad { background: rgba(162,12,12,.13); color: var(--brand); }
.tk-seq-arrow { color: var(--muted); font-weight: 700; }
.tk-path { font-size: 13px; color: var(--ink); padding: 2px 4px; }
.tk-verdict { font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 10px; }
.tk-verdict.tk-good { background: rgba(35,134,79,.12); color: var(--green); border: 1px solid rgba(35,134,79,.35); }
.tk-verdict.tk-neutral { background: rgba(213,161,46,.12); color: #8a6a1e; border: 1px solid rgba(213,161,46,.35); }
.tk-verdict.tk-bad { background: rgba(162,12,12,.10); color: var(--brand); border: 1px solid rgba(162,12,12,.32); }
.tk-mean { font-size: 12px; line-height: 1.55; padding: 6px 10px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; background: rgba(0,0,0,.02); }
.tk-mean.tk-good { border-left-color: var(--green); }
.tk-mean.tk-bad { border-left-color: var(--brand); }
.tk-syl-note { font-size: 12px; line-height: 1.5; padding: 5px 10px; border-radius: 9px; background: rgba(0,0,0,.03); border: 1px solid var(--line); }
.tk-syl-note.tk-good { background: rgba(35,134,79,.10); border-color: rgba(35,134,79,.30); color: var(--green); }
.tk-syl-note.tk-good b { color: var(--ink); }
.tk-syl-note.tk-syl-pending { color: var(--muted, #777); }
/* ช่องคำอ่าน/แยกพยางค์ (full width) */
.num-reading-field { display: grid; gap: 6px; margin: 8px 0 2px; }
.num-reading-field > span { font-size: 12px; color: var(--muted); font-weight: 700; }
/* แปลรวมเส้นทางตุ๊กตา */
.tk-combined { margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(213,161,46,.07); }
.tk-combined.tk-good { border-color: rgba(35,134,79,.35); background: rgba(35,134,79,.07); }
.tk-combined.tk-bad { border-color: rgba(162,12,12,.3); background: rgba(162,12,12,.06); }
.tk-combined-head { font-weight: 800; font-size: 13px; color: var(--brand); margin-bottom: 6px; }
.tk-combined .tk-sequence { margin-bottom: 6px; }
.tk-combined-text { font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }

/* AI naming agent */
.num-agent-panel { margin-top: 16px; }
.num-agent-chat { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; margin: 6px 0; }
.num-agent-msg { max-width: 85%; padding: 7px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.num-agent-msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.num-agent-msg.agent { align-self: flex-start; background: rgba(213,161,46,.12); color: var(--ink); border-bottom-left-radius: 4px; }
.num-agent-input-row { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.num-agent-input-row textarea { flex: 1; min-height: 48px !important; resize: vertical; }
.num-agent-input-row .solid-btn { white-space: nowrap; align-self: stretch; }
.num-agent-result { display: grid; gap: 10px; margin-top: 12px; }
.num-agent-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--panel-2); }
.num-agent-card.tk-good { border-color: rgba(35,134,79,.4); background: rgba(35,134,79,.05); }
.num-agent-card.tk-bad { border-color: rgba(162,12,12,.3); }
.num-agent-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.num-agent-rank { font-weight: 800; color: var(--muted); font-size: 14px; }
.num-agent-name { font-weight: 800; font-size: 17px; flex: 1; min-width: 0; }
.num-agent-name i { font-style: normal; font-weight: 600; color: var(--muted); font-size: 14px; }
.num-agent-mean { font-size: 13px; color: var(--ink); margin: 6px 0 4px; }
.num-agent-nums { font-size: 12px; color: var(--muted); }
.num-agent-tuk { font-size: 12px; color: var(--green); margin-top: 3px; }
.num-suggest-mini { margin-top: 8px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--brand); font-weight: 600; }
.num-suggest-mini:hover { background: rgba(213,161,46,.1); border-color: rgba(213,161,46,.4); }
/* fractional star rating */
.num-stars { position: relative; display: inline-block; font-size: 17px; line-height: 1; letter-spacing: 1px; color: #dcc9a3; white-space: nowrap; }
.num-stars::before { content: "★★★★★"; }
.num-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #e9a900; }
.num-stars-fill::before { content: "★★★★★"; }
.num-stars-num { font-size: 13px; color: #b8860b; margin-left: 2px; }

/* ── ตั้งชื่อ (naming page) — new cards ─────────────────────────────────────── */
/* คะแนนรวม (verdict) บนสุดของผลวิเคราะห์ */
.num-verdict:empty { display: none; }
.num-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: rgba(213,161,46,.12); border: 1px solid rgba(213,161,46,.45); }
.num-verdict-stars .num-stars { font-size: 24px; }
.num-verdict-stars .num-stars-num { font-size: 15px; }
.num-verdict-word { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.num-verdict-word .num-badge { font-size: 14px; font-weight: 800; padding: 3px 12px; }
.num-verdict-total { font-weight: 800; color: var(--brand); }
/* คำแปล/ความหมายของชื่อ-นามสกุล */
.num-name-meaning:empty { display: none; }
.num-name-meaning { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.num-name-meaning-head { font-weight: 800; font-size: 13px; color: var(--brand); margin-bottom: 4px; }
.num-meaning-row { font-size: 14px; line-height: 1.6; margin: 4px 0; overflow-wrap: anywhere; }
.num-meaning-key { display: inline-block; font-weight: 800; color: var(--ink); background: rgba(213,161,46,.16); border-radius: 6px; padding: 0 7px; margin-right: 6px; }
/* พลังดาวพระเคราะห์ + อายตนะ (per ชื่อ/นามสกุล/รวม) */
.num-pngaya { border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; background: var(--panel-2); }
.num-pngaya-label { font-weight: 800; font-size: 12px; color: var(--brand); margin-bottom: 2px; }
/* อักษรนำหน้า · ศาสตร์ 256 */
.num-prefix-256 { display: flex; flex-direction: column; gap: 10px; }
.num-256-group { display: flex; flex-direction: column; gap: 5px; }
.num-256-label { font-weight: 800; font-size: 13px; }
.num-256-good { color: var(--green); }
.num-256-avoid { color: var(--brand); }
.num-prefix-256 .num-chip { font-size: 18px; font-weight: 800; padding: 4px 11px; }
.num-prefix-256 .num-chip.num-good { background: rgba(35,134,79,.14); border-color: rgba(35,134,79,.45); color: var(--green); }

/* fix numerology overflow ("เส้นล้ำออกมา"): grid items must be able to shrink, and the
   ทักษา table must respect its container instead of forcing its min-content width. */
.num-layout > * { min-width: 0; }
.num-result, .num-result-panel, .num-input-panel, .num-search-panel { min-width: 0; }
.num-result-panel, .num-input-panel, .num-search-panel { overflow-x: clip; }
table.num-taksa { table-layout: fixed; max-width: 100%; }
.num-meaning, .num-name-text { overflow-wrap: anywhere; }
.num-chips { max-width: 100%; }

/* ── หาฤกษ์ (auspicious timing) — reuse app theme tokens, gลมกลืนกับแท็บ AI ── */
#tab-auspicious > .ai-layout { flex: 1 1 auto; min-height: 0; } /* 2 คอลัมน์เหมือนแท็บ AI: chat ซ้าย + ราศีจักร/ประวัติ ขวา */
/* คอลัมน์แชทฤกษ์กว้างขึ้น (กล่องคำตอบขาวกว้าง อ่านง่าย) — เฉพาะจอกว้าง, จอแคบยัง stack เต็มจอ */
@media (min-width: 1081px) {
  /* v255 (คุณหมอแก้จาก v254): เพดานรวม 1780px เท่าหน้าปรึกษาอ.กรณ์ โดยส่วนที่เพิ่มทั้งหมดเข้า "แถบขวา"
     (ราศีจักร ณ ฤกษ์/ปักหมุด/ประวัติ) — ขวา 375(เดิม)→475px · แชทกลาง 869px คงเดิม · ฟอร์มซ้าย 410px คงเดิม
     (0.7→0.885fr คู่กับเพดาน 1780 — วัดจริงบน live ทุกค่า, คุณหมอ 2026-07-23) */
  .ausp-layout { grid-template-columns: minmax(0, 1.62fr) minmax(330px, 0.885fr); }
  body[data-active-tab="auspicious"] .topbar,
  body[data-active-tab="auspicious"] .main-tabs,
  body[data-active-tab="auspicious"] .workspace { max-width: 1780px; }
}
.ausp-panel { min-width: 0; }
.ausp-intro { font-size: 14px; color: var(--muted); margin: 4px 0 14px; line-height: 1.6; }
.ausp-th { color: #b5841f; font-weight: 700; }
.ausp-hi { color: #2f6db5; font-weight: 700; }
.ausp-label { font-size: 12px; color: var(--muted); font-weight: 700; margin: 12px 0 7px; letter-spacing: .02em; }
.ausp-chip.active { background: var(--brand); color: #fff7f0; border-color: var(--brand); }
.ausp-fields { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.ausp-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 170px; }
.ausp-field.ausp-field-sm { flex: 0 1 150px; min-width: 130px; }
.ausp-field span { font-size: 12px; color: var(--muted); font-weight: 700; }
.ausp-field input { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit; color: var(--ink); background: var(--panel); }
.ausp-field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213,161,46,.18); }
.ausp-owner-pick { margin: 12px 0 8px; }
.ausp-owner-lbl { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
.ausp-owner-row { position: relative; margin-bottom: 6px; }
.ausp-owner-row input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--ink); background: var(--panel); }
.ausp-owner-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213,161,46,.18); }
.ausp-owner-menu { position: absolute; z-index: 40; top: calc(100% + 3px); left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(40,20,10,.22); padding: 4px; }
.ausp-owner-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-family: inherit; }
.ausp-owner-opt:hover { background: var(--panel-2); }
.ausp-owner-opt b { font-size: 14px; font-weight: 700; }
.ausp-owner-opt span { font-size: 12px; color: var(--muted); }
.ausp-owner-empty { padding: 10px 12px; font-size: 12px; color: var(--muted); }
.ausp-owner-pick .ghost-btn.compact { font-size: 12px; padding: 4px 10px; }
.ausp-verify-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.ausp-verify-hint { font-size: 12px; color: var(--muted); }
.ausp-messages { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.ausp-msg { padding: 11px 15px; border-radius: 14px; font-size: 15px; line-height: 1.72; margin: 6px 0; max-width: 92%; overflow-wrap: anywhere; }
.ausp-msg.user { background: var(--brand); color: #fff7f0; border-radius: 14px 14px 4px 14px; align-self: flex-end; }
.ausp-msg.assistant { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; align-self: flex-start; }
.ausp-msg.assistant.loading { color: var(--muted); font-style: italic; }
.ausp-msg.assistant p { margin: 0 0 8px; } .ausp-msg.assistant p:last-child { margin-bottom: 0; }
.ausp-msg.assistant strong { color: var(--brand-dark); }
/* ฤกษ์ — ประวัติ + ปักหมุด + ให้ดาว */
.ausp-hist-panel { max-width: 820px; margin: 14px auto 0; }
.ausp-hist-list { display: flex; flex-direction: column; gap: 8px; font-family: "Noto Serif Thai", serif; }
.ausp-hist-empty { color: var(--muted); font-size: 13px; padding: 12px 4px; text-align: center; }
.ausp-hist-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel-2); }
.ausp-hist-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ausp-hist-head { font-weight: 700; color: var(--ink); font-size: 14px; }
.ausp-hist-when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ausp-hist-snippet { font-size: 12px; color: var(--muted); margin: 4px 0 8px; line-height: 1.5; }
.ausp-hist-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ausp-stars { display: inline-flex; gap: 1px; margin-right: 4px; }
.ausp-star { cursor: pointer; font-size: 18px; line-height: 1; color: var(--line); transition: color .12s; }
.ausp-star.on, .ausp-star:hover { color: var(--gold); }
.ausp-hist-actions .ghost-btn.compact { font-size: 12px; padding: 4px 9px; }
/* ปุ่มบนการ์ดผลตรวจฤกษ์ — ให้ชัดว่าเป็นปุ่ม (border+เงา+hover เติมสี) ไม่ใช่ข้อความ */
.ausp-result .ausp-hist-actions { gap: 8px; margin-top: 10px; }
.ausp-result .ausp-hist-actions .ghost-btn.compact {
  font-size: 13px; font-weight: 800; padding: 9px 15px; border-radius: 10px;
  border: 1.5px solid var(--brand); background: var(--gold-soft); color: var(--brand);
  box-shadow: 0 1.5px 0 rgba(162,12,12,.16); cursor: pointer; transition: background .12s, color .12s, box-shadow .12s, transform .12s;
}
.ausp-result .ausp-hist-actions .ghost-btn.compact:hover {
  background: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(162,12,12,.3); transform: translateY(-1px);
}
/* prompt ยาวที่ส่งให้ อ.กรณ์ — ย่อ default, กดดูรายละเอียดได้ */
.ausp-fullq { margin: 2px 0 8px; }
.ausp-fullq summary { cursor: pointer; font-size: 12px; color: var(--brand); font-weight: 700; padding: 4px 2px; list-style: none; }
.ausp-fullq summary::-webkit-details-marker { display: none; }
.ausp-fullq summary::before { content: "▸ "; }
.ausp-fullq[open] summary::before { content: "▾ "; }
.ausp-fullq-body { font-size: 12px; color: var(--muted); white-space: pre-wrap; line-height: 1.55; max-height: 260px; overflow: auto; padding: 8px 10px; background: var(--gold-soft, rgba(180,140,60,.08)); border-radius: 8px; margin-top: 4px; }
.ausp-result { border-color: var(--gold-soft, rgba(213,161,46,.35)); }
.ausp-result[data-ausp-result="0"] { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(213,161,46,.16); }
.ausp-res-score { font-weight: 800; font-size: 14px; white-space: nowrap; padding: 1px 9px; border-radius: 999px; }
.ausp-res-score.score-good { color: #1f7a3d; background: rgba(34,139,69,.13); }
.ausp-res-score.score-ok { color: #b07d10; background: rgba(213,161,46,.15); }
.ausp-res-score.score-warn { color: #b23b3b; background: rgba(178,59,59,.12); }
.ausp-reasons { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.ausp-reason { font-size: 12px; line-height: 1.35; padding: 2px 7px; border-radius: 7px; background: var(--panel-2); color: var(--muted); }
.ausp-reason.ok { color: #1f7a3d; background: rgba(34,139,69,.10); }
.ausp-reason.bad { color: #b23b3b; background: rgba(178,59,59,.09); }

/* ── ฤกษ์ result: verdict banner + breakdown แบบขั้นเป็นตอน ── */
.ausp-verdict { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0; padding: 9px 11px; border-radius: 11px; border: 1px solid transparent; }
.ausp-verdict-ico { font-size: 18px; line-height: 1.2; }
.ausp-verdict-txt { font-size: 13px; line-height: 1.45; }
.ausp-verdict-txt b { font-size: 14px; }
.ausp-verdict-note { color: var(--muted); font-size: 12px; }
.ausp-verdict.good { background: rgba(34,139,69,.09); border-color: rgba(34,139,69,.28); }
.ausp-verdict.good b { color: #1f7a3d; }
.ausp-verdict.ok { background: rgba(213,161,46,.10); border-color: rgba(213,161,46,.30); }
.ausp-verdict.ok b { color: #a87a10; }
.ausp-verdict.warn { background: rgba(178,59,59,.08); border-color: rgba(178,59,59,.30); }
.ausp-verdict.warn b { color: #b23b3b; }
.ausp-bd { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.ausp-bd-grp { border: 1px solid var(--border, rgba(180,140,60,.2)); border-radius: 10px; padding: 7px 10px; background: var(--panel-2, rgba(255,250,245,.55)); }
.ausp-bd-h { font-size: 12px; font-weight: 800; color: var(--accent, #b8892a); margin-bottom: 5px; letter-spacing: .2px; }
.ausp-bd-h i { font-weight: 600; font-style: normal; color: var(--muted); opacity: .8; }
.ausp-bd-row { display: grid; grid-template-columns: 16px minmax(96px,auto) 1fr; align-items: baseline; gap: 7px; font-size: 12px; line-height: 1.5; padding: 1px 0; }
.ausp-bd-ico { text-align: center; font-weight: 800; color: var(--muted); }
.ausp-bd-ico.ok { color: #1f7a3d; }
.ausp-bd-ico.bad { color: #b23b3b; }
.ausp-bd-ico.warn { color: #b5710a; }
.ausp-sompong-warn { margin: 6px 0 2px; padding: 7px 10px; border-radius: 9px; font-size: 12px; line-height: 1.4; background: rgba(214,140,30,.12); border: 1px solid rgba(214,140,30,.40); color: #8a5a08; }
.ausp-sompong-warn i { color: var(--muted); font-style: italic; font-weight: 400; }
.ausp-bd-lbl { color: var(--muted); font-weight: 600; }
.ausp-bd-val { color: var(--ink, inherit); }
.ausp-bd-val b { font-weight: 800; }

/* ── ขยายชาร์ตเต็มจอ (zoom modal) ── */
.chart-host[style*="zoom-in"]:hover { outline: 2px solid rgba(184,137,42,.35); outline-offset: 2px; }
.chart-zoom-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(24,14,6,.88); display: none; flex-direction: column; }
.chart-zoom-overlay.open { display: flex; }
.cz-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #fff; }
.cz-title { font-weight: 800; font-size: 14px; white-space: nowrap; }
.cz-hint { flex: 1; font-size: 12px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-bar button { border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 17px; font-weight: 700; min-width: 38px; height: 38px; border-radius: 10px; cursor: pointer; line-height: 1; }
.cz-bar button:hover { background: rgba(255,255,255,.3); }
.cz-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 8px 12px; touch-action: none; }
.cz-inner { width: min(96vw, 90vh); transform-origin: center center; will-change: transform; }
.cz-inner svg { width: 100%; height: auto; display: block; background: #fffaf8; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.45); }

/* ปุ่มติ๊ก เปิด/ปิดวงองศานอก */
.rerk-rings-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--brand); cursor: pointer; margin-left: auto; font-weight: 700; white-space: nowrap; }
.rerk-rings-toggle input { cursor: pointer; accent-color: var(--brand); }

/* 📚 ค้นคลังความรู้ (ช่องค้น + สรุปจากคลัง + ผลค้น) — เฉพาะแอดมิน:
   สรุปดิบจากคลังเรียบเรียงปะปนหลายหมวด ไม่เป็นประโยชน์กับ user (คุณหมอ 2026-07-22) */
.knowledge-section { display: none; }
body.role-admin .knowledge-section { display: block; }

/* 🔭 ตารางเทียบลัคนาแต่ละสำนัก — เฉพาะแอดมิน (user/guest ไม่เห็น กันงง)
   ซ่อน default แล้วโชว์เฉพาะ role-admin — กัน leak ตอน body ยังไม่มี role class (guest/ก่อน applyRoleVisibility) */
.lagna-compare { display: none; margin-top: 10px; border: 1px solid var(--line, #e7ddd6); border-radius: 10px; background: color-mix(in srgb, var(--brand) 4%, transparent); overflow: hidden; }
body.role-admin .lagna-compare { display: block; }
.lagna-compare > summary { cursor: pointer; padding: 8px 12px; font-weight: 700; font-size: 13px; color: var(--brand); list-style: none; user-select: none; }
.lagna-compare > summary::-webkit-details-marker { display: none; }
.lagna-compare > summary::before { content: "▸ "; }
.lagna-compare[open] > summary::before { content: "▾ "; }
.lagna-compare-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lagna-compare-table th { text-align: left; padding: 5px 12px; font-size: 11px; font-weight: 700; color: var(--muted, #8a7d72); border-bottom: 1px solid var(--line, #e7ddd6); }
.lagna-compare-table td { padding: 6px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line, #e7ddd6) 55%, transparent); vertical-align: top; }
.lagna-compare-table tr:last-child td { border-bottom: none; }
.lagna-compare-table .lc-name { font-weight: 700; white-space: nowrap; }
.lagna-compare-table .lc-lagna { font-weight: 800; color: var(--brand); white-space: nowrap; }
.lagna-compare-table .lc-note { font-size: 11px; color: var(--muted, #8a7d72); }
.lagna-compare-table tr.lc-astro td { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.lc-foot { padding: 7px 12px; font-size: 11px; color: var(--muted, #8a7d72); line-height: 1.5; border-top: 1px solid var(--line, #e7ddd6); }

/* 🖨️ ปุ่ม + โมดัลพิมพ์ดวงคลาสสิก — เฉพาะแอดมิน */
.print-classic-btn { display: none; align-items: center; gap: 5px; padding: 7px 12px; font-size: 13px; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); border: 1px solid var(--brand); border-radius: 8px; cursor: pointer; white-space: nowrap; align-self: center; }
body.role-admin .print-classic-btn { display: inline-flex; }
.print-classic-btn:hover { background: var(--brand); color: #fff; }
.print-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(20,12,6,.66); display: flex; flex-direction: column; }
.print-modal[hidden] { display: none; }
.print-modal-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #1a120b; color: #f3e9dc; flex-wrap: wrap; }
.print-modal-bar .pm-spacer { flex: 1; }
.print-modal-bar .ghost-btn { background: transparent; color: #f3e9dc; border: 1px solid rgba(255,255,255,.3); border-radius: 7px; padding: 6px 12px; cursor: pointer; font-weight: 600; }
.print-modal-scroll { flex: 1; overflow: auto; padding: 18px; display: flex; justify-content: center; }
.print-sheet { background: #fff; color: #1a1a1a; width: 285mm; max-width: 100%; padding: 8mm; box-shadow: 0 8px 40px rgba(0,0,0,.5); font-size: 12px; }
.print-sheet .ps-head { border-bottom: 2px solid #c9a24f; padding-bottom: 8px; margin-bottom: 12px; }
.print-sheet .ps-head h2 { font-size: 20px; margin: 0 0 4px; color: #5a3d1a; }
.print-sheet .ps-birth { font-size: 12px; line-height: 1.6; }
.print-sheet .ps-asc { margin-top: 5px; font-size: 13px; } .print-sheet .ps-sky { font-size: 11px; color: #555; margin-top: 3px; }
.print-sheet .ps-charts, .print-sheet .ps-grids { display: flex; gap: 12px; margin: 12px 0; align-items: flex-start; }
.print-sheet .ps-fig { flex: 1; margin: 0; text-align: center; min-width: 0; }
.print-sheet figcaption { font-weight: 800; color: #5a3d1a; margin-bottom: 4px; font-size: 13px; }
.print-sheet .ps-wheel svg { width: 100%; height: auto; max-width: 84mm; background: #fff; }
.print-sheet .ps-table { margin-top: 12px; } .print-sheet .ps-table h4 { color: #5a3d1a; margin: 0 0 6px; }
.print-sheet table { width: 100%; border-collapse: collapse; font-size: 11px; }
.print-sheet th, .print-sheet td { border: 1px solid #ccc; padding: 3px 5px; }
.print-sheet .ps-foot { margin-top: 14px; border-top: 1px solid #c9a24f; padding-top: 6px; font-size: 10px; color: #888; text-align: center; }
@media print {
  body.print-modal-open > *:not(.print-modal) { display: none !important; }
  body.print-modal-open .print-modal { position: static; inset: auto; background: #fff; display: block; }
  body.print-modal-open .print-modal-bar { display: none; }
  body.print-modal-open .print-modal-scroll { overflow: visible; padding: 0; display: block; }
  body.print-modal-open .print-sheet { box-shadow: none; width: 100%; padding: 0; }
}

/* 📋 ปุ่มคัดลอก/แชร์ + ฟอนต์คำตอบฤกษ์ใหญ่ขึ้น (อ่านง่าย) */
.ausp-turn-actions { display: flex; gap: 8px; padding: 2px 12px 10px; }
.ausp-act { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 8px; cursor: pointer; }
.ausp-act:hover { background: var(--brand); color: #fff; }
.ausp-turn .ai-message { font-size: calc(17.5px * var(--read-scale, 1)); }
.ausp-turn .ai-message .ai-h2 { font-size: 1.38em; }
.ausp-turn .ai-message .ai-h3 { font-size: 1.2em; }

/* 🖨️ ใบพิมพ์ดวง รูปแบบ อ.บุนนาค-ทองเนียม (4 ช่อง 2×2 + ข้อมูลด้านล่าง · portrait) */
.print-sheet .pc-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; max-width: 700px; margin: 0 auto 6px; }
.print-sheet .pc-fig { margin: 0; text-align: center; break-inside: avoid; }
.print-sheet .pc-fig figcaption { font-weight: 800; color: #1a1a1a; font-size: 17px; margin-bottom: 6px; }
.print-sheet .pc-fig svg { width: 100%; max-width: 300px; }
/* ปูมทักษา 3×3 — อัฐทักษา role คงที่ (กาลกิณี/บริวาร/อายุ · มนตรี/_/เดช · อุตสาหะ/มูละ/ศรี) + เลขดาวตามวันเกิด */
.print-sheet .pc-pt { border-collapse: collapse; margin: 2px auto 0; table-layout: fixed; }
.print-sheet .pc-pt td { border: 1px solid #222; width: 84px; height: 66px; text-align: center; vertical-align: middle; padding: 2px; }
.print-sheet .pc-pt .pc-ptn { font-size: 20px; font-weight: 800; color: #a20c0c; line-height: 1.05; }
.print-sheet .pc-pt .pc-ptr { font-size: 13px; color: #1a1a1a; }
.print-sheet .pc-pt .pc-ptc { border: 1px solid #222; }
.print-sheet .pc-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; max-width: 720px; margin: 16px auto 0; align-items: start; }
.print-sheet .pc-info .pc-header { grid-column: 1 / -1; }
.print-sheet .pc-info .pc-block:last-child { grid-column: 1 / -1; }
.print-sheet .pc-block { border: 1px solid #d8c8a8; border-radius: 6px; padding: 5px 8px 7px; }
.print-sheet .pc-h { font-weight: 800; color: #5a3d1a; font-size: 12px; border-bottom: 1px solid #e3d5b8; margin-bottom: 5px; padding-bottom: 3px; text-align: center; }
.print-sheet .pc-header { border: 1.5px solid #c9a24f; border-radius: 6px; padding: 7px 9px; font-size: 11px; line-height: 1.55; background: #fffdf6; }
.print-sheet .pc-name { font-size: 16px; font-weight: 800; color: #5a3d1a; margin-bottom: 3px; }
.print-sheet .pc-asc { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #a20c0c; }
.print-sheet .pc-sky, .print-sheet .pc-line { font-size: 10.5px; color: #555; margin-top: 2px; }
.print-sheet .pc-line.pc-method { color: #8a6a2a; }
.print-sheet .pc-dasa .pc-note { font-size: 10px; color: #b08; opacity: .7; line-height: 1.5; }
.print-sheet .pc-taksa .taksa-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 2px; }
.print-sheet .pc-taksa .taksa-cell { border: 1px solid #ddd; border-radius: 4px; padding: 3px 1px; text-align: center; background: #fff; }
.print-sheet .pc-taksa .taksa-cell strong { font-size: 9.5px; color: #5a3d1a; display: block; }
.print-sheet .pc-taksa .taksa-cell span { font-size: 15px; font-weight: 800; color: #a20c0c; }
.print-sheet .pc-taksa .taksa-cell small { font-size: 8px; color: #999; display: block; }
.print-sheet .pc-taksa .taksa-cell.taksa-active { background: #fff3d6; border-color: #c9a24f; }
.print-sheet .triwai-table, .print-sheet .astro-mini-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.print-sheet table { width: 100%; border-collapse: collapse; font-size: 10px; }
.print-sheet th, .print-sheet td { border: 1px solid #ccc; padding: 2px 4px; }
.print-sheet .pc-foot { text-align: center; font-size: 10px; color: #888; margin-top: 8px; border-top: 1px solid #c9a24f; padding-top: 5px; }
.print-sheet .pc-dasa-row { font-size: 11.5px; line-height: 1.35; padding: 4px 0; border-bottom: 1px dotted #e3d5b8; }
.print-sheet .pc-dasa-row:last-child { border-bottom: none; }
.print-sheet .pc-dasa-row b { color: #a20c0c; }
.print-sheet .pc-dasa-row span { color: #555; font-size: 10.5px; }
@media print { @page { size: A4 landscape; margin: 7mm; } }

/* ============================================================================
   LANDING v2 — "Aurelian Cosmic" (Stitch onehora luxury redesign) 2026-07-14
   Additive: scoped to .landing.lux + lux-* classes. Keeps .landing-hero-inner /
   .landing-hero-logo / .hero-star (twinkle) + #landing* ids for JS wiring.
   ============================================================================ */
/* lux token ย้ายขึ้น :root — ทั้ง landing และ login modal (นอก .landing.lux) ใช้ร่วมได้
   เดิมผูกกับ .landing.lux ทำให้ modal มองไม่เห็น → var() เป็นค่าว่าง → gold gradient หาย */
:root{
  --lux-bg:#131313; --lux-bg2:#0e0e0e; --lux-surface:#201f1f;
  --lux-gold:#e3c464; --lux-gold-br:#f9d976; --lux-gold-hi:#ffe083;
  --lux-on:#e5e2e1; --lux-onv:#cfc6b2; --lux-line:rgba(227,196,100,.14);
  --lux-disp:"Space Grotesk","Noto Serif Thai",system-ui,sans-serif;
  --lux-body:"Manrope","Noto Sans Thai",system-ui,sans-serif;
  --lux-mono:"JetBrains Mono",ui-monospace,monospace;
}
.landing.lux{
  background:#131313 !important; color:var(--lux-on); font-family:var(--lux-body) !important;
  scroll-behavior:smooth;
}
.landing.lux *{box-sizing:border-box;}
.landing.lux .lux-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px);}
.landing.lux .lux-hide-sm{display:inline-flex;}
@media(max-width:640px){.landing.lux .lux-hide-sm{display:none;}}
/* nav */
.lux-nav{position:sticky;top:0;z-index:50;background:rgba(14,14,14,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--lux-line);}
.lux-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto;padding:12px clamp(20px,5vw,64px);}
.lux-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.lux-brand-logo{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(227,196,100,.35));}
.lux-brand-name{font-family:var(--lux-disp);font-weight:700;font-size:22px;letter-spacing:-.01em;background:linear-gradient(135deg,#ffe083,#e3c464 55%,#a07d16);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lux-nav-links{display:flex;gap:24px;}
.lux-nav-links a{font-family:var(--lux-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lux-onv);text-decoration:none;transition:color .2s;padding:6px 0;}
.lux-nav-links a:hover{color:var(--lux-gold);}
.lux-nav-right{display:flex;align-items:center;gap:10px;}
@media(max-width:900px){.lux-nav-links{display:none;}}
/* buttons */
.landing.lux .lux-btn-gold{font-family:var(--lux-mono);font-size:13px;letter-spacing:.04em;color:#241a00;background:linear-gradient(165deg,#ffe083,#f9d976 42%,#e3c464);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:11px 22px;font-weight:600;cursor:pointer;box-shadow:0 0 18px rgba(227,196,100,.22),0 6px 20px rgba(0,0,0,.4);transition:transform .18s,box-shadow .18s,background .3s;}
.landing.lux .lux-btn-gold:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 0 26px rgba(249,217,118,.34),0 8px 26px rgba(0,0,0,.45);background:linear-gradient(180deg,#ffe083,#f9d976 42%,#e3c464);}
.landing.lux .lux-btn-gold:active{transform:scale(.98);}
.landing.lux .lux-btn-outline,.landing.lux .lux-btn-ghost{font-family:var(--lux-mono);font-size:13px;letter-spacing:.04em;color:var(--lux-gold);background:rgba(19,19,19,.4);border:1px solid rgba(227,196,100,.4);border-radius:999px;padding:11px 22px;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,border-color .2s;}
.landing.lux .lux-btn-outline:hover,.landing.lux .lux-btn-ghost:hover{background:rgba(227,196,100,.1);border-color:rgba(227,196,100,.7);}
.landing.lux .lux-btn-lg{font-size:15px;padding:16px 32px;}
/* gradient text */
.lux-gold-text{background:linear-gradient(135deg,#ffe083 0%,#e3c464 50%,#8a6d12 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lux-glass{background:rgba(32,31,31,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(227,196,100,.12);border-radius:14px;}
.lux-rim{border-top:1px solid rgba(227,196,100,.22);}
/* hero */
.lux-hero{position:relative;min-height:86vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:56px 0 46px;}
.lux-hero-bg{position:absolute;inset:0;z-index:0;background:#0a0812 url("./assets/sky.jpg?v=skyv3") center 30% / cover no-repeat;}
.lux-hero-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,240,200,.7),transparent),radial-gradient(1.5px 1.5px at 70% 22%,rgba(200,220,255,.6),transparent),radial-gradient(1px 1px at 40% 62%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 85% 55%,rgba(255,230,180,.6),transparent),radial-gradient(1px 1px at 55% 82%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 12% 74%,rgba(200,220,255,.5),transparent),radial-gradient(1px 1px at 90% 80%,rgba(255,255,255,.45),transparent);opacity:.85;}
.lux-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,8,16,.42) 0%,rgba(14,12,18,.55) 48%,rgba(16,14,16,.85) 82%,rgba(14,14,14,1) 100%);}
.lux-hero-inner{position:relative;z-index:2;max-width:840px;padding:0 20px;}
.lux-hero-art{width:clamp(190px,27vw,300px);aspect-ratio:1/1;margin:0 auto 20px;}
.lux-eyebrow{font-family:var(--lux-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lux-gold);opacity:.9;margin:0 0 16px;}
.lux-h1{font-family:var(--lux-disp);font-weight:700;font-size:clamp(32px,4.8vw,52px);line-height:1.32;letter-spacing:-.02em;margin:0 0 18px;padding-top:.12em;overflow:visible;}
.lux-h1 .lux-gold-italic{display:block;font-weight:400;font-style:italic;opacity:.96;font-size:.72em;line-height:1.32;margin-top:.1em;background:none;-webkit-text-fill-color:#e8ce85;color:#e8ce85;text-shadow:0 1px 10px rgba(0,0,0,.5);}
.lux-sub{font-family:var(--lux-body);font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:var(--lux-onv);max-width:640px;margin:0 auto 28px;}
.lux-cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:12px;}
.lux-note{font-family:var(--lux-mono);font-size:12px;letter-spacing:.03em;color:var(--lux-onv);opacity:.6;margin:8px 0 0;}
.lux-badges{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;margin-top:28px;font-family:var(--lux-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:rgba(207,198,178,.72);}
.lux-badges span{display:inline-flex;align-items:center;gap:7px;}
.lux-badges span::before{content:"✦";color:var(--lux-gold);}
.lux-scroll{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.5;}
.lux-scroll span{font-family:var(--lux-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--lux-onv);}
.lux-scroll i{width:1px;height:42px;background:linear-gradient(to bottom,var(--lux-gold),transparent);}
/* sections */
.lux-sec{padding:clamp(56px,8vw,108px) 0;}
.lux-sec--dim{background:#0e0e0e;}
.lux-sec--low{background:#1c1b1b;}
.lux-sec-head{text-align:center;margin-bottom:clamp(36px,5vw,60px);}
.lux-sec-head h2{font-family:var(--lux-disp);font-weight:700;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.01em;margin:0 0 12px;}
.lux-sec-head p{font-family:var(--lux-body);font-size:16px;color:var(--lux-onv);margin:0;}
/* journey cards */
.lux-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:820px){.lux-cards{grid-template-columns:1fr;}}
.lux-card{padding:34px 30px;transition:border-color .4s,transform .4s;}
.lux-card:nth-child(2){transform:translateY(18px);}
.lux-card:nth-child(3){transform:translateY(36px);}
@media(max-width:820px){.lux-card:nth-child(2),.lux-card:nth-child(3){transform:none;}}
.lux-card:hover{border-color:rgba(227,196,100,.4);}
.lux-card-num{font-family:var(--lux-disp);font-weight:700;font-size:56px;color:rgba(227,196,100,.16);line-height:1;margin-bottom:14px;}
.lux-card h3{font-family:var(--lux-disp);font-weight:600;font-size:22px;color:var(--lux-gold);margin:0 0 10px;}
.lux-card p{font-family:var(--lux-body);font-size:15px;line-height:1.6;color:var(--lux-onv);margin:0;}
/* method / authority */
.lux-method{display:flex;align-items:center;gap:clamp(30px,5vw,64px);}
@media(max-width:860px){.lux-method{flex-direction:column;}}
.lux-method-art{position:relative;flex:1 1 42%;max-width:420px;width:100%;}
.lux-method-frame{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid rgba(227,196,100,.2);background:radial-gradient(120% 90% at 50% 18%,#1c1a26,#0d0c10);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.lux-method-frame img{width:80%;object-fit:contain;filter:drop-shadow(0 0 26px rgba(227,196,100,.3));}
.lux-method-photo img{width:100%;height:100%;object-fit:cover;filter:none;}
.lux-method-photo{background:#0d0c10;}
.lux-method-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,13,.55) 0%,rgba(10,9,13,0) 42%);pointer-events:none;}
.lux-method-glow{position:absolute;inset:-8%;background:rgba(227,196,100,.06);filter:blur(80px);border-radius:50%;z-index:0;}
.lux-method-badge{position:absolute;right:-12px;bottom:-14px;padding:15px 20px;text-align:center;}
.lux-method-badge b{display:block;font-family:var(--lux-disp);font-weight:700;font-size:22px;}
.lux-method-badge span{font-family:var(--lux-mono);font-size:10px;letter-spacing:.04em;color:var(--lux-onv);}
.lux-method-text{flex:1 1 50%;}
.lux-method-eyebrow{font-family:var(--lux-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lux-gold);margin:0 0 12px;}
.lux-method-text h2{font-family:var(--lux-disp);font-weight:700;font-size:clamp(26px,3.4vw,40px);margin:0 0 18px;line-height:1.18;}
.lux-method-text>p{font-family:var(--lux-body);font-size:17px;line-height:1.7;color:var(--lux-onv);margin:0 0 24px;}
.lux-checks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:14px;}
.lux-checks li{display:flex;align-items:center;gap:12px;font-family:var(--lux-body);font-size:15px;color:var(--lux-on);}
.lux-checks li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%;background:rgba(227,196,100,.12);border:1px solid rgba(227,196,100,.4);color:var(--lux-gold);display:inline-flex;align-items:center;justify-content:center;font-size:14px;}
/* languages */
.lux-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.lux-lang-pill{font-family:var(--lux-disp);font-size:18px;color:var(--lux-on);padding:12px 26px;transition:border-color .2s;}
.lux-lang-pill:hover{border-color:rgba(227,196,100,.55);}
/* app / LINE */
.lux-app{display:flex;align-items:center;gap:clamp(28px,5vw,56px);padding:clamp(30px,5vw,60px);position:relative;overflow:hidden;border-radius:18px;}
@media(max-width:860px){.lux-app{flex-direction:column;}}
.lux-app-text{flex:1 1 50%;position:relative;z-index:2;}
.lux-app-text h2{font-family:var(--lux-disp);font-weight:700;font-size:clamp(26px,3.4vw,40px);margin:0 0 16px;}
.lux-app-text p{font-family:var(--lux-body);font-size:17px;line-height:1.6;color:var(--lux-onv);margin:0 0 26px;}
.lux-store{display:flex;flex-wrap:wrap;gap:14px;}
.lux-store a,.lux-store button{display:flex;align-items:center;gap:12px;background:#131313;border:1px solid rgba(227,196,100,.3);border-radius:11px;padding:12px 20px;text-decoration:none;transition:border-color .2s;font-family:var(--lux-body);}
.lux-store a:hover,.lux-store button:hover{border-color:rgba(227,196,100,.6);}
.lux-store .ic{font-size:24px;line-height:1;}
.lux-store small{display:block;font-family:var(--lux-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--lux-onv);}
.lux-store b{display:block;color:var(--lux-on);font-size:15px;}
.lux-app-glow{position:absolute;top:-40px;right:-40px;width:360px;height:360px;background:rgba(227,196,100,.05);filter:blur(110px);border-radius:50%;z-index:0;}
.lux-phone{flex:1 1 40%;display:flex;justify-content:center;position:relative;z-index:2;}
.lux-phone-body{width:224px;height:452px;background:#0e0e0e;border:8px solid #201f1f;border-radius:42px;padding:13px;box-shadow:0 0 50px rgba(0,0,0,.5);}
.lux-phone-screen{width:100%;height:100%;background:#131313;border:1px solid rgba(227,196,100,.1);border-radius:30px;padding:16px;display:flex;flex-direction:column;gap:12px;}
.lux-phone-screen .notch{width:42px;height:4px;background:#201f1f;border-radius:9px;align-self:center;}
.lux-phone-img{height:128px;border-radius:18px;border:1px solid rgba(227,196,100,.12);background:radial-gradient(90% 90% at 42% 20%,rgba(227,196,100,.18),transparent);display:flex;align-items:center;justify-content:center;}
.lux-phone-img img{width:66%;filter:drop-shadow(0 0 12px rgba(227,196,100,.3));}
.lux-phone-line{height:8px;border-radius:6px;background:#201f1f;}
.lux-phone-btn{margin-top:auto;height:44px;border-radius:12px;background:linear-gradient(165deg,#ffe083,#e3c464);}
/* footer */
.lux-foot{border-top:1px solid var(--lux-line);padding:clamp(44px,6vw,72px) 0 40px;background:#0e0e0e;}
.lux-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;}
@media(max-width:760px){.lux-foot-grid{grid-template-columns:1fr;text-align:center;}}
.lux-foot h3{font-family:var(--lux-disp);font-weight:700;font-size:26px;margin:0 0 10px;}
.lux-foot>.lux-wrap p,.lux-foot-grid p{font-family:var(--lux-body);font-size:14px;color:var(--lux-onv);margin:0 0 16px;}
.lux-foot h4{font-family:var(--lux-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lux-gold);margin:0 0 16px;}
.lux-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.lux-foot a,.lux-foot button.link{font-family:var(--lux-body);font-size:14px;color:var(--lux-onv);text-decoration:none;background:none;border:none;cursor:pointer;padding:0;transition:color .2s;}
.lux-foot a:hover,.lux-foot button.link:hover{color:var(--lux-gold);}
.lux-foot-copy{margin:44px auto 0;max-width:1200px;padding:24px clamp(20px,5vw,64px) 0;border-top:1px solid rgba(227,196,100,.08);text-align:center;font-family:var(--lux-mono);font-size:11px;color:rgba(207,198,178,.5);}
/* lang select on dark */
.landing.lux .lang-select{background:rgba(19,19,19,.5);border:1px solid rgba(227,196,100,.35);color:var(--lux-gold);border-radius:999px;padding:8px 12px;font-family:var(--lux-mono);font-size:12px;}
.landing.lux .lux-hero-art .landing-hero-inner{width:100%;height:100%;}
@media(prefers-reduced-motion:reduce){.landing.lux .lux-hero-art .landing-hero-inner{animation:none;}}

/* ── คำยินยอมความเป็นส่วนตัว (PDPA) — คุณหมอ 2026-07-17 ───────────────────── */
.consent-bar {
  position: fixed; left: 12px; right: 12px; z-index: 10001;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 940px; margin: 0 auto; padding: 14px 16px;
  border-radius: 14px; border: 1px solid rgba(201, 169, 79, .45);
  background: #1b1310; color: #f3ead7;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  font-size: 13px; line-height: 1.5;
}
.consent-bar[hidden] { display: none; }
.consent-text { flex: 1 1 320px; min-width: 0; }
.consent-text b { display: block; margin-bottom: 3px; color: #e8ce85; font-size: 14px; }
.consent-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.consent-actions button { white-space: nowrap; min-height: 44px; } /* touch target */
@media (max-width: 560px) {
  .consent-actions { width: 100%; margin-left: 0; }
  .consent-actions button { flex: 1; }
}

/* ── ช่องข้อเสนอแนะในวิดเจ็ตให้ดาว — คุณหมอ 2026-07-17 ────────────────────── */
.ai-rating-note { display: flex; gap: 6px; align-items: flex-end; width: 100%; margin-top: 7px; }
.ai-rating-comment {
  flex: 1; min-width: 0; min-height: 44px !important; max-height: 90px !important;
  resize: vertical; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  font-family: inherit; font-size: 16px; /* ≥16px กัน iOS zoom ตอนโฟกัส */ line-height: 1.4;
}
.ai-rating-send { white-space: nowrap; min-height: 44px; }
.ai-rating-ok { font-size: 13px; color: #1d6b32; font-weight: 600; }

/* ── งบรายวัน + แยกยอดแอดมิน/ผู้ใช้ — คุณหมอ 2026-07-17 ──────────────────── */
.usage-budget { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel-2); }
.usage-budget.warn { border-color: rgba(200,130,20,.5); background: rgba(200,130,20,.07); }
.usage-budget.over { border-color: rgba(180,50,50,.5); background: rgba(180,50,50,.08); }
.ub-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ub-row b { font-size: 14px; }
.ub-num { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.ub-num input {
  width: 76px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line);
  font: inherit; font-size: 16px; /* ≥16px กัน iOS zoom */ text-align: right;
}
.ub-bar { height: 8px; border-radius: 99px; background: rgba(0,0,0,.09); overflow: hidden; margin: 9px 0 7px; }
.ub-bar span { display: block; height: 100%; background: linear-gradient(90deg, #4a7c4e, #c8a232); }
.usage-budget.warn .ub-bar span { background: linear-gradient(90deg, #c8a232, #d97a1e); }
.usage-budget.over .ub-bar span { background: #b33; }
.ub-foot { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ub-model { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ub-model select { font: inherit; font-size: 16px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); }
.usage-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.us-card {
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; background: var(--panel-2);
  display: flex; flex-direction: column; gap: 2px;
}
.us-card span { font-size: 12px; color: var(--muted); }
.us-card b { font-size: 19px; font-variant-numeric: tabular-nums; }
.us-card small { font-size: 11.5px; color: var(--muted); }
.us-card.user { border-left: 3px solid #4a7c4e; }
.us-card.admin { border-left: 3px solid #8a8378; opacity: .85; }
@media (max-width: 480px) { .usage-split { grid-template-columns: 1fr; } .ub-model { margin-left: 0; width: 100%; } }

/* งบ 2 ฝั่ง (ผู้ใช้ / แอดมิน) — คุณหมอ 2026-07-17 */
.usage-budgets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ub-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ub-actions .ub-model { margin-left: 0; }
.ub-day { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--muted); margin-left: auto; }
@media (max-width: 560px) { .usage-budgets { grid-template-columns: 1fr; } .ub-day { margin-left: 0; } }

/* ═══ Login modal → Nebula Edition (ค่าจริงจาก Stitch DESIGN.md) — คุณหมอ 2026-07-18 ═══ */
/* additive · preserve ทุก hook · สีตรง spec: cosmic-gold #E1B14D, nebula น้ำเงิน#131b2e+มารูน#2b1515 */
.user-modal {
  background:
    radial-gradient(600px 400px at 18% 12%, rgba(19,27,46,.85), transparent 60%),   /* nebula น้ำเงิน */
    radial-gradient(560px 380px at 84% 82%, rgba(43,21,21,.8), transparent 60%),     /* nebula มารูน */
    radial-gradient(900px 500px at 50% -6%, rgba(225,177,77,.15), transparent 62%),  /* gold glow บน */
    rgba(8,7,8,.9);
  backdrop-filter: blur(7px);
}
.auth-dialog {
  background:
    radial-gradient(520px 300px at 50% -10%, rgba(225,177,77,.12), transparent 60%),
    linear-gradient(180deg, rgba(28,27,28,.85) 0%, rgba(14,14,15,.9) 100%);
  border: 1px solid rgba(225,177,77,.22);
  border-radius: 32px;
  box-shadow: 0 40px 100px rgba(0,0,0,.66), inset 0 1px 0 rgba(225,177,77,.08);
  padding: 34px 28px 26px; max-width: 400px;
  font-family: "Manrope","Noto Sans Thai",system-ui,sans-serif;
  position: relative; overflow: hidden;
}
.auth-emblem { margin: 4px 0 16px; animation: authFloat 6s ease-in-out infinite; }
.auth-emblem img { filter: drop-shadow(0 6px 22px rgba(225,177,77,.45)); border-radius: 16px; }
@keyframes authFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ .auth-emblem{ animation: none; } }

.auth-title {
  font-family: "EB Garamond","Noto Serif Thai",Georgia,serif; font-weight: 700;
  font-size: clamp(26px, 6vw, 34px); line-height: 1.28; padding-top: .1em; /* กันหัวสระไทย */ letter-spacing: .01em;
  background: linear-gradient(180deg, #ffdea3, #E1B14D 60%, #B8860B);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: #E1B14D;
}
.auth-sub { color: #d2c5b1; font-family: "JetBrains Mono",ui-monospace,monospace; font-size: 12px; letter-spacing: .05em; margin-top: 5px; opacity: .85; }

.auth-social { display: grid; gap: 11px; margin-top: 20px; }
.social-btn {
  background: rgba(28,27,28,.5) !important; border: 1px solid rgba(155,143,125,.3) !important;
  color: #e5e2e3 !important; border-radius: 13px; min-height: 50px;
  font-family: "Manrope","Noto Sans Thai",system-ui,sans-serif; font-weight: 600; font-size: 14.5px;
  transition: border-color .15s, background .15s, transform .1s;
}
.social-btn:hover { background: rgba(53,52,54,.5) !important; border-color: rgba(225,177,77,.4) !important; filter: none; }
.google-btn-slot { display: flex; justify-content: center; }

.auth-divider { color: #d2c5b1; font-size: 12px; margin: 20px 0 15px; opacity: .7; }
.auth-divider::before, .auth-divider::after { background: rgba(155,143,125,.2); }
.auth-helper { color: #d2c5b1; font-size: 12px; opacity: .7; line-height: 1.5; }

.auth-dialog .full-label > span { color: #d2c5b1; font-weight: 600; font-size: 13px; }
.auth-dialog input[type="text"], .auth-dialog input[type="email"], .auth-dialog input[type="password"] {
  background: rgba(14,14,15,.5); border: 1px solid rgba(155,143,125,.3); color: #e5e2e3;
  border-radius: 12px; padding: 15px 16px; font-size: 16px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.auth-dialog input::placeholder { color: rgba(210,197,177,.45); }
.auth-dialog input:focus-visible { outline: none; border-color: rgba(225,177,77,.6); box-shadow: 0 0 0 3px rgba(225,177,77,.15); }

.auth-primary, .auth-dialog .solid-btn.auth-primary {
  background: linear-gradient(135deg, #E1B14D 0%, #B8860B 100%) !important;
  color: #261900 !important; font-weight: 800 !important; letter-spacing: .06em;
  font-family: "Manrope","Noto Sans Thai",system-ui,sans-serif;
  border: none !important; border-radius: 13px; min-height: 52px; font-size: 16px;
  box-shadow: 0 10px 30px rgba(225,177,77,.3); transition: transform .12s, box-shadow .15s, filter .12s;
}
.auth-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(225,177,77,.42); filter: brightness(1.04); }
.auth-dialog .ghost-btn { border: 1px solid rgba(155,143,125,.3); color: #d2c5b1; background: transparent; border-radius: 13px; }
.auth-close { color: #d2c5b1; background: rgba(28,27,28,.5); border: 1px solid rgba(155,143,125,.3); border-radius: 11px; }
.auth-close:hover { color: #ffdea3; border-color: rgba(225,177,77,.4); }
.auth-links a, .auth-dialog .link-btn { color: #E1B14D; }
.auth-dialog .status-line { color: #d2c5b1; }

/* ═══ ขยายฟอนต์ที่เล็กเกิน + เลิก mono/letter-spacing บนไทย (audit CSS-5) — คุณหมอ 2026-07-18 ═══ */
/* ไทยไม่มี glyph ในฟอนต์ mono → fallback+letter-spacing ทำตัวไทยแตกและเล็ก */
/* login modal */
.auth-dialog .auth-sub { font-family: var(--lux-body); font-size: 14px; letter-spacing: .02em; opacity: .92; }
.auth-dialog .auth-divider { font-size: 13.5px; }
.auth-dialog .auth-helper { font-size: 13px; line-height: 1.6; opacity: .82; }
/* landing — badges/eyebrow/note/scroll ใช้ body font (Noto Sans Thai อ่านชัด) ไม่ใช่ mono */
.landing.lux .lux-eyebrow { font-family: var(--lux-body); font-size: 14px; letter-spacing: .04em; }
.landing.lux .lux-badges  { font-family: var(--lux-body); font-size: 13.5px; letter-spacing: normal; gap: 8px 18px; }
.landing.lux .lux-note    { font-family: var(--lux-body); font-size: 14.5px; letter-spacing: normal; }
.landing.lux .lux-scroll  { font-family: var(--lux-body); font-size: 13px; letter-spacing: .04em; }
.landing.lux .lux-nav-links a { font-family: var(--lux-body); font-size: 15px; letter-spacing: normal; }
.landing.lux .lux-btn     { font-family: var(--lux-body); font-size: 14.5px; letter-spacing: .02em; }
.landing.lux .lux-eyebrow, .landing.lux .lux-badges, .landing.lux .lux-btn { text-transform: none; } /* uppercase ไม่มีผลกับไทย + ทำให้ดูแปลก */
/* consent banner */
.consent-bar { font-size: 14px; }
.consent-text b { font-size: 15px; }

/* ทั้งหน้า landing ใหญ่ขึ้น ~10% (คุณหมอ 2026-07-18) — zoom scale ทั้ง block ให้สัดส่วนคงเดิม
   ไม่กระทบ login modal/app (อยู่นอก .landing.lux) · overflow-x guard กันเลื่อนแนวนอน */
.landing.lux { zoom: 1.1; }
@supports not (zoom: 1) { .landing.lux { font-size: 110%; } } /* fallback เบราว์เซอร์เก่า (rare) */
html, body { overflow-x: hidden; }

/* ── ดูดวงเบอร์มือถือ (tab-phone) v2 — เลย์เอาต์แบบ decoder159 ในธีม onehora · docs/PLAN-phone-decoder-tab.md ── */
.phone-wrap { max-width: 980px; margin: 10px auto 30px; padding: 26px 28px 34px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(24, 6, 6, .25); }
.phone-title { font-family: "Noto Serif Thai", serif; color: var(--brand); margin: 4px 0 2px; }
.phone-sub { color: #7a5c52; font-size: 14.5px; margin: 0 0 14px; }
.phone-input-row { display: flex; gap: 10px; max-width: 620px; margin: 0 auto; }
.phone-input { flex: 1; min-width: 0; font-size: 24px; letter-spacing: 2px; text-align: center; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.phone-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.phone-analyze-btn { background: var(--brand); color: #fff; border: 0; border-radius: 12px; padding: 10px 20px; font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.phone-analyze-btn:hover { background: var(--brand-dark); }
.phone-error { color: #b3261e; margin-top: 10px; font-size: 14.5px; text-align: center; }

/* หัวผล 2 คอลัมน์แบบ reference: ซ้าย=เบอร์+กล่องเลข · ขวา=มิเตอร์ (จอแคบยุบเป็นแนวเดียว) */
.phone-res-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px 34px; margin-top: 22px; align-items: start; }
.phone-res-left { text-align: center; }
.phone-res-right { padding-top: 4px; }
@media (max-width: 860px) { .phone-res-grid { grid-template-columns: 1fr; } }
.phone-res-head { text-align: center; margin-top: 22px; }
.phone-res-title { font-family: "Noto Serif Thai", serif; font-size: 22px; font-weight: 700; color: var(--brand); }
.phone-number-big { font-size: 44px; font-weight: 800; letter-spacing: 3px; margin: 6px 0 10px; color: var(--ink); }
.phone-number-big .phone-prefix { opacity: .32; }
.phone-verdict { display: inline-flex; gap: 10px; align-items: center; text-align: left; margin: 0 auto 6px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid; }
.phone-verdict b { display: block; font-size: 17px; }
.phone-verdict small { opacity: .85; }
.phone-verdict-icon { font-size: 22px; }
.phone-verdict.good { background: #eef8f0; border-color: #23864f; color: #175c36; }
.phone-verdict.warn { background: #fff6e6; border-color: #c98a1b; color: #7a5310; }
.phone-verdict.bad { background: #fdeeee; border-color: #b3261e; color: #7c1a15; }

/* กล่องกลุ่มเลขดี/เตือน/เสีย — กรอบ+แท็บมุมแบบ reference */
.phone-groups { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 6px; }
.phone-group { position: relative; border: 1.5px solid var(--line); border-radius: 12px; padding: 22px 16px 14px; }
.phone-group-tag { position: absolute; top: -1px; left: -1px; padding: 3px 16px 4px; border-radius: 12px 0 12px 0; font-size: 13.5px; font-weight: 700; color: #fff; }
.phone-group.good { border-color: #23864f55; }
.phone-group.warn { border-color: #c98a1b55; }
.phone-group.bad { border-color: #b3261e55; }
.phone-group.good .phone-group-tag { background: #23864f; }
.phone-group.warn .phone-group-tag { background: #c98a1b; }
.phone-group.bad .phone-group-tag { background: #b3261e; }
.phone-group-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.phone-chip { border: 0; border-radius: 9px; padding: 8px 16px; font-size: 19px; font-weight: 800; color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(24, 6, 6, .18); }
.phone-chip.good { background: linear-gradient(160deg, #2f9b5e, #1d6f42); }
.phone-chip.warn { background: linear-gradient(160deg, #d99a26, #b07713); }
.phone-chip.bad { background: linear-gradient(160deg, #c62f27, #8f1b15); }
.phone-chip:hover { filter: brightness(1.08); }

/* มิเตอร์ 6 หมวด — เหรียญทองกลางราง เขียวโตขวา แดงโตซ้าย มงกุฎเมื่อเต็ม */
.phone-meters { margin: 0; }
.phone-meter { margin-bottom: 4px; }
.phone-meter-label { text-align: center; font-size: 14.5px; font-weight: 600; color: #6b4a3f; margin-bottom: 2px; }
.phone-meter-track { display: flex; align-items: center; gap: 8px; }
.pm-neg, .pm-pos { flex: 1; display: flex; gap: 5px; align-items: center; }
.pm-neg { flex-direction: row-reverse; }
.pm-neg i, .pm-pos i { flex: 1; height: 14px; border-radius: 7px; background: #ded9d2; min-width: 0; }
.pm-pos i.g.on { background: linear-gradient(180deg, #3d5f49, #22392c); }
.pm-neg i.b.on { background: linear-gradient(90deg, #c62f27, #8f1b15); }
.pm-icon { width: 54px; height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 3px 6px rgba(24, 6, 6, .3)); }
.pm-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.phone-crown { flex: 0 0 auto; font-size: 20px; margin-left: 3px; filter: drop-shadow(0 1px 2px rgba(24, 6, 6, .3)); }
/* 🚩 ธงเตือนฝั่งลบ — สมมาตรกับ 👑 (อยู่ริมนอกซ้ายเพราะ .pm-neg เป็น row-reverse) */
.phone-flag { flex: 0 0 auto; font-size: 20px; margin-left: 3px; filter: drop-shadow(0 1px 2px rgba(120, 10, 10, .32)); }
.phone-flag.warn { font-size: 15px; opacity: .6; filter: grayscale(.35); }

/* การ์ดรายคู่ — แท็บมุม + เลขใหญ่ซ้าย + คำทำนายยาว */
.phone-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-top: 20px; }
.phone-card { position: relative; border: 1.5px solid var(--line); border-radius: 14px; padding: 30px 18px 16px; background: #fffdfb; }
.phone-card.good { border-color: #23864f55; }
.phone-card.warn { border-color: #c98a1b55; }
.phone-card.bad { border-color: #b3261e55; }
.phone-card-tag { position: absolute; top: -1px; left: -1px; padding: 3px 16px 4px; border-radius: 14px 0 12px 0; font-size: 13px; font-weight: 700; color: #fff; }
.phone-card.good .phone-card-tag { background: #23864f; }
.phone-card.warn .phone-card-tag { background: #c98a1b; }
.phone-card.bad .phone-card-tag { background: #b3261e; }
.phone-card.flash { box-shadow: 0 0 0 3px var(--gold-soft); }
.phone-card-body { display: flex; gap: 16px; }
.phone-card-side { flex: 0 0 86px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.phone-card-side small { font-size: 13.5px; color: #9a7c70; }
.phone-card-num { font-size: 30px; font-weight: 800; color: #fff; padding: 6px 14px; border-radius: 10px; }
.phone-card.good .phone-card-num { background: linear-gradient(160deg, #2f9b5e, #1d6f42); }
.phone-card.warn .phone-card-num { background: linear-gradient(160deg, #d99a26, #b07713); }
.phone-card.bad .phone-card-num { background: linear-gradient(160deg, #c62f27, #8f1b15); }
.phone-card-pos { line-height: 1.3; }
.phone-card-text { flex: 1; min-width: 0; }
.phone-card-text p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.72; }
.phone-card-text p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .phone-wrap { padding: 18px 14px 26px; }
  .phone-number-big { font-size: 30px; letter-spacing: 2px; }
  .phone-cards { grid-template-columns: 1fr; }
  .phone-card-body { flex-direction: column; }
  .phone-card-side { flex-direction: row; justify-content: flex-start; }
  .pm-icon { width: 44px; height: 44px; flex-basis: 44px; }
}
.phone-card-essence { font-style: italic; font-weight: 600; color: #8a6a1f; margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; border-left: 3px solid var(--gold); padding-left: 10px; }

/* ── บทสรุปภาพรวม + ข้อแนะนำ (deterministic) — บล็อกปิดท้ายผลวิเคราะห์เบอร์ ── */
.phone-summary-card { margin-top: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 20px 16px; box-shadow: 0 6px 18px rgba(24, 6, 6, .06); }
.phone-sum-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.phone-grade { font-family: "Noto Serif Thai", serif; font-size: 18px; font-weight: 700; padding: 6px 16px; border-radius: 999px; border: 1.5px solid; white-space: nowrap; }
.phone-grade.good { background: #eafaf2; border-color: #0f6e56; color: #0f6e56; }
.phone-grade.risk { background: #fdecea; border-color: #a5301f; color: #a5301f; }
.phone-grade.warn { background: #fff4e2; border-color: #b5791b; color: #8a5710; }
.phone-sum-num { font-family: "Noto Serif Thai", serif; font-size: 21px; font-weight: 700; letter-spacing: 1px; color: var(--ink); }
.phone-sum-num .pfx { color: var(--muted); font-weight: 500; }
.phone-sum-text { margin: 0 0 14px; font-size: 15.5px; line-height: 1.8; color: var(--ink); }
.phone-sum-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.phone-sum-split.solo { grid-template-columns: 1fr; }
.phone-blk { border-radius: 12px; padding: 12px 14px; border: 1px solid transparent; }
.phone-blk b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.phone-blk span { font-size: 14.5px; line-height: 1.7; }
.phone-blk.pos { background: #eafaf2; border-color: #b8e6d3; color: #14624c; }
.phone-blk.neg { background: #fdecea; border-color: #f2c4bd; color: #8f2a1d; }
.phone-sum-dnote { margin-bottom: 14px; padding: 12px 15px; border-radius: 12px; font-size: 14.5px; line-height: 1.7; background: linear-gradient(120deg, #fff7e6, #fdeecb); border: 1px solid #eccf87; color: #7a5310; }
.phone-sum-dnote.danger { background: linear-gradient(120deg, #fdecea, #fbdcd7); border-color: #f0b8af; color: #97301f; }
.phone-recs { margin-bottom: 14px; }
.phone-recs-title { font-family: "Noto Serif Thai", serif; font-size: 16px; font-weight: 700; color: var(--brand); margin-bottom: 8px; }
.phone-recs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.phone-recs li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.72; color: var(--ink); }
.phone-recs li .n { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.phone-sum-foot { font-size: 12.5px; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 640px) { .phone-sum-split { grid-template-columns: 1fr; } }

/* ── Simplified birth-chart entry flow (2026-07-21) ─────────────────────────────
   ราศีจักร = ฟอร์มเกิด → ปุ่มดูดวงเด่น; ตั้งค่าขั้นสูงยุบ; "วันประสงค์" (ดวงจร)
   โผล่เฉพาะแท็บ ปรึกษาอ.กรณ์ (ai) + หาฤกษ์ (auspicious). Transit ยัง default=วันนี้
   เสมอ (compute อ่าน input เดิม) — แค่ "ตัวเลือกวันประสงค์" ถูกซ่อนบนราศีจักร. */

/* วันประสงค์ (ดวงจร) — ซ่อนทุกแท็บ (รวม default = chart), โชว์เฉพาะ ai + auspicious */
.transit-panel { display: none; }
/* วันประสงค์ = กรอบย่อยในกรอบข้อมูลกำเนิด — พื้น/ขอบเข้มขึ้นให้เห็นเป็นกรอบซ้อนชัด (คุณหมอ 07-22) */
.transit-panel { background: color-mix(in srgb, var(--brand) 9%, var(--panel-2)); border: 1.5px solid color-mix(in srgb, var(--brand) 28%, var(--line)); }
/* กรอบย่อยพื้นที่แคบกว่าเดิม (ซ้อนในกรอบเกิด) — ทุกช่องหดได้ ไม่ล้น/ไม่มี scrollbar ข้าง (คุณหมอ 07-22) */
.transit-panel { padding: 12px 10px; }
.transit-panel .form-grid, .transit-panel .form-subgroup, .transit-panel label { min-width: 0; }
.transit-panel select, .transit-panel input { min-width: 0; max-width: 100%; }
.transit-panel .date-select-row { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 680px) {
  .transit-panel .date-select-row { grid-template-columns: 1fr; } /* คง stacking แนวตั้งบนมือถือแคบ */
}
/* ปุ่ม "✅ ตรวจฤกษ์วันนี้" อยู่ในกรอบ "วันที่ต้องการตรวจฤกษ์" — โชว์เฉพาะแท็บหาฤกษ์ (คุณหมอ 07-22) */
.ausp-check-btn { display: none; margin-top: 12px; }
body[data-active-tab="auspicious"] .ausp-check-btn { display: block; }
/* คงเห็นแม้กรอบถูกยุบบนมือถือ (ชนะกฎ .collapsed > *:not(.panel-head){display:none}) */
body[data-active-tab="auspicious"] .transit-panel.collapsed > .ausp-check-btn { display: block; }
/* บนแท็บหาฤกษ์ ปุ่ม #calculateBtn ใต้ฟอร์มเกิด (ใช้ร่วม) ถูกแทนด้วยปุ่มตรวจฤกษ์ในกรอบ → ซ่อน */
body[data-active-tab="auspicious"] #calculateBtn { display: none; }
body[data-active-tab="ai"] .transit-panel,
body[data-active-tab="auspicious"] .transit-panel { display: block; }
.transit-hint { font-size: 12.5px; margin-top: 4px; }

/* ⚙️ ตั้งค่าขั้นสูง (ปฏิทิน/ลัคนา/อายนางศะ/ตนุเศษ) — ยุบ default อยู่ใต้ฟอร์มเกิด */
.adv-settings {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}
.adv-settings > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.adv-settings > summary::-webkit-details-marker { display: none; }
.adv-settings > summary::after {
  content: "▾";
  margin-left: auto;
  transition: transform .18s ease;
}
.adv-settings[open] > summary::after { transform: rotate(180deg); }
.adv-settings > summary:hover { color: var(--brand); }
.adv-settings-body { padding: 2px 14px 12px; margin-top: 0; }

/* 🔮 ปุ่มดูดวงหลัก — เด่น (ทอง) ใต้ฟอร์มเกิด; ชนะ .solid-btn/.wide เพราะประกาศทีหลัง */
.read-chart-btn {
  margin-top: 16px;
  padding: 15px 18px;
  font-size: 17px;
  font-weight: 900;
  color: #3a2606;
  background: linear-gradient(180deg, #f6cf6a 0%, var(--gold) 100%);
  border: 1px solid #b9871f;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(213, 161, 46, 0.34);
  letter-spacing: .01em;
}
.read-chart-btn:hover {
  background: linear-gradient(180deg, #f3c655 0%, #c8951f 100%);
}