: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;
  padding: 18px;
}

.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;
}

.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: 23px;
}

.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: 1fr 1fr;
  gap: 10px;
}

.map-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.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;
}

/* ติดตั้งแอพ (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;
}

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

.compact {
  padding: 8px 12px;
}

.chip,
.badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--brand);
  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 {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
}
.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;
  max-height: min(620px, 70vh);   /* taller box — long history scrolls inside, was 340px (too small) */
  overflow-y: auto;
  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;
  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: 15.5px; }
.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: 14.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;
}

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

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

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

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

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

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

.kanok-border {
  opacity: 0.95;
}

.thai-planet-glyph,
.thai-asc-glyph {
  font-size: 36px;
  font-weight: 900;
}

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

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

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

.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;
}

.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: 28px;
  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;
}

.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;
  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;
  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: 11px;
  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: 11px;
  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: 10px;
  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;
}

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;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
  gap: 12px;
  align-items: stretch;   /* chat column matches the right column's height — no half-empty column */
}
/* 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 { 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) {
  .sidebar {
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e8d9b8 transparent;
  }
  .sidebar::-webkit-scrollbar { width: 5px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { background: #e8d9b8; border-radius: 4px; }
  #tab-ai > .ai-layout { grid-template-rows: minmax(0, 1fr); }
}

/* Right column — sticky while chat scrolls */
.ai-right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e8d9b8 transparent;
}
.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;
}

/* ── 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;
  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: 13px;
  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(16.5px * 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: "Th Sarabun New", "Noto Sans Thai", Tahoma, sans-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; }

.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 {
  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: 11.5px;
  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: 12px;
  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;
}
.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: 14.5px;
  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: 14.5px;
  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;
  max-height: clamp(400px, 70vh, 760px);
  overflow: auto;
  padding-right: 3px;
}

.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: 14px;
  line-height: 1.7;
}

.knowledge-ai-header {
  font-weight: 700;
  font-size: 13px;
  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;
  }

  .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;
  background: rgba(8, 7, 5, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  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: 13.5px;
  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: 8.5px;
  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: 10px;
  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: 10.5px;
  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: 9px;
  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; }
.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: center; margin-bottom: 6px; font-size: 14px; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.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; }

/* 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;
  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;
  width: 380px; max-width: calc(100vw - 24px); height: 600px; max-height: calc(100vh - 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 Sans Thai", sans-serif;
}
.master-chat.open { display: flex; }
.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: 10px; 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-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: 10px; 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: 9px 13px; border-radius: 16px; font-size: calc(14.5px * var(--read-scale, 1)); line-height: 1.6; word-break: break-word;
}
.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: 14.5px; 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) {
  .master-chat { right: 0; bottom: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .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: 12.5px; text-align: left; margin: 0 0 14px; opacity: 0.9; }
.auth-warn { color: #c9a05a !important; font-size: 11.5px; 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-logo {
  width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 78%, transparent 100%);
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.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-logo { 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-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: 11em; 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) { display: none !important; }
/* numerology & admin are standalone tools — don't show the "enter birth details" placeholder there */
body[data-active-tab="numerology"] #resultsPlaceholder,
body[data-active-tab="admin"] #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 {
  width: 152px; height: 152px; border-radius: 24px; display: grid; place-items: center;
  background: none; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(213,161,46,0.30), 0 18px 50px rgba(213,161,46,0.30);
  animation: rpFloat 5.5s ease-in-out infinite;
}
#resultsPlaceholder .rp-orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes rpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
#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 { display: none; }
body[data-active-tab="admin"] .workspace {
  grid-template-columns: 1fr;
  max-width: 1480px;
}

/* 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: 13px; }
.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 */
.admin-dash {
  columns: 3 380px;
  column-gap: 16px;
}
.admin-dash > .tool-panel {
  break-inside: avoid;
  margin: 0 0 16px;
  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; } }

/* ════════ 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-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: 12.5px; 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: 13.5px; line-height: 1.6; color: var(--ink); background: rgba(213,161,46,.08); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 7px 11px; margin: 2px 0 4px; }
.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: 11.5px; 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: 9.5px; 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: 13.5px; 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: 12.5px; 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: 12.5px; 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: 13.5px; 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: 13.5px; 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: 12.5px; color: var(--muted); }
.num-agent-tuk { font-size: 12.5px; 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: 25px; }
.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: 12.5px; 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%; }