* {
  box-sizing: border-box;
  font-family: "Montserrat", "Segoe UI", sans-serif;
}

html {
  color-scheme: light;
  --bg-body: #f5ede0;
  --bg-gradient:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(201,162,39,0.13) 0%, transparent 65%),
    radial-gradient(circle at 5% 80%, rgba(180,100,20,0.09) 0%, transparent 30%),
    radial-gradient(circle at 95% 20%, rgba(201,162,39,0.10) 0%, transparent 28%),
    radial-gradient(circle at 90% 90%, rgba(180,80,10,0.07) 0%, transparent 26%),
    linear-gradient(160deg, #faf5eb 0%, #f5ede0 50%, #faf2e4 100%);
  --bg-page: #fffdf6;
  --text-color: #1c1208;
  --text-secondary: #6b5740;
  --border-color: rgba(180, 130, 20, 0.22);
  --border-strong: rgba(120, 88, 10, 0.55);
  --input-bg: #fffdf6;
  --input-focus-bg: rgba(201, 162, 39, 0.09);
  --accent: #8a6a12;
  --line-color: rgba(100, 75, 10, 0.7);
  --star-filled: #b8921e;
  --star-bottom: #1c1208;
  --card-bg: #faf5e8;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #080810;
  --bg-gradient:
    radial-gradient(ellipse 70% 60% at 50% 10%, rgba(201,162,39,0.07) 0%, transparent 70%),
    radial-gradient(circle at 8% 88%, rgba(208, 0, 0, 0.08) 0, transparent 30%),
    radial-gradient(circle at 92% 15%, rgba(201,162,39,0.06) 0, transparent 28%),
    linear-gradient(135deg, #080810 0%, #0d0d1a 50%, #080810 100%);
  --bg-page: #0d0d1a;
  --text-color: #e4d8c8;
  --text-secondary: #7a7060;
  --border-color: rgba(201, 162, 39, 0.18);
  --border-strong: rgba(201, 162, 39, 0.45);
  --input-bg: #10101c;
  --input-focus-bg: rgba(201, 162, 39, 0.07);
  --accent: #c9a227;
  --line-color: rgba(201, 162, 39, 0.65);
  --star-filled: #c9a227;
  --star-bottom: #e4d8c8;
  --card-bg: #10101c;
}

body {
  margin: 0;
  padding: 24px;
  min-height: 100vh;
  color: var(--text-color);
  background-color: var(--bg-body);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
}

.page {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-page);
  padding: 16px 40px 20px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 8px 48px rgba(140, 100, 10, 0.13), 0 2px 8px rgba(140, 100, 10, 0.07);
}

/* ---------- Theme toggle & nav ---------- */
.theme-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.site-nav {
  display: flex;
  gap: 18px;
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: var(--accent);
}

.nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-color);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  padding: 0 26px 0 12px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c9a227'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.lang-select:hover { border-color: var(--border-strong); }
.lang-select:focus { border-color: var(--accent); }
.lang-select option { background: var(--input-bg); color: var(--text-color); }

/* ---------- Name row ---------- */
.name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.name-label {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: bold;
}

.name-label .cn {
  font-size: 14px;
  font-weight: normal;
}

.name-box {
  flex: 1;
  height: 50px;
  font-size: 18px;
  border: 2px solid var(--border-strong);
  padding: 0 10px;
  background: var(--input-bg);
  color: var(--text-color);
}

/* Desktop only — filling the whole row looked oversized; cap it well short of the row width.
   Mobile keeps flex:1 (full width) since the screen itself is already narrow there. */
@media (min-width: 601px) {
  .name-box {
    flex: 0 1 27.5%;
  }
}

/* ---------- Optional feature panels (Anak Kembar / Jam Lahir) ---------- */
/* Desktop: the name+checkbox row on top, then the revealed panels on their own row below —
   this gives the panels full width so their content never cramps/wraps. Mobile keeps the
   default block stacking. */
@media (min-width: 601px) {
  .name-twin-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
  }

  .name-twin-row .name-row {
    margin-bottom: 0;
  }

  .opt-panels {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
  }

  .opt-panels .twin-panel {
    margin: 0;
    min-width: 160px;
  }

  /* Puts the action buttons (Download/Riwayat/Simpan/Share) level with the Name field / Anak
     Kembar / Jam Lahir checkboxes, filling the empty space to their right, instead of their
     own centered row further down. */
  .name-export-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .name-export-row .name-row {
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  .name-export-row .export-row {
    flex: 0 0 auto;
    margin-left: auto;
    margin-bottom: 0;
  }
}

/* When both panels are hidden, JS marks the wrapper [hidden] so it adds no gap row. */
.opt-panels[hidden] {
  display: none;
}

