/* The chart page's styles — one file for the website (index.html) and the phone app (app.html).
   Sections marked "site only" are the website's page furniture (side panel, strip, My charts);
   the app loads them unused and overrides the page layout in its own <style>. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background: #f5f5f5; padding: 20px; }
.container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 30px; }
/* The site's one footer: privacy and who makes it (index.html). */
.site-foot { max-width: 1200px; margin: 16px auto 24px; text-align: center; font-size: 13px; color: #888; }
.site-foot a { color: inherit; }
h1 { text-align: center; margin-bottom: 30px; color: #333; }

.input-section { background: #f9f9f9; padding: 20px; border-radius: 6px; margin-bottom: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 22px; }
.input-form { min-width: 0; }
/* Two layouts only, switching at one width (768px, shared with the phone styles below):
   desktop has My charts beside the form at a fixed width; phone stacks it above. */
@media (min-width: 769px) {
    .input-section:has(> #myCharts[open]:not(.hidden)) { grid-template-columns: 260px minmax(0, 1fr); }
    .input-section:has(> #myCharts[open]:not(.hidden)) .form-group { min-width: 150px; }
    /* Beside the form the list fills the column: as tall as the form plus its note gets,
       never shorter than 420px. The list is positioned under the 44px summary, so its own
       content never sets the row height (35 charts do not stretch the form). Not flex:
       <details> wraps its content in an internal block, so children are not flex items. */
    .input-section > #myCharts[open] { position: relative; min-height: 420px; }
    .input-section > #myCharts[open] > summary { box-sizing: border-box; height: 44px; line-height: 24px; }
    .input-section > #myCharts[open] .mc-list { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; max-height: none; }
}
.display-bar { margin-bottom: 20px; }
.form-row { display: flex; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; }
.form-group { flex: 1; min-width: 200px; }
label { display: block; margin-bottom: 5px; font-weight: 500; color: #555; }
input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
small { display: block; margin-top: 3px; font-size: 11px; color: #888; }
/* Birth date (年 月 日) and time (時 分): dropdowns side by side, the year and hour wider. */
.pick-row { display: flex; gap: 4px; }
/* No arrow: at half a phone's width it would eat the digits. Text centred, so it reads as a value to tap. */
.pick-row select { flex: 1 1 0; min-width: 0; padding-left: 2px; padding-right: 2px; -webkit-appearance: none; appearance: none; text-align: center; text-align-last: center; }
#birthY { flex-grow: 1.2; } #birthH { flex-grow: 1.8; }
button { background: #4CAF50; color: white; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 10px; }
button:hover { background: #45a049; }
.display-options { background: white; border: 1px solid #ddd; border-radius: 4px; }
.display-options summary { padding: 10px 14px; cursor: pointer; font-weight: 500; color: #555; font-size: 14px; list-style: none; }
.display-options summary::-webkit-details-marker { display: none; }
.display-options summary::before { content: '▸ '; }
.display-options[open] summary::before { content: '▾ '; }
.display-options-grid { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 4px 14px 14px; }
.display-options-grid label { display: flex; align-items: center; gap: 5px; font-weight: normal; font-size: 13px; color: #444; cursor: pointer; margin-bottom: 0; }
/* A toggle switch: a styled checkbox, so the change handlers stay as they were. */
input.switch { -webkit-appearance: none; appearance: none; flex: 0 0 auto; position: relative; width: 34px; height: 20px; min-height: 0;
               padding: 0; margin: 0; border: none; border-radius: 10px; background: #c5cbc5; cursor: pointer; transition: background .15s; }
input.switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
                       background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
input.switch:checked { background: #4CAF50; }
input.switch:checked::before { transform: translateX(14px); }
input.switch:focus-visible { outline: 2px solid #2196F3; outline-offset: 2px; }
.display-options-presets { display: flex; gap: 8px; padding: 0 14px 10px; }
.display-options-presets button { margin-top: 0; padding: 6px 16px; font-size: 13px; background: #607D8B; }
.display-options-presets button:hover { background: #546E7A; }

.gender-options { display: flex; gap: 8px; }
.gender-option { flex: 1; }
.gender-option input { display: none; }
.gender-option span { display: block; text-align: center; padding: 8px 0; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; cursor: pointer; background: #f5f5f5; }
.gender-option input:checked + span { background: #c4e0c4; border-color: #4CAF50; }

.utc-group label { display: inline-block; margin-right: 6px; }
.utc-inline { display: inline-block; }
.utc-inline input { width: 70px; padding: 6px 8px; font-size: 14px; }

.chart-section { margin-top: 0; }
.info-bar { background: #e8e8e8; padding: 10px; border-radius: 4px; margin-bottom: 20px; text-align: center; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.chart-viewing-bar { background: #333; color: white; padding: 10px 14px; border-radius: 4px 4px 0 0; font-size: 15px; font-weight: bold; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.select-current-btn { padding: 5px 12px; font-size: 13px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; flex: 0 0 auto; }
.select-current-btn:hover { background: #1976D2; }

.step-btn { background: rgba(255,255,255,0.15); color: inherit; border: 1px solid rgba(255,255,255,0.4); border-radius: 3px; cursor: pointer; padding: 1px 5px; font-size: 11px; line-height: 1.4; vertical-align: middle; margin: 0 3px; }
.step-btn:hover { background: rgba(255,255,255,0.3); }
.pillars-table th .step-btn.sm { padding: 0 3px; font-size: 9px; margin: 0 1px; }
.step-btn:disabled { opacity: 0.3; cursor: default; }
/* The year / month on screen, under 流年 / 流月 — so ◀ ▶ can be stepped while reading it. */
.pillars-table.no-head-dates .th-sel { display: none !important; }
#chartOrder { width: auto; padding: 3px 6px; font-size: 13px; margin: 0; }
.th-sel { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; color: #fff59d; }

.pillars-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; }
.pillars-table th { background: #666; color: white; padding: 12px; text-align: center; font-weight: normal; font-size: 14px; }
.pillars-table td { padding: 16px 6px; text-align: center; border: 1px solid #ddd; font-size: 32px; font-weight: bold; position: relative; }
.pillars-table th, .pillars-table td { width: calc(100% / 7); }
.pillars-table th.row-label-col, .pillars-table td.row-label { width: 40px; }
.pillars-table td.row-label {
    font-size: 12px; font-weight: normal; color: #888; background: #fafafa;
    padding: 4px 2px; white-space: nowrap; vertical-align: middle;
}
.pillars-table tr.sub-row td, .pillars-table tr.spirits-row td { font-size: 18px; font-weight: normal; }
.pillars-table tr.extra-info-row td { font-size: 14px; padding: 6px; }
.pillars-table tr.sub-row td.row-label,
.pillars-table tr.spirits-row td.row-label,
.pillars-table tr.extra-info-row td.row-label { font-size: 12px; }
#infoSpirits { white-space: pre-line; text-align: left; }
#interactionsNatalCell { text-align: left; }
#interactionsLuckRow td:last-child { text-align: left; }
.luck-line { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.luck-line-label { font-size: 11px; color: #999; flex-shrink: 0; width: 32px; }
.luck-line-tags { flex: 1; }
#pillarsTable.luck-simplified #luckLiunianLine,
#pillarsTable.luck-simplified #luckLiuyueLine { display: none; }
.interaction-tag { background-color: #fff3e0; }
.ten-god { position: absolute; top: 2px; right: 4px; font-size: 11px; color: #666; font-weight: normal; }
.chart-container { margin: 0 4px; }
.pillars-wrapper { overflow-x: auto; }
.spirit-tag { cursor: pointer; margin: 0 2px; padding: 1px 4px; border-radius: 3px; background-color: #f5f5f5; display: inline-block; }
.spirit-tag:hover { filter: brightness(0.92); }
/* Tier colouring: darker green = higher-consensus/core star, lighter = lower-consensus. */
.spirit-tag.tier-1 { background-color: #2e7d32; color: #fff; }
.spirit-tag.tier-2 { background-color: #81c784; color: #1b3d1e; }
.spirit-tag.tier-3 { background-color: #dcedc8; color: #33691e; }

.details-section { background: #fafafa; padding: 15px; border-radius: 6px; margin-bottom: 20px; }
.details-header { font-weight: bold; margin-bottom: 10px; color: #555; font-size: 14px; }
.details-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.detail-item { background: white; padding: 12px; border-radius: 4px; border: 1px solid #ddd; }
.detail-label { font-size: 12px; color: #666; margin-bottom: 5px; }
.detail-content { font-size: 14px; font-weight: 500; color: #333; }

.spirits-section { background: #fafafa; padding: 20px; border-radius: 6px; margin-bottom: 20px; }
.spirits-header { font-weight: bold; margin-bottom: 15px; color: #555; font-size: 15px; border-bottom: 2px solid #ddd; padding-bottom: 8px; }
.spirits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.spirit-category { background: white; padding: 12px; border-radius: 4px; border-left: 4px solid #4CAF50; }
.spirit-category-title { font-weight: bold; color: #4CAF50; margin-bottom: 8px; font-size: 13px; }
.spirit-list { font-size: 14px; color: #555; line-height: 1.8; }
.spirit-tag { background: #e8f5e9; padding: 2px 8px; border-radius: 3px; margin: 2px; display: inline-block; }

.grid-section { background: #f9f9f9; padding: 15px; border-radius: 6px; margin-bottom: 20px; }
.grid-header { background: #666; color: white; padding: 8px; text-align: center; border-radius: 4px 4px 0 0; font-weight: bold; font-size: 14px; }
.grid-container { display: grid; gap: 5px; background: white; padding: 10px; }
.grid-label { font-weight: bold; padding: 10px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 13px; }

.grid-cell { padding: 8px 4px; text-align: center; border: 2px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; justify-content: center; min-height: 70px; position: relative; }
.grid-cell:hover { background: #f0f0f0; }
.grid-cell.active { border-color: #4CAF50; background: #e8f5e9; box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); }
.cell-label { font-size: 10px; color: #666; margin-bottom: 3px; }
.cell-pillar { font-size: 18px; font-weight: bold; line-height: 1.3; }
.cell-ten-god-stem   { position: absolute; top: 1px; right: 2px; font-size: 10px; color: #888; }
.cell-ten-god-branch { position: absolute; bottom: 1px; right: 2px; font-size: 10px; color: #888; }

.dayun-grid { grid-template-columns: auto repeat(10, 1fr); }
.liunian-grid { grid-template-columns: auto repeat(10, 1fr); }
.liuyue-grid { grid-template-columns: auto repeat(12, 1fr); }

.copy-section { margin-top: 20px; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 14px; }
.copy-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.copy-head h3 { margin: 0; font-size: 15px; color: #333; }
.copy-btn { padding: 6px 14px; font-size: 13px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
.copy-btn:hover { background: #43a047; }
.copy-note { font-size: 12px; color: #777; margin-bottom: 6px; }
.copy-opt { font-size: 12.5px; color: #555; margin-left: auto; display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
#copyLlmText { flex: 1; min-height: 240px; width: 100%; box-sizing: border-box; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; line-height: 1.5; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: white; color: #222; resize: none; white-space: pre-wrap; }
/* 流年喜忌條 — the year strip (accounts.life_strip) */
.strip-note { font-size: 12px; color: #777; margin: 4px 0 8px; }
.strip-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: #555; margin-bottom: 8px; align-items: center; }
.strip-legend i { display: inline-block; width: 14px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-right: 3px; }
.strip-row { display: grid; grid-template-columns: 70px repeat(10, minmax(0, 1fr)); gap: 2px; margin-bottom: 2px; }
.strip-label { font-size: 11px; color: #555; line-height: 1.2; align-self: center; }
.strip-label b { font-size: 13px; color: #333; }
.yc { position: relative; border: 0; margin: 0; padding: 3px 0 2px; border-radius: 3px; font-size: 10.5px; line-height: 1.25; text-align: center; cursor: pointer; color: #222; min-width: 0; }
.yc .yy { font-size: 9.5px; opacity: .75; display: block; }
.yc.now { box-shadow: inset 0 0 0 2px #333; }
.yc.sel { box-shadow: inset 0 0 0 2px #1565c0; }
.yc.off { outline: 2px dashed #ef6c00; outline-offset: -2px; }
.yc .ev { position: absolute; top: 0; right: 2px; font-size: 9px; }
.yc .mk { position: absolute; bottom: 0; left: 2px; font-size: 10px; font-weight: bold; }
.strip-detail { margin-top: 10px; font-size: 13px; line-height: 1.6; border-top: 1px solid #eee; padding-top: 8px; }
.strip-detail ul { margin: 4px 0; padding-left: 18px; }
.strip-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.strip-marks button { margin: 0; padding: 4px 10px; font-size: 12px; background: #90a4ae; }
.strip-marks button.on { background: #37474f; }
.strip-reading { margin: 6px 0; padding: 6px 10px; background: #fafafa; border-radius: 4px; font-size: 12.5px; }
.strip-reading ul { margin: 2px 0; padding-left: 16px; }
.sa-title { font-size: 12px; color: #6d4c41; font-weight: bold; }
.strip-areas { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.strip-areas th { text-align: left; font-weight: normal; color: #888; font-size: 11.5px; padding: 2px 4px; }
.strip-areas td { vertical-align: top; padding: 5px 4px; border-top: 1px solid #eee; }
.strip-areas tr.strip-opp td { background: #fff3e0; }
.sa-name { white-space: nowrap; font-weight: bold; color: #444; }
.sa-why { font-size: 11.5px; color: #666; line-height: 1.45; }
.sa-marks { white-space: nowrap; }
.sa-marks button { margin: 0 2px 2px 0; padding: 3px 8px; font-size: 12px; background: #b0bec5; color: #222; }
.sa-marks button.on { background: #37474f; color: #fff; }
.strip-note-box { width: 100%; box-sizing: border-box; margin-top: 8px; font-size: 13px; padding: 6px; border: 1px solid #ddd; border-radius: 4px; }
@media (max-width: 600px) { .strip-areas td.sa-marks { white-space: normal; } }
.strip-agree { margin-top: 10px; font-size: 13px; background: #fafafa; border-radius: 4px; padding: 8px 10px; }
.strip-agree button { margin: 2px 4px 2px 0; padding: 2px 8px; font-size: 12px; background: #ef6c00; }
@media (max-width: 600px) { .strip-row { grid-template-columns: 48px repeat(10, minmax(0, 1fr)); gap: 1px; } .yc { font-size: 9px; } .yc .yy { font-size: 8px; } .strip-label { font-size: 9.5px; } .strip-label b { font-size: 11px; } }
.rule-free { font-size: 11px; font-weight: normal; color: #2e7d32; background: #e8f5e9; border-radius: 8px; padding: 1px 7px; margin-left: 6px; }
.rule-reading { font-size: 13.5px; line-height: 1.65; color: #333; }
.rule-reading h1 { display: none; }
.rule-reading h2 { font-size: 14px; margin: 14px 0 4px; color: #6d4c41; }
.rule-reading ul { padding-left: 18px; margin: 0; }
.rule-reading .rr-locked { position: relative; max-height: 4.2em; overflow: hidden; }
.rule-reading .rr-locked::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em;
    background: linear-gradient(rgba(255,255,255,0), #fff); }
.rule-reading .rr-unlock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; font-size: 12.5px; color: #6d4c41; }
.rule-reading .rr-unlock button { padding: 3px 10px; font-size: 12.5px; width: auto; }
.rule-reading .rr-all { margin: 8px 0 4px; padding: 8px 10px; border: 1px dashed #d7ccc8; border-radius: 6px; font-size: 13px; }
.rule-reading .rr-all button { padding: 4px 12px; width: auto; margin-left: 6px; }
.rule-reading blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid #ffb74d; background: #fff8e1; }
.pattern-badge { font-size: 13px; font-weight: bold; padding: 3px 10px; border-radius: 12px; color: white; background: #6d4c41; cursor: help; }
.strength-summary-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 10px; }
.strength-verdict-badge { font-size: 13px; font-weight: bold; padding: 3px 10px; border-radius: 12px; color: white; display: inline-block; }
.strength-verdict-badge.strong { background: #F44336; }
.strength-verdict-badge.weak { background: #2196F3; }
.strength-verdict-badge.balanced { background: #9E9E9E; }
.strength-verdict-badge:empty { display: none; }
.strength-elements-info { font-size: 13px; color: #555; }
.strength-elements-info .favorable, .strength-elements-info .unfavorable { font-weight: bold; }
/* 喜 and 忌 outside; a green box holds the 喜 elements, a red box the 忌 ones (the elements keep their own colours, no border each). */
.strength-elements-info { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.xj { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.xj > b.xi { color: #2e7d32; } .xj > b.ji { color: #c62828; }
.xj > .box { padding: 2px 9px; border-radius: 6px; border: 1px solid; }
.xj > .box.xi { border-color: #4CAF50; background: #f1f8f1; }
.xj > .box.ji { border-color: #e53935; background: #fdf2f2; }

/* Strength scoring rendered directly in the pillars chart, toggled via
   the 日主身強弱 checkbox in #displayOptions (adds/removes .show-strength on the table). */
.pillars-table td.dm-helps { background-color: transparent; transition: background-color 0.2s; }
.pillars-table.show-strength td.dm-helps { background-color: #e8f5e9; }

.wood { color: #4CAF50; }
.fire { color: #F44336; }
.earth { color: #FF9800; }
.metal { color: #9E9E9E; }
.water { color: #2196F3; }

.hidden { display: none !important; }   /* beats later display rules, e.g. .cp-composer */

@media (max-width: 768px) {
    .input-section { padding: 12px; margin-bottom: 16px; }
    .form-row { gap: 10px; margin-bottom: 10px; }
    .form-group { min-width: 140px; }
    label { font-size: 13px; margin-bottom: 3px; }
    input, select { padding: 8px; font-size: 13px; }
    small { font-size: 10px; }

    .input-form > button { width: 100%; padding: 10px 0; font-size: 14px; }
    .display-options-grid { gap: 8px 12px; }

    .pillars-table th { padding: 8px 2px; font-size: 12px; }
    .pillars-table td { padding: 10px 2px; font-size: 22px; }
    .ten-god { font-size: 9px; right: 2px; }
    .chart-container { margin: 0 4px; }
    .pillars-wrapper { overflow-x: auto; }

    .grid-section { padding: 10px; }
    .grid-header { font-size: 13px; padding: 6px; }
    .grid-container { padding: 6px; gap: 4px; }
    .grid-label { font-size: 12px; padding: 6px; }

    .grid-cell { min-height: 56px; padding: 6px 2px; }
    .cell-label { font-size: 9px; margin-bottom: 2px; }
    .cell-pillar { font-size: 14px; }

    .cell-ten-god-stem,
    .cell-ten-god-branch { font-size: 7px; }

    .dayun-grid,
    .liunian-grid,
    .liuyue-grid { overflow-x: auto; grid-auto-flow: column; }
}

@media (max-width: 768px) {
    .form-row { flex-direction: column; gap: 6px; }
    .form-group { min-width: 100%; }
    .input-section { padding: 10px; }
    label { font-size: 12px; }
    input, select { font-size: 12px; padding: 6px 8px; }
    small { font-size: 9px; }
    .gender-options { gap: 6px; } .gender-option span { font-size: 13px; padding: 6px 0; } 
    .utc-inline input { width: 60px; padding: 4px 6px; font-size: 13px; }

    .pillars-table th { font-size: 11px; }
    .pillars-table td { font-size: 18px; padding: 8px 1px; }
    .pillars-table tr.sub-row td, .pillars-table tr.spirits-row td { font-size: 0.7rem; }
    .pillars-table tr.sub-row td.row-label,
    .pillars-table tr.spirits-row td.row-label,
    .pillars-table tr.extra-info-row td.row-label { font-size: 0.65rem; }
    .spirit-tag { font-size: 12px; padding: 1px 3px; margin: 1px 1px; }

    .grid-section { padding: 8px; }
    .grid-header { font-size: 12px; }
    .grid-label { font-size: 11px; padding: 4px; }

    .grid-cell { min-height: 48px; padding: 4px 1px; }
    .cell-label { font-size: 8px; }
    .cell-pillar { font-size: 12px; }

    .cell-ten-god-stem,
    .cell-ten-god-branch { font-size: 6px; }

    .dayun-grid,
    .liunian-grid,
    .liuyue-grid { gap: 3px; }
}


.tst-toggle { display: flex !important; align-items: center; gap: 6px; font-weight: normal !important; font-size: 13px; margin-top: 6px; }
.tst-toggle input { width: auto; }

/* Phone: an app, not a shrunken desktop page. No page gutters doubled up by the
   container; each block is its own card; the form packs two fields a row; the
   chart gets the whole width; the 大運/流年/流月 pickers become swipeable strips. */
@media (max-width: 768px) {
    body { padding: 0; background: #eef1ee; -webkit-tap-highlight-color: transparent; }
    .container { padding: 0 8px 16px; background: none; box-shadow: none; border-radius: 0; }
    h1 { display: none; }   /* the sticky nav already says 八字排盤 */
    #siteNav { margin-bottom: 8px !important; }   /* nav.js sets 20px inline */
    .acct-bar { margin: 0; font-size: 13px; }
    .acct-bar input { width: 100%; }
    .input-section { display: block; padding: 12px; margin-bottom: 8px; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
    .input-section > .my-charts { margin: 0 0 10px; border-radius: 10px; }
    .mc-list { max-height: 300px; }
    .mc-chart { padding: 8px 12px; }
    .input-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
    .input-form .form-row { display: contents; }
    .input-form .form-group { min-width: 0; }
    .fg-date { order: 1; } .fg-time { order: 2; } .gender-group { order: 3; } .fg-tst { order: 4; }
    .fg-country { order: 5; } #cityGroup { order: 6; }
    .fg-country:has(+ #cityGroup.hidden) { grid-column: 1 / -1; }   /* one-city country */
    #customGroup { order: 7; grid-column: 1 / -1; }
    .input-form > button { order: 8; }
    .input-form > .acct-bar { order: 9; }
    .input-form > button, .input-form > .acct-bar { grid-column: 1 / -1; }
    label { font-size: 12px; color: #666; margin-bottom: 3px; }
    /* 16px: iOS zooms the page into any smaller input on focus */
    input, select { font-size: 16px; padding: 7px 8px; border-radius: 8px; background: #fff; min-height: 40px; }
    .fg-date small, .fg-tst small, .tst-spacer { display: none; }
    .fg-time small { font-size: 10px; line-height: 1.3; }
    .gender-option span { padding: 0; line-height: 38px; border-radius: 8px; font-size: 14px; }
    .fg-tst { align-self: end; }
    .tst-toggle { margin: 0; min-height: 40px; padding: 0 8px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; color: #444; }
    .input-form > button { margin: 2px 0 0; padding: 0; height: 46px; border-radius: 10px; font-size: 16px; font-weight: 600; }
    .display-bar { margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
    .display-options { margin: 0; border-radius: 12px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
    .display-options summary { padding: 10px 12px; font-size: 13px; }
    .display-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 4px 12px 12px; }
    .strength-summary-line { margin: 0 4px; gap: 6px 10px; }
    .strength-summary-line:has(.strength-verdict-badge:empty) { display: none; }

    .chart-section { margin: 0; }
    .grid-section { padding: 8px 0; margin-bottom: 8px; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; }
    .info-bar { margin: 0 8px 6px; padding: 8px; border-radius: 8px; font-size: 13px; gap: 4px; background: #f3f5f3; }
    .solar-time { font-size: 11px; color: #777; }
    .grid-container { padding: 3px 8px; gap: 4px; }
    .dayun-grid, .liunian-grid, .liuyue-grid {
        grid-template-columns: 26px; grid-auto-columns: 50px; grid-auto-flow: column;
        overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .grid-container::-webkit-scrollbar { display: none; }
    .grid-label { position: sticky; left: -8px; z-index: 1; padding: 0; font-size: 12px; background: #fff;
                  writing-mode: vertical-rl; letter-spacing: 2px; color: #555; box-shadow: 4px 0 0 #fff, 10px 0 6px -4px rgba(255,255,255,.9); }
    .grid-cell { min-height: 62px; padding: 3px 1px; border-width: 1.5px; border-radius: 8px; scroll-snap-align: center; }
    .grid-cell.active { box-shadow: none; }
    .cell-label { font-size: 9px; }
    .cell-pillar { font-size: 16px; line-height: 1.2; }
    /* ten gods stand upright in the gutter right of each character, clear of the age label */
    .cell-ten-god-stem, .cell-ten-god-branch { font-size: 8px; writing-mode: vertical-rl; line-height: 1; right: 1px; }
    .cell-ten-god-stem { top: 16px; }
    .cell-ten-god-branch { bottom: 4px; }

    .chart-viewing-bar { margin: 0 -8px; padding: 8px 10px; border-radius: 0; font-size: 13px; gap: 8px; flex-wrap: nowrap; }
    .select-current-btn { margin: 0; padding: 6px 10px; font-size: 12px; border-radius: 14px; white-space: nowrap; }
    .pillars-table { width: calc(100% + 16px); margin: 0 -8px 8px; background: #fff; }
    .pillars-table th.row-label-col, .pillars-table td.row-label { width: 24px; }
    .pillars-table td.row-label { padding: 2px 0; font-size: 10px !important; white-space: normal; line-height: 1.15; word-break: break-all; }
    .pillars-table th { padding: 6px 0; font-size: 12px; line-height: 1.5; }
    .pillars-table .en { display: none; }
    .pillars-table thead th { white-space: nowrap; letter-spacing: -.5px; }
    .step-btn { margin: 0; padding: 0 1px; font-size: 8px; border: none; background: none; }
    .pillars-table td { padding: 10px 0; font-size: 24px; }
    .pillars-table td .ten-god { font-size: 9px; top: 1px; right: 1px; }
    .pillars-table tr.sub-row td, .pillars-table tr.spirits-row td { font-size: 12px; }
    .pillars-table tr.extra-info-row td { padding: 5px 0; }
    .pillars-table tr.spirits-row td[colspan] { padding: 6px; font-size: 13px; }
    .spirit-tag { font-size: 11px; padding: 1px 2px; margin: 1px 0; }

    .chat-panel { border-radius: 12px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
    .chat-panel .cp-tabs { flex: 1 1 100%; }
    .chat-panel .cp-tabs button { flex: 1; min-width: 0; white-space: normal; line-height: 1.25; padding: 5px 4px; font-size: 12px; }
}
.solar-time { font-size: 12px; color: #555; flex-basis: 100%; }
/* Chart | chat side by side on a wide screen; stacked below 1100px as
   chart → chat → text summary. */
/* Chart | chat side by side on a wide screen — the panel's width is dragged from
   its left edge (--chat-w, remembered per browser) — or docked below the chart.
   Below 1100px it is always below. */
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "chat"; gap: 20px; }
.page-main { grid-area: main; min-width: 0; }
.chat-panel { grid-area: chat; position: relative; display: flex; flex-direction: column; border: 1px solid #e0e0e0; border-radius: 8px; background: white; min-height: 560px; height: calc(100vh - 64px); max-height: none; }
.cp-resize, .cp-dock { display: none; }
@media (min-width: 1100px) {
    body:not(.chat-docked) .container { max-width: 1760px; }
    body:not(.chat-docked) .page-grid { grid-template-columns: minmax(0, 1fr) var(--chat-w, 640px); grid-template-areas: "main chat"; align-items: start; }
    body:not(.chat-docked) .chat-panel { position: sticky; top: 56px; height: calc(100vh - 64px); }
    body:not(.chat-docked) .cp-resize { display: block; position: absolute; left: -9px; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 2; }
    body:not(.chat-docked) .cp-resize::after { content: ''; position: absolute; left: 4px; top: 50%; height: 48px; margin-top: -24px; width: 4px; border-radius: 2px; background: #c8e6c9; }
    body:not(.chat-docked) .cp-resize:hover::after, body.resizing .cp-resize::after { background: #4CAF50; }
                .cp-dock { display: inline-block; }
}
body.resizing { user-select: none; cursor: col-resize; }
.cp-head { padding: 10px 12px; border-bottom: 1px solid #eee; background: #fafafa; border-radius: 8px 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.cp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 600; font-size: 15px; }
.cp-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cp-tabs { display: flex; gap: 2px; }
.cp-tabs button { margin: 0; padding: 5px 8px; font-size: 13px; background: none; color: #555; border: 1px solid transparent; border-radius: 6px; white-space: nowrap; }
.cp-tabs button:hover { background: #eee; }
.cp-tabs button.on { background: #fff; color: #2e7d32; border-color: #c8e6c9; font-weight: 600; }
.cp-tab { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#cpTabReading { overflow-y: auto; padding: 12px 14px; display: block; }
.cp-tab-copy { padding: 12px 14px; gap: 6px; }
.cp-tab-copy .copy-head { justify-content: flex-end; margin: 0; }
.cp-tab-copy .copy-opt { margin-left: 0; margin-right: auto; }
.cp-reading-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: #444; margin-bottom: 8px; }
.cp-reading-opts label { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: normal; }
.cp-reading-opts select { width: auto; padding: 3px 6px; font-size: 13px; }
.cp-reading-opts input { width: auto; }
.cp-reading-hint { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: #e0e0e0; color: #555; font-size: 11px; cursor: help; }
.cp-next .cp-qs-label { font-size: 12px; color: #888; margin-top: 10px; }
.cp-next ul { margin: 4px 0 0; padding-left: 18px; color: #555; }
.cp-next { margin-top: 16px; border: 1px solid #c8e6c9; border-radius: 8px; padding: 12px 14px; background: #fcfffc; font-size: 13.5px; line-height: 1.55; }
.cp-next h4 { font-size: 14px; margin-bottom: 4px; }
.cp-next > button { margin: 8px 0 0; }
.cp-wallet { font-weight: normal; font-size: 12px; color: #555; position: relative; }
.cp-wallet summary { cursor: pointer; white-space: nowrap; }
.cp-wallet summary b.neg { color: #c62828; }
.cp-wallet-pop { position: absolute; right: 0; top: 20px; z-index: 5; background: #fff; border: 1px solid #ddd; border-radius: 6px;
                 box-shadow: 0 4px 12px rgba(0,0,0,.12); padding: 8px 12px; width: 270px; line-height: 1.6; }
.cp-wallet-pop .muted { color: #888; font-size: 11px; }
.cp-dock { margin: 0; padding: 3px 9px; font-size: 12px; background: #90a4ae; }
.cp-convs { display: flex; gap: 6px; align-items: center; }
.cp-convs select { flex: 1; padding: 5px 6px; font-size: 13px; }
.cp-convs button { margin: 0; padding: 5px 10px; font-size: 12px; background: #90a4ae; white-space: nowrap; }
.cp-convs button.danger { background: #c62828; }
.cp-convs button.cp-new { background: #6d4c41; }
.cp-msgs { flex: 1; overflow-y: auto; padding: 12px; min-height: 160px; }
.cp-empty { color: #666; font-size: 14px; line-height: 1.6; padding: 18px 6px; text-align: center; }
.cp-empty button { margin-top: 12px; }
.cp-generate { border: 1px solid #c8e6c9; border-radius: 8px; padding: 14px; background: #fcfffc; font-size: 14px; line-height: 1.55; }
.cp-generate h4 { font-size: 15px; margin-bottom: 4px; }
.cp-opts { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.cp-opts label { display: flex; align-items: center; gap: 8px; font-weight: normal; font-size: 13px; color: #444; margin: 0; }
.cp-opts select { width: auto; padding: 5px 8px; font-size: 13px; }
.cp-opts input[type=checkbox] { width: auto; }
.cp-generate > button { margin: 0 0 6px; width: 100%; }
.cp-note { font-size: 12px; color: #888; margin-bottom: 10px; }
.cp-generate .bc-ctx { text-align: left; }
.cp-samples { padding: 6px 12px 0; border-top: 1px solid #eee; max-height: 64px; overflow-y: auto; }
.cp-samples .bc-chips { margin-top: 4px; }
.cp-samples-label { font-size: 12px; color: #888; }
.cp-viewing { font-size: 12px; color: #2e7d32; padding: 6px 12px; border-top: 1px solid #eee; background: #f9fbf7; }
.cp-composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #eee; }
.cp-composer textarea { flex: 1; resize: vertical; min-height: 42px; max-height: 180px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font: inherit; font-size: 14px; }
.cp-composer button { margin: 0; padding: 8px 16px; font-size: 14px; }
.cp-error { color: #c62828; font-size: 13px; padding: 6px 12px; white-space: pre-wrap; }
button:disabled { background: #aaa; cursor: default; }
.acct-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin: 10px 0 0; }
.acct-bar:empty { display: none; }
.acct-bar button { margin-top: 0; padding: 6px 14px; font-size: 13px; }
.my-charts { border: 1px solid #e0e0e0; border-radius: 8px; margin: 0; background: #fff; min-width: 0; }
.my-charts > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 15px; }
.mc-count { font-weight: normal; color: #888; font-size: 13px; }
.mc-list { max-height: 480px; overflow-y: auto; border-top: 1px solid #eee; }
.mc-chart { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.mc-chart:hover { background: #f1f8f1; }
.mc-chart.active { background: #e3f1e3; }
.mc-sub { font-size: 12px; color: #888; }
.mc-actions { display: flex; gap: 4px; flex: none; }
.mc-main { min-width: 0; }
.mc-act { margin: 0; padding: 1px 6px; font-size: 12px; line-height: 1.4; background: #eceff1; color: #37474f; border-radius: 4px; }
.mc-act:hover { background: #cfd8dc; }
.mc-edit { font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mc-edit input { flex: 1; min-width: 120px; padding: 4px 6px; }
.mc-edit textarea { flex-basis: 100%; min-height: 120px; padding: 4px 6px; font: inherit; }
.chart-note { margin-top: 12px; font-size: 13px; line-height: 1.6; color: #333; background: #f7faf7; border: 1px solid #dfe9df; border-radius: 6px; white-space: pre-wrap; padding: 10px 14px; overflow-wrap: anywhere; }
.chart-note .cn-title { font-weight: bold; color: #2e7d32; margin-bottom: 4px; white-space: normal; }
.mc-edit button { margin: 0; padding: 3px 10px; font-size: 12px; }
.mc-empty { font-size: 13px; color: #888; padding: 10px 14px; }
.acct-bar input { width: 220px; padding: 6px 8px; }