/* ═══════════════════════════════════════════════════════════════════
   master.css · Midnight Steel theme · Bloomberg-inspired
   สีตายตัว ไม่ตาม light/dark mode
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --ms-bg:           #0a0e14;
  --ms-bg-card:      #111722;
  --ms-bg-card-2:    #0d1219;
  --ms-bg-center:    #1a1408;

  /* Text */
  --ms-text:         #e2e8f0;
  --ms-text-muted:   #94a3b8;
  --ms-text-dim:     #6b7689;
  --ms-text-faint:   #4a5568;

  /* Accent gold/bronze */
  --ms-gold:         #d4c896;
  --ms-gold-bright:  #d4af37;
  --ms-gold-deep:    #b8941f;
  --ms-gold-faint:   #856b1a;
  --ms-gold-bg:      #2a1f08;

  /* Verdict colors */
  --ms-good:         #4ade80;
  --ms-good-soft:    #6ee7a7;
  --ms-good-bg:      #0f3a2c;
  --ms-good-bg-2:    #0a2018;
  --ms-good-stroke:  #1d6e56;

  --ms-mid:          #94a3b8;
  --ms-mid-bg:       #1a1f2a;
  --ms-mid-bg-2:     #0d1019;
  --ms-mid-stroke:   #4a5568;

  --ms-warn:         #ef9f27;
  --ms-warn-soft:    #fac775;
  --ms-warn-bg:      #2e1a08;
  --ms-warn-bg-2:    #1a0f04;
  --ms-warn-stroke:  #885011;

  --ms-bad:          #f0997b;
  --ms-bad-bright:   #f87171;
  --ms-bad-bg:       #2a0f0f;
  --ms-bad-bg-2:     #1a0808;
  --ms-bad-bg-3:     #3a1818;
  --ms-bad-stroke:   #993c1d;
  --ms-bad-stroke-2: #7c2d2d;

  /* Borders */
  --ms-border:       #1f2937;
  --ms-border-soft:  #2d3748;

  /* Fonts */
  --ms-font-sans:    'Inter', 'Noto Sans Thai', system-ui, sans-serif;
  --ms-font-serif:   'Noto Serif TC', 'Songti TC', serif;
}

/* ═══════════════════════════════════════════════════════════════════
   Base + body
   ═══════════════════════════════════════════════════════════════════ */
body.master-mode {
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body.master-mode * {
  box-sizing: border-box;
}

body.master-mode .ms-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-text-dim);
  font-weight: 500;
}

body.master-mode .ms-section-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ms-text-dim);
  margin-bottom: 12px;
  font-weight: 500;
}

body.master-mode .ms-hairline {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ms-border-soft) 20%, var(--ms-border-soft) 80%, transparent);
  margin: 20px 0;
}

body.master-mode .ms-no-data {
  color: var(--ms-text-faint);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   Top bar
   ═══════════════════════════════════════════════════════════════════ */
.ms-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 20, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ms-border);
}

