@charset "UTF-8";
:root{color-scheme:light;--ink:#243a42;--muted:#66777b;--line:#d9e2e3;--paper:#fff;--accent:#24565e;--pale:#eaf3f2;--sand:#f7f8f5;--gold:#ac8248;font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;background:var(--sand);color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;font-size:15px;line-height:1.6}button,input,select,textarea{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #cbd7d9;border-radius:9px;background:#fff;color:var(--ink);padding:9px 14px;text-decoration:none;cursor:pointer;font-weight:600;line-height:1.4}button:hover,.button:hover{background:var(--pale);border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);color:white;border-color:var(--accent)}button.primary:hover{background:#1e454c}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #cdac72;outline-offset:3px}a{color:var(--accent)}h1,h2,h3,p{margin:0}h1{font-size:24px;letter-spacing:.05em}h2{font-size:18px}h3{font-size:15px}small,.subtle{color:var(--muted);font-size:12px}[hidden]{display:none!important}.page-header{max-width:1540px;margin:auto;padding:23px 28px 18px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--ink)}.brand-mark{width:49px;height:49px;background:var(--ink);color:#ead4ac;border-radius:13px;display:grid;place-items:center;font-size:27px;font-family:serif}.brand p{font-size:12px;color:var(--muted);letter-spacing:.16em}.header-note{font-size:12px;color:var(--muted)}.toolbar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:8px;max-width:1540px;padding:12px 28px;margin:auto;background:#f7f8f5f2;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}.toolbar button,.toolbar .button{font-size:13px;min-height:40px}.toolbar .button{margin-left:auto}.status{max-width:1484px;margin:8px auto 0;min-height:24px;font-size:13px;color:var(--accent);padding:0 4px}.status.error{color:#a13642}.status.pending{color:#886222}.boot{padding:50px;text-align:center}.layout{max-width:1540px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;padding:12px 28px 30px}.workspace,.settings{min-width:0}.panel{background:var(--paper);border:1px solid var(--line);border-radius:15px;margin-bottom:18px;overflow:hidden}.summary{padding:22px}.summary-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.summary-title h2{font-size:23px}.summary-title .subtle{margin-left:auto}.birth-line{color:var(--muted);font-size:13px;margin-top:7px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:15px 0;border-bottom:1px solid #e9eeee}.metric-label{color:var(--muted);font-size:12px}.metric-value{font-size:16px;font-weight:700;margin-top:2px}.born-flights{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:14px;font-size:13px}.born-flights>span{display:flex;align-items:center;gap:5px}.warnings{font-size:13px}.warnings p{background:#fff7e8;border-left:3px solid #c49e64;padding:9px 13px;margin-bottom:12px;border-radius:5px}.section-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.section-top p{font-size:12px;color:var(--muted);margin-top:3px}.chart-panel{padding:18px}.view-toggle{display:flex;gap:4px}.view-toggle button{font-size:12px;padding:6px 10px}.view-toggle button[aria-pressed=true],.scope-tabs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}.scope-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:17px 0 10px}.scope-tabs button{font-size:13px;padding:6px 12px;min-height:34px}.scope-summary{background:var(--pale);border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:14px;min-height:42px}.chart-scroll{overflow:auto;border-radius:9px}.chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(162px,auto));gap:5px;min-width:580px}.palace{border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;min-width:0;line-height:1.45;position:relative;font-weight:400}.palace:hover{background:#f5f9f8}.palace.selected{border:2px solid var(--accent);padding:9px;background:#edf6f5}.palace.related{border-color:#a6bcc0;background:#f7fafa}.palace.scope-home{box-shadow:inset 0 -3px var(--gold)}.palace-top{display:flex;justify-content:space-between;gap:4px;align-items:baseline}.palace-name{font-size:14px;font-weight:700}.palace-ganzhi{color:var(--muted);font-size:12px;white-space:nowrap}.palace-marks{min-height:20px;font-size:10px;color:#97713c;margin:2px 0}.stars{display:flex;flex-wrap:wrap;gap:5px 9px;align-content:flex-start}.star{display:inline-flex;gap:3px;align-items:baseline;flex-wrap:wrap;font-size:13px}.major .star{font-size:16px;font-weight:700}.star .brightness{font-size:10px;color:#879394;font-weight:400}.minor{margin-top:7px}.minor .star{font-size:12px;color:#52646a}.tag{display:inline-block;border-radius:3px;font-size:10px;font-weight:600;padding:0 3px;line-height:17px;white-space:nowrap;vertical-align:middle}.lu{background:#e3f1e7;color:#286945}.quan{background:#f8ecdb;color:#90600a}.ke{background:#e7ecf8;color:#465fa1}.ji{background:#f9e5e8;color:#a23c52}.self-tag{background:white;border:1px solid currentColor;line-height:15px}.moving{font-size:10px;color:#987540;margin-top:6px}.palace-bottom{margin-top:auto;padding-top:9px;display:flex;justify-content:space-between;gap:4px;align-items:flex-end;font-size:10px;color:var(--muted)}.scope-label{font-size:11px;color:var(--accent);font-weight:700}.center{grid-column:2/4;grid-row:2/4;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#f5f7f5;border-radius:10px;padding:18px;gap:8px}.center .large{font-family:serif;font-size:26px;letter-spacing:.14em}.center .center-birth{font-size:12px;color:var(--muted)}.center .center-note{font-size:12px;color:var(--muted);max-width:280px;margin-top:6px}.center .center-scope{padding:8px 12px;background:white;border:1px solid var(--line);border-radius:8px;font-size:13px}.legend{font-size:11px;color:var(--muted);margin:13px 0 0;line-height:2}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 4px 0 7px}.selected-dot{background:var(--accent)}.related-dot{background:#acc2c4}.chart.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;min-width:0}.chart.list .palace{grid-column:auto!important;grid-row:auto!important;min-height:155px}.chart.list .center{display:none}.detail{padding:20px}.detail-heading{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:12px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.detail-block{border-top:1px solid var(--line);padding-top:12px;font-size:13px}.detail-block h3{margin-bottom:7px}.flight-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:5px 0}.link-button{border:0;padding:0;background:none;color:var(--accent);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:24px}.wide{grid-column:1/-1}.detail-stars{font-size:13px;line-height:2}.rules{padding:16px 20px;font-size:13px}.rules summary{font-weight:600;cursor:pointer}.rules ul{padding-left:22px}.rules table{border-collapse:collapse;width:100%;margin:12px 0}.rules th,.rules td{border-bottom:1px solid var(--line);text-align:left;padding:6px 4px}.settings-card{padding:18px}.settings-card h2{margin-bottom:12px}.settings-card .section-top h2{margin-bottom:0}.settings-card .section-top{margin-bottom:14px}.field{display:flex;flex-direction:column;gap:6px;margin:12px 0 15px}.field label,legend{font-size:13px;font-weight:600}.field input,.field select{width:100%;min-width:0;padding:10px 11px;background:#fff;border:1px solid #ccd7d9;border-radius:8px;color:var(--ink);height:43px}fieldset{border:0;padding:0;margin:0 0 15px;min-width:0}legend{padding:0;margin:0 0 7px}.radio-row{display:flex;gap:25px;font-size:14px}input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;vertical-align:-3px}.check{display:flex;gap:7px;align-items:center;font-size:13px;margin:12px 0}.check input{flex-shrink:0}.field-note{font-size:12px;color:var(--muted);margin:13px 0;line-height:1.8}.full{width:100%;margin-top:4px}.small{font-size:11px;padding:5px 8px}.stepper{display:flex;gap:7px;margin:12px 0}.stepper button{font-size:12px;flex:1;padding:7px}.settings{scroll-margin-top:120px}#birth-settings{scroll-margin-top:125px}footer{padding:12px 24px 32px;text-align:center;color:var(--muted);font-size:12px}dialog{border:1px solid var(--line);border-radius:14px;max-width:min(760px,94vw);width:760px;padding:24px;box-shadow:0 12px 80px #0003;color:var(--ink)}dialog::backdrop{background:#203b4570}dialog p{font-size:13px;margin:10px 0}dialog textarea{width:100%;height:50vh;border:1px solid var(--line);border-radius:7px;padding:12px;font-size:12px;resize:vertical}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.form-dirty{border-color:#c9a66d}.disabled-result{opacity:.62}.error{color:#a13642}
.brand-mark,.center .large{font-family:inherit}
@media(min-width:1250px){.chart{grid-template-rows:repeat(4,minmax(175px,auto))}.palace{padding:12px}.palace.selected{padding:11px}}
@media(max-width:1000px){.layout{grid-template-columns:minmax(0,1fr) 260px;padding:10px 16px;gap:15px}.page-header,.toolbar{padding-left:16px;padding-right:16px}.chart-panel{padding:12px}.chart{min-width:540px}.star{font-size:12px}.major .star{font-size:14px}.status{padding:0 16px}.metrics{gap:6px}.metric-value{font-size:14px}}
@media(max-width:800px){.layout{display:flex;flex-direction:column;padding:8px 12px 24px}.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.settings .panel{margin:0}.settings .panel:last-child{grid-column:1/-1}.header-note{display:none}.page-header{padding:17px 14px 10px}.toolbar{padding:9px 12px;gap:6px}.toolbar button,.toolbar .button{padding:8px 10px;font-size:12px;flex:1 1 calc(50% - 6px)}.toolbar .button{margin:0}.status{margin-top:6px;padding:0 14px;line-height:1.5}.summary{padding:17px}.summary-title h2{font-size:21px}.summary-title .subtle{width:100%;margin:0}.metrics{grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 0}.chart{min-width:620px}.chart.list{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}.section-top{gap:5px}.section-top p{font-size:11px}.chart-panel{padding:12px}.detail{padding:16px}.detail-grid{gap:12px}.scope-tabs{gap:4px}.scope-tabs button{font-size:12px;padding:6px 10px}.center .large{font-size:24px}.legend{font-size:10px}.chart-scroll{scrollbar-width:thin}}
@media(max-width:430px){h1{font-size:21px}.brand-mark{height:42px;width:42px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.settings{display:block}.settings .panel{margin-bottom:12px}.detail-grid{display:block}.detail-block{margin-top:13px}.chart.list{grid-template-columns:repeat(2,minmax(0,1fr))}.chart.list .palace{padding:8px}.chart.list .palace.selected{padding:7px}.scope-tabs button{padding:6px 9px}.birth-line{font-size:12px}.view-toggle button{padding:5px 7px}.summary-title h2{font-size:20px}}
@media print{.toolbar,.settings,.status,.view-toggle,.scope-tabs,footer,.warnings{display:none!important}.layout{display:block;padding:0}.page-header{padding:0 0 12px}.panel{break-inside:avoid;box-shadow:none}.chart{min-width:0}.chart-scroll{overflow:visible}.chart{grid-template-rows:repeat(4,minmax(140px,auto))}.rules:not([open]){display:none}body{background:white}}

/* 2026.09.20 desktop layout: restore left controls and keep the working view inside one viewport. */
@media (min-width:801px){
  .layout{grid-template-columns:300px minmax(0,1fr)}
  .settings{grid-column:1}.workspace{grid-column:2}
}
@media (min-width:1280px){
  html,body{height:100%;overflow:hidden}
  body{font-size:14px}
  .page-header,.toolbar,.layout{max-width:1880px}
  .status{max-width:1844px}
  .page-header{padding:6px 18px}
  .brand{gap:9px}.brand-mark{width:36px;height:36px;border-radius:9px;font-size:21px}.brand h1{font-size:20px}.brand p{font-size:10px;letter-spacing:.12em}
  .toolbar{position:relative;padding:5px 18px;gap:6px}.toolbar button,.toolbar .button{font-size:12px;min-height:32px;padding:5px 10px}.toolbar .button{display:none}
  .status{height:21px;min-height:21px;line-height:21px;margin:1px auto 0;padding:0 18px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .layout{height:calc(100vh - 112px);grid-template-columns:310px minmax(0,1fr);gap:10px;padding:6px 18px 10px;overflow:hidden}
  .panel{margin-bottom:0;border-radius:10px}
  .settings{height:100%;min-height:0;display:flex;flex-direction:column;gap:7px;overflow:auto;scrollbar-width:thin}
  .settings-card{padding:9px 11px}
  .settings-card h2{font-size:15px;margin-bottom:7px}.settings-card .section-top{margin-bottom:6px}.settings-card .section-top h2{margin-bottom:0}
  .settings .section-top .subtle{font-size:10px}
  .settings .field{gap:3px;margin:5px 0 7px}.settings .field label,.settings legend{font-size:11.5px}.settings .field input,.settings .field select{height:33px;padding:5px 8px;border-radius:6px;font-size:12px}
  .settings fieldset{margin:0 0 7px}.settings legend{margin-bottom:3px}.settings .radio-row{gap:17px;font-size:12px}
  .settings input[type=checkbox],.settings input[type=radio]{width:14px;height:14px}.settings .check{font-size:11.5px;margin:6px 0;gap:5px}
  .settings small{font-size:9.5px;line-height:1.3}.settings .field-note{font-size:9.5px;line-height:1.35;margin:5px 0}.settings .stepper{gap:5px;margin:6px 0}.settings .stepper button{font-size:10.5px;padding:5px}.settings .full{min-height:32px;padding:5px 8px;margin-top:2px;font-size:11.5px}.settings .small{font-size:10px;padding:4px 6px}
  .workspace{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 350px;grid-template-rows:auto auto minmax(0,1fr) auto;gap:7px 9px}
  .summary{grid-column:1/-1;grid-row:1;padding:8px 12px}.summary-title{gap:7px}.summary-title h2{font-size:17px}.summary-title .subtle{font-size:10px}.birth-line{font-size:10.5px;margin-top:1px}.metrics{display:flex;gap:22px;padding:4px 0;border-bottom:0}.metric-label{font-size:9.5px}.metric-value{font-size:13px;margin-top:0}.born-flights{gap:3px 12px;margin-top:2px;font-size:10.5px}
  .warnings{grid-column:1/-1;grid-row:2;font-size:10px;min-height:0}.warnings:empty{display:none}.warnings p{padding:4px 8px;margin:0;border-radius:4px}
  .chart-panel{grid-column:1;grid-row:3/5;min-height:0;padding:9px;display:flex;flex-direction:column}.chart-panel>.section-top{flex:0 0 auto}.chart-panel .section-top h2{font-size:15px}.chart-panel .section-top p{font-size:9.5px;margin-top:0}.view-toggle button{font-size:10px;padding:4px 7px}
  .scope-tabs{flex:0 0 auto;gap:4px;margin:6px 0 5px}.scope-tabs button{font-size:10.5px;padding:4px 8px;min-height:27px;border-radius:7px}.scope-summary{flex:0 0 auto;padding:5px 8px;font-size:10.5px;line-height:1.35;margin-bottom:6px;min-height:0;border-radius:6px}
  .chart-scroll{flex:1 1 auto;min-height:0;overflow:auto}.chart:not(.list){height:100%;min-height:0;min-width:580px;grid-template-rows:repeat(4,minmax(0,1fr));gap:4px}.chart:not(.list) .palace{min-height:0;overflow:hidden;padding:6px;line-height:1.22;border-radius:6px}.chart:not(.list) .palace.selected{padding:5px}.palace-top{line-height:1.2}.palace-name{font-size:12px}.palace-ganzhi{font-size:9.5px}.palace-marks{min-height:13px;font-size:8.5px;margin:0}.stars{gap:2px 6px}.star{font-size:10.5px;gap:2px}.major .star{font-size:13px}.star .brightness{font-size:8px}.minor{margin-top:3px}.minor .star{font-size:9.5px}.tag{font-size:8px;line-height:13px;padding:0 2px}.self-tag{line-height:11px}.moving{font-size:8.5px;margin-top:2px}.palace-bottom{padding-top:3px;font-size:8px}.scope-label{font-size:8.5px}.center{padding:8px;gap:3px}.center .large{font-size:20px}.center .center-birth,.center .center-note{font-size:9px}.center .center-note{margin-top:1px}.center .center-scope{padding:4px 7px;font-size:10px}.legend{flex:0 0 auto;font-size:8.5px;margin:4px 0 0;line-height:1.35}
  .detail{grid-column:2;grid-row:3;min-height:0;overflow:auto;padding:10px;scrollbar-width:thin}.detail-heading{gap:6px;margin-bottom:5px}.detail-heading h2{font-size:15px}.detail-heading .subtle{font-size:9px}.detail-stars{font-size:10.5px;line-height:1.45}.detail-grid{grid-template-columns:1fr;gap:5px}.detail-block,.wide{grid-column:auto;border-top:1px solid var(--line);padding-top:5px;font-size:10px}.detail-block h3{font-size:11px;margin-bottom:2px}.flight-row{gap:3px;padding:2px 0}.link-button{font-size:10px;min-height:16px}.detail-block p{line-height:1.45}
  .rules{grid-column:2;grid-row:4;padding:7px 10px;font-size:10px;max-height:35vh;overflow:auto}.rules summary{font-size:10.5px}.rules ul{padding-left:16px}.rules table{margin:6px 0}.rules th,.rules td{padding:3px}
  footer{display:none}
}


/* 2026.09.20.2 desktop refinement */
.center-summary-block{display:none}
@media (min-width:1280px){
  body{font-size:15px}
  .workspace{grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:auto minmax(0,1fr) auto;gap:7px 8px}
  .summary{display:none}
  .warnings{grid-column:1/-1;grid-row:1}
  .chart-panel{grid-column:1;grid-row:2/4}
  .detail{grid-column:2;grid-row:2}
  .rules{grid-column:2;grid-row:3;max-height:31vh}
  .settings-card h2{font-size:16px}
  .settings .field label,.settings legend{font-size:12.5px}
  .settings .field input,.settings .field select{font-size:13px}
  .settings .radio-row{font-size:13px}
  .settings .check{font-size:12.5px}
  .settings small,.settings .field-note{font-size:10.5px}
  .chart-panel .section-top h2{font-size:17px}
  .chart-panel .section-top p{font-size:10.5px}
  .view-toggle button{font-size:11px}
  .scope-tabs button{font-size:11.5px;min-height:29px}
  .scope-summary{font-size:11.5px;padding:6px 9px}
  .chart:not(.list) .palace{padding:7px;line-height:1.28}
  .chart:not(.list) .palace.selected{padding:6px}
  .palace-name{font-size:13.5px}
  .palace-ganzhi{font-size:10.5px}
  .palace-marks{min-height:15px;font-size:9.5px}
  .star{font-size:12px}
  .major .star{font-size:15px}
  .star .brightness{font-size:9px}
  .minor{margin-top:4px}
  .minor .star{font-size:10.5px}
  .tag{font-size:8.5px;line-height:14px}
  .moving{font-size:9.5px}
  .palace-bottom{font-size:9px;padding-top:4px}
  .scope-label{font-size:9.5px}
  .legend{font-size:9.5px;line-height:1.45}
  .center{padding:10px 12px;gap:0;justify-content:center;align-items:stretch;text-align:left}
  .center-basic{display:none}
  .center-summary-block{display:flex;flex-direction:column;gap:7px;width:100%;max-width:520px;margin:auto}
  .center-summary-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:5px}
  .center-summary-head strong{font-size:17px}
  .center-summary-head span{font-size:10.5px;color:var(--muted);white-space:nowrap}
  .center-summary-lunar{font-size:11px;color:var(--muted)}
  .center-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .center-metrics>div{display:flex;flex-direction:column;gap:1px;min-width:0}
  .center-metrics span{font-size:9.5px;color:var(--muted)}
  .center-metrics strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .center-flights{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:10.5px;line-height:1.5}
  .center-flights>span{display:inline-flex;align-items:center;gap:3px}
  .center-flights small{font-size:9.5px;color:var(--muted)}
  .detail{padding:10px 9px}
  .detail-heading h2{font-size:16px}
  .detail-heading .subtle{font-size:10px}
  .detail-stars{font-size:11.5px;line-height:1.55}
  .detail-block,.wide{font-size:11px}
  .detail-block h3{font-size:12px}
  .link-button{font-size:11px}
  .rules{font-size:10.5px}
  .rules summary{font-size:11px}
}

/* 2026.09.20.3: compact top bar, larger chart type, fixed chart-only view. */
.topbar{max-width:1880px;margin:0 auto;padding:5px 16px;min-height:46px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);background:var(--sand)}
.topbar .brand{gap:8px;flex:0 0 auto}
.topbar .brand-mark{width:32px;height:32px;border-radius:8px;font-size:19px}
.topbar .brand h1{font-size:18px;line-height:1.15;white-space:nowrap}
.topbar .toolbar{position:static;top:auto;z-index:auto;max-width:none;margin-left:auto;padding:0;background:none;backdrop-filter:none;border:0;display:flex;flex-wrap:nowrap;gap:5px}
.topbar .toolbar button{min-height:31px;padding:4px 9px;font-size:12px;border-radius:7px}
.topbar .header-note{margin-left:3px;white-space:nowrap;font-size:11px}

@media (min-width:1280px){
  .status{height:19px;min-height:19px;line-height:19px;margin:0 auto;padding:0 16px;font-size:11px;max-width:1880px}
  .layout{height:calc(100vh - 65px);grid-template-columns:296px minmax(0,1fr);gap:8px;padding:5px 14px 8px;max-width:1880px}
  .settings{gap:6px}
  .settings-card{padding:9px 11px}
  .settings-card h2{font-size:17px;line-height:1.2}
  .settings .section-top .subtle{font-size:10.5px}
  .settings .field{gap:3px;margin:5px 0 7px}
  .settings .field label,.settings legend{font-size:13.5px}
  .settings .field input,.settings .field select{height:34px;padding:5px 8px;font-size:14px}
  .settings .radio-row{font-size:13.5px;gap:18px}
  .settings .check{font-size:13px;margin:6px 0}
  .settings small,.settings .field-note{font-size:10.5px;line-height:1.35}
  .settings .stepper{margin:6px 0 2px}
  .settings .stepper button{font-size:11.5px;min-height:31px;padding:4px 5px}
  .settings .small{font-size:10.5px}

  .workspace{grid-template-columns:minmax(0,1fr) 230px;gap:6px 7px}
  .chart-panel{padding:8px}
  .chart-panel .section-top h2{font-size:18px}
  .chart-panel .section-top p{font-size:11px}
  .scope-tabs{gap:4px;margin:5px 0 5px}
  .scope-tabs button{font-size:12.5px;padding:4px 9px;min-height:29px}
  .scope-summary{font-size:12.5px;line-height:1.3;padding:6px 9px;margin-bottom:5px}
  .chart:not(.list){min-width:610px;gap:4px}
  .chart:not(.list) .palace{padding:7px;line-height:1.28}
  .chart:not(.list) .palace.selected{padding:6px}
  .palace-name{font-size:15px}
  .palace-ganzhi{font-size:11px}
  .palace-marks{min-height:15px;font-size:10.5px}
  .stars{gap:3px 7px}
  .star{font-size:13.5px}
  .major .star{font-size:18px;line-height:1.18}
  .minor{margin-top:4px}
  .minor .star{font-size:12.5px}
  .star .brightness{font-size:10px}
  .tag{font-size:9.5px;line-height:15px;padding:0 3px}
  .self-tag{line-height:13px}
  .moving{font-size:10.5px;margin-top:3px}
  .palace-bottom{font-size:10.5px;line-height:1.25;padding-top:4px}
  .scope-label{font-size:10.5px}
  .legend{font-size:10px;line-height:1.35;margin-top:3px}

  .center{padding:11px 13px}
  .center-summary-block{max-width:560px;gap:8px}
  .center-summary-head strong{font-size:19px}
  .center-summary-head span{font-size:11.5px}
  .center-summary-lunar{font-size:12px}
  .center-metrics span{font-size:10.5px}
  .center-metrics strong{font-size:14.5px}
  .center-flights{font-size:11.5px;gap:4px 11px}
  .center-flights small{font-size:10px}

  .detail{padding:9px 8px}
  .detail-heading h2{font-size:17px}
  .detail-heading .subtle{font-size:10.5px}
  .detail-stars{font-size:12.5px;line-height:1.5}
  .detail-block,.wide{font-size:12px;line-height:1.45}
  .detail-block h3{font-size:13px}
  .link-button{font-size:12px}
  .rules{font-size:11px;padding:7px 8px}
  .rules summary{font-size:11.5px}
}

@media (max-width:800px){
  .topbar{padding:6px 10px;gap:6px;flex-wrap:wrap}
  .topbar .brand h1{font-size:17px}
  .topbar .header-note{display:none}
  .topbar .toolbar{order:3;width:100%;margin-left:0}
  .topbar .toolbar button{flex:1}
}

@media (min-width:1280px){
  .palace-name{font-size:16px}
  .star{font-size:14px}
  .major .star{font-size:19px}
  .minor .star{font-size:13px}
  .palace-bottom{font-size:10.75px}
  .scope-label{font-size:11px}
  .scope-summary{font-size:13px}
  .center-summary-head strong{font-size:20px}
  .center-metrics strong{font-size:15px}
  .center-flights{font-size:12px}
  .detail-stars{font-size:13px}
  .detail-block,.wide{font-size:12.5px}
  .detail-block h3{font-size:13.5px}
  .link-button{font-size:12.5px}
}

/* 2026.09.20.4: one-screen reading layout, timeline badges inside palaces, export controls in chart center. */
.scope-summary{display:none!important}
.topbar #export-toolbar{display:flex}
.center #export-toolbar{display:flex}
.palace-meta{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:18px;margin:1px 0 2px}
.palace-meta .palace-marks{margin:0;min-height:0;flex:0 1 auto}
.cycle-badges{display:flex;justify-content:flex-end;align-items:center;gap:3px;flex-wrap:wrap;min-width:0}
.cycle-badge{display:inline-flex;align-items:center;border:1px solid #bccacc;background:#f6f9f8;color:#52686e;border-radius:4px;padding:0 4px;min-height:16px;font-size:9.5px;font-weight:700;line-height:14px;white-space:nowrap}
.cycle-badge.active{background:var(--accent);border-color:var(--accent);color:#fff}
.center-active-scope{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5px 7px;border-radius:6px;background:#edf4f3}
.center-active-scope strong{font-size:12.5px;white-space:nowrap}
.center-active-scope span{font-size:10.5px;color:var(--muted);text-align:right}
.center-actions{display:flex;justify-content:center;margin-top:2px}
.center .toolbar{position:static;max-width:none;margin:0;padding:0;border:0;background:none;backdrop-filter:none;display:flex;gap:5px;flex-wrap:nowrap}
.center .toolbar button{min-height:30px;padding:4px 10px;border-radius:7px;font-size:12px}
.center-status-slot{min-height:16px;text-align:center}
.center .status{height:auto;min-height:16px;line-height:1.25;margin:0;padding:0;max-width:none;font-size:10.5px;white-space:normal;overflow:visible;text-overflow:clip}

@media (min-width:1280px){
  html,body{height:100%;overflow:hidden}
  .topbar{height:36px;min-height:36px;padding:2px 12px;max-width:1920px;gap:8px}
  .topbar .brand{gap:7px}
  .topbar .brand-mark{width:27px;height:27px;border-radius:7px;font-size:17px}
  .topbar .brand h1{font-size:16.5px;line-height:1;letter-spacing:.035em}
  .topbar .header-note{margin-left:auto;font-size:10.5px}
  body>div.status{display:none}

  .layout{height:calc(100vh - 36px);grid-template-columns:288px minmax(0,1fr);gap:7px;padding:4px 12px 7px;max-width:1920px;overflow:hidden}
  .panel{border-radius:9px}
  .settings{height:100%;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
  .settings-card{padding:8px 10px}
  .settings-card h2{font-size:16.5px;line-height:1.15;margin-bottom:5px}
  .settings-card .section-top{margin-bottom:4px;min-height:22px}
  .settings .section-top .subtle{font-size:10px}
  .settings .field{gap:2px;margin:4px 0 5px}
  .settings .field label,.settings legend{font-size:13px;line-height:1.2}
  .settings .field input,.settings .field select{height:34px;padding:4px 8px;font-size:13.5px;border-radius:6px}
  .settings fieldset{margin:0 0 5px}
  .settings legend{margin-bottom:2px}
  .settings .radio-row{font-size:13.5px;gap:18px;line-height:1.5}
  .settings input[type=checkbox],.settings input[type=radio]{width:15px;height:15px}
  .settings .check{font-size:13px;margin:4px 0;gap:5px;line-height:1.35}
  .settings small,.settings .field-note{display:none}
  .settings .stepper{gap:5px;margin:5px 0 0}
  .settings .stepper button{font-size:11.5px;min-height:30px;padding:4px 5px}
  .settings .small{font-size:10.5px;padding:3px 6px;min-height:27px}

  .workspace{height:100%;min-height:0;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto minmax(0,1fr) auto;gap:6px 7px}
  .summary{display:none}
  .warnings{grid-column:1/-1;grid-row:1;font-size:10.5px;min-height:0}
  .warnings:empty{display:none}
  .warnings p{padding:3px 7px;margin:0}
  .chart-panel{grid-column:1;grid-row:2/4;min-height:0;padding:7px;display:flex;flex-direction:column;overflow:hidden}
  .chart-panel>.section-top{flex:0 0 auto}
  .chart-panel .section-top h2{font-size:18px;line-height:1.15}
  .chart-panel .section-top p{font-size:10.5px;margin-top:0}
  .scope-tabs{flex:0 0 auto;gap:4px;margin:5px 0 5px;flex-wrap:nowrap}
  .scope-tabs button{font-size:12px;padding:3px 9px;min-height:28px;border-radius:6px}
  .chart-scroll{flex:1 1 auto;min-height:0;overflow:hidden;border-radius:7px}
  .chart:not(.list){height:100%;min-height:0;min-width:610px;grid-template-rows:repeat(4,minmax(0,1fr));gap:4px}
  .chart:not(.list) .palace{min-height:0;overflow:hidden;padding:7px;line-height:1.22;border-radius:6px}
  .chart:not(.list) .palace.selected{padding:6px}
  .palace-top{line-height:1.15}
  .palace-name{font-size:16.5px}
  .palace-ganzhi{font-size:11px}
  .palace-marks{font-size:10px;color:#987540}
  .cycle-badge{font-size:9.5px;line-height:14px;min-height:16px;padding:0 3px}
  .stars{gap:2px 7px}
  .star{font-size:14px;gap:2px}
  .major .star{font-size:20px;line-height:1.12}
  .star .brightness{font-size:9.5px}
  .minor{margin-top:3px}
  .minor .star{font-size:13px;line-height:1.18}
  .tag{font-size:9px;line-height:14px;padding:0 2px}
  .self-tag{line-height:12px}
  .moving{font-size:11px;line-height:1.2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .moving b{font-size:10px;color:var(--accent)}
  .palace-bottom{font-size:10.5px;line-height:1.2;padding-top:4px;gap:5px}
  .scope-label{font-size:10.5px;line-height:1.2;text-align:right;max-width:48%}
  .legend{flex:0 0 auto;font-size:10px;line-height:1.3;margin:3px 0 0}

  .center{padding:9px 12px;gap:0;justify-content:center;align-items:stretch;text-align:left;overflow:hidden}
  .center-summary-block{display:flex;flex-direction:column;gap:6px;width:100%;max-width:620px;margin:auto}
  .center-summary-head{padding-bottom:4px}
  .center-summary-head strong{font-size:20px}
  .center-summary-head span{font-size:11px}
  .center-summary-lunar{font-size:11.5px}
  .center-metrics{gap:7px}
  .center-metrics span{font-size:10px}
  .center-metrics strong{font-size:15px}
  .center-flights{font-size:11.5px;line-height:1.35;gap:3px 10px}
  .center-flights small{font-size:9.5px}
  .center-active-scope strong{font-size:12.5px}
  .center-active-scope span{font-size:10.5px}
  .center .toolbar button{min-height:30px;font-size:12px;padding:4px 10px}

  .detail{grid-column:2;grid-row:2;min-height:0;overflow:auto;padding:8px 7px;scrollbar-width:thin}
  .detail-heading{gap:5px;margin-bottom:4px}
  .detail-heading h2{font-size:16.5px}
  .detail-heading .subtle{font-size:9.5px}
  .detail-stars{font-size:12.5px;line-height:1.45}
  .detail-grid{grid-template-columns:1fr;gap:4px}
  .detail-block,.wide{grid-column:auto;padding-top:4px;font-size:11.5px;line-height:1.4}
  .detail-block h3{font-size:12.5px;margin-bottom:2px}
  .flight-row{gap:3px;padding:1px 0}
  .link-button{font-size:11.5px;min-height:16px}
  .rules{grid-column:2;grid-row:3;padding:6px 8px;font-size:10.5px;max-height:28vh;overflow:auto}
  .rules summary{font-size:11px}
  footer{display:none}
}

@media (min-width:1280px) and (max-height:760px){
  .settings{overflow:auto;scrollbar-width:thin}
}

/* 2026.09.20.4 interaction refinement: timeline selectors live in the palaces. */
.scope-tabs{display:none!important}
.cycle-badge{cursor:pointer}
.origin-switch{min-height:24px!important;padding:2px 6px!important;border-radius:5px!important;font-size:10.5px!important;flex:0 0 auto}
.center-active-scope:not(.origin){display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;justify-content:stretch}
.center-active-scope:not(.origin)>span{text-align:right}
@media (min-width:1280px){
  .topbar{height:32px;min-height:32px;padding:1px 12px}
  .topbar .brand-mark{width:24px;height:24px;border-radius:6px;font-size:15px}
  .topbar .brand h1{font-size:16px}
  .layout{height:calc(100vh - 32px)}
  .chart-panel>.section-top{margin-bottom:4px}
}
.center-hint{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.25}


/* 2026.09.20.5: keep the same export controls reachable on mobile. */
@media (max-width:800px){
  .topbar{position:sticky;top:0;z-index:30;min-height:42px;padding:5px 8px;gap:6px;flex-wrap:nowrap}
  .topbar .brand{gap:6px;min-width:0}
  .topbar .brand-mark{width:28px;height:28px;border-radius:7px;font-size:17px;flex:0 0 auto}
  .topbar .brand h1{font-size:16px;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar #export-toolbar{display:flex;order:0;width:auto;margin-left:auto;padding:0;gap:4px;flex:0 0 auto;flex-wrap:nowrap}
  .topbar #export-toolbar button{flex:0 0 auto;min-height:30px;padding:4px 7px;font-size:11px;line-height:1.2;white-space:nowrap}
  .center #export-toolbar{display:none}
  body>div.status{margin:0;padding:2px 9px;min-height:0;font-size:10.5px;line-height:1.35}
}
@media (max-width:390px){
  .topbar{padding-left:6px;padding-right:6px;gap:4px}
  .topbar .brand{gap:4px}
  .topbar .brand-mark{width:26px;height:26px;font-size:16px}
  .topbar .brand h1{font-size:14px}
  .topbar #export-toolbar{gap:3px}
  .topbar #export-toolbar button{padding:4px 5px;font-size:10px}
}


/* 2026.09.20.6: mobile is a true single-column workflow.
   Priority: birth data -> export actions -> display options -> horoscope time -> chart. */
.mobile-export-slot{display:none}
@media (max-width:800px){
  .topbar{position:sticky;top:0;z-index:30;min-height:42px;padding:5px 10px;gap:6px;flex-wrap:nowrap}
  .topbar .brand{gap:7px;min-width:0}
  .topbar .brand-mark{width:28px;height:28px;border-radius:7px;font-size:17px;flex:0 0 auto}
  .topbar .brand h1{font-size:16px;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .header-note{display:none}

  .layout{display:flex;flex-direction:column;padding:8px 12px 24px}
  .settings{display:flex!important;flex-direction:column;gap:12px;min-width:0}
  .settings .panel{margin:0}
  #birth-settings{order:1}
  .mobile-export-slot{display:block;order:2}
  #display-settings{order:3}
  #horoscope-settings{order:4}

  .mobile-export-slot .toolbar{position:static;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:none;margin:0;padding:0;gap:6px;background:none;border:0;backdrop-filter:none}
  .mobile-export-slot .toolbar button{width:100%;min-width:0;min-height:38px;padding:7px 6px;font-size:13px;line-height:1.2;border-radius:8px;white-space:nowrap}
  .mobile-export-slot .status{margin:5px 2px 0;padding:0;min-height:0;font-size:11px;line-height:1.4}

  .center #export-toolbar{display:none}
  .topbar #export-toolbar{display:none}
  body>div.status{display:none}
}
@media (max-width:430px){
  .settings{display:flex!important}
  .mobile-export-slot .toolbar{gap:5px}
  .mobile-export-slot .toolbar button{min-height:36px;font-size:12px;padding:6px 4px}
}