/* ============================================================
   MONGKUTSTAR — Kundali atelier
   Deep ink × warm gold. Built as a working chart studio,
   not a fashion landing page.
   ============================================================ */
:root,
html[data-theme="dark"] {
  --bg: #070c0a;
  --bg-2: #0c1410;
  --bg-rgb: 7 12 10;
  --panel: #101a16;
  --panel-2: #16211c;
  --ink: #f3eee4;
  --ink-soft: #d4cbb8;
  --muted: #9a8f7a;
  --faint: #6d6456;
  --gold: #d4af6a;
  --gold-bright: #efd7a0;
  --gold-deep: #8a6a32;
  --line: rgba(212, 175, 106, 0.18);
  --line-strong: rgba(212, 175, 106, 0.38);
  --card: #141e19;
  --danger: #e07a7a;
  --radius: 14px;
  --serif: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif;
  --sans: "Inter", "Noto Sans Thai", system-ui, sans-serif;
  --gold-rgb: 212 175 106;
  --header-h: 64px;
  --cast-w: 400px;
  --ink-on-gold: #1a1408;
  --chart-well: #0a110e;
  --color-scheme: dark;
  --glow: rgba(212, 175, 106, 0.09);
  --glow-2: rgba(46, 90, 70, 0.18);
  --header-bg: rgb(7 12 10 / 0.88);
  --nav-bg: rgb(7 12 10 / 0.72);
  --input-bg: rgb(7 12 10 / 0.55);
  --well-bg: rgb(7 12 10 / 0.45);
  --cell-bg: rgb(7 12 10 / 0.4);
  --sum-bg: linear-gradient(180deg, rgb(28 38 32 / 0.9), rgb(16 24 20 / 0.75));
  --table-bg: rgb(16 26 22 / 0.7);
  --table-head: rgb(0 0 0 / 0.2);
  --reading-bg: rgb(16 26 22 / 0.8);
  --score: #efd7a0;
  --noise: 0.35;
}

html[data-theme="light"] .sb-row.sb-angel .sb-name b {
  color: #5a3d98 !important;
  text-shadow: none;
  animation: none;
}
html[data-theme="light"] .sb-row.sb-angel .sb-score,
html[data-theme="light"] .sb-row.sb-hot .sb-score,
html[data-theme="light"] .sb-row.sb-shine .sb-score {
  color: var(--score);
  text-shadow: none;
}
html[data-theme="light"] .k-field input,
html[data-theme="light"] .k-field select,
html[data-theme="light"] .k-pick-row select,
html[data-theme="light"] .k-varga-sel {
  background: var(--input-bg);
  color: var(--ink);
}

html[data-theme="light"] {
  --bg: #f4efe6;
  --bg-2: #ebe4d6;
  --bg-rgb: 244 239 230;
  --panel: #faf6ee;
  --panel-2: #fffdf8;
  --ink: #1c1812;
  --ink-soft: #3a342a;
  --muted: #6e6558;
  --faint: #94897a;
  --gold: #9a7040;
  --gold-bright: #c4924a;
  --gold-deep: #6e4e28;
  --line: rgba(154, 112, 64, 0.22);
  --line-strong: rgba(154, 112, 64, 0.42);
  --card: #fffcf6;
  --danger: #b54a4a;
  --gold-rgb: 154 112 64;
  --ink-on-gold: #fffaf2;
  --chart-well: #efe8dc;
  --color-scheme: light;
  --glow: rgba(154, 112, 64, 0.1);
  --glow-2: rgba(180, 160, 120, 0.16);
  --header-bg: rgb(255 252 246 / 0.94);
  --nav-bg: rgb(255 252 246 / 0.92);
  --input-bg: #fffdf8;
  --well-bg: rgb(154 112 64 / 0.1);
  --cell-bg: #fffdf8;
  --sum-bg: linear-gradient(180deg, #fffcf7, #f3ece0);
  --table-bg: #fffcf7;
  --table-head: rgb(154 112 64 / 0.12);
  --reading-bg: #fffcf7;
  --score: #5c3d18;
  --noise: 0.06;
}

html[data-theme="matrix"] {
  --bg: #010503;
  --bg-2: #031208;
  --bg-rgb: 1 5 3;
  --panel: #02150a;
  --panel-2: #042010;
  --ink: #d4ffe0;
  --ink-soft: #9affb4;
  --muted: #3dff88;
  --faint: #1a8a48;
  --gold: #00e676;
  --gold-bright: #7cff9a;
  --gold-deep: #00a34a;
  --line: rgba(0, 230, 118, 0.22);
  --line-strong: rgba(0, 230, 118, 0.5);
  --card: #031a0c;
  --danger: #ff5c5c;
  --gold-rgb: 0 230 118;
  --ink-on-gold: #011208;
  --chart-well: #000;
  --color-scheme: dark;
  --glow: rgba(0, 255, 65, 0.14);
  --glow-2: rgba(0, 180, 70, 0.12);
  --sans: "Inter", "Noto Sans Thai", ui-monospace, monospace;
  --header-bg: rgb(1 5 3 / 0.9);
  --nav-bg: rgb(1 8 4 / 0.8);
  --input-bg: rgb(0 20 8 / 0.7);
  --well-bg: rgb(0 20 8 / 0.5);
  --cell-bg: rgb(0 20 8 / 0.45);
  --sum-bg: linear-gradient(180deg, rgb(2 22 10 / 0.95), rgb(1 12 6 / 0.88));
  --table-bg: rgb(2 18 8 / 0.85);
  --table-head: rgb(0 40 16 / 0.5);
  --reading-bg: rgb(2 18 8 / 0.88);
  --score: #7cff9a;
  --noise: 0.28;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
* { -webkit-tap-highlight-color: transparent; }

html { color-scheme: var(--color-scheme); }
body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.55;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 70% 45% at 0% 0%, var(--glow), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, var(--glow-2), transparent 50%),
    var(--bg);
  min-height: 100vh;
}
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: var(--noise);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; color-scheme: var(--color-scheme); }

.kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  height: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 0.95rem;
  box-shadow: 0 0 18px rgba(212, 175, 106, 0.15);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.brand-name .dot { color: var(--gold); }