.ms-topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ms-back {
  background: transparent;
  border: 1px solid var(--ms-border);
  color: var(--ms-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  font-family: var(--ms-font-serif);
}

.ms-back:hover {
  border-color: var(--ms-gold-deep);
  color: var(--ms-gold);
}

.ms-topbar-title {
  flex: 1;
}

.ms-title-zh {
  font-family: var(--ms-font-serif);
  font-size: 16px;
  color: var(--ms-gold);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.ms-lang-switch {
  display: flex;
  gap: 4px;
}

.ms-lang-switch button {
  background: transparent;
  border: 1px solid var(--ms-border);
  color: var(--ms-text-dim);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--ms-font-sans);
}

.ms-lang-switch button.active {
  border-color: var(--ms-gold-deep);
  color: var(--ms-gold);
  background: var(--ms-gold-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   Main layout
   ═══════════════════════════════════════════════════════════════════ */
.ms-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 100px;
}

/* ═══════════════════════════════════════════════════════════════════
   Header section
   ═══════════════════════════════════════════════════════════════════ */
.ms-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.ms-header-left { flex: 1; min-width: 200px; }
.ms-header-right { text-align: right; }

.ms-meta-line {
  font-family: var(--ms-font-serif);
  font-size: 22px;
  color: var(--ms-gold);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

.ms-meta-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ms-text-dim);
  text-transform: uppercase;
}

.ms-datetime {
  font-size: 13px;
  color: var(--ms-text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.ms-quality {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  border: 1px solid var(--ms-border);
  background: var(--ms-bg-card);
}

.ms-quality-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ms-gold-bright);
  box-shadow: 0 0 8px var(--ms-gold-bright);
}

.ms-quality.is-da-ji  { border-color: var(--ms-good-stroke);  background: var(--ms-good-bg-2); }
.ms-quality.is-da-ji  .ms-quality-dot { background: var(--ms-good); box-shadow: 0 0 8px var(--ms-good); }
.ms-quality.is-da-ji  #ms-quality-text { color: var(--ms-good-soft); }

.ms-quality.is-ji     { border-color: var(--ms-gold-deep);    background: var(--ms-gold-bg); }
.ms-quality.is-ji     .ms-quality-dot { background: var(--ms-gold-bright); box-shadow: 0 0 8px var(--ms-gold-bright); }
.ms-quality.is-ji     #ms-quality-text { color: var(--ms-gold); }

.ms-quality.is-ping   { border-color: var(--ms-mid-stroke);   background: var(--ms-mid-bg); }
.ms-quality.is-ping   .ms-quality-dot { background: var(--ms-mid); }
.ms-quality.is-ping   #ms-quality-text { color: var(--ms-mid); }

.ms-quality.is-xiong  { border-color: var(--ms-warn-stroke);  background: var(--ms-warn-bg); }
.ms-quality.is-xiong  .ms-quality-dot { background: var(--ms-warn); }
.ms-quality.is-xiong  #ms-quality-text { color: var(--ms-warn-soft); }

.ms-quality.is-da-xiong { border-color: var(--ms-bad-stroke); background: var(--ms-bad-bg-3); }
.ms-quality.is-da-xiong .ms-quality-dot { background: var(--ms-bad); }
.ms-quality.is-da-xiong #ms-quality-text { color: var(--ms-bad); }

.ms-convention-pill {
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(212, 200, 150, 0.28);
  border-radius: 999px;
  background: rgba(212, 200, 150, 0.07);
  color: var(--ms-gold);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.ms-convention-pill[data-convention="voytek_compatible"] {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.07);
  color: var(--ms-good-soft);
}

/* Controls */
.ms-controls {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  margin-top: 20px;
  align-items: end;
}

.ms-control { display: flex; flex-direction: column; gap: 6px; }
.ms-control label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ms-text-dim);
  text-transform: uppercase;
}

.ms-control input,
.ms-control select {
  background: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  color: var(--ms-text);
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 6px;
  font-family: var(--ms-font-sans);
}

.ms-control input:focus,
.ms-control select:focus {
  outline: none;
  border-color: var(--ms-gold-deep);
}

.ms-btn-primary {
  background: var(--ms-gold-bg);
  border: 1px solid var(--ms-gold-deep);
  color: var(--ms-gold);
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--ms-font-sans);
}

.ms-btn-primary:hover {
  background: var(--ms-gold-deep);
  color: var(--ms-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   Four pillars
   ═══════════════════════════════════════════════════════════════════ */
.ms-pillars { margin-top: 20px; }

.ms-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ms-pillar {
  background: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.ms-pillar-label {
  font-size: 11px;
  color: var(--ms-text-dim);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ms-pillar-stem,
.ms-pillar-branch {
  font-family: var(--ms-font-serif);
  font-size: 26px;
  color: var(--ms-gold);
  line-height: 1.2;
}

.ms-pillar-branch { color: var(--ms-text); font-size: 22px; }

/* ═══════════════════════════════════════════════════════════════════
   Chart type tabs (時/日/月/年)
   ═══════════════════════════════════════════════════════════════════ */
.ms-chart-tabs-section { margin-top: 28px; }

.ms-chart-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--ms-bg-card-2);
  padding: 6px;
  border: 0.5px solid var(--ms-border);
  border-radius: 10px;
}

.ms-chart-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ms-text-dim);
  padding: 12px 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--ms-font-sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  position: relative;
}

