* { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
    background: #F4F0E8;
    color: #2B241D;
    line-height: 1.7;
    padding-bottom: 60px;
  }
  .account-panel { margin: 16px 0; padding: 16px; border: 1px solid #c8b69a; border-radius: 12px; background: #fffdf8; }
  .account-panel__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
  .account-panel__bar p, .person-row p { color: #65513e; font-size: 0.875rem; }
  .account-panel__actions, .person-row__actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .account-panel .btn, #save-person, #save-person-copy, #save-second-person { min-height: 44px; }
  #account-message { margin-top: 8px; color: #56412e; }
  #account-message:empty { display: none; }
  #account-message[data-error="true"] { color: #8c2e22; }
  #people-panel { margin-top: 16px; border-top: 1px solid #dfd2be; padding-top: 12px; }
  #people-panel summary { cursor: pointer; min-height: 44px; font-weight: 700; }
  .people-search { max-width: 28rem; margin-bottom: 12px; }
  .people-search input { min-height: 44px; font: inherit; }
  .people-list { max-height: 24rem; overflow-y: auto; }
  .calculation-notes { margin: 12px 0; padding: 12px 16px; border: 1px solid #c8b69a; border-radius: 8px; background: #fffdf8; color: #56412e; }
  .calculation-notes summary { min-height: 44px; cursor: pointer; }
  .calculation-notes ul { padding-left: 24px; }
  .person-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid #e0d5c4; overflow-wrap: anywhere; }
  @media (max-width: 640px) { .person-row { align-items: flex-start; flex-direction: column; gap: 8px; } .account-panel__actions { width: 100%; } }
  header {
    background: linear-gradient(135deg, #2D231A 0%, #463525 100%);
    color: #FDF9F1;
    padding: 18px 28px;
    border-bottom: 3px solid #C89D54;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .brand-title { font-size: 21px; font-weight: 700; letter-spacing: 0.5px; }
  .brand-sub { font-size: 0.875rem; color: #D8C7B0; margin-top: 2px; }
  .badge-standalone {
    background: rgba(200, 157, 84, 0.22);
    border: 1px solid #C89D54;
    color: #F7E2B8;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
  }

  .control-bar {
    max-width: 1440px;
    margin: 18px auto 12px auto;
    background: #FFFDF8;
    border: 1.5px solid #D5C5AE;
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    box-shadow: 0 4px 14px rgba(43,36,29,0.05);
  }
  .field { display: flex; flex-direction: column; gap: 4px; }
  .field label { font-size: 0.875rem; font-weight: 700; color: #6B5844; }
  .field input, .field select {
    padding: 7px 10px;
    border: 1px solid #C5B49B;
    border-radius: 7px;
    font-size: 0.875rem;
    background: #FAF7F0;
    color: #2B241D;
    font-weight: 700;
  }
  .btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
  }
  .btn-primary { background: #8C3B2B; color: #FFF; }
  .btn-primary:hover { background: #722E20; }
  .btn-secondary { background: #EDE5D5; color: #4A3828; border: 1px solid #C8B69A; }
  .btn-secondary:hover { background: #E2D6C1; }

  .tabs-bar {
    max-width: 1440px;
    margin: 0 auto 18px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 4px;
  }
  .tab-btn {
    padding: 9px 16px;
    border-radius: 9px;
    border: 1.5px solid #D0C0A8;
    background: #FAF6ED;
    color: #544230;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
  }
  .tab-btn.active {
    background: #3A2A1D;
    color: #FFF9EE;
    border-color: #3A2A1D;
  }

  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 4px;
  }
  .panel {
    background: #FCF9F2;
    border: 2px solid #C8B69A;
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 24px;
    box-shadow: none;
    scroll-margin-top: calc(var(--atlas-tabs-offset, 68px) + var(--atlas-dual-height, 0px) + 16px);
  }
  .panel-hdr {
    border-bottom: 2px solid #DFD2BE;
    padding-bottom: 10px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .panel-title { font-size: 20px; font-weight: 700; color: #3A2A1D; }
  .panel-tag {
    background: #8C3B2B;
    color: #FFF;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
  }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: start; }
  @media (max-width: 1024px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
  }

  /* Ziwei 4x4 Grid */
  .zw-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, minmax(128px, auto));
    gap: 5px;
    background: #B8A386;
    padding: 6px;
    border-radius: 10px;
  }
  .zw-center {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    background: #FFFDF9;
    padding: 12px 14px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1.5px solid #D5C3A8;
  }
  .zw-c-title { font-size: 16px; font-weight: 700; color: #7C2D1E; margin-bottom: 3px; }
  .zw-c-sub { font-size: 0.875rem; color: #5A4B3C; }
  .zw-c-bazi {
    font-size: 0.875rem; font-weight: 700; color: #2C5270;
    background: #EEF4F8; padding: 3px 8px; border-radius: 4px; margin: 5px 0;
  }
  .zw-c-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px;
    font-size: 0.875rem; margin-top: 3px; border-top: 1px dashed #D8C8B0; padding-top: 5px;
  }
  .zw-c-sihua {
    font-size: 0.875rem; margin-top: 5px; background: #FDF4E7;
    padding: 4px 8px; border-radius: 4px; border: 1px solid #E8D0A8;
  }
  .hl-red { color: #B82E1F; font-weight: 700; }
  .hl-gold { color: #8A5A10; font-weight: 700; }
  .zw-cell {
    background: #FAF6EE; padding: 7px 8px; border-radius: 4px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .zw-ming { background: #FFF5E4; border: 2px solid #C87A28; }
  .zw-dec { background: #F0F6FA; border: 2px solid #3A6B8C; }
  .zw-yin { background: #FBF0EE; border: 1.5px dashed #B84A39; }
  .zw-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2px; }
  .zw-major { font-size: 0.875rem; font-weight: 700; color: #8C2518; margin-right: 3px; }
  .zw-empty { font-size: 0.875rem; color: #665646; font-style: normal; }
  .zw-badges { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
  .zw-badge-ming { background: #C87A28; color: #FFF; font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: 700; }
  .zw-badge-shen { background: #2E6F95; color: #FFF; font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: 700; }
  .zw-badge-dec  { background: #2B6E4E; color: #FFF; font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: 700; }
  .zw-badge-ganma{ background: #B82E1F; color: #FFF; font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: 700; }
  .zw-aux-wrap { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 3px 0; }
  .zw-aux { font-size: 0.875rem; color: #4A3F35; }
  .zw-tianwu { color: #B82E1F; font-weight: 700; background: #FDE8E4; padding: 0 3px; border-radius: 3px; }
  .zw-sihua-wrap { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 3px; }
  .zw-sihua-natal { background: #8C2518; color: #FFF; font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: 700; }
  .zw-sihua-self  { background: #3A6B8C; color: #FFF; font-size: 9px; padding: 1px 4px; border-radius: 3px; }
  .zw-bottom {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid #E2D6C3; padding-top: 3px; font-size: 0.875rem; font-weight: 700;
  }
  .zw-decade { color: #7A6A58; font-size: 9.5px; }
  .zw-pname { color: #2B241D; }
  .zw-sb { color: #6E5A44; }

  /* BaZi Card */
  .bz-card { background: #FFFDF9; border: 1.5px solid #D5C3A8; border-radius: 10px; padding: 16px; }
  .bz-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
  .bz-name { font-size: 17px; font-weight: 700; color: #7C2D1E; margin-right: 10px; }
  .bz-dm { background: #FDECE8; color: #9E2A1C; padding: 3px 10px; border-radius: 999px; font-size: 0.875rem; font-weight: 700; }
  .bz-solar { font-size: 0.875rem; color: #6A5A48; }
  .bz-table { width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 10px; }
  .bz-table th { background: #EFE6D5; color: #4A3828; padding: 7px; font-size: 0.875rem; border: 1px solid #D5C3A8; }
  .bz-table td { border: 1px solid #DFD2BE; padding: 8px; }
  .bz-tg { font-size: 0.875rem; font-weight: 700; color: #6E5842; background: #FAF5EC; }
  .bz-stem { font-size: 24px; font-weight: 700; color: #8C2518; }
  .bz-branch { font-size: 24px; font-weight: 700; color: #234E70; }
  .bz-hidden { font-size: 0.875rem; color: #4A3F35; background: #FCF9F2; line-height: 1.4; }
  .bz-nayin { font-size: 0.875rem; font-weight: 700; color: #2B6E4E; }
  .bz-dy-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.875rem; margin-top: 8px; }
  .bz-dy { background: #F2ECE1; padding: 3px 9px; border-radius: 5px; font-size: 0.875rem; font-weight: 700; }

  /* South Indian Vedic Grid */
  .si-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, minmax(95px, auto));
    gap: 4px;
    background: #A89274;
    padding: 5px;
    border-radius: 8px;
  }
  .si-center {
    grid-column: 2 / 4; grid-row: 2 / 4;
    background: #FFFDF9; padding: 12px; border-radius: 4px;
    font-size: 0.875rem; line-height: 1.55; color: #3A2E22;
    display: flex; flex-direction: column; justify-content: center;
  }
  .si-cell { background: #FAF6EE; padding: 6px; border-radius: 3px; display: flex; flex-direction: column; }
  .si-asc { background: #FFF4E0; border: 2px solid #C87A28; }
  .si-head { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 700; color: #7A6855; border-bottom: 1px dotted #D8C8B0; padding-bottom: 2px; margin-bottom: 4px; }
  .si-hnum { color: #2E6F95; font-weight: 700; }
  .si-body { display: flex; flex-direction: column; gap: 2px; }
  .si-p { font-size: 0.875rem; color: #2B241D; font-weight: 700; }
  .si-p-asc { font-size: 0.875rem; color: #B82E1F; font-weight: 700; }
  .si-p-ak { font-size: 0.875rem; color: #1E567C; font-weight: 700; background: #EAF2F8; padding: 0 3px; border-radius: 3px; }

  /* Tables */
  .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-top: 8px; }
  .data-table th { background: #EFE6D5; color: #4A3828; padding: 7px 9px; text-align: left; border: 1px solid #D5C3A8; }
  .data-table td { padding: 6px 9px; border: 1px solid #E2D5C1; background: #FFFDF9; }

  .hidden { display: none !important; }

html { text-autospace: normal; text-spacing-trim: normal; }
body { font-synthesis-weight:none; }
a { color: #75321f; text-underline-offset: 4px; }
header { background:#2d231a; }
.brand-title { font-size:clamp(1.25rem, 1.1rem + .6vw, 1.75rem); line-height:1.35; }
.brand-sub { max-width:55ic; font-size:.875rem; margin-top:8px; }
.site-nav { display:flex; gap:16px; align-items:center; }
.site-nav a { color:#f7e2b8; min-height:44px; display:inline-flex; align-items:center; }
.control-bar, .tabs-bar, .container, .status, .privacy-note, footer { width:calc(100% - 32px); max-width:1440px; margin-inline:auto; }
.control-bar { box-shadow:none; gap:16px; padding:20px; }
.field input, .field select, button { min-height:44px; font:inherit; }
.field input { max-width:100%; }
.field label { font-size:.875rem; }
.field--name input { width:160px; }
.field--date input { width:164px; }
.field--time input { width:120px; }
.field--coordinate input { width:132px; }
.control-actions { display:flex; gap:12px; flex-wrap:wrap; }
button:disabled { opacity:.6; cursor:wait; }
:focus-visible { outline:3px solid #215f88; outline-offset:3px; }
.status { padding:12px 16px; background:#e8eee8; border-left:4px solid #3d6750; margin-block:16px; min-height:48px; }
.status[data-error=true] { background:#fae9e6; border-color:#8c3b2b; }
.privacy-note, footer { color:#5b4d3e; font-size:.875rem; padding-block:12px; }
footer { border-top:1px solid #d5c5ae; margin-top:32px; }
.empty { padding:32px 0; max-width:38ic; }
.grid-2, .grid-3 { min-width:0; }
.grid-2 > *, .grid-3 > * { min-width:0; overflow-x:auto; }
.panel { overflow-x:auto; }
.panel-hdr { flex-wrap:wrap; gap:8px; }
.panel-title { font-size:1.2rem; }
.panel-tag { font-size:.875rem; color:#67523c; }
svg { max-width:100%; height:auto; }
.tabs-bar { flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; }
.tab-btn { flex-shrink:0; }
.zw-board { min-width:680px; }
.bz-table { min-width:480px; }
@media(max-width:768px) {
 header { padding:20px 16px; }
 .control-bar { padding:16px; gap:12px; }
 .field { flex:1 1 130px; }
 .field input, .field select { width:100%; }
 .grid-2, .grid-3 { grid-template-columns:minmax(0,1fr); }
 .panel { padding:16px; }
 .panel-title { font-size:1rem; }
 .control-actions { width:100%; }
 .control-actions button { flex:1; }
 .brand-title { max-width:18ic; }
}
@media(prefers-reduced-motion:reduce) { * { transition:opacity 100ms !important; } }

.panel-tag { background:#eae1d2; color:#5b4631; border-radius:4px; }
.zw-badge-ming,.zw-badge-shen,.zw-badge-dec,.zw-badge-ganma,.zw-sihua-natal,.zw-sihua-self,.zw-decade { font-size:.875rem; }
@media(max-width:768px) { .control-actions { flex:1 0 100%; } .control-actions button { min-width:140px; white-space:nowrap; } }

[hidden] { display:none !important; }
.atlas-main { padding-top:20px; }
.birth-entry { width:calc(100% - 32px); max-width:760px; margin:20px auto; background:#fffdf8; border:1px solid #d5c5ae; border-radius:12px; padding:24px; }
.birth-entry h2 { font-size:1.5rem; line-height:1.35; }
.birth-entry__intro { color:#67523c; margin-block:8px 24px; }
.birth-editor { display:grid; gap:20px; }
.birth-editor .field { min-width:0; }
.birth-editor .field input, .birth-editor .field select { width:100%; min-height:44px; font-weight:400; }
.birth-editor__calendar { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:end; }
.birth-editor__date { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px; }
.birth-editor__row { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }
.birth-editor__hint { color:#67523c; font-size:.875rem; max-width:50ic; }
.birth-editor__confirm { padding:12px 16px; border-left:3px solid #a27b45; background:#f5efe3; font-size:.875rem; }
.birth-editor__place { border-top:1px solid #dfd2be; padding-top:16px; }
.birth-editor__place summary { cursor:pointer; min-height:44px; display:list-item; align-content:center; color:#67523c; }
.birth-editor__place[open] .birth-editor__row { margin-top:12px; }
.birth-editor__actions, .chart-toolbar__actions { display:flex; flex-wrap:wrap; gap:12px; }
.leap-choice { grid-column:1 / -1; display:flex; align-items:center; gap:12px; min-height:44px; }
.leap-choice input { width:20px; height:20px; accent-color:#8c3b2b; }
.chart-toolbar, .reference-bar { width:calc(100% - 32px); max-width:1440px; margin:16px auto; display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.chart-toolbar { border:1px solid #d5c5ae; background:#fffdf8; border-radius:12px; padding:20px; }
.chart-toolbar__birth { min-width:0; flex:1 1 400px; }
.chart-toolbar h2 { font-size:1.2rem; overflow-wrap:anywhere; }
#birth-summary { color:#67523c; font-size:.875rem; overflow-wrap:anywhere; }
.reference-bar { justify-content:flex-start; gap:12px; }
.reference-bar input { min-height:44px; font:inherit; padding:8px; border:1px solid #c5b49b; border-radius:8px; color:#2b241d; background:#fffdf8; }
.birth-editor--second { max-width:760px; margin:0 0 24px; }
.status { max-width:1440px; }
@media(max-width:600px) {
 .birth-entry { padding:20px 16px; }
 .birth-editor__date { gap:8px; }
 .birth-editor__row, .birth-editor__calendar { gap:12px; }
 .birth-editor__actions .btn { flex:1 1 auto; }
 .chart-toolbar { padding:16px; }
 .chart-toolbar__actions { width:100%; gap:8px; }
 .chart-toolbar__actions .btn { flex:1 1 auto; font-size:.875rem; padding-inline:10px; }
 .reference-bar { align-items:center; }
 .reference-bar input { min-width:0; max-width:180px; }
}

#system-tabs { padding-block:8px; background:#f4f0e8; }
#system-tabs.system-tabs--sticky { position:sticky; top:0; z-index:5; }

.birth-year-picker select { font-size:1rem; width:100%; min-width:0; }
.syn-details { margin-block:24px; padding:16px; border:1px solid #c8b69a; border-radius:8px; min-width:0; }
.syn-details h3 { font-size:1.1rem; margin-bottom:8px; }
.syn-details h4 { margin-top:20px; }
.syn-details__note { color:#5b4631; font-size:.875rem; max-width:60ic; }
.syn-table-scroll { max-width:100%; overflow-x:auto; }
.syn-table-scroll table { min-width:520px; }
.syn-table-scroll th,.syn-table-scroll td { overflow-wrap:anywhere; }

.hd-intro { max-width:38ic; margin-bottom:20px; color:#5b4631; }
.hd-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; align-items:start; }
.hd-layout > *, .hd-compare > * { min-width:0; }
.hd-layout #view-hd-svg { width:100%; max-width:680px; margin-inline:auto; }
.hd-figure { margin:0 0 20px; }
.hd-figure__tools { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.hd-figure__svg { width:100%; }
.hd-svg { display:block; }
.hd-legend { display:flex; gap:12px; flex-wrap:wrap; margin-block:12px 8px; font-size:.875rem; }
.hd-legend span { display:inline-flex; align-items:center; gap:6px; }
.hd-key { display:inline-block; width:16px; height:16px; border:1px solid #7a6550; border-radius:4px; }
.hd-key--black { background:#231f20; }
.hd-key--red { background:#c8372d; }
.hd-key--a { background:#1f5a7a; }
.hd-key--both { background:repeating-linear-gradient(45deg,#231f20 0 4px,#c8372d 4px 8px); }
.hd-key--ab { background:repeating-linear-gradient(45deg,#1f5a7a 0 4px,#c8372d 4px 8px); }
.hd-note { color:#5b4631; font-size:.875rem; overflow-wrap:anywhere; }
.hd-centers { border-block:1px solid #dfd2be; margin-block:16px; padding-block:16px; }
.hd-centers h3, .hd-connections h3 { font-size:1.1rem; margin-bottom:8px; }
.hd-center-details { margin-top:12px; }
.hd-center-details summary, .hd-activation-details summary { min-height:44px; align-content:center; cursor:pointer; font-weight:700; }
.hd-center-list { list-style:none; display:grid; gap:12px; padding:0; margin-block:12px; }
.hd-center-list li { padding:12px 16px; border-left:3px solid #c8b69a; background:#fffdf8; overflow-wrap:anywhere; }
.hd-center-state { display:block; font-size:.875rem; color:#5b4631; }
.hd-source { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; }
.hd-activation-details { margin-top:16px; overflow-x:auto; }
.hd-compare { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:24px; }
.hd-connections { border:1px solid #c8b69a; border-radius:12px; padding:20px; margin-bottom:24px; }
.hd-connection-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:16px; }
.hd-zoom { width:min(1100px,calc(100vw - 24px)); height:calc(100dvh - 24px); max-width:none; max-height:none; margin:auto; padding:16px; border:1px solid #c8b69a; border-radius:12px; background:#fcf9f2; color:#2b241d; }
.hd-zoom[open] { display:flex; flex-direction:column; gap:12px; }
.hd-zoom::backdrop { background:rgb(36 28 20 / 70%); }
.hd-zoom__header { background:transparent; color:inherit; padding:0; border:0; gap:12px; }
.hd-zoom__header h2 { font-size:1.1rem; }
.hd-zoom__controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.hd-zoom__controls output { min-width:4ch; text-align:center; font-variant-numeric:tabular-nums; }
.hd-zoom__viewport { overflow:auto; min-height:0; flex:1; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; background:#f4f0e8; border-radius:8px; }
.hd-zoom__canvas { width:max-content; min-width:100%; }
.hd-zoom__canvas svg { max-width:none; margin-inline:auto; height:auto; }
@media(max-width:1024px) { .hd-layout,.hd-compare,.hd-connection-columns { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .hd-connections { padding:16px; } .hd-zoom { padding:12px; } .hd-zoom__controls .hd-note { flex-basis:100%; } }

.birth-editor__place .birth-editor__hint a { display:inline-flex; align-items:center; min-height:44px; }

#sec-synastry { overflow:visible; }
#view-synastry-content,.syn-birth-details { scroll-margin-top:calc(var(--atlas-tabs-offset,68px) + 12px); }
.syn-birth-details { margin-bottom:24px; }
.syn-birth-details > summary,.syn-extra > summary { min-height:44px; cursor:pointer; align-content:center; font-weight:700; }
.syn-birth-details[open] > form { margin-top:16px; }
.syn-workspace { min-width:0; }
.syn-workspace-header { background:#fffdf8; color:#2b241d; border:1px solid #c8b69a; padding:16px; border-radius:8px; }
.syn-workspace-header > div { min-width:0; flex:1 1 280px; }
.syn-workspace-header h3 { font-size:1.2rem; line-height:1.35; overflow-wrap:anywhere; }
.syn-workspace-header p { margin-top:8px; color:#5b4631; font-size:.875rem; }
.syn-tabs { display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; position:sticky; top:var(--atlas-tabs-offset,68px); z-index:4; padding-block:8px; background:#fcf9f2; scroll-margin-top:var(--atlas-tabs-offset,68px); }
.syn-tab { flex-shrink:0; min-height:44px; white-space:nowrap; color:#544230; background:#faf6ed; border:1px solid #c8b69a; }
.syn-tab.is-active { background:#3a2a1d; color:#fff9ee; border-color:#3a2a1d; }
.syn-system-panel { min-width:0; margin-top:16px; }
.syn-summary-list { display:grid; gap:16px; }
.syn-summary-card { display:grid; grid-template-columns:140px repeat(2,minmax(0,1fr)); gap:12px 20px; border:1px solid #d5c5ae; border-radius:8px; padding:16px; background:#fffdf8; }
.syn-summary-card > header { background:transparent; color:inherit; padding:0; border:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:12px; grid-row:1 / 3; }
.syn-summary-card h4 { font-size:1rem; }
.syn-person-facts { min-width:0; overflow-wrap:anywhere; }
.syn-person-facts h5 { font-size:.875rem; margin-bottom:8px; }
.syn-person-facts dl > div { margin-top:8px; }
.syn-person-facts dt { color:#5b4631; font-size:.875rem; }
.syn-person-facts dd { margin:0; font-size:1rem; }
.syn-summary-note { grid-column:2 / -1; color:#5b4631; font-size:.875rem; padding-top:8px; border-top:1px solid #dfd2be; overflow-wrap:anywhere; }
.syn-pair { margin-bottom:24px; }
.syn-extra { margin-top:16px; }
.syn-western { margin-bottom:24px; }
.syn-western figure { min-width:0; margin:0; }
.syn-western figcaption { font-weight:700; margin-bottom:12px; }
.syn-system-panel .hd-compare { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr); }
@media(max-width:1024px) { .syn-system-panel .hd-compare { grid-template-columns:minmax(0,1fr); } }
@media(max-width:700px) {
 .syn-summary-card { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:12px; }
 .syn-summary-card > header { grid-column:1 / -1; grid-row:auto; flex-direction:row; align-items:center; justify-content:space-between; }
 .syn-summary-note { grid-column:1 / -1; }
 .syn-person-facts dd { font-size:.875rem; }
 .syn-workspace-header { padding:12px; }
 .syn-workspace-header .btn { width:100%; }
}
.save-location { display:flex; flex-direction:column; gap:4px; font-size:.875rem; color:#5b4631; min-width:150px; }
.save-location select { min-height:44px; max-width:100%; font:inherit; padding:8px; border:1px solid #c5b49b; border-radius:8px; color:#2b241d; background:#fffdf8; }
.local-storage-note { color:#8c2e22; font-size:.875rem; margin-top:8px; }
.local-storage-note:empty { display:none; }
.people-sources { color:#5b4631; font-size:.875rem; margin-bottom:8px; }
.syn-people-picker { padding:16px; border:1px solid #c8b69a; border-radius:8px; background:#fffdf8; margin-bottom:20px; }
.syn-people-picker h3 { font-size:1.1rem; }
.syn-people-picker p { color:#5b4631; font-size:.875rem; margin-block:8px 12px; }
.syn-people-picker select { width:100%; min-height:44px; font:inherit; }
.syn-people-picker .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:700px) { .syn-people-picker .grid-2 { grid-template-columns:minmax(0,1fr); } .save-location { flex:1 1 150px; } }

/* Person metadata stays separate from birth calculations. */
.person-notes-editor textarea { width:100%; min-height:88px; resize:vertical; font:inherit; line-height:1.7; color:#2b241d; background:#fffdf8; border:1px solid #c5b49b; border-radius:8px; padding:10px; }
.person-notes { white-space:pre-wrap; overflow-wrap:anywhere; }
#recent-panel { margin-top:12px; }
#recent-panel > summary { min-height:44px; cursor:pointer; padding-block:10px; font-weight:700; }
.person-row > div { min-width:0; overflow-wrap:anywhere; }

/* The same interpretive lens leads single charts, comparison cards and detail panels. */
.system-perspective { margin-bottom:20px; padding:12px 16px; border-left:3px solid #92704a; border-radius:4px; background:#f5eee3; color:#3f3023; line-height:1.7; overflow-wrap:anywhere; }
.system-perspective p { max-inline-size:38ic; margin:0; font-size:1rem; }
.system-perspective p + p { margin-top:8px; }
.system-perspective__angle { color:#493421; }
.system-perspective__evidence { color:#5b4631; }
.syn-summary-card > header { grid-row:1 / 4; }
.syn-summary-card > .system-perspective { grid-column:2 / -1; margin:0; }
.syn-perspectives-intro { margin-block:0 16px; max-inline-size:38ic; color:#5b4631; }
.syn-tab { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:8px 12px; }
.syn-tab span { font-weight:700; }
.syn-tab small { font-size:.875rem; font-weight:400; line-height:1.7; color:inherit; }
@media(max-width:700px) {
 .system-perspective { padding:12px; }
 .syn-summary-card > header { grid-row:auto; }
 .syn-summary-card > .system-perspective { grid-column:1 / -1; }
}

.reading-guide { margin-block:16px 24px; border:1px solid #c8b69a; border-radius:8px; background:#fffdf8; color:#3f3023; }
.reading-guide > summary { cursor:pointer; padding:12px 16px; min-height:44px; font-weight:700; line-height:1.7; }
.reading-guide > summary small { display:block; margin-top:4px; font-size:.875rem; font-weight:400; color:#5b4631; overflow-wrap:anywhere; }
.reading-guide__body { padding:0 16px 16px; }
.reading-guide__body h3 { font-size:1.1rem; margin-block:16px 8px; }
.reading-guide__body p,.reading-guide__body li { line-height:1.7; max-inline-size:38ic; overflow-wrap:anywhere; }
.reading-guide__steps { padding-left:24px; }
.reading-guide__steps li + li { margin-top:8px; }
.reading-guide__focus { padding:12px; border-left:3px solid #92704a; background:#f5eee3; }
.reading-guide__sources { display:grid; gap:12px; margin-top:12px; }
.reading-source { border-top:1px solid #dfd2be; padding-top:12px; }
.reading-source h4 { font-size:1rem; }
.reading-source p { margin-top:8px; }
.reading-source a { display:inline-flex; align-items:center; min-height:44px; color:#61411d; text-decoration:underline; }
.reading-source__verification { margin-top:8px; font-size:.875rem; color:#5b4631; }
.reading-source__verification > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.reading-source__verification code { display:block; overflow-wrap:anywhere; white-space:normal; font-size:.875rem; }
.reading-guide__boundary { padding-top:12px; margin-top:16px; border-top:1px solid #dfd2be; color:#5b4631; font-size:.875rem; }
.reading-guide__source-error { color:#8c2e22; }
@media(max-width:700px) { .reading-guide > summary { padding:12px; } .reading-guide__body { padding:0 12px 12px; } }

.dual-control { position:sticky; top:var(--atlas-tabs-offset,68px); z-index:5; background:#fcf9f2; border:1px solid #c8b69a; border-radius:8px; margin-block:12px 20px; }
.dual-control__bar { display:flex; gap:8px; align-items:flex-start; padding:8px; }
#dual-picker { flex:1; min-width:0; }
#dual-picker > summary { cursor:pointer; min-height:44px; padding:8px; line-height:1.7; font-weight:700; overflow-wrap:anywhere; }
.dual-control .syn-people-picker { margin:8px 0; }
#syn-birth-details { margin-bottom:24px; }
.panel.has-inpage-dual > .single-chart-content,.panel.has-inpage-dual > .reading-guide[data-guide-mode="single"] { display:none; }
.inpage-dual { margin-top:16px; }
.inpage-dual__bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.inpage-dual__bar h3 { font-size:1.1rem; overflow-wrap:anywhere; }
.inpage-dual__modes { display:flex; flex-wrap:wrap; gap:8px; }
.inpage-dual__modes [aria-pressed="true"] { background:#3a2a1d; color:#fff9ee; }
.inpage-dual [data-syn-panel] > .system-perspective { display:none; }
.inpage-dual[data-view="compare"] [data-dual-part="integrated"],.inpage-dual[data-view="integrated"] [data-dual-part="compare"] { display:none; }
.inpage-dual [data-syn-panel] { margin:0; }
.syn-tabs { top:calc(var(--atlas-tabs-offset,68px) + var(--atlas-dual-height,0px) + 8px); }
.dual-composite-chart { max-width:760px; margin:0 auto 24px; }
.relationship-details { margin-block:20px; }
.relationship-details h4 { margin-block:16px 8px; }
.relationship-details p { line-height:1.7; max-inline-size:38ic; }
@media(max-width:700px) { .dual-control__bar { flex-wrap:wrap; } .inpage-dual__bar { align-items:flex-start; } }

.inpage-dual,.reading-guide,.syn-birth-details { scroll-margin-top:calc(var(--atlas-tabs-offset,68px) + var(--atlas-dual-height,0px) + 16px); }

/* Keep the close control and both people visible on narrow screens. */
.dual-control__bar { flex-wrap:wrap; }
#dual-picker { flex:1 1 200px; min-width:0; }
#close-inpage-dual { flex:0 0 auto; max-width:100%; }
.inpage-dual,.syn-system-panel,.relationship-details { min-width:0; max-width:100%; }
.syn-table-hint { color:#5b4631; font-size:.875rem; margin-block:4px 8px; }
.syn-table-scroll[data-columns="3"] .syn-table-hint { display:none; }
.relationship-details table[data-columns="3"] { min-width:0; width:100%; table-layout:fixed; }
.relationship-details table[data-columns="3"] th,.relationship-details table[data-columns="3"] td { white-space:normal; overflow-wrap:anywhere; word-break:normal; }
.w-svg { display:block; width:100%; height:auto; max-width:100%; }

/* Source hints live inside the section they explain, including closed D9 details. */
.context-classic-note { margin-block:16px; padding:12px 16px; border-left:3px solid #92704a; background:#f5eee3; color:#3f3023; min-width:0; max-width:100%; overflow-wrap:anywhere; }
.context-classic-note h4 { margin:0 0 8px; font-size:1rem; line-height:1.7; }
.context-classic-note p,.context-classic-note li { font-size:.875rem; line-height:1.7; max-inline-size:38ic; white-space:normal; }
.context-classic-note ul { padding-left:20px; margin-block:8px 0; }
.context-classic-note li + li { margin-top:8px; }
.reading-guide__sources { grid-template-columns:repeat(2,minmax(0,1fr)); }
.reading-source,.reading-guide__body { min-width:0; }
[data-single-d9] > summary { cursor:pointer; min-height:44px; padding:12px; font-weight:700; line-height:1.7; }
@media(max-width:700px) { .reading-guide__sources { grid-template-columns:minmax(0,1fr); } .context-classic-note { padding:12px; } }

/* An expanded picker scrolls normally so it cannot cover the chart on phones. */
.dual-control:has(#dual-picker[open]) { position:relative; top:auto; }

/* Keep the reading path visible; open the bibliography only when requested. */
.reading-guide__sources-drawer { margin-top:16px; border-top:1px solid #dfd2be; padding-top:8px; }
.reading-guide__sources-drawer > summary { cursor:pointer; min-height:44px; font-weight:700; line-height:1.7; display:flex; align-items:center; gap:8px; }
.reading-guide__sources-drawer > summary::before { content:"▸"; }
.reading-guide__sources-drawer[open] > summary::before { content:"▾"; }
#edit-inpage-person { flex:0 0 auto; max-width:100%; }

/* Numeric comparisons, action feedback and catalogue navigation. */
.data-table td, .bz-table td, .zw-decade, .zw-c-bazi, .zw-c-grid,
#birth-summary, .syn-person-facts dd { font-variant-numeric:tabular-nums; }
.inline-save-note { width:100%; margin:0; color:#315b3a; overflow-wrap:anywhere; }
.inline-save-note[data-error="true"] { color:#8c2e22; }
.people-toolbar, .people-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.people-toolbar { margin-block:12px; }
.people-toolbar .people-search { flex:1 1 200px; min-width:0; margin:0; }
.people-filter-btn.is-active { background:#e9decc; border-color:#796044; color:#3b2c1c; }
.all-quick-jump { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; padding:10px 14px; background:#fffdf8; border:1px solid #d5c5ae; border-radius:10px; }
.all-quick-jump .btn { min-height:44px; }