.brand-tag {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.header-meta {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.font-ctrl {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 6px 3px 8px;
}
.font-ctrl button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 7px;
  font-family: var(--serif);
  font-weight: 600;
}
.font-ctrl button:hover { color: var(--gold); }
.font-ctrl #font-dec { font-size: 0.78rem; }
.font-ctrl #font-inc { font-size: 1.22rem; }
.font-ctrl button:disabled { opacity: 0.35; cursor: default; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 22px 28px 28px;
  text-align: center;
  color: var(--faint);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  background: rgb(var(--bg-rgb) / 0.72);
}
.site-footer p + p { margin-top: 6px; letter-spacing: 0.2em; font-size: 0.64rem; }
.site-footer a { color: var(--gold); border-bottom: 1px solid transparent; }
.site-footer a:hover { border-bottom-color: var(--gold); }
.footer-ts {
  position: fixed;
  left: 14px;
  bottom: 8px;
  z-index: 5;
  color: var(--faint);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}
.theme-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 10px;
}
.theme-bar button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.theme-bar button:hover { border-color: var(--gold); color: var(--gold); }
.theme-bar button.active {
  background: var(--gold);
  color: var(--ink-on-gold);
  border-color: var(--gold);
}

.theme-fab {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(calc(3vh + 12px), env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgb(var(--bg-rgb) / 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.theme-fab button {
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.theme-fab button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.theme-fab button.active {
  background: var(--gold);
  color: var(--ink-on-gold);
}

/* ---------- Studio layout ---------- */
.studio {
  display: grid;
  grid-template-columns: var(--cast-w) 1fr;
  min-height: calc(100vh - var(--header-h));
  max-width: 1600px;
  margin: 0 auto;
}

.cast-panel {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: auto;
  padding: 28px 26px 40px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.55), rgb(var(--bg-rgb) / 0.2));
}
.cast-title {
  font-family: var(--serif);
  font-size: 2.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 8px 0 8px;
}
.cast-lead {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 300;
  margin-bottom: 22px;
  line-height: 1.65;
}

.stage {
  padding: 24px 32px 72px;
  min-width: 0;
}
.stage:has(#k-results:not([hidden])) .stage-empty { display: none; }

.stage-empty {
  min-height: calc(100vh - var(--header-h) - 80px);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 10px;
  color: var(--muted);
}
.stage-empty-star {
  font-size: 2rem;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
  text-shadow: 0 0 24px rgba(212, 175, 106, 0.45);
}
.stage-empty h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.2rem;
  color: var(--ink-soft);
}
.stage-empty p { font-weight: 300; }

.stage-nav {
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  padding: 8px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.stage-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.stage-nav a:hover { color: var(--gold); background: rgba(212, 175, 106, 0.08); }

/* ---------- Form ---------- */
.k-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}
.k-field { min-width: 0; }
.k-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.k-field input,
.k-field select,
.k-pick-row select,
.k-varga-sel {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.k-field input::placeholder { color: var(--faint); }
.k-field input:focus,
.k-field select:focus,
.k-pick-row select:focus,
.k-varga-sel:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.14);
}
.k-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  color: var(--muted) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
.k-check input { width: auto; accent-color: var(--gold); }
.k-field-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.k-note {
  grid-column: 1 / -1;
  color: var(--faint);
  font-size: 0.75rem;
  line-height: 1.5;
}
.k-custom {
  grid-column: 1 / -1;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 14px;
  background: rgba(212, 175, 106, 0.04);
}
.k-custom[hidden] { display: none; }
.k-custom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.k-field-tz { grid-column: 1 / -1; }
.k-field-date { grid-column: 1 / -1; }
.k-date-legend {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.k-date-row {
  display: grid;
  grid-template-columns: minmax(64px, 0.72fr) minmax(118px, 1.35fr) minmax(128px, 1.45fr);
  gap: 8px;
}
.k-date-part {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
}
.k-date-part span {
  color: var(--faint);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.k-date-part select {
  width: 100%;
  min-width: 0;
  padding: 12px 8px;
}

.k-combo { position: relative; }
.k-combo-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  max-height: 260px;
  overflow-y: auto;
  z-index: 30;
}
.k-combo-list[hidden] { display: none; }
.k-loading[hidden] { display: none !important; }
.k-combo-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
}
.k-combo-row:hover, .k-combo-row.active { background: rgba(212, 175, 106, 0.1); }
.k-combo-name { color: var(--ink); }
.k-combo-coords { color: var(--faint); font-size: 0.72rem; white-space: nowrap; }
.k-combo-custom { border-top: 1px solid var(--line); margin-top: 4px; }
.k-combo-custom .k-combo-name { color: var(--gold); }
.k-combo-none { padding: 10px 12px; color: var(--faint); font-size: 0.82rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  text-align: center;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: var(--ink-on-gold);
  border-color: var(--gold-bright);
  flex: 1;
}
.btn-pink {
  display: flex;
  width: 100%;
  margin-top: 28px;
  background: linear-gradient(135deg, #f8c9d6, #ee9bb4 55%, #e889aa);
  color: #5a2438;
  border: 1px solid #ffd6e4;
  box-shadow: 0 0 16px rgba(238, 155, 180, 0.55), 0 0 36px rgba(248, 201, 214, 0.35);
  animation: pinkGlow 2.6s ease-in-out infinite;
  font-weight: 700;
}
.btn-pink:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #4a1c2e;
}
.group-page { grid-template-columns: 1fr; max-width: 1600px; }
.group-stage { padding-top: 28px; }
.group-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.group-intro .cast-lead { margin-bottom: 0; max-width: 42rem; }
.group-intro-links { display: flex; flex-wrap: wrap; gap: 8px; }
.group-intro-links .btn { width: auto; margin-top: 0; }

.group-table-wrap {
  margin-top: 22px;
  overflow-x: auto;
}
.group-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 860px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.group-table th {
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 12px 10px;
  background: var(--table-head);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.group-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.group-table tr:last-child td { border-bottom: 0; }
.group-table input,
.group-table select {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
}
.group-table input:focus,
.group-table select:focus {
  outline: none;
  border-color: var(--gold);
}
.g-time {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.g-time select { min-width: 4.2rem; }
.g-time span { color: var(--muted); }
.g-del-cell { width: 40px; text-align: center; }
.g-del {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.g-del:hover { color: var(--danger); border-color: var(--danger); }
.group-table-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 16px;
}
.group-add-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--gold-bright);
  background: linear-gradient(145deg, var(--gold-bright), var(--gold) 50%, var(--gold-deep));
  color: var(--ink-on-gold);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(var(--gold-rgb) / 0.35);
}
.group-add-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.group-add-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.group-table-wrap .btn-amber { width: auto; min-width: 240px; }
.group-rank-note {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 28px 0 12px;
}
.group-card {
  margin-top: 22px;
  padding-bottom: 8px;
}
.group-card .k-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  margin-bottom: 12px;
}
.group-card .k-sum-head { flex: 1; min-width: 0; }
.group-card .k-sum-head p { margin-bottom: 0; }
.group-rank {
  color: var(--gold);
  font-size: 0.72em;
  margin-right: 4px;
}
.vault-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 8px;
}
.vault-title-row .cast-title { margin: 0; }
.vault-title-row .btn-timecheck { margin: 0; }
.btn-timecheck {
  background: #f26522;
  color: #fff;
  border: 1px solid #ff8a4a;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 14px 28px;
  width: auto;
  box-shadow: 0 8px 22px rgba(242, 101, 34, 0.45);
}
.btn-timecheck:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #fff;
}
.btn-timecheck:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}
.tc-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.tc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 44px;
}
.tc-item small {
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.15;
}
.tc-item .tc-name { color: var(--ink-soft); font-weight: 600; }
.tc-item .tc-when { color: var(--faint); }
.tc-ball {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.25);
}
.tc-ball svg { width: 14px; height: 14px; display: block; }
.tc-ball.is-down {
  background: #8b0000;
  box-shadow: 0 0 10px rgba(139, 0, 0, 0.55);
}
.tc-ball.is-up {
  background: #00b4ff;
  box-shadow: 0 0 12px rgba(0, 180, 255, 0.65);
}
.tc-pending { color: var(--faint); font-size: 0.85rem; }
.vault-table { min-width: 980px; }
.th-sort {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.th-sort:hover { color: var(--gold); }
.th-sort span { font-size: 0.7em; margin-left: 4px; }
.vault-pct { font-family: var(--serif); font-size: 1.15rem; }
.vault-pct.is-low { color: #ff0000; }
.vault-pct.is-mid { color: #12a150; }
.vault-pct.is-high { color: #6b3fa0; background: #ffff00; padding: 2px 8px; border-radius: 6px; }

.synastry-btns {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.synastry-btns .btn-pink,
.synastry-btns .btn-line { margin-top: 0; width: 100%; }
.btn-amber {
  display: flex;
  width: 100%;
  background: linear-gradient(135deg, #ffe08a, #ffb347 52%, #f08c28);
  color: #5a3208;
  border: 1px solid #ffd089;
  box-shadow: 0 0 16px rgba(255, 179, 71, 0.5), 0 0 32px rgba(255, 224, 138, 0.28);
  font-weight: 700;
}
.btn-amber:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #4a2804;
}
@keyframes pinkGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(238, 155, 180, 0.4), 0 0 24px rgba(248, 201, 214, 0.22); }
  50% { box-shadow: 0 0 26px rgba(255, 190, 210, 0.85), 0 0 48px rgba(238, 155, 180, 0.45); }
}
.btn-gold:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(212, 175, 106, 0.28);
}
.btn-line {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
.btn-line:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Results ---------- */
.k-results[hidden] { display: none !important; }
.k-results { animation: rise 0.45s ease; }
.k-summary,
.k-chart-block,
.k-table-block,
.k-reading,
#k-shadbala-block,
#k-sb-ishta-block,
#k-sb-bhava-block {
  scroll-margin-top: calc(var(--header-h) + 56px);
}

/* ---------- Shadbala graph ---------- */
.sb-graph { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.sb-row {
  display: grid;
  grid-template-columns: 92px 1fr 72px;
  gap: 12px;
  align-items: center;
}
.sb-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  position: relative;
}
.sb-name b { font-size: 1.05rem; font-weight: 800; }
.sb-name > span:not(.sb-glister) { color: var(--muted); font-size: 0.72rem; }

/* Angel-magic violet glister — planets over personal standard */
.sb-glister {
  display: none;
  position: absolute;
  inset: -10px -12px -6px -10px;
  pointer-events: none;
  z-index: 2;
}
.sb-row.sb-angel .sb-glister { display: block; }
.sb-row.sb-angel .sb-name b {
  color: #f3eaff !important;
  text-shadow:
    0 0 6px #fff,
    0 0 12px #e4d4ff,
    0 0 22px #b794f6,
    0 0 36px #7c5cbf;
  animation: angelPulse 2.8s ease-in-out infinite;
}
.sb-row.sb-angel .sb-glister::before,
.sb-row.sb-angel .sb-glister::after {
  content: "✦";
  position: absolute;
  font-size: 0.55rem;
  color: #efe6ff;
  text-shadow: 0 0 8px #c4b0ff, 0 0 14px #9b7dff;
  animation: angelSpark 1.8s ease-in-out infinite;
}
.sb-row.sb-angel .sb-glister::before { top: -2px; left: 2px; animation-delay: 0s; }
.sb-row.sb-angel .sb-glister::after { top: 4px; right: 0; font-size: 0.42rem; animation-delay: 0.7s; }
.sb-row.sb-angel .sb-name {
  filter: drop-shadow(0 0 8px rgba(183, 148, 246, 0.45));
}
.sb-row.sb-angel .sb-bar {
  background: linear-gradient(90deg, #4a3870, #9b7dff 45%, #efe6ff 78%, #d4b8ff);
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.45);
}
.sb-row.sb-angel .sb-track {
  border-color: rgba(183, 148, 246, 0.4);
  box-shadow: inset 0 0 14px rgba(139, 92, 246, 0.12), 0 0 18px rgba(167, 139, 250, 0.12);
}
.sb-row.sb-angel .sb-score {
  color: #ede4ff;
  text-shadow: 0 0 10px rgba(196, 176, 255, 0.7);
}
.sb-row.sb-angel.sb-hot .sb-bar,
.sb-row.sb-angel.sb-shine .sb-bar {
  background: linear-gradient(110deg, #5a3d8a 0%, #b794f6 28%, #fff 48%, #efd7a0 70%, #c9a24b 100%);
  background-size: 220% 100%;
  animation: sbShine 2.4s linear infinite;
  box-shadow: 0 0 18px rgba(183, 148, 246, 0.55), 0 0 28px rgba(239, 215, 160, 0.35);
}
@keyframes angelPulse {
  0%, 100% { text-shadow: 0 0 6px #fff, 0 0 12px #e4d4ff, 0 0 22px #b794f6, 0 0 36px #7c5cbf; }
  50% { text-shadow: 0 0 10px #fff, 0 0 18px #f3eaff, 0 0 32px #c4b0ff, 0 0 48px #9b7dff; }
}
@keyframes angelSpark {
  0%, 100% { opacity: 0.15; transform: translateY(0) scale(0.7); }
  40% { opacity: 1; transform: translateY(-4px) scale(1.15); }
  70% { opacity: 0.35; transform: translateY(-1px) scale(0.9); }
}
.sb-track {
  position: relative;
  height: 28px;
  background: var(--well-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.sb-mark {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 106, 0.7);
  z-index: 2;
  pointer-events: none;
}
.sb-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  min-width: 4px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sb-row.sb-low .sb-bar { background: linear-gradient(90deg, #3a2a28, #a07070); }
.sb-row.sb-hot .sb-bar {
  background: linear-gradient(90deg, #8a6a32, #efd7a0 55%, #fff6d4);
  box-shadow: 0 0 18px rgba(239, 215, 160, 0.55);
}
.sb-row.sb-hot .sb-score { color: #fff4d0; text-shadow: 0 0 12px rgba(239, 215, 160, 0.7); }
.sb-row.sb-hot .sb-track {
  border-color: rgba(239, 215, 160, 0.55);
  box-shadow: inset 0 0 12px rgba(212, 175, 106, 0.12);
}
.sb-row.sb-shine .sb-bar {
  background: linear-gradient(110deg, #8a6a32 0%, #efd7a0 35%, #fffef6 50%, #efd7a0 65%, #c9a24b 100%);
  background-size: 200% 100%;
  animation: sbShine 2.4s linear infinite;
  box-shadow: 0 0 22px rgba(255, 244, 200, 0.75), 0 0 40px rgba(212, 175, 106, 0.35);
}
.sb-row.sb-shine .sb-score {
  color: #fffef6;
  text-shadow: 0 0 16px rgba(255, 244, 210, 0.95), 0 0 28px rgba(212, 175, 106, 0.6);
}
.sb-row.sb-shine .sb-track {
  border-color: rgba(255, 244, 210, 0.7);
  box-shadow: 0 0 16px rgba(255, 244, 200, 0.25);
}
.sb-row.sb-shine .sb-name b {
  filter: drop-shadow(0 0 8px rgba(255, 244, 210, 0.8));
}
@keyframes sbShine {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.sb-score {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  text-align: right;
  color: var(--score);
}
.sb-row.sb-low .sb-score { color: var(--danger); }
.sb-meta {
  grid-column: 2 / 3;
  color: var(--faint);
  font-size: 0.7rem;
  margin-top: -4px;
  letter-spacing: 0.02em;
}
.sb-legend-100 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 4px;
}
.sb-legend-100 i {
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 106, 0.7);
}
.sb-legend-note { color: var(--faint); font-size: 0.68rem; }

/* Mirrored Shadbala duel: candidate inverted from top, native from bottom */
.duel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto 348px auto;
  gap: 4px 8px;
  align-items: stretch;
  margin-top: 6px;
}
.duel-ylabels {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-height: 0;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.duel-y { position: absolute; left: 0; right: 0; line-height: 1.15; }
.duel-y-top { top: 2px; color: var(--faint); }
.duel-y-bot { bottom: 2px; color: var(--faint); }
.duel-y-b {
  top: 18%;
  color: #ee9bb4;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 72px;
}
.duel-y-a {
  bottom: 18%;
  color: #7eb0e8;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 64px;
}
.duel-y-mid {
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 0.58rem;
}
.duel-scores-b {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
}
.duel-score {
  text-align: center;
  min-width: 0;
}
.duel-score em,
.duel-planet em.duel-score {
  font-style: normal;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.1;
  display: block;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.duel-scores-b .duel-score em { color: #ee9bb4; }
.duel-planet em.duel-score { color: #8eb6ea; margin-bottom: 1px; }
.duel-stage {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 0;
  height: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(238, 155, 180, 0.1) 0%,
      rgba(238, 155, 180, 0.04) 50%,
      rgba(91, 143, 212, 0.05) 50%,
      rgba(46, 94, 168, 0.12) 100%);
}
.duel-frontier {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  border-top: 1px solid rgba(180, 190, 210, 0.45);
  box-shadow: 0 0 6px rgba(77, 143, 214, 0.18);
  z-index: 6;
  pointer-events: none;
}
.duel-frontier::before,
.duel-frontier::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dotted rgba(180, 190, 210, 0.28);
}
.duel-frontier::before { top: -3px; }
.duel-frontier::after { top: 2px; }
.duel-col {
  height: 100%;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.duel-bar {
  position: absolute;
  width: 9px;
  min-height: 3px;
  display: block;
}
.duel-bar.b {
  top: 0;
  left: calc(50% - 10px);
  z-index: 3;
  background: linear-gradient(180deg, #f7d0dc 0%, #ee9bb4 42%, #c56d8c 100%);
  border-radius: 1px 1px 0 0;
  box-shadow: 0 6px 14px rgba(197, 109, 140, 0.38);
}
.duel-bar.a {
  bottom: 0;
  left: calc(50% + 1px);
  z-index: 2;
  background: linear-gradient(0deg, #2e5ea8 0%, #4d8fd6 55%, #8eb6ea 100%);
  border-radius: 0 0 1px 1px;
  box-shadow: 0 -6px 14px rgba(77, 143, 214, 0.4);
}
.duel-col.is-invade-b .duel-bar.b {
  box-shadow: 0 8px 18px rgba(238, 155, 180, 0.5);
}
.duel-col.is-invade-a .duel-bar.a {
  box-shadow: 0 -8px 18px rgba(77, 143, 214, 0.5);
}
.duel-col.is-weak .duel-bar.b,
.duel-col.is-weak .duel-bar.a {
  background: #ff0000;
  box-shadow: 0 6px 14px rgba(255, 0, 0, 0.45);
}
.duel-scores-b .duel-score.is-weak em,
.duel-planet.is-weak em.duel-score {
  color: #ff0000;
}
.duel-key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.duel-key p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}
.duel-key i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 12px;
  display: inline-block;
}
.duel-key .k-b {
  background: #ee9bb4;
  box-shadow: 0 0 8px rgba(238, 155, 180, 0.55);
}
.duel-key .k-a {
  background: #4d8fd6;
  box-shadow: 0 0 8px rgba(77, 143, 214, 0.55);
}
.duel-key .k-weak {
  background: #ff0000;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.55);
}
.duel-planets {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.duel-planet {
  text-align: center;
  min-width: 0;
}
.duel-planet b {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}
.duel-planet span {
  display: block;
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

html[data-theme="light"] .duel-stage {
  background:
    linear-gradient(180deg,
      rgba(232, 137, 170, 0.16) 0%,
      rgba(232, 137, 170, 0.06) 50%,
      rgba(46, 94, 168, 0.06) 50%,
      rgba(46, 94, 168, 0.14) 100%);
}
html[data-theme="light"] .duel-scores-b .duel-score em { color: #b54e74; }
html[data-theme="light"] .duel-planet em.duel-score { color: #2e5ea8; }
html[data-theme="light"] .duel-scores-b .duel-score.is-weak em,
html[data-theme="light"] .duel-planet.is-weak em.duel-score { color: #ff0000; }
html[data-theme="light"] .duel-y-a { color: #2e5ea8; }

@media (max-width: 720px) {
  .duel {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto 300px auto;
  }
  .duel-bar { width: 7px; }
  .duel-bar.b { left: calc(50% - 8px); }
  .duel-bar.a { left: calc(50% + 1px); }
  .duel-score em,
  .duel-planet em.duel-score { font-size: 0.78rem; }
  .duel-y-b, .duel-y-a { display: none; }
}

.sb-subhead { margin-top: 36px; }
.sb-legend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0 12px;
}
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.sb-chip i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px currentColor;
}

.sb-stack-track {
  display: flex;
  overflow: hidden;
  padding: 0;
  background: var(--input-bg);
}
.sb-seg {
  display: block;
  height: 100%;
  min-width: 0;
}
.sb-seg-neg { opacity: 0.45; filter: saturate(0.7); }
.sb-stack-row .sb-track { border-radius: 8px; }

.sb-ik {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}
.sb-ik-pair {
  height: 10px;
  background: var(--well-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.sb-ik-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  min-width: 3px;
}
.sb-ik-bar.ishta {
  background: linear-gradient(90deg, #6fbfa3, #efe6ff);
  box-shadow: 0 0 8px rgba(183, 148, 246, 0.35);
}
.sb-ik-bar.kashta {
  background: linear-gradient(90deg, #4a3030, #a07070);
}
.sb-row.sb-ik-good .sb-ik-bar.ishta {
  background: linear-gradient(90deg, #7c5cbf, #e4d4ff 55%, #fff);
  box-shadow: 0 0 12px rgba(183, 148, 246, 0.45);
}

.bh-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 18px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--well-bg);
  overflow: hidden;
}
.bh-hero img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.bh-hero span {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.sb-bhava-row {
  grid-template-columns: 72px 44px 1fr 64px;
}
.bh-well {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(16, 26, 22, 0.2) 0%, rgba(16, 26, 22, 0.2) 50%, rgba(40, 55, 90, 0.55) 50%, rgba(20, 28, 50, 0.85) 100%);
  box-shadow: inset 0 -8px 12px rgba(80, 90, 160, 0.25);
}
.bh-well-inner {
  position: absolute;
  inset: 2px;
  display: grid;
  place-items: center;
  transform: translateY(calc(var(--sink, 0.5) * 58%));
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bh-ele {
  width: 34px;
  height: 26px;
  fill: #efe6ff;
  filter: drop-shadow(0 0 6px rgba(183, 148, 246, 0.65));
}
.sb-row.sb-low .bh-ele { fill: #a07070; filter: none; }
.sb-row.sb-angel .bh-ele {
  fill: #f3eaff;
  filter: drop-shadow(0 0 8px rgba(183, 148, 246, 0.9));
}
.bh-waterline {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 148, 246, 0.7), var(--gold), rgba(183, 148, 246, 0.7), transparent);
  box-shadow: 0 0 8px rgba(212, 175, 106, 0.45);
  pointer-events: none;
}

@media (max-width: 640px) {
  .sb-row { grid-template-columns: 70px 1fr 56px; gap: 8px; }
  .sb-score { font-size: 1.15rem; }
  .sb-bhava-row { grid-template-columns: 52px 36px 1fr 48px; }
  .bh-well { width: 36px; height: 36px; }
  .bh-ele { width: 28px; height: 20px; }
  .bh-hero img { width: 64px; height: 64px; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.k-summary {
  background: var(--sum-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
#native-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
}
#native-card .k-sum-head {
  flex: 1;
  min-width: 0;
}
#native-card .k-sum-head p { margin-bottom: 0; }
.header-meta a { color: var(--gold); text-decoration: none; }
.header-meta a:hover { border-bottom: 1px solid var(--gold); }
.som-power-row[hidden] { display: none !important; }
.som-power-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.btn-collect {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #7ad7ff;
  background: linear-gradient(135deg, #5ce1ff, #00b4ff 55%, #0088e0);
  color: #041018;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 180, 255, 0.55), 0 0 32px rgba(92, 225, 255, 0.25);
}
.btn-collect:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-collect:disabled {
  opacity: 1;
  filter: saturate(0.7);
  cursor: default;
  transform: none;
}
.som-power[hidden] { display: none !important; }
.som-power {
  flex: 0 0 auto;
  text-align: right;
  padding: 10px 18px 12px;
  border-radius: 14px;
  min-width: 7.5rem;
}
.som-power strong {
  display: block;
  font-family: var(--serif);
  font-size: 3.1rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.som-power span {
  display: block;
  margin-top: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.som-power em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.8;
}
.som-power.is-low { color: #ff0000; }
.som-power.is-mid { color: #12a150; }
.som-power.is-high {
  color: #6b3fa0;
  background: #ffff00;
  box-shadow: 0 0 18px rgba(255, 255, 0, 0.35);
}
.k-sum-head h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.85rem;
  margin-bottom: 4px;
}
.k-sum-head p {
  color: var(--muted);
  font-weight: 300;
  font-size: 0.92rem;
  margin-bottom: 20px;
}
.k-sum-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.k-sum-cell {
  border: 1px solid var(--line);
  padding: 16px 14px;
  text-align: center;
  background: var(--cell-bg);
  border-radius: 12px;
}
.k-sum-cell span {
  display: block;
  color: var(--faint);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.k-sum-cell strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--score);
}
.k-sum-cell small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 300;
}
.k-wday-civil {
  font-family: var(--sans);
  font-size: 0.62em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.k-ayanamsa {
  margin-top: 16px;
  color: var(--faint);
  font-size: 0.75rem;
  font-weight: 300;
}

.k-chart-block { margin-top: 28px; }
.k-chart-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.k-tab {
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.18s ease;
}
.k-tab:hover { color: var(--gold); border-color: var(--line-strong); }
.k-tab.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: var(--ink-on-gold);
  border-color: transparent;
  font-weight: 600;
}
.k-charts-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.k-chart-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.k-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.k-chart-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
}
.k-varga-sel { width: auto; max-width: 210px; padding: 8px 10px; font-size: 0.78rem; }
.k-chart-wrap {
  display: flex;
  justify-content: center;
  background: var(--chart-well);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}
.k-chart-wrap:has(.k-chart-south) { display: block; }
.k-chart { width: min(420px, 100%); height: auto; }
.k-chart-south { width: 100%; max-width: none; }
.k-outer { fill: var(--panel); stroke: var(--gold); stroke-width: 3; }
.k-cell { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.k-lagna { fill: rgba(212, 175, 106, 0.14); stroke: var(--gold-bright); stroke-width: 1.6; }
.k-center { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.k-hnum { font-family: var(--sans); font-size: 10px; fill: var(--faint); text-anchor: middle; }
.k-sign { font-family: var(--serif); font-weight: 600; font-size: 13px; fill: var(--ink); text-anchor: middle; }
.k-planet { font-family: var(--sans); font-weight: 800; font-size: 16px; fill: var(--ink); text-anchor: middle; }
.k-retro { text-decoration: underline; text-decoration-color: var(--danger); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.k-asc { font-family: var(--sans); font-size: 9px; letter-spacing: 0.1em; fill: var(--gold-bright); text-anchor: middle; font-weight: 600; }
.k-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.78rem;
}
.k-legend b { color: var(--ink); font-weight: 800; margin-right: 2px; }
.k-legend-note { color: var(--faint); }

.k-block-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  margin: 36px 0 12px;
}
.k-block-title em { color: var(--gold); font-style: italic; font-weight: 500; }
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--table-bg);
}
.k-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.k-table th {
  text-align: left;
  padding: 12px 14px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  background: var(--table-head);
}
.k-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(212, 175, 106, 0.08);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.k-table tr:last-child td { border-bottom: 0; }
.k-table tr:hover td { background: rgba(212, 175, 106, 0.05); }
.k-psym { color: var(--ink); font-weight: 800; font-size: 1.05rem; }
.k-retro-badge { color: var(--danger); font-size: 0.75rem; }

.k-p-sun  { fill: #ff6b7a; color: #ff6b7a !important; }
.k-p-moon { fill: #efd76a; color: #efd76a !important; }
.k-p-mars { fill: #e89bc4; color: #e89bc4 !important; }
.k-p-mer  { fill: #5ecf7a; color: #5ecf7a !important; }
.k-p-jup  { fill: #ffb14a; color: #ffb14a !important; }
.k-p-ven  { fill: #6aa8ea; color: #6aa8ea !important; }
.k-p-sat  { fill: #8b97e0; color: #8b97e0 !important; }
.k-p-rah  { fill: #cfc6d8; color: #cfc6d8 !important; }
.k-p-ket  { fill: #9a93aa; color: #9a93aa !important; }

.k-row-now td { background: rgba(212, 175, 106, 0.1); }
.k-now {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-gold);
  background: var(--gold);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.k-subnote { color: var(--muted); font-size: 0.84rem; font-weight: 300; margin: 8px 0 14px; }

.tech-form { max-width: 920px; }
.tech-who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tech-who-opt {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--ink-soft);
  font-size: 0.9rem;
  cursor: pointer;
}
.tech-who-opt small { display: block; margin-top: 4px; color: var(--faint); font-size: 0.78rem; }
.tech-who-opt:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.14); }
.tech-who-opt input { margin-right: 8px; accent-color: var(--gold); }
.tech-grid, .tech-bhava {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.tech-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tech-cell span { color: var(--muted); font-size: 0.78rem; }
.tech-n {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 0.95rem;
}
.tech-n:focus { outline: none; border-color: var(--gold); }
.tech-ik { display: flex; flex-direction: column; gap: 8px; }
.tech-ik-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr 1fr;
  gap: 10px;
  align-items: center;
}
.tech-ik-row > span { color: var(--muted); font-size: 0.86rem; }
.tech-ik-row label { display: flex; flex-direction: column; gap: 4px; color: var(--faint); font-size: 0.72rem; }
.tech-menu { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }

.k-vimso {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 16px;
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--table-bg);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  line-height: 1.4;
}
.k-vimso-col { min-width: 0; }
.k-vimso-row {
  display: grid;
  grid-template-columns: 6.1rem 2.2rem 1.35rem 1.35rem 1.35rem;
  column-gap: 4px;
  align-items: baseline;
  padding: 1px 2px;
  border-radius: 4px;
}
.k-vimso-row.is-now { background: rgba(212, 175, 106, 0.16); }
.k-vimso-date { color: var(--ink); white-space: nowrap; }
.k-vimso-date em {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-on-gold);
  background: var(--gold);
  padding: 0 5px;
  border-radius: 999px;
  font-weight: 700;
  margin-left: 2px;
}
.k-vimso-age { color: var(--muted); text-align: right; }
.k-vimso-p { font-weight: 700; }

.k-pick-row {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.k-pick-row label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.k-pick-row select { width: auto; min-width: 220px; max-width: 100%; }

.k-reading {
  margin-top: 32px;
  background: var(--reading-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 28px;
}
.k-reading .k-block-title { margin: 0 0 12px; }
.k-reading p { color: var(--ink-soft); font-weight: 300; line-height: 1.8; margin-bottom: 12px; }
.k-reading .k-disclaimer { color: var(--faint); font-size: 0.75rem; margin-top: 16px; font-style: italic; }

.sb-rank {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.sb-rank-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 88px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, currentColor 22%, transparent);
}
.sb-rank-n {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.sb-rank-sym {
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.1;
}
.sb-rank-name { font-size: 0.78rem; color: var(--ink); }
.sb-rank-score {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.1;
  margin-top: 4px;
}
.sb-rank-item:first-child {
  min-width: 104px;
  padding: 14px 16px 12px;
  box-shadow: 0 0 28px color-mix(in srgb, currentColor 38%, transparent);
}
.sb-rank-item:first-child .sb-rank-score { font-size: 1.7rem; }
.sb-rank-item.sb-rank-glow {
  background: linear-gradient(135deg, #f8c9d6, #ee9bb4 55%, #e889aa) !important;
  color: #5a2438 !important;
  border-color: #ffd6e4 !important;
  box-shadow: 0 0 16px rgba(238, 155, 180, 0.55), 0 0 36px rgba(248, 201, 214, 0.35) !important;
  animation: pinkGlow 2.6s ease-in-out infinite;
  position: relative;
}
.sb-rank-item.sb-rank-glow .sb-rank-sym,
.sb-rank-item.sb-rank-glow .sb-rank-score,
.sb-rank-item.sb-rank-glow .sb-rank-name,
.sb-rank-item.sb-rank-glow .sb-rank-n {
  color: #5a2438 !important;
}
.sb-rank-item.sb-rank-glow .sb-rank-sym { position: relative; text-shadow: 0 0 8px rgba(255,255,255,0.7); }
.sb-rank-item.sb-rank-glow .sb-rank-score { text-shadow: 0 0 10px rgba(255,255,255,0.6); }
.sb-rank-item.sb-rank-glow { overflow: visible; }
.sb-rank-item.sb-rank-glow::before,
.sb-rank-item.sb-rank-glow::after {
  content: "✦";
  position: absolute;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 10px #ffd6e4, 0 0 14px #ee9bb4, 0 0 18px #e889aa;
  pointer-events: none;
  z-index: 3;
}
.sb-rank-item.sb-rank-glow::before {
  top: -6px; right: 8px;
  font-size: 0.52rem;
  box-shadow: 14px 10px 0 -2px rgba(255,255,255,0.95), -12px 14px 0 -2px rgba(255,214,228,0.7), 8px 18px 0 -3px rgba(255,255,255,0.6);
  animation: fairyDust 1.5s ease-in-out infinite;
}
.sb-rank-item.sb-rank-glow::after {
  bottom: -4px; left: 10px;
  font-size: 0.38rem;
  box-shadow: -10px -12px 0 -2px rgba(255,255,255,0.8), 12px -8px 0 -2px rgba(255,238,245,0.6);
  animation: fairyDust 1.5s ease-in-out infinite 0.75s;
}
.sb-rank-item.sb-rank-glow .sb-rank-sym::after {
  content: "✦";
  position: absolute;
  top: -8px; left: 50%;
  font-size: 0.32rem;
  color: #ffeef5;
  text-shadow: 0 0 5px #fff, 0 0 9px #f8c9d6, 0 0 13px #ee9bb4;
  box-shadow: 10px 6px 0 -2px rgba(255,255,255,0.7), -8px 10px 0 -2px rgba(255,214,228,0.5);
  animation: fairyDust 1.3s ease-in-out infinite 0.35s;
  pointer-events: none;
}
@keyframes fairyDust {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.6) rotate(0deg); filter: brightness(0.9); }
  15% { opacity: 1; filter: brightness(1.3); }
  50% { opacity: 1; transform: translateY(-6px) scale(1.2) rotate(14deg); filter: brightness(1.4); }
  85% { opacity: 0.4; }
}

.sum-dasha-lines p { margin-bottom: 6px; }
.sum-dasha-lord {
  display: inline-block;
  padding: 1px 10px 2px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, currentColor 28%, transparent);
  font-weight: 700;
}
.dasha-graph-wrap {
  margin-top: 18px;
}
.dashscore {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--serif), "Cormorant Garamond", Georgia, serif;
}
.dg-tick {
  font-size: 14px;
  font-weight: 600;
  fill: var(--muted);
  font-family: var(--serif), Georgia, serif;
}
.dgseg {
  animation: dsegFade 0.5s ease forwards;
}
.dgseg-line {
  transform-origin: left center;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dsegReveal 0.85s ease-out forwards;
}
.dgseg-date {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--serif), Georgia, serif;
}
.dgseg-name {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--serif), Georgia, serif;
}
.dgseg-pill {
  fill: #320036;
  stroke: none;
}
.dgseg-pill-future1 {
  fill: #1877f2;   /* Facebook blue */
  stroke: none;
  opacity: 0.92;
}
.dgseg-pill-future2 {
  fill: #ff5fa2;   /* pink */
  stroke: none;
  opacity: 0.92;
}
.dgseg-arrow {
  opacity: 0;
  animation: dsegFade 0.6s ease forwards;
}
@keyframes dsegReveal {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}
@keyframes dsegFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sum-dasha-lord.sb-dasha-strong {
  border-color: #ff8c00 !important;
  background: color-mix(in srgb, currentColor 16%, transparent) !important;
  box-shadow: 0 0 6px rgba(255,140,0,0.35) !important;
  animation: dashaBlink 1.1s ease-in-out infinite;
}
@keyframes dashaBlink {
  0%, 100% { border-color: rgba(255,140,0,0.75); box-shadow: 0 0 6px rgba(255,140,0,0.35), 0 0 10px rgba(255,107,53,0.25); }
  50% { border-color: #ffd700 !important; box-shadow: 0 0 14px rgba(255,215,0,0.85), 0 0 24px rgba(255,107,53,0.65), 0 0 32px rgba(255,69,0,0.35) !important; }
}

.k-share { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.auth-who {
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.btn-logout {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.btn-logout:hover { color: var(--gold); border-color: var(--gold); }

body.login-body {
  min-height: 100vh;
  margin: 0;
  background: #020308;
  color: #f3eee4;
}
.login-cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #020308 url("../img/login-cosmos.jpg") center / cover no-repeat;
  pointer-events: none;
}
.login-cosmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, transparent 0%, rgba(4, 8, 16, 0.35) 48%, rgba(2, 3, 8, 0.78) 100%),
    linear-gradient(180deg, rgba(2, 4, 12, 0.2), rgba(2, 3, 8, 0.45));
}
.login-twinkle {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 68%, rgba(239, 215, 160, 0.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 63% 18%, rgba(255, 255, 255, 0.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 44%, rgba(220, 230, 242, 0.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 47% 81%, rgba(239, 215, 160, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 72%, rgba(255, 255, 255, 0.4) 50%, transparent 51%);
  animation: cosmosTwinkle 5.5s ease-in-out infinite;
}
@keyframes cosmosTwinkle {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.login-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
}
.login-card {
  width: min(420px, 100%);
  text-align: center;
  padding: 42px 36px 28px;
  background: linear-gradient(180deg, rgb(8 12 20 / 0.55), rgb(4 8 14 / 0.62));
  border: 1px solid rgba(212, 175, 106, 0.32);
  border-radius: 22px;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.45), 0 0 40px rgba(212, 175, 106, 0.1);
}
.login-star {
  color: #efd7a0;
  font-size: 1.6rem;
  margin-bottom: 8px;
  text-shadow: 0 0 24px rgba(212, 175, 106, 0.7);
}
.login-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9a8f7a;
}
.login-brand {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: 0.12em;
  margin: 8px 0 14px;
}
.login-brand-text { display: block; }
.login-star-word {
  color: #fff4d4;
  text-shadow:
    0 0 8px rgba(255, 252, 235, 0.95),
    0 0 18px rgba(239, 215, 160, 0.85),
    0 0 32px rgba(212, 175, 106, 0.55);
}
.fairy-line {
  display: block;
  position: relative;
  width: 100%;
  height: 42px;
  margin-top: -0.42em;
  overflow: hidden;
  pointer-events: none;
}
.fairy-canvas {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .fairy-canvas, .login-twinkle { display: none; }
}
.login-lead {
  color: #d4cbb8;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: 28px;
}
.login-mantra {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #efd7a0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(212, 175, 106, 0.45);
}
.mantra-om {
  font-family: "Noto Sans Devanagari", "Noto Serif Thai", serif;
  font-size: 1.55rem;
  line-height: 1;
  color: #efd7a0;
  text-shadow: 0 0 10px rgba(239, 215, 160, 0.7);
}
.mantra-svasti {
  width: 1.15rem;
  height: 1.15rem;
  color: #efd7a0;
  filter: drop-shadow(0 0 6px rgba(212, 175, 106, 0.7));
  flex: 0 0 auto;
}
.login-form { text-align: left; }
.login-form label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a8f7a;
  margin: 12px 0 6px;
}
.login-form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 106, 0.28);
  background: rgb(7 12 10 / 0.65);
  color: #f3eee4;
  font: inherit;
}
.login-form input:focus {
  outline: none;
  border-color: #d4af6a;
  box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.16);
}
.login-err {
  color: #e07a7a;
  font-size: 0.8rem;
  margin: 12px 0 0;
}
.login-submit {
  width: 100%;
  flex: none;
  margin-top: 22px;
}
.login-seo {
  margin: 18px 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: #9a8f7a;
  line-height: 1.5;
}
.login-foot {
  margin-top: 14px;
  font-size: 0.68rem;
  color: #6d6456;
  letter-spacing: 0.04em;
}
.login-foot a { color: #d4af6a; }

.duel-mail { margin-top: 16px; }
.mail-icon-btn {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-bright);
  background: linear-gradient(145deg, var(--gold-bright), var(--gold) 48%, var(--gold-deep));
  color: var(--ink-on-gold);
  box-shadow:
    0 6px 16px rgb(var(--gold-rgb) / 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.mail-icon-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}
.mail-icon-btn:hover {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.08);
  box-shadow:
    0 10px 22px rgb(var(--gold-rgb) / 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.mail-icon-btn:active { transform: translateY(0) scale(0.98); }
.btn-mail {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  color: var(--ink-on-gold);
  border: 1px solid var(--gold-bright);
  font-weight: 700;
  box-shadow: 0 0 12px rgb(var(--gold-rgb) / 0.35);
}
.btn-mail:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.btn-mail:disabled { opacity: 0.55; cursor: wait; transform: none; }

.mail-modal[hidden] { display: none !important; }
.mail-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
.mail-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
}
.mail-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 24px 22px 20px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}
.mail-modal-card h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.mail-modal-lead {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 16px;
}
.mail-modal-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.mail-modal-card input[type="email"] {
  width: 100%;
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  font-size: 0.95rem;
}
.mail-modal-card input[type="email"]:focus {
  outline: none;
  border-color: var(--line-strong);
}
.mail-modal-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.mail-modal-status.is-err { color: var(--danger); }
.mail-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.mail-modal-actions .btn { flex: 1; width: auto; margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .studio { grid-template-columns: 1fr; }
  .cast-panel {
    position: relative;
    top: 0;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .k-sum-grid { grid-template-columns: 1fr 1fr; }
  .k-vimso { font-size: 0.72rem; gap: 4px 10px; }
  .k-vimso-row { grid-template-columns: minmax(5.4rem, 1fr) 2rem 1.2rem 1.2rem 1.2rem; }
  .header-inner { padding: 0 18px; }
  .stage { padding: 20px 18px 56px; }
  .stage-nav { border-radius: 16px; }
}
@media (max-width: 640px) {
  #native-card { flex-direction: column; align-items: stretch; }
  .som-power { text-align: left; }
  .k-form { grid-template-columns: 1fr; }
  .k-date-row { grid-template-columns: 1fr 1.4fr 1.5fr; }
  .k-vimso { grid-template-columns: 1fr; }
  .tech-who, .tech-grid, .tech-bhava { grid-template-columns: 1fr 1fr; }
  .tech-ik-row { grid-template-columns: 1fr; }
  .k-custom-grid { grid-template-columns: 1fr; }
  .k-field-tz { grid-column: auto; }
  .k-sum-grid { grid-template-columns: 1fr; }
  .header-meta { display: none; }
  .cast-title { font-size: 1.7rem; }
  .k-field-actions { flex-direction: column; }
  .btn { width: 100%; }
  .theme-fab { left: 10px; bottom: 12px; }
  .site-footer { padding-bottom: 84px; }
}

/* ---------- Loading spinner ---------- */
.k-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 0.85rem;
}
.k-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: k-spin 0.8s linear infinite;
}
@keyframes k-spin { to { transform: rotate(360deg); } }

/* ---------- Print: diagonal watermarks ---------- */
@media print {
  body::before { display: none; }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='220'><text x='160' y='70' text-anchor='middle' fill='%23999999' fill-opacity='0.28' font-size='18' font-family='Georgia,serif' transform='rotate(-32 160 70)'>www.mongkut.com</text><text x='160' y='180' text-anchor='middle' fill='%23999999' fill-opacity='0.22' font-size='16' font-family='Georgia,serif' transform='rotate(-32 160 180)'>www.mongkut.com</text></svg>");
    background-repeat: repeat;
    background-size: 320px 220px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}