.opt-panel-title {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.twin-check-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.twin-check {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
}

.twin-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.twin-panel {
  margin: 0 0 40px;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

.twin-panel[hidden] {
  display: none;
}

.twin-order {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 14px;
}

.twin-order label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}

.twin-order input {
  accent-color: var(--accent);
  cursor: pointer;
}

.twin-parent-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--accent);
}

.twin-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.twin-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.twin-hdr {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
}

.twin-panel .cell {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

/* Shown only inside the exported PNG (revealed in buildCanvas's onclone). */
.export-only {
  display: none;
}

.twin-summary {
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: bold;
  color: var(--text-color);
}

/* ---------- Export buttons ---------- */
.export-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.riwayat-icon-btn {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

.riwayat-icon-btn:hover {
  background: rgba(201, 162, 39, 0.08);
  border-color: #c9a227;
  transform: translateY(-2px) rotate(-12deg);
}

.riwayat-icon-btn:active {
  transform: translateY(0) rotate(0deg);
}

.riwayat-icon-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.history-status {
  text-align: center;
  font-size: 13px;
  margin: -14px 0 20px;
  min-height: 1.4em;
}

.history-status.success { color: #4db34d; }
.history-status.error { color: #e05050; }

/* ---------- Top input row (A B circle C D) ---------- */
.top-input-headers {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: -6px;
}

.circle-spacer {
  width: 80px;
  flex-shrink: 0;
}

.top-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 10px;
}

.group-header {
  text-align: center;
}

.group-header .en {
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.group-header .cn-row {
  display: flex;
}

/* Chinese glyphs under the Date/Month & Century/Year headers are only relevant in 中文 mode. */
html[lang="id"] .group-header .cn-row,
html[lang="en"] .group-header .cn-row {
  display: none;
}

/* "Tanggal" is longer than "Bulan", so the combined ID label sits visually off-center over
   the two boxes below; nudge it left a touch for a neater look. */
html[lang="id"] .group-header .en[data-i18n="hdr_dm"] {
  transform: translateX(-10px);
}

.group-header .cn-row span {
  width: 70px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
}

.box-pair {
  display: flex;
  border: 2px solid var(--border-strong);
}

.box-triple {
  display: flex;
  border: 2px solid var(--border-strong);
}

.cell {
  width: 70px;
  height: 70px;
  border: none;
  border-right: 2px solid var(--border-strong);
  font-size: 24px;
  font-weight: bold;
  color: var(--accent);
  background: var(--input-bg);
  text-align: center;
  font-family: inherit;
}

.box-pair .cell:last-child,
.box-triple .cell:last-child {
  border-right: none;
}

.num-input {
  outline: none;
}

.num-input:focus {
  background: var(--input-focus-bg);
}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  font-size: 24px;
  font-weight: bold;
  color: var(--accent);
  background: var(--input-bg);
  text-align: center;
  font-family: inherit;
  padding: 0;
}

#X {
  transform: translateY(10px);
}

.top-input-row .box-pair {
  transform: translateY(10px);
}

.cell-zero {
  color: var(--accent);
  font-weight: bold;
}

input[readonly] {
  outline: none;
  cursor: default;
  caret-color: transparent;
}

/* ---------- Diagram ---------- */
.diagram {
  position: relative;
  width: 100%;
  padding-top: 67.3%; /* aspect ratio based on viewBox 1000x673 */
  margin: 10px 0 0;
}

.diagram .lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.shape {
  fill: none;
  stroke: var(--line-color);
  stroke-width: 3;
}

.lines line {
  stroke: var(--line-color);
  stroke-width: 3;
}

.star {
  font-size: 60px;
  text-anchor: middle;
}

.star.filled {
  fill: var(--star-filled);
}

.star.star-bottom {
  fill: var(--star-bottom);
}

.tri-box {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  padding: 0;
  font-family: inherit;
}

#K {
  color: var(--text-color);
  font-weight: bold;
  font-size: 32px;
}

/* ---------- Bottom input row ---------- */
.bottom-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

/* ---------- Content row (diagram + legend) ---------- */
.content-row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-top: 10px;
}

.left-col {
  flex: 1;
  min-width: 0;
}

/* Scale the diagram's boxes to the .left-col width (via container query
   units) so they keep their proportions and never overlap, whether the
   column is ~394px (wide screen) or ~245px (narrowest 2-col layout).
   Ratios are calibrated from the 70px/48px/58px sizes that looked right
   at the ~394px reference width. Mobile keeps fixed px since .content-row
   stacks there and .left-col becomes full-width. container-type is scoped
   here too, since it collapses .left-col's width when .content-row is
   flex-direction:column on mobile. */