.ms-chart-tab:hover:not(.active):not(:disabled) {
  background: var(--ms-mid-bg);
  color: var(--ms-text-muted);
}

.ms-chart-tab.active {
  background: var(--ms-gold-bg);
  border-color: var(--ms-gold-deep);
  color: var(--ms-gold);
}

.ms-chart-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ms-tab-glyph {
  font-family: var(--ms-font-serif);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  color: var(--ms-gold-deep);
}

.ms-chart-tab.active .ms-tab-glyph { color: var(--ms-gold-bright); }
.ms-chart-tab:disabled .ms-tab-glyph { color: var(--ms-text-faint); }

.ms-tab-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.ms-tab-status {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-text-faint);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.ms-chart-tab.active .ms-tab-status { color: var(--ms-gold-deep); }
.ms-chart-tab.is-loading .ms-tab-status { color: var(--ms-text-muted); }
.ms-chart-tab.is-error .ms-tab-status { color: var(--ms-bad); }
.ms-chart-tab.is-loaded .ms-tab-status { color: var(--ms-good-soft); }

.ms-chart-context {
  font-size: 11px;
  color: var(--ms-text-dim);
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 10px;
  padding: 0 12px;
  font-style: italic;
}

@media (max-width: 460px) {
  .ms-chart-tab { padding: 10px 4px 8px; }
  .ms-tab-glyph { font-size: 20px; }
  .ms-tab-label { font-size: 10px; }
  .ms-tab-status { font-size: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   9-Palace grid
   ═══════════════════════════════════════════════════════════════════ */
.ms-grid-section { margin-top: 28px; }

.ms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  position: relative;
}

.ms-grid-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: var(--ms-text-faint);
  font-size: 13px;
  letter-spacing: 0.12em;
}

/* ───────────────── PALACE CARD ───────────────── */
.ms-palace {
  background: var(--ms-bg-card);
  border: 0.5px solid var(--ms-border);
  border-radius: 8px;
  padding: 14px 14px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ms-palace::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ms-mid-stroke);
}

/* Verdict accent strips on top of palace */
.ms-palace.v-da-ji::before    { background: var(--ms-good-stroke); }
.ms-palace.v-ji::before       { background: var(--ms-gold-deep); }
.ms-palace.v-ping::before     { background: var(--ms-mid-stroke); }
.ms-palace.v-xiong::before    { background: var(--ms-warn-stroke); }
.ms-palace.v-da-xiong::before { background: var(--ms-bad-stroke); }

/* Critical palaces get full red border */
.ms-palace.v-da-xiong {
  border: 1px solid var(--ms-bad-stroke-2);
}

/* Center palace (5) glow */
.ms-palace.is-center {
  background: var(--ms-bg-center);
  border: 0.5px solid var(--ms-gold-deep);
}

.ms-palace.is-center::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(184, 148, 31, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Palace header */
.ms-p-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  position: relative;
}

.ms-p-num {
  font-size: 10px;
  color: var(--ms-text-dim);
  letter-spacing: 0.12em;
}

.ms-p-num strong {
  font-family: var(--ms-font-serif);
  color: var(--ms-gold);
  font-size: 18px;
  font-weight: 500;
  margin-left: 6px;
}

.ms-p-glyph {
  font-family: var(--ms-font-serif);
  font-size: 24px;
  color: var(--ms-gold-deep);
  line-height: 1;
  font-weight: 500;
}

.is-center .ms-p-glyph { color: var(--ms-gold-bright); }

.ms-p-dir {
  font-size: 10px;
  color: var(--ms-text-dim);
  letter-spacing: 0.1em;
}

