/* Ngọc Quang · Màu dịu 28/09/2026. Palette only; all chart fields retain natural height. */
body.visual-celestial {
  --page: min(1640px, calc(100% - 64px)); --ink:#073d37; --ink-soft:#244c43; --muted:#5a6b60;
  --serif: Georgia,'Times New Roman',serif; color:var(--ink); background:#fcfbf6; font-size:16px;
}
body.visual-celestial .ambient-depth { position:fixed; inset:0; opacity:1; background:linear-gradient(#fffcf544,#fffcf580),url('/celestial-world.webp') center/cover no-repeat; pointer-events:none; }
body.visual-celestial .ambient-depth > span { display:none; }
body.visual-celestial .site-header { min-height:74px; padding:8px 12px; margin-block:0 0; gap:20px; border:0; border-bottom:1px solid #d8c79a99; border-radius:0; background:#fffdf4de; box-shadow:none; }
body.visual-celestial .brand { gap:10px; }
body.visual-celestial .brand strong { font:700 1.65rem/1.1 var(--serif); color:#063e38; }
body.visual-celestial .brand small { font-size:.67rem; letter-spacing:.08em; margin-top:5px; }
body.visual-celestial .brand-mark { width:58px; height:58px; border:0; background:none; box-shadow:none; }
body.visual-celestial .brand-mark img { width:100%; height:100%; display:block; }
body.visual-celestial .header-actions { gap:3px; flex-wrap:wrap; }
body.visual-celestial .header-button { border:0; border-radius:5px; background:transparent; color:#174b40; min-height:42px; padding:8px 10px; font-size:.83rem; font-weight:500; }
body.visual-celestial .header-button:hover { background:#eaf2e5; box-shadow:inset 0 -2px #bc913f; }
body.visual-celestial .service-pill { padding:5px 9px; font-size:.66rem; background:#eef4e8; }
body.visual-celestial .intro { position:relative; isolation:isolate; display:flex; min-height:330px; padding:36px 16px 28px; margin:0 0 22px; border:0; overflow:visible; }
body.visual-celestial .intro-main { width:61%; max-width:760px; position:relative; z-index:2; }
body.visual-celestial .intro h1 { font:700 clamp(2.8rem,4.2vw,4.35rem)/1.12 var(--serif); letter-spacing:-.025em; color:#083d36; }
body.visual-celestial .intro h1 em { display:inline-block; margin-top:7px; font-size:.53em; font-weight:500; color:#9a7029; line-height:1.35; letter-spacing:0; }
body.visual-celestial .intro-copy { max-width:49ch; margin-top:13px; color:#3d5c4d; font-size:1rem; line-height:1.65; }
body.visual-celestial .intro-aside { position:absolute; inset:-12px -25px -10px 32%; z-index:0; pointer-events:none; }
body.visual-celestial .qimen-hero-image { width:100%; height:100%; max-height:none; aspect-ratio:auto; object-fit:cover; object-position:68% 45%; border:0; border-radius:0; box-shadow:none; mask-image:linear-gradient(90deg,transparent,#000 25%); }
body.visual-celestial .intro::after { content:''; display:block; position:absolute; inset:-12px -25px -10px; z-index:1; pointer-events:none; background:linear-gradient(0deg,#fcfbf6,transparent 17%),linear-gradient(90deg,#fcfbf6 0%,#fcfbf6ed 26%,#fcfbf660 51%,transparent 67%); }
body.visual-celestial .instrument-caption { display:none; }
body.visual-celestial .intro-actions { margin-top:18px; }
body.visual-celestial :is(.hero-cta,.primary-button,.tool-primary,.tool-secondary) { color:#fffdf4; border:3px double #e5c16e; background:linear-gradient(150deg,#258d76,#00604f 55%,#00463d); border-radius:7px; box-shadow:inset 0 1px 2px #fff4c780,inset 0 -2px 4px #00382d80,0 3px 7px #163f3524; font-weight:600; min-height:44px; }
body.visual-celestial :is(.hero-cta,.primary-button,.tool-primary,.tool-secondary):hover { filter:brightness(1.08); transform:translateY(-1px); }
body.visual-celestial .intro-trust { display:flex; gap:22px; border:0; padding:0; margin-top:18px; background:transparent; }
body.visual-celestial .intro-trust li { padding:0 !important; border:0 !important; }
body.visual-celestial .intro-trust span { font-size:.67rem; }
body.visual-celestial .intro-trust strong { font-size:.83rem; }
body.visual-celestial .workspace { grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:26px; margin:0 0 50px; }
body.visual-celestial :is(.input-panel,.result-panel) { position:relative; min-width:0; border:3px double #bda15b; border-radius:15px; background:#fffdf7f7; box-shadow:0 0 0 2px #fff4ce,0 0 0 4px #28644f,0 8px 25px #214c3120,inset 0 0 18px #dbc7951a; }
body.visual-celestial .ornament-corner { position:absolute; width:72px; height:72px; background:url('/celestial-ornament.png') center/contain no-repeat; pointer-events:none; z-index:3; }
body.visual-celestial .ornament-tl { top:-13px; left:-13px; }
body.visual-celestial .ornament-tr { top:-13px; right:-13px; transform:rotate(90deg); }
body.visual-celestial .ornament-br { bottom:-13px; right:-13px; transform:rotate(180deg); }
body.visual-celestial .ornament-bl { bottom:-13px; left:-13px; transform:rotate(270deg); }
body.visual-celestial .panel-heading { min-height:0; padding:21px 25px 17px; gap:14px; border-color:#d4c191; background:linear-gradient(90deg,#edf5e8,#fffdf5); border-radius:12px 12px 0 0; }
body.visual-celestial .panel-heading h2 { font:700 1.8rem/1.25 var(--serif); }
body.visual-celestial .step-number { flex:0 0 43px; width:43px; height:43px; color:#fff9df; border:3px double #e9c872; background:linear-gradient(135deg,#40876b,#045142); box-shadow:0 2px 5px #1e49232b; }
body.visual-celestial #chartForm { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px 22px; padding:22px 26px; }
body.visual-celestial #chartForm::before { display:none; }
body.visual-celestial #chartForm > * { grid-column:1/-1; }
body.visual-celestial #chartForm > .form-section:nth-of-type(1) { grid-column:span 2; }
body.visual-celestial #chartForm > .form-section:nth-of-type(2) { grid-column:span 4; }
body.visual-celestial .form-section { margin:0; min-width:0; padding:0; }
body.visual-celestial .form-section legend { position:static; margin:0 0 9px; padding:0; font-size:.81rem; letter-spacing:.02em; }
body.visual-celestial :is(.form-section legend span,.advanced summary span) { position:static; display:inline-grid; place-items:center; width:24px; height:24px; margin-right:6px; color:#1c5a42; border:1px solid #cdb776; background:#f4f5e8; }
body.visual-celestial .input-panel .form-grid.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
body.visual-celestial .field { margin:0; }
body.visual-celestial .field label { font-size:.88rem; font-weight:500; color:#2e5042; }
body.visual-celestial :is(input,select,textarea) { min-height:44px; border:1px solid #c6bea3; border-radius:7px; background:#fffefa; color:#123f35; font-size:.96rem; box-shadow:inset 0 1px 4px #ac987a0c; }
body.visual-celestial input[type=checkbox] { min-height:0; }
body.visual-celestial textarea { min-height:84px; }
body.visual-celestial .advanced { margin:0; padding:12px 0; border-color:#dcd0ad; }
body.visual-celestial .advanced summary { font-size:.91rem; }
body.visual-celestial .profile-support { margin:0; padding:9px 12px; background:#fbf6e7; font-size:.8rem; }
body.visual-celestial .profile-support-details { margin:0; font-size:.8rem; }
body.visual-celestial .privacy-note { margin:0; padding:7px 12px; font-size:.8rem; }
body.visual-celestial .form-actions { display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start; margin:0; }
body.visual-celestial .form-actions .primary-button { width:auto; min-width:240px; padding:11px 26px; }
body.visual-celestial .form-status:empty { display:none; }
body.visual-celestial .result-panel { padding:26px; min-height:0; }
body.visual-celestial .empty-state { min-height:440px; padding:12px 0; align-items:start; text-align:left; }
body.visual-celestial .empty-state h2 { font:700 1.8rem/1.25 var(--serif); }
body.visual-celestial .empty-state > p { font-size:.94rem; color:#41614e; }
body.visual-celestial .empty-orbit { width:148px; height:148px; margin:0 auto 16px; border:0; background:none; box-shadow:none; }
body.visual-celestial .empty-orbit img { width:100%; height:100%; }
body.visual-celestial .empty-steps { display:grid; grid-template-columns:1fr; gap:13px; text-align:left; }
body.visual-celestial .empty-steps li { display:flex; gap:11px; align-items:center; padding:5px 0; border:0; font-size:.91rem; }
body.visual-celestial .empty-steps span { display:grid; place-items:center; flex:0 0 30px; height:30px; border:2px solid #cfaf62; border-radius:50%; color:#fff8df; background:#12654e; }
body.visual-celestial .return-to-chart { margin-left:auto; font-size:.8rem; }
body.visual-celestial.result-view .intro,body.visual-celestial.result-view .input-panel { display:none; }
body.visual-celestial .workspace:has(#resultContent:not([hidden])) { grid-template-columns:1fr; }
body.visual-celestial .result-panel:has(#resultContent:not([hidden])) { grid-column:1/-1; border:0; border-radius:0; padding:0; background:transparent; box-shadow:none; }
body.visual-celestial #resultContent { scroll-margin-top:20px; }
body.visual-celestial .result-heading { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; padding:25px 0 12px; border:0; background:transparent; }
body.visual-celestial .result-heading .chart-title { font:700 clamp(2.2rem,3.2vw,3.25rem)/1.12 var(--serif); letter-spacing:-.02em; margin:5px 0 8px; }
body.visual-celestial #resultHeading { display:inline; font-size:1rem; font-weight:500; line-height:1.6; color:#795322; }
body.visual-celestial #resultTime { margin:4px 0 0; font-size:.94rem; color:#264e43; }
body.visual-celestial .tool-strip { margin-left:auto; width:auto; border:0; background:#fffdf5ce; gap:8px; padding:6px; flex-wrap:wrap; }
body.visual-celestial .tool-strip-exports { border:0; }
body.visual-celestial .tool-strip-label { display:none; }
body.visual-celestial .tool-button { font-size:.82rem; min-height:40px; padding:8px 11px; }
body.visual-celestial .tool-utility { background:#fffdf5; border:1px solid #d6c395; }
body.visual-celestial .summary-strip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:6px 0 12px; border:3px double #d7b66c; border-radius:12px; background:linear-gradient(#fffef9,#faf5e8); box-shadow:0 3px 8px #9d7f3620; }
body.visual-celestial .summary-item:nth-child(n) { border:0; border-left:1px solid #dac99d; padding:9px 15px; }
body.visual-celestial .summary-item:first-child { border:0; }
body.visual-celestial .summary-item small { font-size:.67rem; letter-spacing:.06em; color:#68705a; }
body.visual-celestial .summary-item strong { font:700 1.16rem/1.4 var(--serif); color:#134b3e; }
body.visual-celestial .study-toolbar { gap:8px; flex-wrap:wrap; }
body.visual-celestial #studyToolbarStatus { margin:5px 0 10px; font-size:.8rem; }
body.visual-celestial .section-title-row { margin:14px 0 17px; gap:20px; align-items:center; }
body.visual-celestial .section-title-row h3 { font:700 1.5rem/1.3 var(--serif); }
body.visual-celestial .section-title-row .kicker { display:none; }
body.visual-celestial .legend { font-size:.71rem; gap:11px; flex-wrap:wrap; }
body.visual-celestial .board-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
body.visual-celestial .heaven-board { min-width:0; }
body.visual-celestial .heaven-board-rim { position:relative; padding:22px 16px; border:4px solid #d9b467; border-radius:18px; background:url('/celestial-scroll.svg') 0 0/130px 130px repeat,linear-gradient(120deg,#317e61,#0b5745 42%,#226849 70%,#0c473b); box-shadow:inset 0 0 0 2px #fff1bc,inset 0 0 0 5px #9a7431,0 0 0 1px #896324,0 3px 0 2px #f1d397,0 9px 20px #294c332f; }
body.visual-celestial .heaven-board-rim::before { inset:8px; border:1px solid #d3b16c; border-radius:9px; pointer-events:none; }
body.visual-celestial .heaven-board-rim::after { display:none; }
body.visual-celestial .heaven-board-rim > .ornament-corner { width:86px; height:86px; }
body.visual-celestial .heaven-board-bevel { padding:3px; border-radius:7px; background:linear-gradient(135deg,#fff4c4,#b28a3c,#f8dc91,#bc9040); box-shadow:0 1px 4px #013a3150; }
body.visual-celestial .heaven-board-plate { padding:0; background:linear-gradient(125deg,#d6bd76,#337454,#f6d78b); overflow:auto; border-radius:5px; }
body.visual-celestial .board-engraving { display:none; }
body.visual-celestial .board-direction { z-index:4; display:block; color:#795222; font:700 .69rem/1 var(--serif); letter-spacing:.09em; padding:3px 16px; border:1px solid #ba8d42; border-radius:3px; background:linear-gradient(#fffff7,#fff1d0); text-shadow:none; box-shadow:0 0 0 2px #f5d594; }
body.visual-celestial .direction-south { top:-9px; }
body.visual-celestial .direction-north { bottom:-9px; }
body.visual-celestial .direction-east { left:-22px; }
body.visual-celestial .direction-west { right:-22px; }
body.visual-celestial .lac-thu-board { min-width:825px; grid-template-columns:repeat(3,minmax(270px,1fr)); grid-auto-rows:auto; gap:4px; align-items:stretch; }
body.visual-celestial .palace-card,body.visual-celestial .palace-card.center { display:flex; flex-direction:column; min-width:0; min-height:0; height:auto; padding:15px 16px 16px; border:1px solid #c5b47c; border-radius:7px; color:#184a3d; background:linear-gradient(135deg,#ffffff4d,#fffef959 68%),url('/celestial-clouds.svg') right top/100% auto no-repeat,var(--palace-tint,#f7eacf); box-shadow:inset 0 0 0 2px #fffdf3a0,inset 0 1px 8px #c4bd9730; overflow:visible; contain:none; }
body.visual-celestial .palace-card::before { display:none; }
body.visual-celestial .palace-card:hover { box-shadow:inset 0 0 0 2px #6c9b71; }
body.visual-celestial .palace-card.focus { border-color:#c9a251; background-color:var(--palace-tint,#f7eacf); }
body.visual-celestial .palace-card.is-selected { outline:2px solid #ca9b39; outline-offset:-4px; box-shadow:inset 0 0 20px #d7b75a28; }
body.visual-celestial .palace-card:focus-visible { outline:3px solid #007967; outline-offset:-5px; }
body.visual-celestial .palace-topline { width:100%; align-items:flex-start; gap:8px; padding-bottom:10px; border-bottom:1px solid #bdb9934d; }
body.visual-celestial .palace-location { min-width:0; }
body.visual-celestial .palace-location strong { font:700 1.26rem/1.25 var(--serif); color:#103e36; white-space:normal; }
body.visual-celestial .palace-location small { font-size:.72rem; color:#5b6f5b; margin-top:4px; }
body.visual-celestial .palace-trigram { margin-right:7px; color:rgb(var(--element-rgb)); font-family:Arial,sans-serif; font-size:1.4rem; vertical-align:middle; }
body.visual-celestial .palace-seals { flex-direction:row; align-items:center; gap:3px; }
body.visual-celestial .element-seal { display:flex; align-items:center; gap:4px; font-size:.62rem; background:transparent; padding:0; border:0; }
body.visual-celestial .element-seal::before { content:''; width:23px; height:27px; display:block; background:var(--element-icon) center/contain no-repeat; }
body.visual-celestial .palace-number { display:none; }
body.visual-celestial .element-wood { --element-icon:url('/element-wood.svg'); --element-rgb:39,100,67; --palace-tint:#e3efdf; }
body.visual-celestial .element-fire { --element-icon:url('/element-fire.svg'); --element-rgb:162,56,43; --palace-tint:#fde5de; }
body.visual-celestial .element-earth { --element-icon:url('/element-earth.svg'); --element-rgb:131,91,36; --palace-tint:#f7eacf; }
body.visual-celestial .element-metal { --element-icon:url('/element-metal.svg'); --element-rgb:98,98,90; --palace-tint:#efefe8; }
body.visual-celestial .element-water { --element-icon:url('/element-water.svg'); --element-rgb:34,103,138; --palace-tint:#ddf0f9; }
body.visual-celestial .palace-main { display:grid; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 0; margin-top:10px; }
body.visual-celestial .palace-main-row,body.visual-celestial .palace-main-row:nth-child(n) { display:grid; grid-template-columns:47px minmax(0,1fr); grid-column:1/-1; gap:5px; align-items:baseline; padding:0; margin:0; }
body.visual-celestial .palace-main-row span { font-size:.75rem; font-weight:400; color:#4b6051; line-height:1.5; }
body.visual-celestial .palace-main-row strong { color:#114d3e; font-size:1.025rem; font-weight:650; line-height:1.4; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
body.visual-celestial .palace-main-row:first-child strong { color:rgb(var(--element-rgb)); }
body.visual-celestial .palace-main-row:nth-child(-n+3) strong { font-family:var(--serif); font-weight:700; font-size:1.07rem; }
body.visual-celestial .palace-main-row:nth-child(n+4):nth-child(-n+6) { grid-column:auto; display:flex; flex-direction:column; align-items:flex-start; gap:2px; border:0; border-left:1px solid #c7bd9999; border-radius:0; background:transparent; margin:9px 0 7px; padding:0 8px; }
body.visual-celestial .palace-main-row:nth-child(4) { border-left:0; padding-left:0; }
body.visual-celestial .palace-main-row:nth-child(n+4):nth-child(-n+6) strong { font-size:.94rem; font-weight:550; }
body.visual-celestial .palace-main-row:nth-child(n+7) { grid-template-columns:59px minmax(0,1fr); }
body.visual-celestial .palace-growth-row strong { font-size:.79rem; color:#70542a; font-weight:500; line-height:1.5; }
body.visual-celestial .palace-shensha-block { width:100%; margin-top:9px; gap:3px; }
body.visual-celestial .palace-shensha-label { font-size:.7rem; font-weight:600; color:#62725d; }
body.visual-celestial .palace-shensha-list { gap:3px 5px; flex-wrap:wrap; }
body.visual-celestial :is(.mini-tag,.palace-tags .mini-tag,.palace-shensha-list .mini-tag.shensha) { font-size:.76rem; line-height:1.5; min-height:0; padding:2px 5px; white-space:normal; overflow-wrap:anywhere; max-width:100%; font-weight:400; border-radius:4px; background:#fffef788; color:#36573e; border:1px solid #b5c3a94d; }
body.visual-celestial .mini-tag.focus { background:#ffedba; color:#755018; border-color:#d1af56; }
body.visual-celestial .mini-tag.void { background:#ecf7ff; color:#1d5b80; }
body.visual-celestial .mini-tag.horse { background:#fff0e7; color:#9b4530; }
body.visual-celestial .palace-tags { margin-top:10px; padding-top:8px; border-top:1px solid #cec39d66; flex-wrap:wrap; }
body.visual-celestial .palace-card.center { background:linear-gradient(140deg,#fff4dbaa,#fffdf277),url('/celestial-world.webp') center/cover; }
body.visual-celestial .palace-card.center .center-axis { flex-shrink:0; position:static; transform:none; display:block; width:154px; height:154px; margin:10px auto 4px; opacity:1; border:0; background:url('/celestial-medallion.png') center/contain no-repeat; box-shadow:none; }
body.visual-celestial .center-axis > span { display:none; }
body.visual-celestial .palace-card.center .palace-main { max-width:none; width:100%; }
body.visual-celestial .board-hint { padding:10px 14px; margin:17px 0 10px; border:1px solid #ddcda8; border-radius:7px; background:#fffdf4de; color:#52664f; font-size:.79rem; line-height:1.65; }
body.visual-celestial #palaceDock { position:sticky; top:16px; min-width:0; }
body.visual-celestial .palace-dock-empty { border:1px solid #d5bc80; padding:24px; background:#fffef4e6; border-radius:8px; font-size:.92rem; line-height:1.7; }
body.visual-celestial #palaceDock:has(dialog[open]) .palace-dock-empty { display:none; }
body.visual-celestial #palaceDialog[data-docked] { position:relative; inset:auto; width:100%; margin:0; max-width:none; max-height:calc(100dvh - 32px); padding:0; overflow:auto; box-shadow:0 5px 16px #5c5a2524; border:2px solid #d7bc77; border-radius:9px; }
body.visual-celestial dialog { color:#153f35; border:3px double #c7a65b; border-radius:12px; background:#fffdf8; }
body.visual-celestial .dialog-heading { padding:18px; border-color:#decca0; background:linear-gradient(90deg,#fffdf6 30%,#fffdf699),url('/celestial-world.webp') right top/320px auto; }
body.visual-celestial #palaceDialog .dialog-heading h2 { font:700 1.4rem/1.3 var(--serif); }
body.visual-celestial #palaceDialogBody { margin:14px; }
body.visual-celestial #palaceDialog .detail-grid { grid-template-columns:1fr; gap:0; }
body.visual-celestial #palaceDialog .detail-item { display:grid; grid-template-columns:104px minmax(0,1fr); gap:8px; padding:10px 5px; border:0; border-bottom:1px solid #e4dcc9; border-radius:0; background:transparent; }
body.visual-celestial #palaceDialog .detail-item small { font-size:.76rem; color:#776346; }
body.visual-celestial #palaceDialog .detail-item strong { font-size:.88rem; font-weight:550; line-height:1.6; overflow-wrap:anywhere; }
body.visual-celestial #palaceDialog .detail-wide { display:block; }
body.visual-celestial #palaceDialog .detail-wide strong { display:block; margin-top:5px; }
body.visual-celestial #palaceDialog .detail-item:nth-child(8),body.visual-celestial #palaceDialog .detail-item:nth-child(12),body.visual-celestial #palaceDialog .detail-item:nth-child(15) { border-top:2px solid #cdbd91; margin-top:11px; }
body.visual-celestial #palaceDialog:not([data-docked]) { width:min(640px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; margin:auto; }
body.visual-celestial #palaceDialog::backdrop { background:#153f3560; backdrop-filter:blur(2px); }
body.visual-celestial .result-tabs { display:flex; gap:5px; flex-wrap:wrap; border:0; padding:8px 0; }
body.visual-celestial .result-tab { flex:1 1 auto; background:#fffdf6; color:#295640; border:1px solid #cbbd92; border-radius:6px; font-size:.87rem; }
body.visual-celestial .result-tab.active { color:#fffbea; background:linear-gradient(#22836b,#005348); border:2px solid #d4ad57; box-shadow:inset 0 0 0 1px #fff2c5a0; }
body.visual-celestial :is(.content-card,.evidence-item,.indicator-item,.audit-item) { background:#fffef8f5; border-color:#d6cba9; }
body.visual-celestial .content-card { padding:22px; }
body.visual-celestial .content-card h4 { font-family:var(--serif); }
body.visual-celestial .content-card :is(p,li) { font-size:.97rem; line-height:1.8; }
body.visual-celestial .site-footer { margin-top:25px; padding:22px 0; background:#fffdf4c9; }
@media (max-width:1450px) { body.visual-celestial { --page:calc(100% - 48px); } body.visual-celestial .site-header { gap:12px; flex-wrap:wrap; } body.visual-celestial .header-actions { flex:1; justify-content:flex-end; } body.visual-celestial .board-layout { grid-template-columns:minmax(0,1fr) 292px; gap:20px; } body.visual-celestial .lac-thu-board { min-width:780px; grid-template-columns:repeat(3,minmax(250px,1fr)); } body.visual-celestial .palace-card { padding:13px 12px; } }
@media (max-width:1179px) { body.visual-celestial .board-layout { grid-template-columns:1fr; } body.visual-celestial #palaceDock { display:contents; } body.visual-celestial .palace-dock-empty { display:none; } body.visual-celestial .workspace { grid-template-columns:minmax(0,1fr) 280px; gap:22px; } body.visual-celestial #chartForm > .form-section:nth-of-type(n) { grid-column:1/-1; } body.visual-celestial .intro { min-height:330px; } body.visual-celestial .summary-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } body.visual-celestial .summary-item:nth-child(3n+1) { border-left:0; } body.visual-celestial .summary-item:nth-child(n+4) { border-top:1px solid #dccba3; } }
@media (max-width:760px) { body.visual-celestial { --page:calc(100% - 28px); } body.visual-celestial .site-header { padding:9px 0; gap:8px; } body.visual-celestial .brand-mark { width:45px; height:45px; } body.visual-celestial .brand strong { font-size:1.45rem; } body.visual-celestial .header-actions { flex:1 0 100%; width:100%; flex-wrap:nowrap; overflow:auto; justify-content:flex-start; } body.visual-celestial .header-button { white-space:nowrap; font-size:.77rem; padding:8px; } body.visual-celestial .service-pill { flex-shrink:0; } body.visual-celestial .intro { min-height:470px; padding:25px 8px 150px; margin-bottom:22px; } body.visual-celestial .intro-main { width:100%; } body.visual-celestial .intro h1 { font-size:2.65rem; } body.visual-celestial .intro-copy { font-size:.92rem; max-width:34ch; } body.visual-celestial .intro-aside { inset:190px -14px -10px 10%; } body.visual-celestial .intro::after { background:linear-gradient(0deg,#fcfbf6,transparent 14%),linear-gradient(#fcfbf6 0 36%,#fcfbf650 64%,transparent); } body.visual-celestial .intro-trust { gap:17px; } body.visual-celestial .workspace { grid-template-columns:1fr; } body.visual-celestial .panel-heading { padding:18px; } body.visual-celestial .panel-heading h2 { font-size:1.65rem; } body.visual-celestial #chartForm { padding:19px 17px; gap:17px; } body.visual-celestial .input-panel .form-grid.two-columns { grid-template-columns:1fr; } body.visual-celestial .form-actions .primary-button { min-width:0; flex:1; } body.visual-celestial .empty-state { min-height:0; } body.visual-celestial .empty-orbit { width:110px; height:110px; } body.visual-celestial .result-heading { padding-top:20px; } body.visual-celestial .chart-title { font-size:2.25rem; } body.visual-celestial .tool-strip { margin:0; width:100%; justify-content:flex-start; padding:0; } body.visual-celestial .tool-strip-main,body.visual-celestial .tool-strip-exports { flex-wrap:wrap; } body.visual-celestial .summary-item:nth-child(n) { padding:8px; } body.visual-celestial .summary-item strong { font-size:1rem; } body.visual-celestial .summary-item small { font-size:.61rem; } body.visual-celestial .section-title-row { flex-wrap:wrap; gap:8px; } body.visual-celestial .legend { font-size:.67rem; } body.visual-celestial .heaven-board-rim { padding:20px 9px; } body.visual-celestial .heaven-board-rim > .ornament-corner { width:64px; height:64px; } body.visual-celestial .lac-thu-board { min-width:870px; grid-template-columns:repeat(3,minmax(282px,1fr)); } body.visual-celestial .palace-card,body.visual-celestial .palace-card.center { padding:15px; } body.visual-celestial .palace-main-row strong { font-size:1.06rem; } body.visual-celestial .palace-growth-row strong { font-size:.84rem; } body.visual-celestial :is(.mini-tag,.palace-tags .mini-tag,.palace-shensha-list .mini-tag.shensha) { font-size:.82rem; } body.visual-celestial .board-hint { font-size:.8rem; } body.visual-celestial .direction-east,body.visual-celestial .direction-west { display:none; } body.visual-celestial .result-tab { font-size:.8rem; } }
@media (prefers-reduced-motion:reduce) { body.visual-celestial *,body.visual-celestial *::before,body.visual-celestial *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media print { body.visual-celestial .ambient-depth,body.visual-celestial .intro,body.visual-celestial #palaceDock { display:none; } body.visual-celestial .board-layout { display:block; } }

/* Social exports: readable preview at phone width, never height-fit the poster. */
.social-export-dialog { width:min(960px,calc(100% - 24px)); max-width:960px; max-height:calc(100dvh - 28px); padding:24px; border:1px solid #bc9b55; border-radius:18px; background:#fffdf5; color:#173f35; box-shadow:0 22px 90px #062d2960; }
.social-export-dialog::backdrop { background:#092f2ade; }
.social-export-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.social-export-header h2 { font-size:1.45rem; margin:4px 0; }
.social-export-layout { display:grid; grid-template-columns:minmax(240px,1fr) minmax(320px,430px); gap:28px; align-items:start; }
.social-export-controls { display:grid; gap:12px; align-content:start; position:sticky; top:0; }
.social-export-controls p { line-height:1.6; margin:0 0 4px; font-size:.96rem; }
.social-export-controls label { font-weight:700; margin-top:6px; }
.social-export-dialog :is(button,select) { min-height:44px; font:inherit; border-radius:8px; }
.social-export-dialog select { padding:10px; width:100%; color:#173f35; background:#fffefb; border:1px solid #c7b788; }
.social-export-dialog button { padding:10px 14px; border:1px solid #b7a779; cursor:pointer; }
.social-export-dialog button:disabled { cursor:default; opacity:.5; }
.social-export-dialog .primary-button { background:#0c6952; color:#fffbe9; font-weight:700; }
.social-export-nav { display:flex; gap:8px; }
.social-export-nav > button { flex:1; background:#f2efdd; color:#173f35; }
.social-export-preview { margin:0; width:100%; }
.social-export-preview img { display:block; width:100%; height:auto; max-height:none; border:1px solid #c7b788; border-radius:10px; box-shadow:0 5px 20px #473c1814; }
.social-export-preview figcaption { font-size:.85rem; text-align:center; line-height:1.6; margin-top:10px; }
.social-export-controls .social-export-tip { color:#55634d; font-size:.87rem; }
#socialExportStatus { min-height:3em; color:#155443; font-weight:600; }
@media(max-width:700px) { .social-export-dialog { padding:16px; } .social-export-layout { display:flex; flex-direction:column; gap:20px; } .social-export-controls { position:static; width:100%; } .social-export-preview { max-width:430px; align-self:center; } }
@media print { .social-export-dialog { display:none!important; } }

/* Kỳ Môn formation hero · approved distinct application identity. */
body.visual-celestial .qimen-hero-image { object-position:68% 54%; mask-image:linear-gradient(90deg,transparent,#000 18%); }
body.visual-celestial .intro-aside > .celestial-instrument { display:none; }
@media (max-width:1179px) {
  body.visual-celestial .intro { flex-direction:column; min-height:0; padding:28px 16px 8px; }
  body.visual-celestial .intro-main { width:100%; max-width:760px; }
  body.visual-celestial .intro-aside { position:relative; inset:auto; width:calc(100% + 32px); aspect-ratio:2 / 1; margin:4px -16px 0; align-self:center; overflow:hidden; }
  body.visual-celestial .qimen-hero-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center; mask-image:none; }
  body.visual-celestial .intro::after { display:none; }
  body.visual-celestial .intro-aside::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#fcfbf6,transparent 13%,transparent 92%,#fcfbf6); }
}
@media (max-width:760px) {
  body.visual-celestial .intro { padding:24px 8px 8px; }
  body.visual-celestial .intro-aside { width:calc(100% + 16px); margin:12px -8px 0; }
}

/* v1.7.0: contain decorative overflow; the nine-palace board keeps its own horizontal scroller. */
html:has(body.visual-celestial) { overflow-x: clip; }