/* 玄知Lab theme (s-265, Pita 2026-09-29): same look as yuenchilab.com (rice paper, ink, cinnabar). Loaded LAST on app.html / ziwei.html. Night mode = , set by fn.setBackground. Only colours, type and layout live here; page markup and behaviour stay in the pages. */ @import url("https://fonts.googleapis.com/css2?family=Chiron+Sung+HK:wght@400;700&family=Noto+Serif+TC:wght@400;600;900&family=LXGW+WenKai+TC:wght@400&display=swap"); :root{ --yc-paper:#f2eadb; --yc-paper2:#e9dfcc; --yc-card:#fbf6ec; --yc-ink:#1c1a16; --yc-ink2:#4a443a; --yc-mute:#8a8070; --yc-red:#b0341f; --yc-gold:#a07c3f; --yc-line:rgba(28,26,22,.18); --yc-line2:rgba(28,26,22,.09); --yc-wood:#3d7650; --yc-fire:#b0341f; --yc-earth:#946528; --yc-metal:#8b7331; --yc-water:#2a4f7c; --yc-good:#b0341f; --yc-bad:#5a5347; --yc-violet:#6b4a86; --yc-serif:"Chiron Sung HK","Noto Serif TC",serif; --yc-brush:"LXGW WenKai TC","Noto Serif TC",serif; } html.yc-night{ --yc-paper:#15130f; --yc-paper2:#1d1a15; --yc-card:#1f1c17; --yc-ink:#ece3cf; --yc-ink2:#c2b8a3; --yc-mute:#8d8471; --yc-red:#e0694f; --yc-gold:#d2a862; --yc-line:rgba(236,227,207,.2); --yc-line2:rgba(236,227,207,.08); --yc-wood:#7fbf8f; --yc-fire:#ef7a5f; --yc-earth:#d6a25c; --yc-metal:#e0c878; --yc-water:#7fa7de; --yc-good:#ef7a5f; --yc-bad:#b9ae99; --yc-violet:#b99ad6; } /* ---------- base: pages, toolbar, lists, buttons, dialogs ---------- */ html body{background:var(--yc-paper) !important;color:var(--yc-ink);font-family:var(--yc-serif)} body .page__background,body .page-chart-bg .page__background,body .rd-bg .page__background{background:var(--yc-paper) !important} body .page__content,body .page-chart-bg .page__content,body .rd-bg .page__content{background:transparent !important;color:var(--yc-ink)} body .toolbar{background:color-mix(in srgb,var(--yc-paper) 94%,transparent) !important;border-bottom:1px solid var(--yc-line) !important;box-shadow:none !important;backdrop-filter:blur(6px)} body .toolbar__title,body .toolbar__center,body .center.toolbar__center.toolbar__title{color:var(--yc-ink) !important;font-family:var(--yc-serif);font-weight:700;letter-spacing:.08em;font-size:17px} body .toolbar-button,body .toolbar-button ons-icon,body .topicon{color:var(--yc-ink) !important;fill:var(--yc-ink) !important} body .list,body .list-item,body ons-list{background:transparent !important;color:var(--yc-ink) !important;background-image:none !important} body .list-item__center,body .list-item__right{border-color:var(--yc-line) !important;background-image:none !important} body .list-item--tappable:active,body .list-item.list-item--tappable:active{background:var(--yc-paper2) !important} body ons-splitter-side .page__background,body .splitter-side .page__background{background:var(--yc-card) !important;border-right:1px solid var(--yc-line)} body ons-splitter-side ons-list::before{content:"玄知Lab";display:block;padding:22px 18px 16px 58px;font-weight:700;font-size:19px;letter-spacing:.12em;color:var(--yc-ink); border-bottom:1px solid var(--yc-line);margin-bottom:6px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23b0341f'/%3E%3Crect x='2.5' y='2.5' width='27' height='27' rx='2' fill='none' stroke='%23f2d9c8' stroke-width='1'/%3E%3Ctext x='16' y='21' font-family='serif' font-size='12.5' font-weight='700' text-anchor='middle' fill='%23f7efe0'%3E%E7%8E%84%E7%9F%A5%3C/text%3E%3C/svg%3E") 18px 18px/30px 30px no-repeat} body ons-splitter-side .list-item{font-size:16px;letter-spacing:.06em} body .button,body ons-button{background:var(--yc-ink) !important;color:var(--yc-paper) !important;border:1px solid var(--yc-ink) !important;border-radius:0 !important;box-shadow:none !important;font-family:var(--yc-serif);letter-spacing:.06em} body .dialog-mask{background:rgba(20,16,10,.55) !important} body .dialog,body .dialog-container,body .alert-dialog{background:var(--yc-card) !important;color:var(--yc-ink) !important;border-radius:2px !important;border:1px solid var(--yc-line);box-shadow:0 30px 60px -30px rgba(0,0,0,.6) !important} body .alert-dialog-title,body .alert-dialog-content{color:var(--yc-ink) !important} body .alert-dialog-button{color:var(--yc-red) !important} body input,body select,body textarea{color:var(--yc-ink);font-family:var(--yc-serif)} body .text-input,body .alert-dialog input{color:var(--yc-ink) !important;caret-color:var(--yc-ink) !important;border-bottom:1px solid var(--yc-line) !important} html.yc-night body input[type=date],html.yc-night body input[type=time]{color-scheme:dark} /* explanation popup (測X / 格局 / 字典): ONE frame, not a frame inside a frame (Pita 2026-09-30: 「呢度兩個框有D怪」) */ body .toast{background:var(--yc-card) !important;color:var(--yc-ink) !important;border:1px solid var(--yc-ink);border-radius:0 !important;padding:0 !important; box-shadow:0 24px 50px -24px rgba(0,0,0,.55) !important;left:max(12px,calc(50% - 380px)) !important;right:max(12px,calc(50% - 380px)) !important;margin-bottom:12px !important} body .toast__message{position:relative;background:transparent !important;border:0 !important;border-radius:0 !important;padding:16px 18px 18px !important; color:var(--yc-ink) !important;font-size:15.5px;line-height:1.75;text-align:left;max-height:60vh;overflow:auto} body #dialog_desc_title{font-family:"Noto Serif TC",serif;font-weight:900;font-size:20px;letter-spacing:.08em;line-height:1.4;margin:0 84px 8px 0} body #dialog_desc_body{white-space:pre-line} body .toast__message button{position:absolute;top:14px;right:14px;background:transparent !important;color:var(--yc-ink) !important;border:1px solid var(--yc-ink) !important;border-radius:0; font-family:var(--yc-serif);font-size:13px;letter-spacing:.1em;line-height:1.3;padding:5px 12px;cursor:pointer} body .toast__message button:hover{border-color:var(--yc-red) !important;color:var(--yc-red) !important} body .closebt{background:var(--yc-ink) !important;color:var(--yc-paper) !important;border:0;padding:3px 10px} /* ---------- 奇門 home ---------- */ body .main-menu{background:var(--yc-paper) !important;background-image:none !important;height:auto !important;min-height:100%;max-width:560px;margin:0 auto;padding:18px 18px 40px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start} body .main-page .main-menu::before{content:"奇門遁甲・占事";grid-column:1/-1;font-size:13px;letter-spacing:.45em;color:var(--yc-red);margin-top:6px} body .main-page .main-menu::after{content:"問一件事，看此刻的局。";grid-row:2;grid-column:1/-1;font-family:"Noto Serif TC",serif;font-weight:900;font-size:26px;letter-spacing:.06em;margin-bottom:6px;color:var(--yc-ink)} body .main-menu .maincard-row{padding:0 !important;text-align:left} body .main-menu .maincard-row:first-child{grid-column:1/-1} body .main-menu .maincard-row.solar-row{grid-column:1/-1;order:9} body button.startdoor,body button.startdoor-custom,body .life-btn{width:100% !important;height:auto !important;min-height:112px;border-radius:0 !important;background:var(--yc-card) !important;background-image:none !important; border:1px solid var(--yc-ink) !important;color:var(--yc-ink) !important;box-shadow:none !important;font-family:"Noto Serif TC",serif !important;font-weight:900 !important;font-size:30px !important;letter-spacing:.14em; text-align:left;padding:34px 18px 14px !important;position:relative;text-shadow:none !important;line-height:1.2} body button.startdoor{background:var(--yc-ink) !important;color:var(--yc-paper) !important;min-height:130px;font-size:38px !important} html.yc-night body button.startdoor{background:#b0341f !important;border-color:#b0341f !important;color:#fff6ea !important} body button.startdoor::before,body button.startdoor-custom::before,body .life-btn::before{position:absolute;left:18px;top:12px;font-family:var(--yc-brush);font-weight:400;font-size:13px;letter-spacing:.1em;color:var(--yc-red)} body button.startdoor::before{content:"此刻起盤";color:#e8a08e} body button.startdoor-custom::before{content:"選時間・局數"} body .main-page .life-btn::before{content:"出生時間"} /* 紫微 home (ziwei.html has no .main-page) */ body .main-menu:has(.zw-start)::before{content:"紫微斗數・論命";grid-column:1/-1;font-size:13px;letter-spacing:.45em;color:var(--yc-red);margin-top:6px} body .main-menu:has(.zw-start)::after{content:"按出生時間，看一生的格局。";grid-row:2;grid-column:1/-1;font-family:"Noto Serif TC",serif;font-weight:900;font-size:26px;letter-spacing:.06em;margin-bottom:6px;color:var(--yc-ink)} body .main-menu:has(.zw-start) .maincard-row{grid-column:1/-1} body .main-menu:has(.zw-start) .life-btn{min-height:0;font-size:18px !important;padding:12px 18px !important;font-weight:700 !important} html.yc-night body button.startdoor::before{color:#ffd9cc} body .life-btn{font-size:26px !important;white-space:normal} body .solar-btn{width:100%;min-width:0 !important;border-radius:0 !important;flex-direction:row !important;justify-content:flex-start !important;gap:10px;padding:10px 14px !important; background:transparent !important;border:1px solid var(--yc-line) !important;color:var(--yc-mute) !important;box-shadow:none !important;font-size:14px !important;animation:none !important} body .solar-btn.on{color:var(--yc-ink) !important;border-color:var(--yc-gold) !important} body .solar-btn.on .solar-name{color:var(--yc-gold)} body .solar-btn .solar-place{font-size:13px !important;color:inherit} body .solar-btn.small{width:auto;padding:4px 10px !important} body .door-form-row .solar-btn span{width:auto !important;float:none !important} /* 「阿德萊德」衝出框 (Pita 2026-09-30): app.html 嘅 .door-form-row span{width:4em} 連掣入面啲字都中埋 */ /* forms inside dialogs */ body .door-form-row,body .zw-form-row{border-bottom:1px solid var(--yc-line) !important;color:var(--yc-ink)} body .door-form-row span,body .zw-form-row > span{color:var(--yc-mute) !important} body .door-form-input,body .zw-form-row input,body .zw-form-row select{background:transparent !important;color:var(--yc-ink) !important;border:0 !important} body .door-form-row button,body .zw-form-row.btns button{background:transparent !important;color:var(--yc-ink) !important;border:1px solid var(--yc-ink) !important;border-radius:0 !important;padding:6px 20px} body .door-form-row button:last-child,body .zw-form-row.btns button.go{background:var(--yc-ink) !important;color:var(--yc-paper) !important} body .zw-title,body .dialog p{color:var(--yc-ink) !important;font-weight:700;letter-spacing:.1em} body .zw-hint{color:var(--yc-mute) !important} /* ---------- 奇門 chart (table.loc_table) ---------- */ body #door_container{max-width:860px;margin:0 auto;padding:10px 6px 30px} body table.loc_table{border-collapse:collapse;color:var(--yc-ink) !important;background:transparent !important;font-family:var(--yc-serif)} body table.loc_table td{border-color:var(--yc-line) !important;color:var(--yc-ink)} body table.loc_table td:not(.dz-line):not(.dz-side){background:var(--yc-card) !important;border:1px solid var(--yc-line) !important} body table.loc_table tr:nth-child(2) td:not(.dz-side),body table.loc_table tr:nth-child(4) td:not(.dz-side){border-color:var(--yc-line) !important} body table.loc_table td.dz-line,body table.loc_table td.dz-side{background:transparent !important;color:var(--yc-ink2) !important;border:0 !important;font-family:var(--yc-brush)} body table.loc_table .zhi-year{color:var(--yc-mute) !important;font-family:var(--yc-serif)} body table.loc_table .luiyin{color:var(--yc-water) !important;font-family:"Noto Serif TC",serif;font-weight:700} body table.loc_table .astro_star{color:var(--yc-violet) !important} body table.loc_table .dr-power{background:transparent !important;color:var(--yc-red) !important;border:1px solid var(--yc-red);border-radius:2px !important;padding:0 3px;font-weight:600;text-shadow:none !important} body table.loc_table .木{color:var(--yc-wood) !important} body table.loc_table .火{color:var(--yc-fire) !important} body table.loc_table .土{color:var(--yc-earth) !important} body table.loc_table .金{color:var(--yc-metal) !important} body table.loc_table .水{color:var(--yc-water) !important} body table.loc_table .吉{color:var(--yc-good) !important} body table.loc_table .兇{color:var(--yc-bad) !important} body table.loc_table .平{color:var(--yc-mute) !important} body table.loc_table .location{font-weight:700} body table.loc_table .location2{color:var(--yc-mute) !important} body table.loc_table .god{font-weight:400} body table.loc_table .door.level3,body table.loc_table .door.level4,body table.loc_table .door.level5, body table.loc_table .star.level4,body table.loc_table .star.level5,body table.loc_table .location.level4,body table.loc_table .location.level5{border-color:currentColor !important;background:transparent !important} body table.loc_table .marks{color:var(--yc-mute) !important;font-family:"Noto Serif TC",serif} body table.loc_table .horse,body table.loc_table .empty{color:var(--yc-red) !important;border:1px solid var(--yc-red) !important;background:transparent !important;border-radius:0 !important} body table.loc_table .empty{color:var(--yc-mute) !important;border-color:var(--yc-mute) !important} body table.loc_table .tomb{color:var(--yc-mute) !important} body table.loc_table .angan{color:var(--yc-mute) !important} body table.loc_table .doordate,body table.loc_table .doorsolar,body table.loc_table .doorinfo{color:var(--yc-ink2) !important} body table.loc_table td:has(.doordate){background:var(--yc-paper2) !important} body table.loc_table .eightword{color:var(--yc-ink) !important;font-weight:700} body table.loc_table .eightword-title{color:var(--yc-mute) !important;font-weight:400} body table.loc_table .五合{color:var(--yc-ink2) !important} body .rp-chart td.rp-yong{outline-width:2px;outline-style:solid;outline-offset:-2px} body .rp-chart .rp-role,body .rp-chart .rp-tags span{background:var(--yc-red) !important;color:#fff !important;border-radius:0 !important} /* under the chart: 玄知分析 + 測X chips */ body .reading-cta{text-align:center;margin:18px 0 8px} body .reading-cta .reading-btn,body .reading-cta ons-button{background:var(--yc-ink) !important;color:var(--yc-paper) !important;border-radius:0 !important;font-size:20px !important;letter-spacing:.3em;padding:6px 40px !important;box-shadow:none !important} html.yc-night body .reading-cta .reading-btn{background:#b0341f !important;border-color:#b0341f !important;color:#fff6ea !important} body .tools{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:8px 4px} body .tools span{border:1px solid var(--yc-line) !important;border-radius:0 !important;background:transparent !important;color:var(--yc-ink2) !important;padding:2px 10px !important;margin:0 !important;font-size:14px} /* formation summary (phone): see .gm-sum in app.html */ body .gm-sum{display:none} body .gm-sum span{display:inline-block;font-size:10.5px;line-height:15px;padding:0 3px;border:1px solid currentColor;margin:1px 0 0 2px;white-space:nowrap;font-family:var(--yc-serif)} body .gm-sum .g{color:var(--yc-good)} body .gm-sum .b{color:var(--yc-bad)} /* ---------- question picker + reading ---------- */ body .pick-page{max-width:720px;margin:0 auto} body .pick-search{background:var(--yc-card) !important;color:var(--yc-ink) !important;border:1px solid var(--yc-line) !important;border-radius:0 !important} body .pick-head{color:var(--yc-red) !important;letter-spacing:.3em;font-size:13px} body .pick-item{background:var(--yc-card) !important;border:1px solid var(--yc-line) !important;border-radius:0 !important;box-shadow:none !important;color:var(--yc-ink) !important} body .pick-name{color:var(--yc-ink) !important;font-family:"Noto Serif TC",serif} body .pick-hint{color:var(--yc-mute) !important} body .reading-page{color:var(--yc-ink) !important;background:transparent !important} body .reading-page .rp-verdict{border-radius:50% !important;background:transparent !important;color:var(--yc-red) !important;border:2px solid var(--yc-red) !important;box-shadow:none !important;transform:rotate(-8deg);font-family:"Noto Serif TC",serif} body .reading-page .rp-summary{color:var(--yc-ink) !important} body .reading-page .rp-section,body .reading-page h3,body .reading-page h4{color:var(--yc-red) !important;letter-spacing:.2em} body .reading-page .rp-item{background:var(--yc-card) !important;border:0 !important;border-bottom:1px dashed var(--yc-line) !important;border-left:3px solid var(--yc-line) !important;border-radius:0 !important;box-shadow:none !important;color:var(--yc-ink) !important} body .reading-page .rp-y{background:var(--yc-card) !important} body .reading-page .rp-i-吉{border-left-color:var(--yc-good) !important} body .reading-page .rp-i-凶{border-left-color:var(--yc-bad) !important} body .reading-page .rp-i-中{border-left-color:var(--yc-gold) !important} body .reading-page .rp-tone{border-radius:0 !important} body .reading-page .rp-i-吉 .rp-tone{background:#b0341f !important;color:#fff !important} body .reading-page .rp-i-凶 .rp-tone{background:#3a352d !important;color:#fff !important} body .reading-page .rp-i-中 .rp-tone{background:#a07c3f !important;color:#fff !important} body .reading-page .rp-gu,body .reading-page .rp-foot,body .reading-page .rp-disclaimer,body .rp-note{color:var(--yc-mute) !important;font-family:var(--yc-brush)} body #reading_body .rp-jin{color:var(--yc-ink) !important} body .rp-v,body .rp-s{border-radius:0 !important;border:1px solid var(--yc-line) !important;background:transparent !important;color:var(--yc-ink2) !important} body .rp-v.on{border-color:var(--yc-red) !important;color:var(--yc-red) !important} /* invite / settings / about / records */ body .inv-wrap .inv-card{background:var(--yc-card) !important;border:1px solid var(--yc-line) !important;border-radius:0 !important;box-shadow:none !important;color:var(--yc-ink) !important} body .inv-wrap .inv-banner{background:transparent !important;color:var(--yc-red) !important;border-bottom:1px solid var(--yc-line)} body .inv-wrap .inv-url,body .inv-wrap input{background:var(--yc-paper) !important;color:var(--yc-ink) !important;border:1px solid var(--yc-line) !important;border-radius:0 !important} body .inv-wrap button{border-radius:0 !important;background:transparent !important;color:var(--yc-ink) !important;border:1px solid var(--yc-ink) !important} body .inv-wrap button.inv-main{background:var(--yc-ink) !important;color:var(--yc-paper) !important} body .inv-wrap .inv-note{color:var(--yc-mute) !important} body .setting-container,body .about-container{max-width:720px;margin:0 auto;color:var(--yc-ink)} body .place-label{color:var(--yc-mute) !important} body .place-select{background:var(--yc-card);border:1px solid var(--yc-line);border-radius:0} /* ---------- 紫微 (ziwei.html) ---------- */ body button.zw-start{border-radius:0 !important;width:auto !important;height:auto !important;min-width:220px;padding:22px 40px !important;background:var(--yc-ink) !important;border:1px solid var(--yc-ink) !important; color:var(--yc-paper) !important;box-shadow:none !important;font-family:"Noto Serif TC",serif !important;font-size:34px !important;letter-spacing:.3em} html.yc-night body button.zw-start{background:#b0341f !important;border-color:#b0341f !important;color:#fff6ea !important} body .zw-sub{color:var(--yc-mute) !important;font-family:var(--yc-brush)} body .zw-page{background:transparent !important;color:var(--yc-ink) !important;max-width:640px} body table.zw td{border-color:var(--yc-line) !important;background:var(--yc-card)} body table.zw{border:1.5px solid var(--yc-ink)} body table.zw td.zp.src{outline-color:var(--yc-gold) !important;background:color-mix(in srgb,var(--yc-gold) 10%,var(--yc-card)) !important} body table.zw td.zp.dx{background:color-mix(in srgb,var(--yc-water) 9%,var(--yc-card)) !important} body table.zw td.zp.ln{background:color-mix(in srgb,var(--yc-wood) 9%,var(--yc-card)) !important} body td.zc{background:var(--yc-paper2) !important;color:var(--yc-ink2)} body td.zc .ttl{color:var(--yc-ink) !important;font-family:"Noto Serif TC",serif;letter-spacing:.2em} body td.zc .note{color:var(--yc-red) !important} body td.zc .solar,body .gz{color:var(--yc-earth) !important} body .st .sn{color:var(--yc-ink2) !important} body .st.main .sn{color:var(--yc-ink) !important} body .h-祿{background:#3d7650 !important;border-color:#3d7650 !important} body .h-權{background:#a07c3f !important;border-color:#a07c3f !important} body .h-科{background:#2a4f7c !important;border-color:#2a4f7c !important} body .h-忌{background:#b0341f !important;border-color:#b0341f !important} body .hb{border-radius:2px !important} body .hb.o{background:var(--yc-card) !important} body .hb.o.h-祿,body .zh.h-祿{color:var(--yc-wood) !important} body .hb.o.h-權,body .zh.h-權{color:var(--yc-gold) !important} body .hb.o.h-科,body .zh.h-科{color:var(--yc-water) !important} body .hb.o.h-忌,body .zh.h-忌{color:var(--yc-red) !important} body .zh.h-祿,body .zh.h-權,body .zh.h-科,body .zh.h-忌{background:none !important} body .pn.life{background:#b0341f !important;border-radius:2px} body .tag{border-color:var(--yc-line) !important;color:var(--yc-ink2) !important;border-radius:0 !important} body .tag.laiyin{border-color:var(--yc-gold) !important;color:var(--yc-gold) !important} body .dec{color:var(--yc-mute) !important} body .ov.dx{background:var(--yc-water) !important} body .ov.ln{background:var(--yc-wood) !important} body .zw-sect,body .cm-yun,body .rd-sec{color:var(--yc-red) !important;letter-spacing:.2em;font-weight:400} body .chip{border-radius:0 !important;border-color:var(--yc-line) !important;background:var(--yc-card) !important;color:var(--yc-ink2) !important} body .chip.on.d{background:var(--yc-water) !important;color:#fff !important;border-color:var(--yc-water) !important} body .chip.on.y{background:var(--yc-wood) !important;color:#fff !important;border-color:var(--yc-wood) !important} body .chip.now{box-shadow:inset 0 0 0 2px var(--yc-gold) !important} body .flybox{background:var(--yc-card) !important;border:1px solid var(--yc-gold) !important;border-radius:0 !important;color:var(--yc-ink)} body .legend,body .zw-tip{color:var(--yc-mute) !important} body .zw-cta button{background:var(--yc-ink) !important;color:var(--yc-paper) !important;border-radius:0 !important;letter-spacing:.3em} html.yc-night body .zw-cta button{background:#b0341f !important;color:#fff6ea !important} body .rd{color:var(--yc-ink) !important;max-width:720px} body .rd-meta,body .rd-src,body .rd-note,body .cm-key,body .cm-ref{color:var(--yc-mute) !important} body .rd-item,body .cm-item{background:var(--yc-card) !important;border-radius:0 !important;box-shadow:none !important;border:0;border-bottom:1px dashed var(--yc-line);color:var(--yc-ink)} body .rd-item{border-left:3px solid var(--yc-line) !important} body .rd-item.h-祿{border-left-color:#3d7650 !important} body .rd-item.h-權{border-left-color:#a07c3f !important} body .rd-item.h-科{border-left-color:#2a4f7c !important} body .rd-item.h-忌{border-left-color:#b0341f !important} body .rd-item.h-祿,body .rd-item.h-權,body .rd-item.h-科,body .rd-item.h-忌{background:var(--yc-card) !important} body .rd-lead,body .cm-plain{color:var(--yc-ink) !important} body .cm-why{color:var(--yc-gold) !important;font-family:var(--yc-brush)} body .cm-tab{border-radius:0 !important;border-color:var(--yc-line) !important;background:transparent !important;color:var(--yc-mute) !important} body .cm-tab.on{background:transparent !important;color:var(--yc-ink) !important;border-color:var(--yc-red) !important;border-bottom-width:2px} body .cm-infer{background:transparent !important;border:1px solid var(--yc-gold);color:var(--yc-gold) !important;border-radius:0 !important} body .cm-zod{background:var(--yc-card) !important} body .cm-zod th,body .cm-zod td{border-color:var(--yc-line) !important;color:var(--yc-ink)} body .cm-zod th{background:var(--yc-paper2) !important;color:var(--yc-ink2) !important} body .cm-when{color:var(--yc-red) !important} body .cm-lock{background:var(--yc-card) !important;border:1px solid var(--yc-line);border-radius:0 !important;color:var(--yc-ink2) !important} body .cm-lock-t{color:var(--yc-red) !important} body .cm-lock button,body .rd-more button,body .cm-refbtn button{border-radius:0 !important;background:transparent !important;color:var(--yc-ink2) !important;border:1px solid var(--yc-line) !important} /* ---------- wide screens: menu always open, chart | reading ---------- */ @media (min-width:960px){ body #page-reading-container .page__content{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:28px;max-width:1320px;margin:0 auto;padding:18px 22px 40px;align-items:start} body #page-reading-container .rp-chart{position:sticky;top:12px} body #page-reading-container .reading-page{max-width:none;margin:0;background:var(--yc-card) !important;border:1px solid var(--yc-line);padding:18px 22px} body .main-menu{max-width:760px;padding-top:40px;gap:16px} body .main-menu::after{font-size:36px !important} } /* ---------- phone: compact chart ---------- */ @media (max-width:600px){ body #door_container{padding:4px 0 24px} body table.loc_table td.dz-line,body table.loc_table td.dz-side{line-height:1.2} body table.loc_table .zhi-year{font-size:.8em} body table.loc_table .room-right .gmatch{display:none} body table.loc_table .gm-sum{display:block;text-align:right} body table.loc_table .五合{display:none} body table.loc_table .doordate{font-size:10px} body table.loc_table .doorsolar{font-size:9.5px} body .main-menu::after{font-size:22px !important} body button.startdoor-custom,body .life-btn{font-size:24px !important;min-height:96px} body .tools span{font-size:13px} } body .reading-page .rp-y{border-radius:0 !important;box-shadow:none !important;color:var(--yc-ink) !important} body .reading-page .rp-y *{color:inherit} body .reading-page .rp-head,body .reading-page .rp-summary{color:var(--yc-ink) !important} /* 紫微 wide: chart | 論命 side by side (ziwei.html .zw-wide / .zw-side) */ body .zw-side{display:none} body .zw-side-note{margin:14px 4px 0;color:var(--yc-mute);font-size:12px;line-height:1.6} @media (min-width:960px){ body .zw-wide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;max-width:1320px;margin:0 auto;padding:18px 22px 40px;align-items:start} body .zw-wide .zw-page{max-width:none;margin:0} body .zw-side{display:block;background:var(--yc-card);border:1px solid var(--yc-line);padding:16px 20px;position:sticky;top:12px;max-height:calc(100vh - 160px);overflow:auto} body .zw-side .rd{max-width:none;padding:0} body .zw-side .zw-cta{margin:30px 0} body table.zw td{height:150px} body .zw-wide .zw-page > .zw-cta{display:none} /* 論命 lives in the side panel; one button, not two */ } /* ---------- the website header, above EVERY app page (js/yuenchi-nav.js header()) ---------- Pita 2026-09-30: 「呢個可否每一頁都有, 就算我入左奇門同紫微我都想keep 番佢」. Same sizes as yuenchilab.com's header (site.css). */ body ons-splitter-side{display:none !important} :root{--yc-head:68px} html.yc-has-head #myNavigator{top:var(--yc-head) !important;height:auto !important;bottom:0 !important} body .yc-head{position:fixed;top:0;left:0;right:0;height:var(--yc-head);z-index:20;box-sizing:border-box;background:var(--yc-paper);border-bottom:1px solid var(--yc-line); font-family:var(--yc-serif);color:var(--yc-ink);line-height:1.5;-webkit-font-smoothing:antialiased} body .yc-head a{color:inherit;text-decoration:none;white-space:nowrap} body .yc-hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:100%;max-width:1160px;margin:0 auto;padding:0 28px;box-sizing:border-box} body .yc-logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:22px;letter-spacing:.12em;color:var(--yc-ink) !important} body .yc-seal{display:inline-grid;grid-template-columns:1fr 1fr;place-items:center;width:38px;height:38px;box-sizing:border-box;background:#b0341f;color:#f7efe0;font-size:15px;line-height:1;border-radius:3px;padding:3px; box-shadow:inset 0 0 0 2px #b0341f,inset 0 0 0 3px #f2d9c8;font-weight:700;letter-spacing:0} body .yc-name small{display:block;font-size:11px;letter-spacing:.3em;color:var(--yc-mute);font-weight:400;margin-top:-4px} body .yc-main{display:flex;gap:28px;font-size:15px;color:var(--yc-ink2)} body .yc-head a.on,body .yc-main a:hover{color:var(--yc-red)} body .yc-tools{display:flex;align-items:center;gap:18px;font-size:13px} body .yc-lang a{color:var(--yc-mute);padding:0 3px} body .yc-head .yc-lang a.on{color:var(--yc-ink);border-bottom:1px solid var(--yc-red)} body .yc-btn{display:inline-block;padding:10px 22px;border:1px solid var(--yc-ink);font-size:15px;letter-spacing:.1em;line-height:1.4;transition:.25s} body .yc-btn:hover{border-color:var(--yc-red);color:var(--yc-red)} body .yc-btn.solid{background:var(--yc-ink);color:var(--yc-paper)} body .yc-gear{font-size:18px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--yc-line);border-radius:50%;color:var(--yc-ink) !important;flex:none} body .yc-gear:hover{border-color:var(--yc-red)} body .yc-menu{display:none;background:none;border:0;color:var(--yc-ink);font-size:22px;cursor:pointer;padding:4px 6px;width:auto !important;min-width:0 !important;height:auto !important;margin:0 !important} body .yc-mnav{display:none} html.yc-dim body .yc-head{border-bottom-color:transparent} /* no line between the dimmed header and the dimmed page */ html.yc-dim body .yc-head::after{content:"";position:absolute;inset:0 0 -1px 0;background:var(--yc-dim,rgba(20,16,10,.55))} /* set by yuenchi-nav.js while a dialog is open */ @media (max-width:1060px){ body .yc-main{gap:18px} body .yc-hbar{padding:0 20px;gap:14px} body .yc-tools{gap:12px} } @media (max-width:860px){ :root{--yc-head:58px} body .yc-main,body .yc-tools .yc-lang,body .yc-tools .yc-btn{display:none} body .yc-menu{display:block} body .yc-hbar{padding:0 14px} body .yc-logo{font-size:19px;gap:10px} body .yc-seal{width:32px;height:32px;font-size:13px} body .yc-tools{gap:10px} body .yc-head.open .yc-mnav{display:block;position:absolute;top:var(--yc-head);left:0;right:0;background:var(--yc-paper);border-bottom:1px solid var(--yc-ink);padding:6px 20px 22px;box-shadow:0 20px 30px -20px rgba(0,0,0,.35)} body .yc-mnav > a:not(.yc-btn){display:block;padding:12px 0;border-bottom:1px solid var(--yc-line);font-size:17px} body .yc-mnav .yc-lang{display:flex;gap:18px;padding-top:16px;font-size:15px} body .yc-mnav .yc-btn{display:block;text-align:center;margin-top:18px} } @media (max-width:360px){ body .yc-name small{display:none} } /* top-level app pages (設定 / 記錄 / 尋找吉局 …): no bar of their own under the header */ body .yc-notb > ons-toolbar{display:none !important} body .yc-notb > .page__content{top:0 !important} body .yc-crumb{max-width:720px;margin:18px auto 6px;padding:0 16px;font-family:"Noto Serif TC",serif;font-weight:900;font-size:24px;letter-spacing:.08em;color:var(--yc-ink)} body .yc-card{width:100%;min-height:96px;border:1px solid var(--yc-ink);background:var(--yc-card);color:var(--yc-ink);font-family:"Noto Serif TC",serif;font-weight:900;font-size:24px;letter-spacing:.12em;text-align:left;padding:30px 18px 12px;position:relative;cursor:pointer} body .yc-card::before{content:attr(data-label);position:absolute;left:18px;top:10px;font-family:var(--yc-brush);font-weight:400;font-size:13px;letter-spacing:.1em;color:var(--yc-red)} /* opened from the website (?go=…): the website is the menu, so the app home stays empty behind the form / chart */ html.yc-embed body .main-menu .maincard-row{visibility:hidden} html.yc-embed body .main-menu::before,html.yc-embed body .main-menu::after{display:none !important} html body .solar-btn,html body .solar-btn.on,html body .door-form .solar-btn,html body .door-form .solar-btn.on{background:transparent !important;background-image:none !important;box-shadow:none !important;text-shadow:none !important} html body .door-form .solar-btn.small{padding:3px 10px !important;gap:6px} /* backgrounds the app hard-codes as white/grey (found by sweeping app.html/ziwei.html/door_white.css) */ body .pick-page{background:transparent !important;color:var(--yc-ink) !important} body .pick-item:active{background:var(--yc-paper2) !important} body ons-action-sheet .action-sheet,body ons-action-sheet .action-sheet-button,body ons-action-sheet .action-sheet-title, body ons-action-sheet.reading-sheet .action-sheet,body ons-action-sheet.reading-sheet .action-sheet-button{background:var(--yc-card) !important;color:var(--yc-ink) !important;border-color:var(--yc-line) !important} body .action-sheet-mask{background:rgba(20,16,10,.55) !important} body .card{background:var(--yc-card) !important;color:var(--yc-ink) !important;box-shadow:none !important;border:1px solid var(--yc-line);border-radius:0 !important} body span.empty{background:transparent !important} /* 返回 and the chart's own buttons look like the website's buttons: thin ink outline, serif, spaced (Pita 2026-09-30: 「同而家個web 唔係好夾」) */ body .yc-back,body .yc-tb{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;box-sizing:border-box;background:transparent;color:var(--yc-ink) !important;border:1px solid var(--yc-ink);border-radius:0; font-family:var(--yc-serif);font-size:14px;letter-spacing:.1em;line-height:1.3;padding:7px 16px;cursor:pointer;white-space:nowrap;width:auto !important;min-width:0 !important;height:auto !important;margin:0 !important;-webkit-tap-highlight-color:transparent;transition:.2s} body .yc-back::before{content:"‹";font-size:18px;line-height:.8} body .yc-back:hover,body .yc-tb:hover{border-color:var(--yc-red);color:var(--yc-red) !important} body .yc-back:active,body .yc-tb:active{opacity:.7} /* the slim bar on pushed pages: 返回 · title · actions */ body ons-toolbar.yc-sub{background:var(--yc-paper) !important;border-bottom:1px solid var(--yc-line) !important;box-shadow:none !important;height:52px} body ons-toolbar.yc-sub + .page__background + .page__content{top:52px} body ons-toolbar.yc-sub > div{height:52px;display:flex !important;align-items:center} body ons-toolbar.yc-sub .toolbar__left{padding-left:16px} body ons-toolbar.yc-sub .toolbar__right{justify-content:flex-end;padding-right:16px} body ons-toolbar.yc-sub .toolbar__center{justify-content:center;gap:10px;font-size:16px !important;line-height:1 !important} body .toolbar__left{display:flex !important;align-items:center;padding-left:8px} body .back-button{display:inline-flex !important;align-items:center;gap:6px;height:auto !important;line-height:1.3 !important;padding:7px 16px 7px 12px !important; background:transparent !important;border:1px solid var(--yc-ink);border-radius:0 !important;transition:.2s} body .back-button .back-button__icon,body .back-button__icon{display:none !important} body .back-button .back-button__label,body .back-button__label{color:var(--yc-ink) !important;font-family:var(--yc-serif);font-size:14px !important;letter-spacing:.1em;padding:0 !important;line-height:1.3 !important} body .back-button .back-button__label::before{content:"‹";font-size:18px;line-height:.8;margin-right:6px;vertical-align:-1px} body .back-button:hover{border-color:var(--yc-red)} body .back-button:hover .back-button__label{color:var(--yc-red) !important} body .back-button:active{opacity:.7} @media (max-width:400px){ body .yc-tb{padding:7px 9px;font-size:13px;letter-spacing:.04em} body ons-toolbar.yc-sub .toolbar__left{padding-left:8px} body ons-toolbar.yc-sub .toolbar__right{padding-right:8px} body ons-toolbar.yc-sub .toolbar__center{gap:6px} } /* 返回 at the bottom of 設定 / 讀取記錄 / 尋找吉局 / 邀請 / 關於 */ body .yc-bottom{max-width:720px;margin:28px auto 48px;padding:0 16px;box-sizing:border-box} body .yc-bottom .yc-back{display:flex;justify-content:center;width:100%;box-sizing:border-box;padding:12px 16px;font-size:16px} /* ---------- PC (≥1200px): use the whole screen (Pita 2026-09-30: 「PC 版我想用晒D位」) ---------- The 奇門 chart page itself stays as before (Pita: 「呢版可以留番之前咁」); reading / pick / 紫微 go full width. The 奇門 chart is sized in em, so its font-size sets its size: fit it to the screen height. */ @media (min-width:1200px){ /* reading page: chart half never under 50% (Pita 2026-09-30); the chart fills that half's width */ body #page-reading-container .page__content{max-width:none;grid-template-columns:calc(50vw - 32px) minmax(0,1fr);gap:36px;padding:16px 32px 40px} body #page-reading-container .rp-chart{position:sticky;top:8px;align-self:start;display:flex;justify-content:center} /* whole chart on one screen (Pita: 「個盤唔洗scroll落去就睇得晒」): the height decides the size, the table still spans the half */ body #page-reading-container .rp-chart table.loc_table{width:100%;font-size:min(calc((50vw - 70px) / 19.5),calc((100vh - 172px) / 33))} body #page-reading-container .reading-page{padding:24px 34px} body .pick-page{max-width:none;padding:18px 32px 40px} body #pick_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:stretch} body #pick_list .pick-head{grid-column:1/-1;margin-top:14px} body #pick_list .pick-item{margin:0} /* 紫微 chart: a cell holds a few stars, so keep it compact (Pita 2026-09-30: 「唔洗show 到咁大, 因為佢裡面唔多野」); the reading gets the rest */ body .zw-wide{max-width:none;padding:18px 32px 40px;grid-template-columns:min(900px,50vw) minmax(0,1fr)} body .zw-wide table.zw{font-size:17px} body .zw-wide table.zw td{height:clamp(118px,calc((100vh - 470px) / 4),156px)} } /* the reading always wraps: nothing in it may push sideways (Pita 2026-09-30: 「右邊要試自動換行」) */ body .reading-page,body .reading-page *{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;white-space:normal !important;box-sizing:border-box} body .reading-page img{height:auto} body .reading-page .rp-share,body .reading-page .rp-vote{display:flex;flex-wrap:wrap;gap:6px} @media (min-width:1200px){ body #page-reading-container .rp-chart table.loc_table{max-width:none} } /* PC reading text a bit smaller (Pita 2026-09-30: 「右邊字可否細少少」) — was ~34px from the app's big-screen body size */ @media (min-width:1200px){ body #page-reading-container .reading-page{font-size:27px !important} } /* follow-up questions (邊個病 / 原告被告 / 年命) asked in place on the pick page, one spot for every step (Pita 2026-09-30: 「問野可唔可以唔好東一忽西一忽」) */ body .pick-step{box-sizing:border-box;max-width:560px;margin:16px auto 24px;padding:22px 22px 18px;font-size:17px;background:var(--yc-card);border:1px solid var(--yc-line);color:var(--yc-ink);text-align:center} body .pick-q{font-family:"Noto Serif TC",serif;font-size:24px;margin-bottom:12px} body .pick-note{color:var(--yc-mute);font-size:15px;margin:-4px 0 14px} body .pick-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:6px} body .pick-opt{box-sizing:border-box;width:100%;margin:0;font:inherit;font-size:18px;padding:12px 8px;background:var(--yc-paper);color:var(--yc-ink);border:1px solid var(--yc-line);border-radius:0;cursor:pointer} body .pick-opt:active,body .pick-opt:hover{border-color:var(--yc-red)} body .pick-opt.go{background:var(--yc-ink);color:var(--yc-paper);border-color:var(--yc-ink)} html.yc-night body .pick-opt.go{background:#b0341f;border-color:#b0341f;color:#fff} body .pick-year{box-sizing:border-box;width:100%;max-width:220px;font:inherit;font-size:24px;letter-spacing:.15em;text-align:center;padding:8px;margin:0 auto 10px;display:block;background:var(--yc-paper);color:var(--yc-ink);border:1px solid var(--yc-line);border-radius:0} body .pick-year.bad{border-color:var(--yc-red);outline:1px solid var(--yc-red)} body .pick-last{font:inherit;font-size:15px;white-space:nowrap;background:none;border:0;color:var(--yc-red);text-decoration:underline;cursor:pointer;margin:0 0 12px} body .pick-back{display:inline-block;margin-top:16px;color:var(--yc-mute);cursor:pointer;font-size:15px} body .pick-year::placeholder{font-size:17px;letter-spacing:0;color:var(--yc-mute)} /* 買玄知分析 (Stripe, s-265 2026-09-30) */ body .inv-buy{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 6px} body .inv-buy .inv-main{width:100%;margin:0} body .inv-test{color:var(--yc-red) !important} body .inv-wrap{max-width:720px;margin:0 auto;box-sizing:border-box} /* same column as the page title (yc-crumb) */ /* 讚／彈: 撳咗要一眼睇到 (Pita 2026-09-30「撳 👍 或者 👎之後我睇落去唔明顯」) — 實色, 加 ✓ */ body .rp-v.on[data-v="up"]{background:var(--yc-red) !important;border-color:var(--yc-red) !important;color:#fff !important;font-weight:700} body .rp-v.on[data-v="down"]{background:var(--yc-ink2) !important;border-color:var(--yc-ink2) !important;color:var(--yc-paper) !important;font-weight:700} body .rp-v.on::before{content:"✓ "} body .cm-fb span{display:inline-grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;border:1px solid transparent} body .cm-fb span.on{opacity:1 !important;filter:none !important;background:var(--yc-red);border-color:var(--yc-red);box-shadow:0 0 0 2px color-mix(in srgb,var(--yc-red) 25%,transparent)} body .cm-fb span.on + span.on, body .cm-fb span:nth-child(2).on{background:var(--yc-ink2);border-color:var(--yc-ink2)} /* 幾多人覺得準 */ body .rp-likes{display:inline-block;margin:4px 0 2px;font-size:.85em;color:var(--yc-red);border:1px solid color-mix(in srgb,var(--yc-red) 40%,transparent);padding:1px 9px;border-radius:999px} body .cm-likes{display:inline-block;margin-left:.5em;font-size:.8em;color:var(--yc-red);border:1px solid color-mix(in srgb,var(--yc-red) 40%,transparent);padding:0 7px;border-radius:999px;white-space:nowrap} /* 設定 · 底色: 揀咗嗰個實心, 其餘淨係框 (2026-09-30 加「自動」) */ body ons-button.theme-btn:not(.on){background:transparent !important;color:var(--yc-ink) !important}