.ms-p-dir-en {
  font-size: 9px;
  color: var(--ms-text-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 2px;
  position: relative;
}

/* Palace data table */
.ms-p-data {
  margin-top: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  font-size: 12px;
  position: relative;
}

.ms-p-data .k { color: var(--ms-text-dim); }
.ms-p-data .v { color: var(--ms-text); }

.ms-p-data .v.zh-big {
  font-family: var(--ms-font-serif);
  font-size: 14px;
}

.ms-p-data .v .zh-tag {
  color: var(--ms-text-dim);
  font-size: 10px;
  margin-left: 4px;
  font-family: var(--ms-font-serif);
}

/* Color-coded values by good/bad */
.ms-p-data .v.is-good     { color: var(--ms-good); }
.ms-p-data .v.is-good-alt { color: var(--ms-gold); }
.ms-p-data .v.is-mid      { color: var(--ms-text-muted); }
.ms-p-data .v.is-warn     { color: var(--ms-warn); }
.ms-p-data .v.is-bad      { color: var(--ms-bad-bright); }
.ms-p-data .v.is-bad-soft { color: var(--ms-bad); }

/* Star marker for primary deity */
.ms-p-star {
  color: var(--ms-gold-bright);
  font-size: 10px;
  margin-left: 4px;
}

/* Palace verdict bar */
.ms-p-verdict {
  margin: 14px -14px 0;
  padding: 8px 14px;
  border-top: 0.5px solid var(--ms-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.ms-p-verdict-score {
  font-family: var(--ms-font-serif);
  font-weight: 500;
}

/* Verdict bar themes */
.v-da-ji .ms-p-verdict    { background: var(--ms-good-bg); border-top-color: var(--ms-good-stroke); color: var(--ms-good-soft); }
.v-da-ji .ms-p-verdict-score { color: var(--ms-good); }

.v-ji .ms-p-verdict       { background: var(--ms-gold-bg); border-top-color: var(--ms-gold-deep); color: var(--ms-gold); }
.v-ji .ms-p-verdict-score { color: var(--ms-gold); }

.v-ping .ms-p-verdict     { background: var(--ms-mid-bg); border-top-color: var(--ms-mid-stroke); color: var(--ms-mid); }
.v-ping .ms-p-verdict-score { color: var(--ms-mid); }

.v-xiong .ms-p-verdict    { background: var(--ms-warn-bg); border-top-color: var(--ms-warn-stroke); color: var(--ms-warn-soft); }
.v-xiong .ms-p-verdict-score { color: var(--ms-warn); }

.v-da-xiong .ms-p-verdict { background: var(--ms-bad-bg-3); border-top-color: var(--ms-bad-stroke); color: var(--ms-bad); }
.v-da-xiong .ms-p-verdict-score { color: var(--ms-bad); }

/* Palace tags row (kong wang, etc.) */
.ms-p-tags {
  margin: 0 -14px;
  padding: 6px 14px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.v-da-ji .ms-p-tags     { background: var(--ms-good-bg-2); color: var(--ms-good-soft); }
.v-ji .ms-p-tags        { background: var(--ms-gold-bg);   color: var(--ms-gold-faint); }
.v-ping .ms-p-tags      { background: var(--ms-mid-bg-2);  color: var(--ms-mid); }
.v-xiong .ms-p-tags     { background: var(--ms-warn-bg-2); color: var(--ms-warn); }
.v-da-xiong .ms-p-tags  { background: var(--ms-bad-bg-2);  color: var(--ms-bad); }

.ms-p-tags:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   Patterns row
   ═══════════════════════════════════════════════════════════════════ */
.ms-section { margin-top: 28px; }

.ms-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 16px;
  background: var(--ms-bg-card-2);
  border: 0.5px solid var(--ms-border);
  border-radius: 8px;
}

.ms-pattern-chip {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--ms-mid-bg);
  color: var(--ms-gold);
  border: 0.5px solid var(--ms-border-soft);
  border-radius: 4px;
}

.ms-pattern-chip strong {
  color: var(--ms-gold-deep);
  font-family: var(--ms-font-serif);
  font-weight: 500;
  margin-left: 4px;
}

.ms-pattern-chip.is-bad {
  background: var(--ms-bad-bg-2);
  color: var(--ms-bad);
  border-color: var(--ms-bad-stroke-2);
}

/* ═══════════════════════════════════════════════════════════════════
   Warnings
   ═══════════════════════════════════════════════════════════════════ */
.ms-warn-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.ms-warn {
  padding: 12px 14px;
  border-radius: 6px;
}

.ms-warn-danger {
  background: var(--ms-bad-bg);
  border-left: 2px solid var(--ms-bad-stroke);
}
.ms-warn-danger .ms-warn-eyebrow { color: var(--ms-text-dim); }
.ms-warn-danger .ms-warn-body    { color: var(--ms-bad); }

.ms-warn-good {
  background: var(--ms-gold-bg);
  border-left: 2px solid var(--ms-gold-deep);
}
.ms-warn-good .ms-warn-eyebrow { color: var(--ms-text-dim); }
.ms-warn-good .ms-warn-body    { color: var(--ms-gold); }

.ms-warn-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ms-warn-body { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════
   Day master
   ═══════════════════════════════════════════════════════════════════ */
.ms-daymaster {
  background: var(--ms-bg-card);
  border: 0.5px solid var(--ms-border);
  border-radius: 8px;
  padding: 16px;
}

.ms-dm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ms-dm-cell {
  text-align: center;
  padding: 8px;
  border-right: 0.5px solid var(--ms-border);
}

.ms-dm-cell:last-child { border-right: none; }

.ms-dm-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ms-text-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ms-dm-cell > div:not(.ms-dm-label) {
  font-family: var(--ms-font-serif);
  font-size: 18px;
  color: var(--ms-gold);
}

/* ═══════════════════════════════════════════════════════════════════
   Lead metrics
   ═══════════════════════════════════════════════════════════════════ */
.ms-lead-section {
  margin-top: 22px;
}

.ms-lead-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ms-lead-card {
  min-width: 0;
  background: var(--ms-bg-card);
  border: 0.5px solid var(--ms-border);
  border-radius: 8px;
  padding: 12px 14px;
}

.ms-lead-card.is-voytek {
  border-color: rgba(74, 222, 128, 0.22);
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.06), var(--ms-bg-card));
}

.ms-lead-card.is-technical {
  border-color: rgba(148, 163, 184, 0.22);
}

.ms-lead-label {
  color: var(--ms-text-dim);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  white-space: nowrap;
}

.ms-lead-value {
  color: var(--ms-gold);
  font-family: var(--ms-font-serif);
  font-size: 20px;
  line-height: 1.35;
  min-height: 28px;
}

.ms-lead-value .zh-tag,
.ms-lead-palace {
  color: var(--ms-text-dim);
  font-size: 11px;
  font-family: var(--ms-font-serif);
  margin-left: 5px;
}

.ms-lead-note {
  color: var(--ms-text-faint);
  font-size: 10px;
  line-height: 1.35;
  margin-top: 5px;
}

/* ═══════════════════════════════════════════════════════════════════
   Ranking
   ═══════════════════════════════════════════════════════════════════ */
.ms-ranking {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ms-rank-item {
  background: var(--ms-bg-card);
  border: 0.5px solid var(--ms-border);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.ms-rank-item .rk-pos {
  color: var(--ms-text-dim);
  font-family: var(--ms-font-serif);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.ms-rank-item .rk-pal {
  color: var(--ms-gold);
  font-family: var(--ms-font-serif);
}

.ms-rank-item.is-direction .rk-pal {
  font-family: var(--ms-font-sans);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.ms-rank-item .rk-score {
  color: var(--ms-text);
  font-variant-numeric: tabular-nums;
  font-family: var(--ms-font-serif);
}

/* ═══════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════ */
.ms-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 0.5px solid var(--ms-border);
  text-align: center;
}

.ms-disclaimer {
  font-size: 10px;
  color: var(--ms-text-faint);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.ms-version {
  font-size: 10px;
  color: var(--ms-text-faint);
  letter-spacing: 0.16em;
  font-family: var(--ms-font-serif);
}

/* ═══════════════════════════════════════════════════════════════════
   Bottom nav (Executive Mode tabs)
   ═══════════════════════════════════════════════════════════════════ */
.ms-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 14, 20, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--ms-border);
  display: flex;
  justify-content: space-around;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  z-index: 90;
}

.ms-bottom-nav a {
  color: var(--ms-text-dim);
  text-decoration: none;
  font-family: var(--ms-font-serif);
  font-size: 14px;
  padding: 6px 14px;
  letter-spacing: 0.08em;
}

.ms-bottom-nav a:hover { color: var(--ms-gold); }

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .ms-grid { grid-template-columns: repeat(2, 1fr); }
  .ms-grid > .ms-palace.is-center { order: -1; grid-column: 1 / -1; }
  .ms-pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .ms-controls { grid-template-columns: 1fr; }
  .ms-warn-section { grid-template-columns: 1fr; }
  .ms-dm-grid { grid-template-columns: repeat(2, 1fr); }
  .ms-dm-cell { border-right: none; border-bottom: 0.5px solid var(--ms-border); padding-bottom: 12px; }
  .ms-lead-grid { grid-template-columns: repeat(2, 1fr); }
  .ms-ranking { grid-template-columns: repeat(2, 1fr); }
  .ms-header-row { flex-direction: column; }
  .ms-header-right { text-align: left; }
}

@media (max-width: 460px) {
  .ms-grid { grid-template-columns: 1fr; }
  .ms-grid > .ms-palace { grid-column: auto; }
  .ms-grid > .ms-palace.is-center { order: 0; }
  .ms-lead-grid { grid-template-columns: 1fr; }
  .ms-ranking { grid-template-columns: 1fr; }
  .ms-main { padding: 16px 14px 100px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Premium 9-grid redesign · 2026-05-03
   Presentation-only: same API contract, compact mobile-first chart.
   ═══════════════════════════════════════════════════════════════════ */
body.master-mode {
  background:
    linear-gradient(180deg, #080b10 0%, #0c1119 46%, #080b10 100%);
}

.ms-topbar {
  background: rgba(8, 11, 16, 0.92);
  border-bottom: 1px solid rgba(212, 200, 150, 0.12);
}

.ms-title-zh {
  font-family: var(--ms-font-sans);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.ms-main {
  max-width: 1180px;
}

.ms-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 4px 0 14px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
}

.ms-mode-tabs a {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ms-text-muted);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.ms-mode-tabs a.active {
  color: #0b0f14;
  background: linear-gradient(180deg, var(--ms-gold), var(--ms-gold-deep));
  font-weight: 700;
}

.ms-control-card {
  padding: 16px;
  border: 1px solid rgba(212, 200, 150, 0.16);
  border-radius: 10px;
  background: rgba(17, 23, 34, 0.76);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

.ms-control-card .ms-hairline {
  display: none;
}

.ms-controls {
  grid-template-columns: minmax(180px, 2fr) minmax(150px, 1fr) minmax(170px, 1fr) auto;
}

.ms-control input,
.ms-control select {
  min-height: 42px;
  background: rgba(8, 13, 21, 0.88);
  border-color: rgba(148, 163, 184, 0.18);
}

.ms-btn-primary {
  min-height: 42px;
  white-space: nowrap;
}

.ms-hero-summary {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 10px;
  align-items: stretch;
}

.ms-hero-main,
.ms-hero-stat,
.ms-rec-card {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(17, 23, 34, 0.72);
}

.ms-hero-main {
  padding: 16px;
  border-color: rgba(212, 200, 150, 0.18);
}

.ms-hero-recommend {
  color: var(--ms-gold);
  font-family: var(--ms-font-serif);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.18;
}

.ms-hero-recommend span {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 34px;
  margin-left: 8px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 8px;
  color: var(--ms-good-soft);
  font-family: var(--ms-font-sans);
  font-size: 18px;
}

.ms-hero-guidance {
  margin-top: 8px;
  color: var(--ms-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.ms-hero-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ms-hero-stat {
  padding: 11px 12px;
}

.ms-hero-stat span {
  display: block;
  color: var(--ms-text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.ms-hero-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--ms-gold);
  font-size: 13px;
  line-height: 1.25;
}

.ms-hero-stat.is-avoid strong {
  color: var(--ms-bad);
}

.ms-grid-section {
  margin-top: 16px;
}

.ms-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px;
}

.ms-palace {
  min-width: 0;
  min-height: 124px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(17, 23, 34, 0.86);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.ms-palace:hover,
.ms-palace:focus {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(212, 200, 150, 0.42);
  background: rgba(22, 31, 46, 0.95);
}

.ms-palace.is-center {
  background: rgba(35, 25, 8, 0.84);
  order: 0;
  grid-column: auto;
}

.ms-palace.is-center::after {
  display: none;
}

.ms-p-head {
  gap: 6px;
}

.ms-p-glyph {
  font-size: 18px;
  white-space: nowrap;
}

.ms-p-glyph strong {
  color: var(--ms-text);
  font-size: 16px;
  margin-left: 2px;
}

.ms-p-score {
  flex: 0 0 auto;
  min-width: 32px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--ms-text);
  font-family: var(--ms-font-serif);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.ms-p-dir-en {
  margin-top: 1px;
  font-size: 8px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-p-compact-data {
  display: grid;
  gap: 3px;
  margin-top: 8px;
}

.ms-p-compact-data div {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px;
  align-items: baseline;
}

.ms-p-compact-data span {
  color: var(--ms-text-dim);
  font-size: 9px;
  line-height: 1.15;
}

.ms-p-compact-data strong {
  min-width: 0;
  color: var(--ms-text);
  font-family: var(--ms-font-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-p-compact-data strong em {
  color: var(--ms-gold-bright);
  font-style: normal;
  margin-left: 2px;
}

.ms-p-verdict {
  min-height: 28px;
  margin: auto -10px -10px;
  padding: 5px 10px;
  font-size: 9px;
  letter-spacing: 0.08em;
  gap: 6px;
}

.ms-p-verdict span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-grid-hint {
  margin-top: 8px;
  color: var(--ms-text-dim);
  font-size: 11px;
  text-align: center;
}

.ms-pillars {
  margin-top: 16px;
}

.ms-pillar {
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(17, 23, 34, 0.74);
}

.ms-pillar-label {
  margin-bottom: 3px;
  font-size: 10px;
}

.ms-pillar-stem,
.ms-pillar-branch {
  display: inline;
  font-size: 22px;
}

.ms-pillar-branch {
  margin-left: 2px;
}

.ms-lead-grid,
.ms-rec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ms-rec-card {
  padding: 13px 14px;
}

.ms-rec-card.is-avoid {
  border-color: rgba(248, 113, 113, 0.2);
}

.ms-rec-title {
  color: var(--ms-gold);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}

.ms-rec-card p {
  margin: 0;
  color: var(--ms-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.ms-ranking-note {
  margin: 8px 0 0;
  color: var(--ms-text-dim);
  font-size: 11px;
}

.ms-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  visibility: hidden;
}

.ms-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  transition: background 0.18s ease;
}

.ms-sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(720px, calc(100vw - 20px));
  max-height: min(82vh, 720px);
  overflow: auto;
  transform: translate(-50%, 105%);
  transition: transform 0.22s ease;
  padding: 14px 16px 18px;
  border: 1px solid rgba(212, 200, 150, 0.2);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: rgba(11, 16, 24, 0.98);
  box-shadow: 0 -20px 70px rgba(0, 0, 0, 0.45);
}

.ms-sheet.is-open {
  pointer-events: auto;
  visibility: visible;
}

.ms-sheet.is-open .ms-sheet-backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.ms-sheet.is-open .ms-sheet-panel {
  transform: translate(-50%, 0);
}

.ms-sheet-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.36);
}

.ms-sheet-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  color: var(--ms-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ms-sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.ms-sheet-head h2 {
  margin: 0;
  color: var(--ms-gold);
  font-family: var(--ms-font-serif);
  font-size: 24px;
  line-height: 1.2;
}

.ms-sheet-subtitle {
  color: var(--ms-text-muted);
  font-size: 12px;
  margin-top: 3px;
}

.ms-sheet-score {
  min-width: 76px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
  background: rgba(148, 163, 184, 0.1);
  color: var(--ms-text);
  font-variant-numeric: tabular-nums;
}

.ms-sheet-score.v-da-ji,
.ms-sheet-score.v-ji {
  color: var(--ms-good-soft);
  background: rgba(74, 222, 128, 0.08);
}

.ms-sheet-score.v-xiong {
  color: var(--ms-warn);
  background: rgba(239, 159, 39, 0.08);
}

.ms-sheet-score.v-da-xiong {
  color: var(--ms-bad);
  background: rgba(248, 113, 113, 0.08);
}

.ms-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.ms-sheet-grid div,
.ms-sheet-block {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(17, 23, 34, 0.78);
}

.ms-sheet-grid div {
  padding: 10px 12px;
}

.ms-sheet-grid span,
.ms-sheet-block h3 {
  display: block;
  color: var(--ms-text-dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.ms-sheet-grid strong {
  color: var(--ms-gold);
  font-family: var(--ms-font-serif);
  font-size: 15px;
}

.ms-sheet-block {
  padding: 12px 13px;
  margin-top: 8px;
}

.ms-sheet-block p {
  margin: 0;
  color: var(--ms-text-muted);
  font-size: 13px;
  line-height: 1.48;
}

body.ms-sheet-open {
  overflow: hidden;
}

@media (min-width: 980px) {
  .ms-grid {
    gap: 10px;
  }

  .ms-palace {
    min-height: 150px;
    padding: 13px;
  }

  .ms-p-glyph {
    font-size: 24px;
  }

  .ms-p-compact-data {
    gap: 5px;
    margin-top: 12px;
  }

  .ms-p-compact-data div {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .ms-p-compact-data span {
    font-size: 10px;
  }

  .ms-p-compact-data strong {
    font-size: 15px;
  }
}

@media (max-width: 860px) {
  .ms-controls,
  .ms-hero-summary,
  .ms-lead-grid,
  .ms-rec-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ms-main {
    padding: 14px 10px 88px;
  }

  .ms-topbar-inner {
    padding: 10px 12px;
    gap: 10px;
  }

  .ms-back {
    width: 34px;
    height: 34px;
  }

  .ms-lang-switch button {
    min-width: 36px;
    min-height: 32px;
    padding: 5px 6px;
  }

  .ms-header-row {
    gap: 10px;
  }

  .ms-header-right {
    width: 100%;
  }

  .ms-meta-line {
    font-size: 18px;
  }

  .ms-control-card {
    padding: 12px;
  }

  .ms-controls {
    gap: 8px;
    margin-top: 12px;
  }

  .ms-hero-main {
    padding: 13px;
  }

  .ms-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ms-hero-stat {
    padding: 9px 8px;
  }

  .ms-hero-stat strong {
    font-size: 11px;
  }

  .ms-pillars-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .ms-pillar {
    padding: 7px 4px;
  }

  .ms-pillar-label {
    font-size: 9px;
  }

  .ms-pillar-stem,
  .ms-pillar-branch {
    font-size: 17px;
  }

  .ms-chart-tabs-section {
    margin-top: 16px;
  }

  .ms-chart-tabs {
    gap: 4px;
    padding: 4px;
  }

  .ms-chart-tab {
    min-width: 0;
    padding: 8px 2px 7px;
  }

  .ms-tab-glyph {
    font-size: 18px;
  }

  .ms-grid {
    gap: 5px;
  }

  .ms-grid > .ms-palace.is-center {
    order: 0;
    grid-column: auto;
  }

  .ms-palace {
    min-height: 112px;
    padding: 8px 7px 0;
    border-radius: 8px;
  }

  .ms-p-glyph {
    font-size: 17px;
  }

  .ms-p-glyph strong {
    font-size: 14px;
  }

  .ms-p-score {
    min-width: 27px;
    height: 25px;
    font-size: 13px;
    border-radius: 7px;
  }

  .ms-p-compact-data {
    margin-top: 6px;
    gap: 3px;
  }

  .ms-p-compact-data div {
    grid-template-columns: 27px minmax(0, 1fr);
  }

  .ms-p-compact-data span {
    font-size: 8px;
  }

  .ms-p-compact-data strong {
    font-size: 11px;
  }

  .ms-p-verdict {
    min-height: 24px;
    margin: auto -7px 0;
    padding: 4px 7px;
    font-size: 8px;
  }

  .ms-sheet-panel {
    width: 100vw;
    max-height: 86vh;
  }

  .ms-sheet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .ms-main {
    padding-left: 7px;
    padding-right: 7px;
  }

  .ms-palace {
    min-height: 106px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .ms-p-compact-data div {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .ms-p-compact-data strong {
    font-size: 10px;
  }
}