*,:before,:after{box-sizing:border-box}body{margin:0}:root{--red:#c0392b;--blue:#2c3e8f;--darkblue:#1a2660;--green:#1a7a3c;--black:#1a1a1a;--gray:#888;--border:#c8c8c8;--active-bg:#ffdab9;--badge-bg:#c0392b;--font:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;--fs-star:clamp(12px, 1.6vw, 16px);--fs-pinyin:clamp(10px, 1.3vw, 13px);--fs-small:clamp(11px, 1.4vw, 14px);--fs-name:clamp(12px, 1.6vw, 16px)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);color:var(--black);background:#f5f5f0}.app{flex-direction:column;align-items:center;min-height:100vh;padding:clamp(6px,1.5vw,16px);display:flex}.birth-form-wrap{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;display:flex}.app-title{letter-spacing:2px;font-size:clamp(22px,4vw,32px);font-weight:700}.app-subtitle{color:var(--gray);font-size:13px}.birth-form{border:1px solid var(--border);background:#fff;border-radius:8px;flex-direction:column;gap:14px;width:90vw;min-width:300px;max-width:400px;padding:24px 32px;display:flex}.form-row{align-items:center;gap:8px;font-size:14px;display:flex}.form-row label{flex-shrink:0;width:80px;font-weight:600}.label-en{color:var(--gray);font-size:11px;font-weight:400}.unit-label{color:var(--gray);font-size:12px}.input-year{border:1px solid var(--border);border-radius:4px;width:68px;padding:4px 6px;font-size:14px}.input-md{border:1px solid var(--border);text-align:center;border-radius:4px;width:48px;padding:4px 6px;font-size:14px}.input-name{border:1px solid var(--border);border-radius:4px;flex:1;padding:4px 8px;font-size:14px}.select-time{border:1px solid var(--border);border-radius:4px;flex:1;padding:4px 6px;font-size:14px}.form-row select{border:1px solid var(--border);border-radius:4px;padding:4px 6px;font-size:14px}.radio-label{cursor:pointer;align-items:center;gap:4px;display:flex}.btn-submit{color:#fff;cursor:pointer;letter-spacing:2px;background:#2d2d3a;border:none;border-radius:6px;margin-top:8px;padding:10px;font-size:16px}.btn-submit:hover{background:#1a1a26}.form-error{color:#c0392b;padding:6px 0;font-size:13px}.chart-wrapper{width:100%;max-width:980px}.chart-grid{border:1px solid var(--border);background:#fff;grid-template-rows:repeat(4,clamp(110px,30vw,245px));grid-template-columns:repeat(4,1fr);display:grid;position:relative}.three-side-svg{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0}.palace-cell{border:1px solid var(--border);z-index:1;cursor:pointer;background:#fff;flex-direction:column;gap:0;padding:clamp(1px,.4vw,5px);display:flex;position:relative;overflow:hidden}.palace-cell.active-decadal{background:var(--active-bg)}.palace-cell.clicked-palace{background:#e8edf8}.palace-top{justify-content:space-between;align-items:flex-start;gap:2px;margin-bottom:2px;display:flex}.palace-age{font-size:var(--fs-small);color:var(--gray);flex-shrink:0}.palace-overlay-ids{flex-direction:column;align-items:flex-end;gap:0;display:flex}.overlay-id{flex-direction:row;align-items:baseline;gap:2px;line-height:1.2;display:flex}.overlay-id .id-zh{font-size:clamp(10px,1.1vw,12px);font-weight:600}.overlay-id .id-en{color:inherit;opacity:.8;font-size:clamp(8px,.9vw,10px)}.star-content{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.star-group{flex-wrap:wrap;gap:0 3px;display:flex}.star-group.minor{margin-top:1px}.star-group.overlay-combined{border-top:1px dashed #bbb;margin-top:2px;padding-top:1px}.star-group.other-minor{border-top:1px dotted #ddd;margin-top:2px;padding-top:1px}.star{white-space:nowrap;flex-direction:row;align-items:baseline;gap:2px;line-height:1.3;display:inline-flex}.star-zh{font-size:var(--fs-star);color:inherit;font-weight:500}.star-pinyin{font-size:calc(var(--fs-pinyin) - 1px);color:inherit;opacity:.8}.star-red{color:var(--red)}.star-blue{color:var(--blue)}.star-darkblue{color:var(--darkblue)}.star-green{color:var(--green)}.star-black{color:var(--black)}.star-lightblue{color:#5a8ec0}.star-decadal{color:#9b6a30}.star-yearly{color:#1a7a6b}.brightness{display:none}.mutagen-badge{color:#fff;vertical-align:middle;border-radius:2px;flex-direction:column;align-items:center;margin-left:2px;padding:0 2px;line-height:1.2;display:inline-flex}.mutagen-badge.mutagen-origin{background:#c0392b}.mutagen-badge.mutagen-decadal{background:#9b6a30}.mutagen-badge.mutagen-yearly{background:#1a7a6b}.badge-zh{font-size:var(--fs-pinyin);font-weight:700}.badge-pinyin{font-size:calc(var(--fs-pinyin) - 2px);opacity:.9;font-weight:400}.palace-bottom{border-top:1px solid #eee;flex-shrink:0;justify-content:space-between;align-items:flex-end;padding-top:2px;display:flex}.identity-stack{flex-direction:column;justify-content:flex-end;gap:0;display:flex}.id-row{flex-direction:row;align-items:baseline;gap:2px;line-height:1.15;display:flex}.id-zh{font-size:var(--fs-small);font-weight:600}.id-en{color:inherit;opacity:.85;font-size:clamp(10px,1.2vw,13px)}.yearly-id .id-zh{color:#1a7a6b}.yearly-id .id-en{color:#1a7a6b;opacity:.8}.decadal-id .id-zh{color:#9b6a30}.decadal-id .id-en{color:#9b6a30;opacity:.8}.native-id .id-zh{color:var(--black)}.stem-row .id-zh,.sb-zh{font-size:var(--fs-small);color:var(--gray);font-weight:400}.stem-row .id-en,.sb-pinyin{font-size:calc(var(--fs-pinyin) - 1px);color:#aaa}.id-row.yearly-id .id-zh,.id-row.decadal-id .id-zh{font-size:clamp(10px,1.2vw,13px);font-weight:600;line-height:1.2}.id-row.yearly-id .id-en,.id-row.decadal-id .id-en{font-size:clamp(9px,1.1vw,12px)}.decadal-overlay-label{color:#9b6a30;font-weight:600}.yearly-overlay-label{color:#1a7a6b;font-weight:600}.palace-badges{gap:2px;display:flex}.badge{color:#fff;white-space:nowrap;border-radius:2px;padding:0 3px;font-size:clamp(9px,1vw,11px);line-height:1.5}.badge-minor{background:var(--blue)}.badge-decadal{background:#9b6a30}.badge-body{background:#555}.star-small .star-zh{font-size:var(--fs-small);font-weight:400}.star-small .star-pinyin{font-size:calc(var(--fs-pinyin) - 2px)}.star-tiny .star-zh{font-size:calc(var(--fs-pinyin) - 2px);color:var(--gray);font-weight:400}.center-cell{border:1px solid var(--border);z-index:1;background:#fff}.center-info{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:6px;height:100%;padding:clamp(8px,1.5vw,14px);display:flex}.center-name{letter-spacing:2px;font-size:clamp(20px,2.8vw,28px);font-weight:700}.center-time{font-size:clamp(22px,3.4vw,30px);font-weight:700}.center-time-en{color:var(--gray);font-size:clamp(12px,1.4vw,16px);font-weight:400}.center-gender{color:var(--gray);font-size:clamp(14px,1.5vw,17px)}.center-five{color:var(--gray);font-size:clamp(12px,1.3vw,15px)}.center-details{width:100%;font-size:clamp(13px,1.4vw,16px)}.detail-row{text-align:left;border-bottom:1px solid #f0f0f0;justify-content:space-between;gap:4px;padding:2px 0;display:flex}.detail-label{color:var(--gray);flex-shrink:0}.detail-sub{color:var(--gray)}.detail-value-small{font-size:clamp(8px,.9vw,11px)}.btn-reset{color:#fff;cursor:pointer;letter-spacing:1px;background:#2d2d3a;border:none;border-radius:4px;margin-top:4px;padding:5px 14px;font-size:clamp(10px,1vw,13px)}.btn-reset:hover{background:#1a1a26}.decadal-timeline{border:1px solid var(--border);background:#fff;border-top:none;width:100%;max-width:980px;display:flex;overflow:hidden}.timeline-cell{text-align:center;border-right:1px solid var(--border);cursor:pointer;flex:1 1 0;min-width:0;padding:4px 2px;line-height:1.5;transition:background .15s;overflow:hidden}.timeline-cell:hover:not(.timeline-active){background:#f0ece6}.timeline-cell:last-child{border-right:none}.timeline-cell.timeline-active{color:#fff;background:#9b6a30}.tl-label{white-space:nowrap;text-overflow:clip;font-size:clamp(11px,1.4vw,15px);font-weight:700;overflow:hidden}.tl-label-en{opacity:.85;font-size:clamp(9px,1vw,12px);font-weight:400}.tl-stem{font-size:clamp(11px,1.3vw,14px)}.tl-pinyin{opacity:.8;font-size:clamp(9px,1vw,12px)}.tl-age{opacity:.7;font-size:clamp(10px,1.05vw,12px)}.yearly-timeline{border:1px solid var(--border);background:#fff;border-top:none;width:100%;max-width:980px;display:flex;overflow:hidden}.yearly-cell{text-align:center;border-right:1px solid var(--border);cursor:pointer;flex:1 1 0;min-width:0;padding:4px 2px;line-height:1.4;transition:background .15s;overflow:hidden}.yearly-cell:hover:not(.yearly-active){background:#f0ece6}.yearly-cell:last-child{border-right:none}.yearly-cell.yearly-active{color:#fff;background:#1a7a6b}.yl-stem{font-size:clamp(11px,1.3vw,14px);font-weight:700}.yl-pinyin{opacity:.8;font-size:clamp(9px,1vw,12px)}.yl-year{opacity:.8;font-size:clamp(10px,1.1vw,13px)}.yl-age{opacity:.65;font-size:clamp(9px,.95vw,12px)}.center-btn-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.lang-toggle-inline{display:none}@media (width<=768px){.lang-toggle-inline{color:#444;cursor:pointer;background:#d0d0d0;border:none;border-radius:20px;padding:5px 14px;font-size:13px;font-weight:500;display:block}.lang-toggle-inline:active{opacity:.8}.id-row.yearly-id,.id-row.decadal-id,[data-lang=zh] .star-pinyin,[data-lang=zh] .id-en,[data-lang=zh] .sb-pinyin,[data-lang=zh] .badge-pinyin,[data-lang=zh] .tl-label-en,[data-lang=zh] .tl-pinyin,[data-lang=zh] .yl-pinyin,[data-lang=pinyin] .star-zh{display:none}[data-lang=pinyin] .star-pinyin{font-size:var(--fs-star);opacity:1;font-weight:500;display:inline!important}[data-lang=pinyin] .id-zh,[data-lang=pinyin] .sb-zh{display:none}[data-lang=pinyin] .sb-pinyin{font-size:var(--fs-small);opacity:1}[data-lang=pinyin] .badge-zh{display:none}[data-lang=pinyin] .badge-pinyin{font-size:var(--fs-pinyin);opacity:1;font-weight:700;display:inline!important}[data-lang=pinyin] .tl-label,[data-lang=pinyin] .tl-stem,[data-lang=pinyin] .yl-stem{display:none}}.chart-page{flex-direction:column;align-items:center;width:100%;display:flex}@media (width>=769px){.app.page-chart{height:100vh;padding:6px;overflow:hidden}.app.page-chart .chart-page{width:100%;max-width:980px;height:100%}.app.page-chart .chart-wrapper{flex:1;width:100%;min-height:0}.app.page-chart .chart-grid{grid-template-rows:repeat(4,1fr);height:100%}}.chart-topbar{align-items:center;width:100%;max-width:980px;padding:6px 8px;display:flex}.btn-back{border:1px solid var(--border);cursor:pointer;color:var(--black);background:0 0;border-radius:6px;padding:5px 14px;font-size:13px}.btn-back:hover{background:#f0ece6}.chart-list-page{background:#f5f3ee;flex-direction:column;width:100%;max-width:680px;min-height:100vh;display:flex}.chart-list-header{background:#f5f3ee;align-items:center;gap:12px;padding:14px 16px 10px;display:flex}.chart-list-title{text-align:center;letter-spacing:1px;flex:1;font-size:18px;font-weight:700}.btn-hamburger,.btn-add-chart{cursor:pointer;color:var(--black);background:0 0;border:none;padding:4px 8px;font-size:20px}.search-bar{background:#fff;border:1px solid #ddd;border-radius:10px;align-items:center;gap:8px;margin:0 16px 8px;padding:8px 14px;display:flex}.search-icon{color:#aaa;font-size:16px}.search-input{background:0 0;border:none;outline:none;flex:1;font-size:15px}.search-clear{color:#aaa;cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:14px}.chart-items{flex:1;padding:0 16px 24px;overflow-y:auto}.chart-empty{text-align:center;color:var(--gray);padding:40px 20px;font-size:14px}.chart-item{border-bottom:1px solid #e8e4df;align-items:center;gap:10px;padding:12px 0;display:flex}.chart-item-main{cursor:pointer;flex:1;align-items:center;gap:12px;min-width:0;display:flex}.chart-item-main:hover .chart-item-name{color:#9b6a30}.chart-gender-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;font-weight:700;display:flex}.chart-gender-icon.female{color:#e05a7a;border:2px solid #e05a7a}.chart-gender-icon.male{color:#3a8fff;border:2px solid #3a8fff}.chart-item-info{min-width:0}.chart-item-name{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.chart-item-date{color:var(--gray);margin-top:2px;font-size:13px}.chart-item-actions{flex-shrink:0;gap:6px;display:flex}.btn-edit{color:#555;cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;padding:4px 10px;font-size:13px}.btn-edit:hover{background:#f5f5f5}.btn-delete{color:#e05a7a;cursor:pointer;background:#fff;border:1px solid #e05a7a;border-radius:4px;padding:4px 10px;font-size:13px}.btn-delete.confirm{color:#fff;background:#e05a7a}.btn-delete:hover{opacity:.8}.sidebar-overlay{z-index:300;position:fixed;inset:0}.sidebar-backdrop{background:#0006;position:absolute;inset:0}.sidebar-drawer{z-index:1;background:#fff;flex-direction:column;width:280px;display:flex;position:absolute;top:0;bottom:0;left:0;box-shadow:2px 0 12px #00000026}.sidebar-title{letter-spacing:1px;border-bottom:1px solid #eee;padding:20px 24px 16px;font-size:17px;font-weight:700}.sidebar-account{color:var(--gray);border-bottom:1px solid #eee;align-items:center;gap:12px;padding:14px 24px;font-size:14px;display:flex}.sidebar-email{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sidebar-icon{flex-shrink:0;font-size:18px}.sidebar-item{cursor:pointer;text-align:left;width:100%;color:var(--black);background:0 0;border:none;align-items:center;gap:14px;padding:14px 24px;font-size:15px;display:flex}.sidebar-item:hover{background:#f5f5f5}.sidebar-item-logout{color:#e05a7a}.sidebar-sync-status{color:var(--gray);margin-left:auto;font-size:11px}.sidebar-footer{border-top:1px solid #eee;margin-top:auto;padding:16px 24px}.sidebar-privacy{color:var(--gray);cursor:pointer;background:0 0;border:none;padding:0;font-size:13px}.sidebar-privacy:hover{color:var(--black)}.modal-overlay{z-index:200;background:#00000080;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-box{background:#fff;border-radius:14px;width:min(480px,100%);max-height:90vh;padding:24px;position:relative;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-title{font-size:17px;font-weight:700}.modal-close{cursor:pointer;color:#aaa;background:0 0;border:none;padding:0 4px;font-size:18px;line-height:1}.modal-close:hover{color:var(--black)}.modal-field{margin-bottom:16px}.modal-field>label{color:var(--gray);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.modal-optional{font-size:11px;font-weight:400}.modal-input{width:100%;font-size:15px;font-family:var(--font);box-sizing:border-box;border:1px solid #ddd;border-radius:8px;outline:none;padding:10px 12px}.modal-input:focus{border-color:#9b6a30}.modal-date-row{align-items:center;gap:6px;display:flex}.modal-input-year{text-align:center;border:1px solid #ddd;border-radius:8px;width:76px;padding:10px 8px;font-size:15px}.modal-input-md{text-align:center;border:1px solid #ddd;border-radius:8px;width:52px;padding:10px 8px;font-size:15px}.modal-date-sep{color:var(--gray);font-size:14px}.gender-select{gap:12px;display:flex}.gender-btn{cursor:pointer;font-size:15px;font-family:var(--font);background:#fff;border:2px solid #ddd;border-radius:8px;flex:1;padding:12px;transition:all .15s}.gender-btn.selected.female{color:#e05a7a;background:#fff0f4;border-color:#e05a7a}.gender-btn.selected.male{color:#3a8fff;background:#f0f6ff;border-color:#3a8fff}.btn-confirm{background:var(--red);color:#fff;width:100%;font-size:16px;font-family:var(--font);cursor:pointer;letter-spacing:.5px;border:none;border-radius:8px;margin-top:8px;padding:14px}.btn-confirm:hover{background:#a93226}.btn-confirm:disabled{cursor:not-allowed;background:#ccc}.btn-cancel{width:100%;color:var(--gray);font-size:15px;font-family:var(--font);cursor:pointer;background:0 0;border:none;margin-top:4px;padding:12px}.btn-cancel:hover{color:var(--black)}.auth-box{max-width:400px}.auth-title{text-align:center;margin-top:8px;margin-bottom:24px;font-size:22px;font-weight:700}.pw-row{align-items:center;gap:8px;display:flex}.pw-row .modal-input{flex:1}.btn-show-pw{cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:18px}.auth-forgot-row{text-align:right;margin-bottom:8px}.auth-link{color:#e05a7a;cursor:pointer;font-size:14px;font-family:var(--font);background:0 0;border:none;padding:0}.auth-link:hover{text-decoration:underline}.auth-switch{text-align:center;color:var(--gray);margin-top:16px;font-size:14px}.form-success{color:#1a7a3c;background:#f0fff4;border-radius:6px;margin-bottom:8px;padding:8px 12px;font-size:13px}@media (width<=520px){.palace-cell{padding:2px}.palace-age{font-size:8px}.badge{padding:0 2px;font-size:8px}.center-name{font-size:clamp(14px,4vw,22px)}.center-time{font-size:clamp(16px,4.5vw,24px)}.center-details{font-size:clamp(10px,2.6vw,13px)}.btn-reset{padding:4px 10px;font-size:11px}}.privacy-box{max-width:520px;max-height:80vh;overflow-y:auto}.privacy-title{margin-bottom:20px;font-size:20px;font-weight:700}.privacy-body{flex-direction:column;gap:18px;display:flex}.privacy-body section h3{color:var(--black);margin-bottom:6px;font-size:14px;font-weight:700}.privacy-body section p{color:#333;margin-bottom:4px;font-size:13px;line-height:1.7}.privacy-en{color:var(--gray)!important;font-size:12px!important}