@media (min-width: 601px) {
  .left-col {
    container-type: inline-size;
  }

  .left-col .top-input-headers,
  .left-col .top-input-row,
  .left-col .bottom-input-row {
    gap: 4.06cqw;
  }

  .left-col .circle-spacer {
    width: 14.72cqw;
  }

  .left-col .cell {
    width: 12.18cqw;
    height: 12.18cqw;
    font-size: 4.57cqw;
  }

  .left-col .circle {
    width: 14.72cqw;
    height: 14.72cqw;
    font-size: 4.57cqw;
  }

  .left-col .tri-box {
    width: 17.77cqw;
    height: 17.77cqw;
    font-size: 6.09cqw;
  }

  .left-col #K {
    font-size: 8.5cqw;
  }

  .left-col .group-header .en {
    font-size: 3.81cqw;
  }

  .left-col .group-header .cn-row span {
    width: 12.18cqw;
    font-size: 4.57cqw;
  }
}

.legend-col {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: max-content max-content max-content;
  column-gap: 8px;
  row-gap: 15px;
  align-items: baseline;
  padding-top: 6px;
  font-size: 15px;
}

.legend-item {
  display: contents;
}

.legend-label {
  white-space: nowrap;
}

.legend-input {
  width: 120px;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  font-size: 24px;
  font-weight: bold;
  font-family: inherit;
  padding: 0 4px;
  outline: none;
  background: transparent;
}

.legend-input:focus {
  background: var(--input-focus-bg);
}

.legend-item.legend-sub .legend-label {
  margin-left: 22px;
}

/* ---------- Extra sections (SHIO, Karakter, Warna, dst) ---------- */
.extra-section {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-color);
}

.extra-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: bold;
  color: var(--accent);
}

.extra-title-sub {
  font-size: 14px;
  font-weight: normal;
  color: var(--text-secondary);
}

.extra-sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-secondary);
}

.extra-sub strong {
  color: var(--text-color);
}

.extra-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.extra-label {
  font-weight: 600;
  white-space: nowrap;
}

.extra-value {
  flex: 1;
}

/* Basic Character traits */
.trait-group-label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trait-positive-label {
  color: #7a6010;
}

.trait-negative-label {
  color: #b00020;
}

.trait-list {
  margin: 0 0 12px;
  padding-left: 22px;
}

.trait-list:last-child {
  margin-bottom: 0;
}

.trait-positive li {
  color: #7a6010;
}

.trait-negative li {
  color: #b00020;
}

.trait-list li {
  margin-bottom: 4px;
  font-weight: bold;
}

/* Balance Of 5 Elements */
.balance-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.balance-card {
  flex: 1;
  min-width: 110px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  background: var(--card-bg);
}

.balance-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 4px;
}

.balance-elem {
  font-weight: bold;
  color: var(--accent);
  font-size: 16px;
}

.balance-label {
  font-size: 12px;
  margin: 4px 0;
  min-height: 2.4em;
}

.balance-count {
  font-size: 22px;
  font-weight: bold;
}

.balance-status {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 9px;
  border-radius: 10px;
  margin-top: 6px;
}

