:root{--bg:#f5f6f8;--ink:#212733;--muted:#667080;--line:#dfe3ea;--accent:#454b8f}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;color:var(--ink);background:var(--bg);font:14px 'Noto Sans TC',system-ui,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #919dde;outline-offset:3px}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 3%;background:#fff;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:600 23px 'Noto Serif TC',serif;letter-spacing:2px}.brand>b{font-size:42px;color:var(--accent)}.brand small{display:block;font:9px system-ui;letter-spacing:3px;margin-top:5px;color:var(--muted)}nav{display:flex;gap:8px}nav button{background:none;border:0;padding:13px;font-size:12px;border-radius:8px}nav button.active{background:#edf0f7;color:var(--accent)}.school{font-size:11px;white-space:nowrap;border:1px solid var(--line);border-radius:20px;padding:8px 12px}main{max-width:1750px;margin:auto;padding:30px 2.5% 12px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:20px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:600}h1{font:500 31px 'Noto Serif TC',serif;margin:9px 0 12px;letter-spacing:2px}h2{font:500 25px 'Noto Serif TC',serif;margin:12px 0}p{line-height:1.8}.intro p{color:var(--muted);font-size:12px;margin:0}.primary,.quiet{border:1px solid var(--line);background:white;border-radius:7px;padding:10px 15px;font-size:12px;white-space:nowrap}.primary{color:white;background:var(--accent);border-color:var(--accent)}.wide{width:100%}.text-btn{border:0;background:none;color:var(--accent);padding:5px 0;font-size:11px}.danger{color:#a33}.small{font-size:11px}.muted{color:var(--muted)}.workspace{display:grid;grid-template-columns:220px minmax(450px,1fr) 265px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:white}.left-panel{padding:20px 17px;background:#fbfcfe;border-right:1px solid var(--line)}h3{font-size:13px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between}h3 small{font-size:10px;color:var(--muted);font-weight:400}.rule{border-top:1px solid var(--line);margin:20px 0}.layer-control{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid transparent;border-radius:7px;margin:5px 0}.layer-control.selected{border-color:color-mix(in srgb,var(--color) 35%,white);background:color-mix(in srgb,var(--color) 5%,white)}.layer-control input{accent-color:var(--color);width:14px;height:14px;margin:0}.layer-control button{border:0;background:none;text-align:left;flex:1;color:var(--color);padding:0}.layer-control small{display:block;margin-top:3px;font-size:10px;color:#626873}.layer-control>span{font:10px monospace;color:var(--color)}label{display:block;font-size:12px}input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea{width:100%;min-width:0;border:1px solid #d4dae3;border-radius:6px;background:white;color:var(--ink);padding:8px;margin-top:6px;font-size:12px}input[type=range]{width:100%;accent-color:var(--accent);height:5px}input[type=checkbox]{accent-color:var(--accent)}.check-label{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.7;margin:9px 0}.range-label{display:flex;justify-content:space-between;font-size:11px;margin:15px 0 9px}.birth-summary{border-top:1px solid var(--line);padding-top:14px;margin-top:20px;font-size:10px;color:#586170;line-height:1.9}.calendar-switch{display:flex;background:#edf0f5;padding:3px;border-radius:5px}.calendar-switch button{flex:1;border:0;background:none;padding:5px;border-radius:4px;font-size:11px}.calendar-switch button.active{background:white;color:var(--accent);box-shadow:0 1px 4px #0001}.date-parts{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:5px;margin-top:8px}.date-parts label{font-size:10px;color:var(--muted)}.date-parts input{padding:7px 4px!important}.date-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}.date-buttons button{border:1px solid var(--line);background:white;padding:7px;font-size:11px;border-radius:4px}.board-panel{min-width:0;background:radial-gradient(ellipse at 50% 38%,#eff3f9,#fcfdff 72%)}.board-toolbar{padding:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}.mode-switch{display:flex;gap:3px;background:#e9edf3;border-radius:6px;padding:3px}.mode-switch button{border:0;background:none;padding:8px 9px;border-radius:4px;font-size:10px;color:#535d6d}.mode-switch button.active{background:white;color:var(--accent);box-shadow:0 1px 4px #0001}.icon-btn{padding:5px;border:1px solid var(--line);border-radius:5px;background:white;font-size:14px}.gesture{text-align:center;font-size:10px;color:#515c6b;padding:2px 5px 10px}kbd{font:10px system-ui;border:1px solid #ccd3df;background:white;border-radius:4px;padding:2px 5px}.scene{width:100%;height:660px;position:relative;touch-action:none}.scene canvas{display:block;max-width:100%;touch-action:none}.view-status{font-size:11px;color:#505a6d;padding:10px 18px}.transform-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:15px;margin:0 15px;border:1px solid var(--line);border-radius:7px;background:white;text-align:center;font-size:12px}.tag{display:inline-block;min-width:19px;text-align:center;border:1px solid currentColor;border-radius:3px;font-size:10px;margin-right:4px;padding:1px}.tag-祿{color:#007733}.tag-權{color:#986a00}.tag-科{color:#0000aa}.tag-忌{color:#a00}.right-panel{border-left:1px solid var(--line);padding:22px 17px}.right-panel h2 small{display:block;font:11px 'Noto Sans TC',sans-serif;color:var(--muted);margin-top:9px}.palace-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:18px 0}.palace-picker button{padding:7px 0;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:11px}.palace-picker button.active{background:#edf0fa;color:var(--accent);border-color:#8d97bd}.detail-card{padding:15px 0;border-top:1px solid var(--line)}.detail-card h3{color:var(--color);font-size:11px;gap:6px;justify-content:flex-start}.detail-card h3 i{width:5px;height:5px;background:var(--color);border-radius:50%}.detail-card h3 small{margin-left:auto;font-size:9px}.detail-stars{color:var(--color);font-size:13px;line-height:1.8}.detail-transform{font-size:11px;margin-top:7px}.detail-card p{color:#4d5664}.today-alerts{padding:22px 16px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-heading h3{margin:0}.section-heading p{font-size:12px;margin:6px 0 20px}.button-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.alert-card{width:100%;display:flex;flex-direction:column;text-align:left;gap:7px;background:#fffaf4;border:1px solid #ebd4b6;border-left:3px solid #b57d2e;border-radius:7px;padding:12px;margin:8px 0;font-size:12px}.alert-top{display:flex;justify-content:space-between;gap:10px}.alert-top b{color:#865310}.alert-top>span{font:11px monospace;color:#746650}.alert-card small{color:#746b5e;font-size:10px;margin-left:8px}.alert-path{font-size:10px;line-height:1.8;color:#716a5f}.empty{padding:20px 10px;color:var(--muted);font-size:12px;text-align:center;border:1px dashed var(--line);border-radius:7px}.evidence{border:1px solid #d9bd7f;border-radius:7px;background:#fffbf1;padding:11px;margin:15px 0;font-size:11px}.evidence>div:not(:first-child){border-top:1px solid #e9ddbe;padding:8px 0;line-height:1.7}.error{font-size:12px;color:#a02739}.error:empty{display:none}.flat-scroll{overflow:auto;padding:10px;width:100%;min-width:0;overscroll-behavior:contain}.flat-board{--palace-size:360px;display:grid;grid-template-columns:repeat(4,var(--palace-size));grid-template-rows:repeat(4,var(--palace-size));gap:6px;padding:0;background:#fff;width:max-content;min-width:0;margin:0 auto;color:#000}.flat-cell{position:relative;display:flex;flex-direction:column;border:1px solid #aeb4bd;border-radius:8px;background:#fff;color:#000;min-width:0;overflow:visible;padding:5px 6px 4px;text-align:left;font-size:13px}.flat-cell.selected{border:2px solid #b18724;padding:4px 5px 3px;background:#fffdf5}.kw-top-left{position:absolute;left:5px;top:6px;writing-mode:vertical-rl;font-size:11px}.kw-top-row{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:4px;min-height:64px}.kw-major{position:static;display:flex;gap:3px;justify-content:center}.kw-minor{position:absolute;right:0;top:4px;display:flex;flex-direction:row;gap:3px}.v-star{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;line-height:1.08;flex-shrink:0}.v-star>span{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:0}.kw-major .v-star>span{font-size:19.2px;font-weight:700}.kw-minor .v-star>span{font-size:13.12px}.energy{display:none}.v-badge{font-size:13px;line-height:1.1;font-weight:700;border:0;padding:0;margin-top:1px;background:none}.kw-mini{display:flex;align-items:flex-start;flex-wrap:wrap;gap:3px;margin-top:0;padding-top:3px;position:static;width:auto;max-height:none;overflow:visible}.kw-mini>span,.kw-bottom-misc>span{writing-mode:vertical-rl;text-orientation:upright;font-size:13.6px;line-height:1.05}.kw-bottom-row{display:flex;justify-content:space-between;align-items:flex-end;gap:4px;padding-top:1px;min-height:35px}.kw-bottom-misc{display:flex;gap:2px;align-items:flex-start}.kw-age{position:static;flex:1;font-size:12.48px;text-align:center;line-height:1.35;white-space:nowrap}.kw-palace{position:static;display:flex;gap:2px;align-items:flex-end}.kw-palace>*{writing-mode:vertical-rl;text-orientation:upright;font-size:12.48px;line-height:1.1}.kw-palace>span{font-size:12.48px;font-weight:400}.kw-flow-destiny{display:flex;flex-wrap:wrap;gap:4px;min-height:22px;flex-shrink:0;margin-top:auto;padding-top:6px;padding-bottom:3px}.flow-destiny-marker{display:inline-block;border-radius:3px;color:#fff;font-size:11px;font-weight:700;line-height:18px;padding:1px 5px;white-space:nowrap}.destiny-legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:12px}.flat-center{grid-area:2/2/4/4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:20px;background:#f7f8fb;border:1px solid #d7dbe2;border-radius:8px;font-size:13px;color:#000;line-height:1.7}.flat-center b{font-size:16px}.flat-center small{font-size:11px;color:#535d6d}.flat-center hr{width:40px;border:0;border-top:1px solid var(--line);margin:10px}.reading-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 20px 18px;border-bottom:1px solid var(--line)}.reading-tools label{min-width:260px}.reading-tools>span{font-size:11px;line-height:1.8;color:#5b6574}.scene-hud{position:absolute;top:12px;left:50%;transform:translateX(-50%);padding:9px 14px;background:#fffffff2;color:#27303f;border:1px solid #d8dde5;border-radius:6px;max-width:90%;font-size:12px;line-height:1.6;pointer-events:none;text-align:center;z-index:1}.workspace,.workspace.flat-reading{grid-template-columns:205px minmax(0,1fr)}.workspace .right-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}.workspace #details{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}.workspace .palace-picker{max-width:380px}.workspace #evidence .evidence{display:flex;flex-wrap:wrap;align-items:center;gap:18px}.workspace #evidence .evidence>div{border:0}.workspace #evidence .evidence>.section-heading{width:100%}
.table-wrap{overflow:auto;background:white;border:1px solid var(--line);border-radius:10px}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}td,th{padding:15px 20px;border-bottom:1px solid var(--line)}th{background:#edf0f5;font-size:11px}tr:nth-child(even){background:#fafbfd}.rules-layout{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(380px,1.1fr);gap:22px}.recipe-card,.scan-card,.explain{background:white;border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:15px}.recipe-card p{font-size:12px}.recipe-formula{color:#535d71;font-size:11px!important;line-height:2}.recipe-card .check-label{margin:0;font-size:13px}.pill{background:#fff0d5;color:#8c5c1d;padding:4px 7px;border-radius:4px;font-size:10px}.form-row{display:flex;gap:12px;margin:15px 0}.form-row>label{flex:1;min-width:0}.form-row label:first-child{flex:1.2}.form-row select{min-width:0}.scan-card progress{width:100%;height:6px;accent-color:var(--accent);margin-top:22px}.scan-card{align-self:start}#scanResults{max-height:580px;overflow:auto}#dayAlerts{max-height:260px;overflow:auto}summary{cursor:pointer;font-size:12px;font-weight:600}.explain p{font-size:11px;color:var(--muted)}.file-label{cursor:pointer}.condition-row{background:#f4f6fa;border:1px solid var(--line);border-radius:7px;padding:11px;margin-top:10px}.condition-row .form-row{margin:0}.relation-checks{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.relation-checks label{font-size:11px;display:flex;align-items:center}.condition-row input{max-width:100%}.condition-row .text-btn{font-size:22px}dialog{border:1px solid var(--line);border-radius:14px;padding:30px;width:min(480px,94vw);max-height:90vh;overflow:auto;box-shadow:0 25px 80px #15274444}dialog::backdrop{background:#202b3e77;backdrop-filter:blur(3px)}dialog h2{margin-bottom:22px}.close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:25px;color:var(--muted)}.large-dialog{width:min(710px,96vw)}dialog details{margin:20px 0}textarea{font:11px monospace!important;resize:vertical}footer{display:flex;justify-content:space-between;gap:20px;margin:17px 3px;font-size:9px;line-height:1.8;color:#606c7d}footer a{color:var(--accent)}@media(min-width:1500px){.workspace{grid-template-columns:235px minmax(500px,1fr) 290px}.scene{height:720px}}@media(max-width:1160px){.workspace{grid-template-columns:210px minmax(400px,1fr)}.right-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}#details{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.palace-picker{max-width:380px}.rules-layout{grid-template-columns:1fr}.scene{height:640px}.school{display:none}.header-note{display:none}}@media(max-width:720px){header{padding:12px 15px;height:auto;flex-wrap:wrap;gap:12px}.brand{font-size:20px}.brand>b{font-size:32px}nav{width:100%;gap:4px;justify-content:space-between}nav button{font-size:11px;padding:9px}main{padding:23px 10px}.intro h1{font-size:24px}.intro>.primary{font-size:10px;padding:9px}.intro p{font-size:10px}.workspace{display:flex;flex-direction:column}.left-panel{border-right:0;border-bottom:1px solid var(--line);padding:15px}.left-panel>h3:first-child{display:none}#layerControls{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.layer-control{padding:7px 3px;gap:3px}.layer-control b{font-size:11px}.layer-control small{font-size:8px}.layer-control>span{display:none}.date-buttons{grid-template-columns:repeat(4,1fr)}.date-parts{max-width:310px}.left-panel .birth-summary{font-size:10px}.left-panel input[type=range]{max-width:100%}.scene{height:530px}.board-toolbar{padding:12px 8px}.mode-switch button{font-size:9px;padding:8px 6px}.gesture{font-size:9px}#details{grid-template-columns:1fr 1fr;gap:10px}.right-panel{padding:20px 15px}.section-heading{flex-wrap:wrap}.section-heading>.button-row{margin-bottom:15px}.rules-layout{display:block}.form-row{gap:8px}.recipe-card,.scan-card{padding:15px}.large-dialog{padding:25px 16px}.transform-summary{font-size:11px;padding:12px 7px}.alert-top{flex-wrap:wrap}footer{flex-direction:column;gap:5px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@media print{header,.intro,.left-panel,.right-panel,.board-toolbar,.gesture,.today-alerts,footer{display:none}.workspace{display:block;border:0}.scene{display:none!important}.flat-board{display:grid!important}.board-panel{background:#fff}}

.strength-badge{display:block;width:fit-content;padding:4px 8px;border:1px solid #bcc4ca;background:#f3f5f6;color:#36424d;border-radius:5px;font-size:12px;font-weight:650}.strength-badge.strongest{background:#fff1df;color:#812c00;border-color:#c77a25}.ranking-editor{margin:20px 0;padding:16px;border:1px solid #d5d9dd;border-radius:8px}.ranking-editor legend{font-weight:650}.weight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.weight-grid input{min-width:0;width:100%}@media(max-width:600px){.weight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(min-width:1500px){.workspace,.workspace.flat-reading{grid-template-columns:220px minmax(0,1fr)}}@media(max-width:1160px){.workspace,.workspace.flat-reading{grid-template-columns:190px minmax(0,1fr)}.workspace #details{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:720px){.workspace,.workspace.flat-reading{display:flex;flex-direction:column}.workspace #details{grid-template-columns:repeat(2,minmax(0,1fr))}.reading-tools{align-items:flex-start;flex-direction:column;gap:8px;padding:12px}.reading-tools label{width:100%;min-width:0}.flat-scroll{padding:8px}.scene-hud{font-size:11px;width:90%}.workspace #evidence .evidence{display:block}.workspace #evidence .evidence>div{border-top:1px solid #e9ddbe}.board-toolbar{flex-wrap:wrap}}@media print{.flat-scroll{overflow:visible;padding:0;max-height:none!important}.flat-board{zoom:.48;margin:0 auto}.reading-tools{display:none}}

.sort-control{display:flex;align-items:center;gap:10px;margin:12px 0}.sort-control select{width:auto;max-width:260px;margin:0}.score-formula{font-size:11px;line-height:1.7;color:#56482d}.score-breakdown{width:100%;overflow-x:auto}.score-breakdown table{font-size:11px;min-width:370px;background:#fff}.score-breakdown caption{text-align:left;font-weight:600;padding:8px 0}.score-breakdown th,.score-breakdown td{padding:8px;border-bottom:1px solid #e6ddca}.score-breakdown tfoot{background:#fff2d6}.weight-grid+.weight-grid{margin-top:12px}

/* Keep the complete chart in the first viewport; scale its layout box as well as its pixels. */
.flat-scroll{overflow:hidden;position:relative;min-height:0}
.flat-fit-frame{position:relative;margin:0 auto;flex-shrink:0}
.flat-fit-frame .flat-board{position:absolute;left:0;top:0;margin:0;zoom:1;transform:scale(var(--flat-zoom,1));transform-origin:0 0}
body.chart-active>header{height:56px;padding:6px 2%;flex-wrap:nowrap}
body.chart-active>header .brand{font-size:18px}
body.chart-active>header .brand>b{font-size:28px}
body.chart-active>header .brand small{display:none}
body.chart-active>header nav{width:auto;gap:2px}
body.chart-active>header nav button{padding:8px;font-size:11px}
body.chart-active main{padding:10px 2%}
body.chart-active .intro{min-height:50px;margin-bottom:8px;gap:10px}
body.chart-active .intro .eyebrow{display:none}
body.chart-active .intro h1{font-size:20px;margin:0 0 3px}
body.chart-active .intro p{font-size:10px}
body.chart-active .board-toolbar{padding:8px}
body.chart-active #flatTools{padding:4px 10px 8px;gap:8px;flex-direction:row;align-items:center;flex-wrap:wrap}
body.chart-active #flatTools>span{display:none}
body.chart-active #flatTools>strong{font-size:11px}
body.chart-active .workspace>.left-panel{max-height:calc(100dvh - 140px);overflow:auto}
@media(max-width:720px){
 body.chart-active .workspace.flat-reading>.board-panel{order:-1;width:100%}
 body.chart-active .workspace>.left-panel{max-height:none;width:100%}
 body.chart-active>header .school{display:none}
 body.chart-active>header .brand{font-size:14px;letter-spacing:0;gap:4px}
 body.chart-active>header .brand>b{display:none}
 body.chart-active>header nav button{font-size:10px;padding:6px 4px}
 body.chart-active .intro h1{font-size:17px}
 body.chart-active .intro>.primary{font-size:10px;padding:7px}
}
@media print{.flat-scroll{height:auto!important;overflow:visible!important}.flat-fit-frame{width:700px!important;height:700px!important}.flat-fit-frame .flat-board{zoom:1;transform:scale(.48)}}

/* Kankanwoo reference: major 19.2 px, minor 13.12 px at a readable palace size. */
.flat-board{font-size:calc(13.12px * var(--label-boost,1))}
.flat-cell{font-size:inherit;padding:.22em .3em .18em;gap:0;line-height:1.08}
.flat-cell.selected{padding:calc(.22em - 1px) calc(.3em - 1px) calc(.18em - 1px)}
.kw-top-left{font-size:.8em;left:.25em;top:.25em}
.kw-top-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;min-height:3.3em;padding-top:.15em;flex-shrink:0}
.kw-major{gap:.24em;justify-content:center;padding-left:.6em}
.kw-minor{position:static;gap:.15em;max-width:100%;justify-content:flex-end}
.kw-major .v-star>span{font-size:1.4634em}
.kw-minor .v-star>span{font-size:1em}
.kw-flow-destiny{justify-content:flex-end;gap:.2em;min-height:1.3em;padding:.15em 0;flex-wrap:nowrap}
.flow-destiny-marker{font-size:.78em;line-height:1.25;padding:.05em .22em;border-radius:.2em}
.kw-mini{gap:.17em;padding-top:.1em;flex-wrap:nowrap;flex-shrink:0}
.kw-mini>span,.kw-bottom-misc>span{font-size:1.0366em;line-height:1.04}
.kw-bottom-row{gap:.2em;padding-top:.18em;min-height:2.3em;flex-shrink:0}
.kw-bottom-misc{gap:.15em}
.kw-age,.kw-palace>*,.kw-palace>span{font-size:.9512em}
.kw-palace{gap:.1em}
.kw-age{line-height:1.2}
.flat-center{font-size:1em;gap:.45em;padding:1em;line-height:1.45}
.flat-center b{font-size:1.2em}
.flat-center small{font-size:.85em}
.flat-center hr{margin:.3em}
.destiny-legend{font-size:.92em;gap:.2em .65em}

/* Native and moving small stars use one right-anchored set of vertical columns. */
.kw-top-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2em;align-items:start;min-height:3.3em}
.kw-minor{display:flex;direction:ltr;flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;gap:.3em .15em;width:calc(var(--minor-columns,0) * 1.15em);max-width:none;margin-left:auto;padding:0;position:static}
.kw-minor .v-star{width:1em;flex:0 0 1em}
.flat-board .v-star{display:inline-flex;position:static;flex-direction:column;align-items:center;gap:0;padding:0;white-space:nowrap}
.flat-board .v-star .star-name{writing-mode:vertical-rl;text-orientation:upright;line-height:1.08}
.flat-board .v-star .v-badge{position:static;inset:auto;display:block;align-self:center;writing-mode:horizontal-tb;font-size:.95em;line-height:1.05;margin:.06em 0 0;padding:0;border:0;background:none}
.kw-minor .v-star .star-name{font-size:1em;font-weight:500}

/* Major stars stay at the palace's true top center; small stars stack independently on the right. */
.kw-top-row{position:static;display:block;min-height:3.3em}
.kw-major{position:absolute;top:.3em;left:50%;transform:translateX(-50%);width:max-content;display:flex;justify-content:center;padding:0;gap:.24em}
.kw-right-stack{position:absolute;top:.3em;right:.3em;display:flex;flex-direction:column;align-items:stretch;gap:.24em}
.kw-right-stack>.kw-minor{width:100%;margin:0;gap:.24em .15em;flex-shrink:0}
.kw-right-stack>.native-minor-row{min-height:2.16em}
.kw-flow-destiny{position:absolute;left:.3em;right:calc(var(--right-width) + .6em);bottom:4.9em;justify-content:flex-start;flex-wrap:wrap;margin:0}
.kw-mini{margin-top:auto;max-width:calc(100% - var(--right-width) - .6em)}

/* Compact reading controls and use spare desktop width for palace details. */
.board-actions{display:flex;align-items:center;gap:5px}
body.chart-active #flatTools{padding:0;display:inline-flex}
.board-actions .quiet{padding:6px 9px;font-size:10px}
/* Use transform scaling: iOS text boosting can counteract CSS zoom. */
@media(min-width:1250px){
 .workspace,.workspace.flat-reading{grid-template-columns:190px minmax(0,1fr) 240px}
 .workspace .right-panel{grid-column:auto;align-self:start;border-top:0;border-left:1px solid var(--line);padding:16px 12px;max-height:calc(100dvh - 140px);overflow:auto}
 .workspace #details{display:block}
 .workspace .right-panel h2{font-size:20px;margin:8px 0}
 .workspace .palace-picker{margin:12px 0;gap:3px}
 .workspace .detail-card{padding:10px 0}
 .workspace .detail-card h3{margin-bottom:6px;flex-wrap:wrap}
 .workspace .detail-card p{margin:6px 0}
 .workspace #evidence .evidence{display:block;margin:10px 0;padding:8px}
 .workspace #evidence .evidence>div{padding:5px 0}
 .workspace .score-breakdown{overflow-x:auto}
}
@media print{.flat-fit-frame .flat-board{zoom:1;transform:scale(.48)}}

/* Five independent, synchronized high-resolution charts. */
.comparison-view{padding:4px 8px 8px;overflow:auto;background:#f8fafc}
.comparison-grid{display:grid;grid-template-columns:repeat(var(--compare-columns,3),var(--compare-side,280px));gap:12px;justify-content:center;align-content:start}
.comparison-card{min-width:0;background:#fff;border:1px solid color-mix(in srgb,var(--layer-color) 35%,white);border-radius:6px;overflow:hidden}
.comparison-card>header{height:32px;padding:0 9px;background:color-mix(in srgb,var(--layer-color) 6%,white);border:0;gap:4px}
.comparison-card h3{font-size:12px;color:var(--layer-color);margin:0}
.comparison-card .text-btn{color:var(--layer-color);font-size:10px}
.comparison-board{position:relative;aspect-ratio:8/9;width:100%;background:white}
.comparison-board canvas{display:block;width:100%;height:100%}
.comparison-hit-grid{position:absolute;inset:0;display:grid;grid-template:repeat(4,1fr)/repeat(4,1fr)}
.comparison-hit-grid button{background:transparent;border:0;padding:0;border-radius:0;min-width:0}
.comparison-hit-grid button:hover{background:color-mix(in srgb,var(--layer-color) 7%,transparent)}
.comparison-hit-grid button:focus-visible{outline:3px solid var(--layer-color);outline-offset:-4px}
.workspace.five-reading{grid-template-columns:190px minmax(0,1fr)}
.workspace.five-reading>.right-panel{display:none}
.compare-dialog{width:min(840px,94vw,calc(90dvh + 20px));padding:18px;max-height:96dvh}
.compare-dialog h2{font:600 16px 'Noto Sans TC',sans-serif;margin:0 24px 12px 0;color:var(--layer-color)}
.compare-dialog .comparison-board{max-width:calc((90dvh - 70px) * 8 / 9);margin:auto}
@media(max-width:720px){
 #layerControls{grid-template-columns:repeat(4,1fr)}
 .board-toolbar{flex-wrap:wrap}
 .mode-switch{flex-wrap:wrap}
 .workspace.five-reading>.board-panel{order:-1;width:100%}
}

/* Chart cells are controls, not editable text. Keep keyboard focus visible. */
.flat-board{caret-color:transparent}
.flat-cell,.flat-cell *{cursor:pointer;user-select:none;-webkit-user-select:none}

/* Additional flow stars have an independent left gutter, keeping main stars centered. */
.moving-minors-toggle{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:12px;cursor:pointer}
.moving-minors-toggle input{width:16px;height:16px;flex:none;accent-color:var(--accent)}
.moving-minors-toggle small{display:block;margin-top:3px;font-size:10px;color:var(--muted)}
.kw-moving-minors{position:absolute;left:.3em;top:2.1em;bottom:6.5em;width:2.5em;container-type:size;pointer-events:none}
.moving-minor-stack{display:flex;flex-direction:column;gap:.24em;font-size:min(1em,calc(100cqh / var(--moving-height)))}
.moving-minor-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:.15em;flex-shrink:0}
.moving-minor-row .star-name{font-size:1em;font-weight:500}

/* Compact application bar; reclaim the old introductory banner for the chart. */
body>header,body.chart-active>header{height:60px;padding:8px 2%;gap:16px;flex-wrap:nowrap}
body>header .brand,body.chart-active>header .brand{font-size:19px;letter-spacing:1px;white-space:nowrap;gap:8px}
body>header .brand>b{font-size:28px}
body>header nav{margin-left:auto;width:auto;gap:2px}
body>header nav button{font-size:11px;padding:8px;white-space:nowrap}
body>header #birthOpen{font-size:12px;padding:9px 13px;white-space:nowrap;flex-shrink:0}
body.chart-active .workspace>.left-panel{max-height:calc(100dvh - 86px)}
.comparison-controls{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 0 9px;flex-wrap:wrap}
.comparison-legend{display:flex;gap:9px;font-size:11px;white-space:nowrap}
.comparison-legend>span{display:flex;align-items:center;gap:3px}
.comparison-legend i{width:7px;height:7px;background:currentColor;border-radius:2px}
@media(max-width:780px){
 body>header,body.chart-active>header{height:auto;display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:8px 12px}
 body>header .brand,body.chart-active>header .brand{font-size:17px;letter-spacing:0}
 body>header nav,body.chart-active>header nav,.simple-app>header nav,.simple-app.chart-active>header nav{grid-row:2;grid-column:1/-1;width:100%;margin:0;justify-content:space-between}
 body>header #birthOpen{grid-row:1;grid-column:2;font-size:11px;padding:8px}
 body>header .brand>b{display:none}
}

/* Five comparison canvases on real aligned 3D planes. */
.stack-tools{padding:10px 12px;border-bottom:1px solid var(--line);background:#fff}
.stack-controls,.stack-reading{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stack-reading{justify-content:space-between;margin-top:9px}
.stack-controls .quiet{padding:7px 10px;font-size:11px}
.stack-range{display:flex;align-items:center;gap:6px;flex:1;min-width:130px;font-size:11px;margin:0}
.stack-range input{width:100%;min-width:65px;margin:0;accent-color:var(--accent)}
.stack-range output{min-width:24px;font-variant-numeric:tabular-nums}
.stack-focus{display:flex;gap:4px;flex-wrap:wrap}
.stack-focus button{border:1px solid color-mix(in srgb,var(--layer-color) 35%,white);background:white;border-radius:5px;color:var(--layer-color);padding:5px 8px;font-size:11px}
.stack-focus button[aria-pressed=true]{background:var(--layer-color);color:white}
.stack-transform-label{display:flex;align-items:center;gap:5px;font-size:11px;margin:0}
.stack-transform-label select{width:auto;font-size:11px;padding:5px;margin:0}
#scene.scene{height:clamp(370px,calc(100dvh - 240px),900px);overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#fff 20%,#eef2f7 100%)}
@media(max-width:720px){.workspace:not(.flat-reading):not(.five-reading)>.board-panel{order:-1;width:100%}.stack-tools{padding:8px}.stack-controls{gap:5px}#scene.scene{height:clamp(380px,calc(100dvh - 300px),700px)}}

.stack-presentation{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tower-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.tower-controls button{font-size:11px;padding:5px 8px;border:1px solid #cbd3df;border-radius:4px;background:#fff;color:#526077}
.tower-controls button[aria-pressed=true]{border-color:#697c9c;background:#edf2fa;color:#253b62}
#towerHint{font-size:11px;color:#626e80;margin-left:4px}

/* Compact recipe list; details are available inside the editor. */
.recipe-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;margin-bottom:10px;flex-wrap:wrap}
.recipe-card .check-label{flex:1;min-width:180px;font-size:14px}
.recipe-card .button-row{gap:16px;flex-shrink:0}
.rule-summary{margin:16px 0;padding:12px 14px;background:#f5f6fa;border:1px solid var(--line);border-radius:8px}
.rule-summary>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--accent)}
.rule-summary p{font-size:12px;margin:10px 0 0;overflow-wrap:anywhere}

/* A dedicated 3D stage: readable light chart cards on a quiet dark surround. */
body.scene-active{background:#0b1220}
body.scene-active main{max-width:none;padding:8px 12px 0}
body.scene-active>footer,body.scene-active main>footer{display:none}
.workspace.scene-reading{--ink:#ecf2ff;--muted:#a3b4cc;--line:#2a3b54;--accent:#b0cdff;grid-template-columns:180px minmax(0,1fr);background:#0d1727;border-color:#26374f;border-radius:14px;color:var(--ink)}
.workspace.scene-reading>.right-panel,.workspace.scene-reading .today-alerts{display:none}
.workspace.scene-reading>.board-panel{background:#0d1727;min-width:0}
.workspace.scene-reading>.left-panel{background:#111d30;border-color:var(--line);padding:16px 12px}
.workspace.scene-reading .left-panel input:not([type=checkbox]):not([type=range]),.workspace.scene-reading select{background:#19283e;border-color:#34475f;color:#edf4ff}
.workspace.scene-reading .left-panel .muted,.workspace.scene-reading .left-panel label,.workspace.scene-reading .birth-summary,.workspace.scene-reading .layer-control small{color:#aebed4}
.workspace.scene-reading .layer-control button{color:color-mix(in srgb,var(--color) 55%,#fff)}
.workspace.scene-reading .layer-control.selected{background:#21314a;border-color:#567394}
.workspace.scene-reading .calendar-switch,.workspace.scene-reading .mode-switch{background:#17283e}
.workspace.scene-reading .calendar-switch button,.workspace.scene-reading .mode-switch button{color:#b5c8e2}
.workspace.scene-reading .calendar-switch button.active,.workspace.scene-reading .mode-switch button.active{background:#d9e7fa;color:#172a43;box-shadow:none}
.workspace.scene-reading .quiet,.workspace.scene-reading .date-buttons button,.workspace.scene-reading .icon-btn,.workspace.scene-reading .tower-controls button{background:#1a2b43;border-color:#3a506c;color:#e4efff}
.workspace.scene-reading .tower-controls button[aria-pressed=true]{background:#d9e7fa;color:#192c48;border-color:#d9e7fa}
.workspace.scene-reading .stack-tools{background:#101d30;border-color:#293b53;padding:8px 12px}
.workspace.scene-reading .stack-focus button{background:#1a2a40;color:color-mix(in srgb,var(--layer-color) 50%,#fff);border-color:#41556e}
.workspace.scene-reading .stack-focus button[aria-pressed=true]{background:#d8e8ff;color:#18304e;border-color:#d8e8ff}
.workspace.scene-reading .gesture,.workspace.scene-reading #towerHint{color:#a6bad5}
.workspace.scene-reading kbd{background:#22324a;border-color:#526984;color:#e8f2ff}
.workspace.scene-reading #scene{background:radial-gradient(ellipse at 50% 38%,#152238 0%,#0b1422 46%,#050a12 100%)}
.workspace.scene-reading.scene-sidebar-hidden{grid-template-columns:minmax(0,1fr)}
.workspace.scene-reading.scene-sidebar-hidden>.left-panel{display:none}
#towerPalace{width:auto;max-width:160px;margin:0;padding:6px 8px}
@media(pointer:coarse){
 .workspace.scene-reading button,.workspace.scene-reading select{min-height:44px}
 .workspace.scene-reading .stack-focus button{min-width:44px;padding:8px 10px}
 .workspace.scene-reading .stack-controls{gap:6px}
 .workspace.scene-reading .stack-range{min-height:44px}
 .workspace.scene-reading input[type=range]{height:22px}
 .workspace.scene-reading .stack-presentation{margin-bottom:6px}
 .workspace.scene-reading .stack-reading{margin-top:6px}
}
@media(min-width:721px) and (max-width:1366px) and (orientation:landscape){
 body.scene-active main{padding:6px}
 .workspace.scene-reading{grid-template-columns:164px minmax(0,1fr)}
 .workspace.scene-reading .stack-presentation{gap:6px}
 .workspace.scene-reading #towerHint{display:none}
 .workspace.scene-reading .stack-range{flex:1;min-width:145px}
 .workspace.scene-reading.scene-sidebar-hidden{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
 .workspace.scene-reading{display:flex;flex-direction:column}
 .workspace.scene-reading>.board-panel{order:-1;width:100%}
 .workspace.scene-reading .stack-transform-label{margin-left:auto}
}

/* Paired minor-star rows: shared font, baseline and row spacing across the board. */
.kw-right-stack,.kw-moving-minors{top:.3em}
.kw-right-stack>.kw-minor,.moving-minor-row{position:absolute;left:0;right:0;flex-wrap:nowrap;gap:.16em}
.kw-right-stack>.native-minor-row{min-height:0}
.kw-moving-minors{bottom:auto;height:13em;width:2.32em;container-type:normal}
.moving-minor-stack{position:relative;display:block;font-size:inherit;height:100%}
.moving-minor-row .v-star{width:1em;flex:0 0 1em}
.jpg-export{margin-top:14px}
.jpg-export .quiet{width:100%;min-height:40px}
.jpg-export small{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:5px}

.stack-major-toggle{display:flex;align-items:center;gap:6px;min-height:44px;margin:0;font-size:12px;white-space:nowrap;cursor:pointer}.stack-major-toggle input{width:18px;height:18px;margin:0;accent-color:#b0cdff}

/* Larger flat-reading small stars; keep the existing paired row anchors. */
.flat-board .kw-minor .v-star,.flat-board .moving-minor-row .v-star{width:1.18em;flex:0 0 1.18em}
.flat-board .kw-minor .star-name,.flat-board .moving-minor-row .star-name{font-size:1.18em;line-height:1}
.flat-board .kw-minor .v-badge,.flat-board .moving-minor-row .v-badge{line-height:1;margin-top:.04em}
.flat-board .kw-moving-minors{width:2.52em}

/* Connected, traditional chart typography and geometry, matching the retro reference. */
.flat-board{position:relative;gap:0;background:#fff;border:0;border-radius:0;box-shadow:none;font-family:"Retro Ming","Noto Serif TC","Songti TC","PMingLiU",serif;font-weight:400;box-sizing:content-box}
.flat-board .retro-cell{container-type:inline-size;display:block;position:relative;border:0;border-radius:0;padding:0;gap:0;background:#fff;color:#000;box-shadow:none;overflow:hidden;font:inherit}
.flat-board .retro-cell:hover{background:#fffdf7}
.flat-board .retro-cell.selected{padding:0;border:0;background:#fff;box-shadow:none}
.flat-board .retro-cell:focus-visible{outline:4px solid #b88c33;outline-offset:-5px}
.retro-cell .kw-major,.retro-cell .kw-right-stack,.retro-cell .kw-moving-minors{display:contents;position:static;transform:none}
.flat-board .retro-cell .v-star{position:absolute;display:flex;flex-direction:column;align-items:center;width:1em;gap:0;line-height:1;font-weight:400}
.flat-board .retro-cell .star-name{display:block;font-size:1em;font-weight:400;writing-mode:horizontal-tb;text-orientation:mixed;width:1em;line-height:1;letter-spacing:0}
.flat-board .retro-cell .v-badge{position:static;display:block;font-size:.95em;line-height:1;margin:0;font-weight:400}
.retro-triangle{position:absolute;top:-.86em;left:50%;transform:translateX(-50%);width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-bottom:.6em solid currentColor;font-size:1em;line-height:0;font-style:normal;writing-mode:horizontal-tb;pointer-events:none}
.retro-glyph{position:absolute;display:block;white-space:pre;line-height:1;font-weight:400;letter-spacing:0}
.retro-cell .flow-destiny-marker{border:0;border-radius:0;padding:0;line-height:1}
.flat-board .retro-center{container-type:inline-size;position:relative;display:block;grid-row:2 / 4;grid-column:2 / 4;padding:0;border:0;border-radius:0;background:#fff;color:#000;font:inherit;overflow:hidden}


.flat-board{--palace-height:405px;grid-template-rows:repeat(4,var(--palace-height));height:calc(var(--palace-height)*4)}
.flat-board .retro-cell{height:var(--palace-height);min-height:0;aspect-ratio:auto}

.flat-board .retro-cell .v-star,.flat-board .retro-cell .star-name,.flat-board .retro-cell .v-badge{font-family:"Retro Ming","Noto Serif TC","Songti TC","PMingLiU",serif;font-style:normal;font-weight:400;letter-spacing:0}

.birth-records{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}.birth-records .button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.birth-records p{margin:6px 0}#birthDialog{max-height:92dvh;overflow-y:auto}

.retro-cell .retro-natal-detail .retro-triangle{top:-.7em}

.layout-dialog{width:min(430px,92vw)}.ratio-presets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.ratio-presets [aria-pressed="true"]{background:#edf0f7;border-color:#757ca8;color:#343b78}.slot-preview{position:relative;width:130px;border:1px solid #111;background:#fff;margin:20px auto;font:24px "Retro Ming",serif;text-align:center;padding:8px}.slot-preview small{position:absolute;right:8px;bottom:8px;font-size:16px}.layout-dialog input[type=range]{height:28px;margin:8px 0}.layout-dialog output{display:block;text-align:center;font-variant-numeric:tabular-nums}

.retro-grid-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}

.date-buttons .today-button{grid-column:1/-1;border-color:#a5adbf;background:#edf0f7;color:#343b78;font-weight:600;min-height:32px}

.compare-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:28px;margin-bottom:8px}.compare-dialog-heading h2{margin:0}.compare-export-status{margin:0 0 6px;min-height:1.4em;color:var(--muted)}

/* Aligned layer controls share one checkbox column and type scale. */
.left-panel .layer-control,.left-panel .moving-minors-toggle{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:10px;margin:4px 0;padding:8px 9px;border:1px solid transparent;border-radius:7px;font-size:13px;line-height:1.4}
.left-panel .layer-control.selected{border-color:color-mix(in srgb,var(--color) 35%,white)}
.left-panel .layer-control input,.left-panel .moving-minors-toggle input{width:16px;height:16px;margin:0}
.left-panel .layer-control button,.left-panel .moving-minors-toggle>span{padding:0;font-size:13px;font-weight:600;line-height:1.4;text-align:left}
.left-panel .layer-control b{font-size:13px;font-weight:600}
.left-panel .layer-control small,.left-panel .moving-minors-toggle small{display:block;margin-top:3px;font-size:11px;font-weight:400;line-height:1.4}
.layout-dialog #chartFont{margin-bottom:18px}

.flat-board,.flat-board .retro-cell .v-star,.flat-board .retro-cell .star-name,.flat-board .retro-cell .v-badge,.slot-preview{font-family:var(--chart-font,"Retro Ming",serif)}

/* Simplified edition: a visible birth form, with optional flow layers below. */
.simple-app .workspace,.simple-app .workspace.flat-reading,.simple-app .workspace.five-reading{grid-template-columns:270px minmax(0,1fr)}
.simple-app .left-panel{padding:18px 16px}
.inline-birth-form>h3{margin-bottom:14px;font-size:14px}
.inline-birth-form>label{margin-bottom:12px}
.inline-birth-form .form-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;margin:12px 0}
.inline-birth-form .form-row select{width:100%;padding:8px 5px}
.inline-birth-form>.primary{margin-top:3px;padding:10px}
.inline-birth-form>.birth-summary{margin-top:10px;border:0;padding:0;font-size:10px}
.inline-birth-form>.small{margin:4px 0 10px;font-size:10px}
.saved-birth-records{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.saved-birth-records>summary,.flow-options>summary{min-height:30px;line-height:30px}
.saved-birth-records .birth-records{border:0;padding-top:4px;margin-top:0}
.saved-birth-records .button-row{gap:6px}
.saved-birth-records .quiet{padding:7px 9px;font-size:11px}
.flow-options{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}
.flow-options summary span{float:right;font-size:10px;font-weight:400;color:var(--muted)}
.flow-options>p{font-size:10px;margin:5px 0}
.flow-options .layer-control{margin:3px 0;padding:8px 0}
.flow-options .moving-minors-toggle{margin-bottom:0;padding:8px 0}
.simple-app #details{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media(max-width:1000px) and (min-width:721px){.simple-app .workspace,.simple-app .workspace.flat-reading,.simple-app .workspace.five-reading{grid-template-columns:245px minmax(0,1fr)}}
@media(max-width:780px){.simple-app>header nav,.simple-app.chart-active>header nav{grid-row:auto;grid-column:auto;width:auto;justify-content:flex-end}.simple-app>header{grid-template-columns:1fr auto}}
@media(max-width:720px){
 .simple-app .workspace,.simple-app .workspace.flat-reading,.simple-app .workspace.five-reading{display:flex;flex-direction:column}
 .simple-app.chart-active .workspace>.left-panel{max-height:none;overflow:visible}
 .simple-app .workspace.five-reading>.board-panel{order:0}
 .inline-birth-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
 .inline-birth-form>h3,.inline-birth-form>#birthDate,.inline-birth-form>.form-row,.inline-birth-form>.error,.inline-birth-form>.primary,.inline-birth-form>.birth-summary,.inline-birth-form>.saved-birth-records{grid-column:1/-1}
 .inline-birth-form>.small{align-self:center}.inline-birth-form>label{margin:0}
 .inline-birth-form .form-row{grid-template-columns:1fr 2fr;margin:0}
 .inline-birth-form>h3{margin-bottom:0}.inline-birth-form>.birth-summary{margin-top:0}
 .simple-app .left-panel .date-parts{max-width:none}
 .flow-options #layerControls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px}
}

.jpg-settings{border-top:1px solid #dce0e5;margin-top:22px;padding-top:16px}.jpg-settings h3{margin:0 0 14px}.jpg-settings output{margin-top:10px}

/* A slightly darker surround gives the white chart a clearer visual focus. */
@media screen{
 .simple-app{--bg:#e3e7ed;--line:#cbd2dc}
 .simple-app>header{background:#e9edf2}
 .simple-app .workspace,.simple-app .left-panel,.simple-app .right-panel{background:#edf0f4}
 .simple-app .board-panel,.simple-app .comparison-view{background:#e1e6ed}
 .simple-app .board-toolbar{background:#e5e9ef;border-bottom:1px solid var(--line)}
}


/* Settings occupy the existing sidebar; the chart remains unobstructed. */
.settings-open>.left-panel>:not(#layoutDialog){display:none!important}
.simple-app .layout-dialog{position:relative;width:100%;padding:0;border:0;box-shadow:none;background:transparent}
.layout-dialog h2{font-size:20px;margin:0 32px 14px 0}
.layout-dialog .close{top:-8px;right:-4px}
.layout-dialog .slot-preview{width:80px;font-size:18px;margin:12px auto}
.layout-dialog .slot-preview small{font-size:12px}
.layout-dialog .ratio-presets{gap:5px;margin:12px 0}
.layout-dialog .ratio-presets button{padding:7px;font-size:11px}
.layout-dialog label{margin-top:12px}
.layout-dialog .small{font-size:11px}
@media(max-width:720px){
 .simple-app .workspace.settings-open>.left-panel{order:-2;max-height:35dvh!important;overflow:auto!important}
}

@media(max-width:720px){.settings-star-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-star-controls label{font-size:12px}}

.board-panel>#evidence:empty{display:none}.board-panel>#evidence:not(:empty){padding:12px}

/* Saved charts: searchable collection, with local JSON compatibility. */
.records-open{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.records-open>span{min-width:22px;padding:2px 6px;border-radius:20px;background:#e2e8f1;font-size:11px;color:#45556c}
.records-dialog{width:min(960px,calc(100vw - 32px));max-width:960px;max-height:85dvh;padding:28px;background:#f5f7fa;border:1px solid #d8dfe9;border-radius:16px;overflow:auto;color:#212733}
.records-dialog::backdrop{background:rgba(20,31,49,.42);backdrop-filter:none}
.records-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.records-header h2{font-size:26px;margin:5px 0 8px}.records-header p{margin:0}
.records-header .close{position:static;flex-shrink:0;font-size:24px;line-height:1;width:36px;height:36px}
.records-tools{display:grid;grid-template-columns:minmax(0,1fr) 155px;gap:16px;margin:24px 0 14px}
.records-tools label{display:grid;gap:7px;margin:0;font-size:12px}.records-tools input,.records-tools select{width:100%;min-width:0;background:#fff}
.records-actions{display:flex;flex-wrap:wrap;gap:8px}.records-actions button{font-size:12px;min-height:38px}
.records-feedback{display:flex;align-items:center;gap:10px;min-height:28px;margin-top:8px}.records-feedback p{margin:0}
.records-total{margin:12px 0;font-size:12px;color:#667080}
.records-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:14px}
.record-card{min-width:0;background:#fff;border:1px solid #dbe1ea;border-radius:12px;padding:18px;box-shadow:0 2px 5px #20314905}
.record-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.record-card-heading h3{font-size:17px;margin:0;overflow-wrap:anywhere}.record-gender{flex-shrink:0;padding:4px 8px;border-radius:5px;background:#edf1f7;color:#526077;font-size:11px}
.record-facts p{margin:5px 0;font-size:12px;color:#667080}.record-card-actions{border-top:1px solid #edf0f5;padding-top:14px;margin-top:16px;display:flex;justify-content:space-between;gap:10px}.record-card-actions button{font-size:12px}
.records-empty{grid-column:1/-1;text-align:center;padding:44px 20px;border:1px dashed #cbd4e0;border-radius:12px;background:#fff}.records-empty h3{font-size:17px}.records-empty p{font-size:13px;line-height:1.8}
.scan-birth-context{margin:12px 0;padding:12px;border:1px solid #dce2ec;border-radius:8px;background:#f2f5f9;font-size:12px;line-height:1.8}.scan-birth-context p{margin:0}.scan-birth-context button{padding:4px 0}
@media(max-width:780px){body>header,body.chart-active>header{grid-template-columns:minmax(0,1fr) auto}body>header nav,body.chart-active>header nav,.simple-app>header nav,.simple-app.chart-active>header nav{grid-row:2;grid-column:1/-1;width:100%;justify-content:flex-start}.records-open{grid-row:1;grid-column:2;font-size:11px;padding:8px}.records-dialog{padding:20px;max-height:90dvh}}
@media(max-width:520px){.records-grid{grid-template-columns:minmax(0,1fr)}.records-tools{grid-template-columns:minmax(0,1fr) 110px;gap:10px}.records-header h2{font-size:23px}.records-dialog{width:calc(100vw - 20px);padding:18px}.records-actions{gap:6px}.records-actions button{padding:8px}}

.scan-diagnosis{margin-top:16px;border:1px solid #d8dfeb;border-radius:10px;background:#fff;padding:18px}
.scan-diagnosis>h3{font-size:16px;margin:0 0 10px}.scan-diagnosis p,.scan-diagnosis li{font-size:12px;line-height:1.8}
.scan-diagnosis article{padding:16px 0;border-top:1px solid #e3e7ef}.scan-diagnosis h4{margin:0 0 8px;font-size:14px}.scan-diagnosis ul{padding-left:20px;margin:8px 0}
.scan-diagnosis details{margin-top:14px}.scan-diagnosis summary{font-size:12px;color:#426187;cursor:pointer}.scan-diagnosis .condition-checks{list-style:none;padding:0}.condition-checks li{padding:5px 0}.condition-checks span{font-weight:600}.condition-checks .passed span{color:#237340}.condition-checks .failed span{color:#a43c28}

/* Text actions live with the main navigation; the chart always fits itself. */
body>header nav .nav-utility,body.chart-active>header nav .nav-utility{border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--muted)}
body>header nav .nav-utility:hover,body>header nav .nav-utility[aria-expanded=true]{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
@media(max-width:780px){body>header nav,body.chart-active>header nav,.simple-app>header nav,.simple-app.chart-active>header nav{flex-wrap:wrap;row-gap:2px}}

/* Keep app typography and precision chart geometry stable on iOS/iPadOS. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.flat-board{-webkit-text-size-adjust:none;text-size-adjust:none;font-synthesis:none}
.flat-board .retro-cell{-webkit-appearance:none;appearance:none}
.flat-board .retro-cell .star-character{display:block;width:1em;height:1em;line-height:1;font:inherit;text-align:center}
@media(max-width:720px){
 input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea,.inline-birth-form .form-row select{font-size:16px}
}

/* Reinforce ink only, in each glyph's own em units, without changing its box. */
.flat-board :is(.star-character,.v-badge,.retro-glyph){-webkit-text-stroke:var(--chart-ink,0em) currentColor}

/* Match the reference's separated vertical characters in the shared drawing plan. */
.flat-board .retro-cell .star-character+.star-character{margin-top:var(--star-character-gap,0em)}
.flat-board .retro-cell .v-badge{margin:var(--star-badge-gap,var(--star-character-gap,0em)) 0 0}
#resetLayout{margin:8px 0 16px}

.share-panel{padding:14px 0 18px;margin-bottom:16px;border-bottom:1px solid var(--line,#b9ad98)}
.share-panel[hidden]{display:none}
.share-panel .section-heading h3{margin:0}
.share-panel #shareUrl{width:100%;min-width:0;font:12px/1.5 system-ui,sans-serif}
.share-panel .check-label{display:flex;align-items:center;gap:8px;margin:12px 0}
.share-panel .check-label input{width:auto;margin:0}
.share-panel #shareStatus:empty{display:none}

.share-export{margin-top:8px}
.share-export>#shareCopy{width:100%;min-height:40px}
.share-export .share-options{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.share-export .check-label{display:flex;align-items:center;gap:6px;margin:0;font-size:11px}
.share-export .check-label input{width:auto;margin:0}
.share-export #shareStatus{margin:6px 0;font-size:11px}
.share-export #shareStatus:empty{display:none}
.share-export .share-panel{margin:10px 0 0;padding:10px 0;border-bottom:0}

/* Recipe selection is mutually exclusive, including touch layouts. */
.recipe-card input[type=radio]{width:16px;height:16px;min-width:16px;padding:0;margin:0;flex:0 0 16px;appearance:auto;accent-color:var(--accent);box-shadow:none}

#scanAgeFields[hidden],#scanAgeHint[hidden]{display:none}
#scanRangeSummary{line-height:1.7;overflow-wrap:anywhere}