.balance-status.seimbang { background: rgba(201, 162, 39, 0.18); color: #7a6010; }
.balance-status.kelebihan { background: rgba(46, 160, 90, 0.18); color: #1f7a45; }
.balance-status.kekurangan { background: rgba(176, 0, 32, 0.18); color: #b00020; }

html[data-theme="dark"] .balance-status.seimbang { color: #c9a227; }
html[data-theme="dark"] .balance-status.kelebihan { color: #4bc47f; }
html[data-theme="dark"] .balance-status.kekurangan { color: #e05050; }

.balance-ideal {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.balance-explain-list {
  margin-top: 20px;
}

/* Missing Numbers (Angka Hilang) detail */
.missing-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.missing-item {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 12px;
}

.missing-item-title {
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 3px;
}

.missing-item-desc {
  color: var(--text-color);
  line-height: 1.5;
}

.missing-empty {
  color: var(--text-secondary);
}

/* 13 Angka Kehidupan — one card per legend position: big 3-digit number + label + meaning. */
.life-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.life-card {
  border-left: 3px solid var(--accent);
  padding: 4px 0 6px 14px;
}

.life-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.life-num {
  font-size: 22px;
  font-weight: bold;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.life-label {
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

.life-desc {
  color: var(--text-color);
  line-height: 1.6;
  font-size: 14.5px;
  margin-bottom: 6px;
}

.life-warn,
.life-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.6;
  font-size: 14px;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 6px;
}

.life-warn-icon,
.life-tip-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.6;
}

.life-warn {
  background: rgba(176, 0, 32, 0.08);
  color: var(--text-color);
}

.life-warn strong {
  color: #b00020;
}

html[data-theme="dark"] .life-warn {
  background: rgba(224, 80, 80, 0.1);
}

html[data-theme="dark"] .life-warn strong {
  color: #e05050;
}

.life-tip {
  background: rgba(201, 162, 39, 0.08);
  color: var(--text-color);
}

.life-tip strong {
  color: var(--accent);
}

/* Shio & Relasi has exactly 4 fixed items — lay them out 2-per-row on wider screens. */
@media (min-width: 601px) {
  .relasi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 12px;
  }
}

/* Each "name + emoji" pair is a flex row so the emoji centers reliably against the text
   baseline — vertical-align/inline-block alone don't align consistently across different
   emoji glyphs' own font metrics. Match the emoji size to the Balance 5 Elemen icons (22px). */
.relasi-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.relasi-emoji {
  font-size: 22px;
  line-height: 1;
}

/* Match the animal-name text size to the emoji next to it. */
#relasiList .missing-item-desc {
  font-size: 22px;
}

/* ---------- Site footer ---------- */
.site-footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- About page ---------- */
.about-content {
  padding: 10px 0 20px;
  line-height: 1.6;
}

.about-title {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: bold;
  color: var(--accent);
}

.about-subtitle {
  margin: 24px 0 8px;
  font-size: 18px;
  font-weight: bold;
}

.about-list {
  padding-left: 22px;
  margin: 8px 0;
}

.about-list li {
  margin-bottom: 6px;
}

/* ---------- Contact form ---------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
  margin-top: 12px;
}

.contact-form label {
  font-weight: 600;
  font-size: 14px;
  margin-top: 6px;
}

.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-color);
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: var(--input-focus-bg);
}

.contact-submit {
  margin-top: 10px;
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.contact-status {
  margin: 6px 0 0;
  font-size: 14px;
  min-height: 1.2em;
}

.contact-status.success {
  color: #1a7a1a;
}

.contact-status.error {
  color: #b00020;
}

/* ---------- Dark mode overrides ---------- */
html[data-theme="dark"] .page {
  border-color: rgba(201, 162, 39, 0.2);
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 162, 39, 0.08);
}

html[data-theme="dark"] .riwayat-icon-btn {
  background: transparent;
  color: #c9a227;
  border: 1px solid rgba(201, 162, 39, 0.45);
}
html[data-theme="dark"] .riwayat-icon-btn:hover {
  background: rgba(201, 162, 39, 0.08);
  border-color: #c9a227;
}

html[data-theme="dark"] .trait-positive li { color: #c9a227; }
html[data-theme="dark"] .trait-negative li { color: #e05050; }
html[data-theme="dark"] .trait-positive-label { color: #c9a227; }
html[data-theme="dark"] .trait-negative-label { color: #e05050; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  .page {
    padding: 16px 12px 30px;
    border-radius: 10px;
  }

  .theme-toggle {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .lang-select {
    height: 32px;
    font-size: 12px;
    padding: 0 22px 0 10px;
    background-position: right 8px center;
    background-size: 9px;
  }

  .controls {
    gap: 6px;
  }

  .theme-toggle-row {
    margin-bottom: 18px;
  }

  .site-nav {
    gap: 12px;
  }

  .nav-link {
    font-size: 13px;
  }

  .top-input-headers {
    gap: 16px;
  }

  .top-input-row {
    gap: 16px;
  }

  .circle-spacer {
    width: 42px;
  }

  .bottom-input-row {
    gap: 16px;
  }

  .name-row {
    margin-bottom: 24px;
  }

  .export-row {
    margin-bottom: 16px;
  }

  .export-row {
    gap: 8px;
  }

  .export-row {
    flex-wrap: wrap;
  }

  .name-label {
    font-size: 14px;
  }

  .name-label .cn {
    font-size: 11px;
  }

  /* On narrow screens both checkboxes drop to their own line below the name row, grouped
     together and right-aligned so they sit under the name box (not under the "Nama :" label). */
  .twin-check-group {
    flex-basis: 100%;
    gap: 20px;
    justify-content: flex-end;
  }

  .name-box {
    height: 40px;
    font-size: 16px;
  }

  .group-header .en {
    font-size: 13px;
  }

  .group-header .cn-row span {
    width: 36px;
    font-size: 16px;
  }

  .cell {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .circle {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .tri-box {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  #K {
    font-size: 20px;
  }

  .star {
    font-size: 36px;
  }

  .content-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .left-col {
    width: 100%;
  }

  .legend-col {
    row-gap: 10px;
    padding-top: 0;
    font-size: 12px;
  }

  .legend-input {
    font-size: 14px;
  }

  .legend-item.legend-sub .legend-label {
    margin-left: 16px;
  }

  .extra-section {
    font-size: 13px;
  }

  .extra-title {
    font-size: 16px;
  }

  .balance-card {
    min-width: 45%;
  }

  .balance-elem {
    font-size: 14px;
  }

  .balance-label {
    font-size: 11px;
  }

  .balance-count {
    font-size: 18px;
  }
}