/* Ngọc Sáng · 2026-09-26. Presentation only; preserves the 3×3 Lạc Thư order. */
html:has(body.visual-luminous) { color-scheme: light; }
body.visual-luminous {
  color-scheme: light;
  --void: #f7f5ed; --sky-deep: #edf4ed; --sky: #faf9f4;
  --surface: #fffefb; --surface-raised: #eaf3ed; --surface-warm: #f8f0dd;
  --plate: #fffdf7; --plate-deep: #f3f6f0; --lacquer: #fffdf8; --lacquer-red: #fff2eb;
  --ink: #123e35; --ink-soft: #244b42; --muted: #4d6058; --faint: #60695c;
  --bronze-dark: #987339; --bronze: #9b7535; --bronze-light: #795b27;
  --jade: #006b5b; --jade-light: #176c53; --water: #245e85; --metal: #635643; --earth: #815b26;
  --cinnabar: #9d3e32; --cinnabar-light: #a53b31; --danger: #a42e28; --success: #116948;
  --line: #c9d5c9; --line-soft: #d5ddd2; --line-hair: #e1e6dc; --focus-ring: #007764;
  --gold: #987339; --gold-highlight: #795b27;
  --page: min(1680px, calc(100% - 64px));
  color: var(--ink); background: var(--void); font-size: 16px; line-height: 1.7;
}
body.visual-luminous .ambient-depth { background: radial-gradient(ellipse at 90% 12%, #e7efe2 0, transparent 55%), #f7f5ed; }
body.visual-luminous .ambient-depth span { display: none; }
body.visual-luminous .site-header { position: relative; width: var(--page); min-height: 88px; gap: 22px; border-color: var(--line); background: transparent; box-shadow: none; backdrop-filter: none; }
body.visual-luminous .brand { flex-shrink: 0; }
body.visual-luminous .brand strong { font-size: 1.14rem; color: #123e35; }
body.visual-luminous .brand small { color: #566554; font-size: .65rem; letter-spacing: .14em; }
body.visual-luminous .brand-mark { width: 46px; height: 46px; color: #fff6d4; border: 3px double #bca46a; background: radial-gradient(circle at 30% 20%, #458c72, #075346 75%); box-shadow: 0 3px 9px #183e3515, inset 0 0 0 3px #f4df9f44; }
body.visual-luminous .header-actions { justify-content: flex-end; gap: 6px; }
body.visual-luminous :is(.header-button,.outline-button,.text-button,.file-button,.icon-button,.danger-button) { color: #244b42; background: #fffdf8; border: 1px solid #c7d3c6; box-shadow: none; font-size: .84rem; line-height: 1.45; }
body.visual-luminous :is(.header-button,.outline-button,.text-button,.file-button,.icon-button):hover { color: #005448; border-color: #448a70; background: #edf5ec; }
body.visual-luminous .danger-button { color: var(--danger); border-color: #dcbab0; }
body.visual-luminous .service-pill { background: #eaf3e9; color: #285642; border-color: #cbddc9; box-shadow: none; font-size: .72rem; }
body.visual-luminous .service-dot { box-shadow: none; }
body.visual-luminous .intro { min-height: 0; padding: 48px 0 42px; margin: 0; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: center; border-bottom: 1px solid #d4dccc; }
body.visual-luminous .intro::before, body.visual-luminous .intro::after { display: none; }
body.visual-luminous :is(.eyebrow,.kicker) { color: #795b27; font-size: .72rem; font-weight: 750; letter-spacing: .14em; }
body.visual-luminous .intro h1 { color: #103f34; font-size: clamp(2.8rem, 4.4vw, 4.7rem); line-height: 1.1; letter-spacing: -.04em; text-shadow: none; }
body.visual-luminous .intro h1 em { color: #26735b; background: none; font-weight: 500; font-size: .72em; font-style: normal; letter-spacing: -.03em; }
body.visual-luminous .intro-copy { max-width: 540px; color: #475d51; font-size: 1.02rem; line-height: 1.85; margin-top: 22px; }
body.visual-luminous .intro-actions { margin-top: 25px; }
body.visual-luminous :is(.hero-cta,.primary-button,.tool-primary) { color: #fffdf0; background: linear-gradient(145deg, #087966, #005d51); border: 1px solid #006253; box-shadow: inset 0 1px #ffffff30, 0 6px 16px #144e3820; border-radius: 9px; }
body.visual-luminous :is(.hero-cta,.primary-button,.tool-primary):hover { color: white; background: #005347; }
body.visual-luminous .hero-link { color: #245e4e; text-decoration-color: #9bb5a3; }
body.visual-luminous .intro-trust { margin-top: 25px; border-color: #d5ddce; }
body.visual-luminous .intro-trust li { border-color: #d5ddce; }
body.visual-luminous .intro-trust span { color: #65705f; font-size: .66rem; }
body.visual-luminous .intro-trust strong { color: #2b5142; font-size: .85rem; }
body.visual-luminous .intro-aside { min-height: 0; display: block; perspective: none; }
body.visual-luminous .celestial-instrument { display: none; }
body.visual-luminous .qimen-hero-image { display: block; width: 100%; aspect-ratio: 1.25; object-fit: cover; border-radius: 48% 48% 12px 12px; border: 1px solid #d8d9bd; box-shadow: 0 16px 40px #314e3820; }
body.visual-luminous .instrument-caption { position: relative; inset: auto; margin-top: 17px; color: #63705b; font-size: .7rem; letter-spacing: .15em; }
body.visual-luminous .instrument-caption span { color: #795b27; }
body.visual-luminous .workspace { margin: 38px 0 64px; gap: 24px; grid-template-columns: minmax(310px, 26%) minmax(0, 1fr); }
body.visual-luminous :is(.input-panel,.result-panel) { border: 1px solid #ccd7c8; border-radius: 16px; background: #fffefb; box-shadow: 0 10px 34px #294d3410, inset 0 1px #fff; }
body.visual-luminous :is(.input-panel,.result-panel)::before, body.visual-luminous :is(.input-panel,.result-panel)::after { display: none; }
body.visual-luminous .panel-heading { padding: 22px; min-height: 90px; border-color: #d9e1d3; background: linear-gradient(110deg, #edf4e9, #fafbf3); }
body.visual-luminous .panel-heading h2 { color: #123e35; font-size: 1.8rem; }
body.visual-luminous .step-number { color: #54744c; border-color: #b6c9aa; background: #f9fbf0; box-shadow: inset 0 1px white; }
body.visual-luminous #chartForm { padding: 24px 22px 22px 42px; }
body.visual-luminous #chartForm::before { background: linear-gradient(#bccfaa, #e5e9da 85%, transparent); }
body.visual-luminous :is(.form-section legend,.advanced summary) { color: #315b49; letter-spacing: .04em; font-size: .84rem; }
body.visual-luminous :is(.form-section legend span,.advanced summary span) { color: #44663a; background: #eef4e5; border-color: #c1d2b1; font-size: .66rem; }
body.visual-luminous .field label { color: #3b5649; font-size: .88rem; line-height: 1.5; }
body.visual-luminous .field > small { color: #65705f; font-size: .78rem; }
body.visual-luminous .input-panel .form-grid.two-columns { grid-template-columns: minmax(0,1fr); }
body.visual-luminous :is(input,select,textarea) { color: #183f35; border: 1px solid #bacbbd; border-radius: 8px; background: #fff; box-shadow: inset 0 2px 3px #21473205; font-size: 1rem; line-height: 1.5; min-width: 0; }
body.visual-luminous :is(input,select,textarea):hover { border-color: #719b81; }
body.visual-luminous :is(input,select,textarea):focus-visible { border-color: #007764; box-shadow: 0 0 0 3px #00776418; }
body.visual-luminous :is(input,textarea)::placeholder { color: #667364; opacity: 1; }
body.visual-luminous select option { color: #123e35; background: white; }
body.visual-luminous input[type=checkbox] { accent-color: #006b5b; }
body.visual-luminous :is(.check-field,.conditional-hint,.privacy-note,.profile-support,.profile-support-details) { color: #4d6058; font-size: .84rem; line-height: 1.75; }
body.visual-luminous .privacy-note { background: #f0f6ee; border-color: #cfdeca; }
body.visual-luminous .conditional-block { background: #f0f6ee; border-color: #48896b; }
body.visual-luminous .profile-support { background: #fbf7ec; border-color: #b3985c; }
body.visual-luminous .result-panel { padding: 26px; min-height: 660px; }
body.visual-luminous .empty-state { min-height: 580px; padding: 25px; }
body.visual-luminous .empty-state h2 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.2; }
body.visual-luminous .empty-orbit { color: #337152; border-color: #b69b5c; background: repeating-conic-gradient(#c9dcc5 0deg 32deg, #f7f7e9 32deg 45deg); box-shadow: inset 0 0 0 17px #f7f8ea, inset 0 0 0 18px #c1ccab, 0 10px 26px #37572e14; }
body.visual-luminous .empty-steps { gap: 12px; }
body.visual-luminous .empty-steps li { font-size: .88rem; }
body.visual-luminous .result-heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; padding-bottom: 20px; }
body.visual-luminous .result-heading h2 { color: #123e35; text-shadow: none; font-size: clamp(1.8rem, 2.7vw, 2.8rem); line-height: 1.2; }
body.visual-luminous .muted { color: #4d6058; }
body.visual-luminous .tool-strip { background: #f7f9f1; border-color: #ced8c9; box-shadow: none; max-width: 100%; }
body.visual-luminous .tool-button { color: #305a46; font-size: .84rem; min-height: 46px; border-color: #d4ddcd; }
body.visual-luminous .tool-button:hover { color: #004f42; background: #e7f1e3; }
body.visual-luminous .tool-button.tool-primary { color: #fffdf0; background: #006b5b; }
body.visual-luminous .tool-strip-label { color: #60695c; font-size: .67rem; }
body.visual-luminous .study-toolbar .tool-button { border: 1px solid #cbd8c6; border-radius: 7px; background: #f5f9f0; }
body.visual-luminous .summary-strip { background: #f1f6eb; border: 1px solid #d3dec9; border-radius: 9px; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 22px 0; }
body.visual-luminous .summary-item + .summary-item { border-color: #d4dfcc; }
body.visual-luminous .summary-item:nth-child(3n+1) { border-left: 0; }
body.visual-luminous .summary-item:nth-child(n+4) { border-top: 1px solid #d4dfcc; }
body.visual-luminous .summary-item small { color: #58684f; font-size: .73rem; letter-spacing: .05em; }
body.visual-luminous .summary-item strong { color: #254d3c; font-size: .94rem; white-space: normal; overflow: visible; }
body.visual-luminous .legend { color: #4e6255; font-size: .75rem; gap: 10px; }
body.visual-luminous .heaven-board { filter: none; padding: 0; }
body.visual-luminous .heaven-board::before { display: none; }
body.visual-luminous .heaven-board-rim { padding: 30px 18px; border: 1px solid #b59d5e; border-radius: 12px; background: linear-gradient(135deg,#f8edbe,#d9c887 32%,#f6edc8 65%,#c4ae6a); box-shadow: inset 0 0 0 4px #f8f4de, inset 0 0 0 5px #bda466, 0 5px 0 #b3a16f, 0 14px 25px #31522f20; }
body.visual-luminous .heaven-board-rim::before { inset: 9px; border: 1px solid #af955c; border-radius: 6px; }
body.visual-luminous .heaven-board-rim::after { display: none; }
body.visual-luminous .heaven-board-bevel { padding: 4px; background: #99b197; box-shadow: inset 0 1px 5px #31553438; border-radius: 6px; }
body.visual-luminous .heaven-board-plate { padding: 4px; background: #d7e1ce; box-shadow: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #6f9576 #e1ead7; }
body.visual-luminous .board-engraving { display: none; }
body.visual-luminous .board-direction { color: #58451e; font-size: .7rem; font-weight: 800; text-shadow: none; }
body.visual-luminous .lac-thu-board { min-width: 810px; grid-template-columns: repeat(3,minmax(260px,1fr)); grid-auto-rows: minmax(410px,auto); gap: 6px; background: transparent; }
body.visual-luminous .palace-card, body.visual-luminous .palace-card.center { min-height: 410px; padding: 16px 14px; border: 1px solid #c4d3bc; border-radius: 7px; background: linear-gradient(135deg,rgba(var(--element-rgb),.06),transparent 50%), #fffef7; box-shadow: 0 2px 3px #38522c15, inset 0 1px white; overflow: visible; }
body.visual-luminous .palace-card:hover { background: #f0f7e8; box-shadow: inset 0 0 0 2px #7da079; }
body.visual-luminous .palace-card.focus { background: #fff9e6; border-color: #a7893f; box-shadow: inset 0 0 0 1px #b49752, 0 2px 3px #38522c15; }
body.visual-luminous .palace-card::before { top: 0; left: 14px; width: 58px; height: 3px; opacity: .85; }
body.visual-luminous .palace-card.focus::before { background: #917025; width: 100px; }
body.visual-luminous .palace-card::after { display: none; }
body.visual-luminous .element-wood { --element-rgb: 30,105,64; }
body.visual-luminous .element-fire { --element-rgb: 165,59,49; }
body.visual-luminous .element-earth { --element-rgb: 129,91,38; }
body.visual-luminous .element-metal { --element-rgb: 99,86,67; }
body.visual-luminous .element-water { --element-rgb: 36,94,133; }
body.visual-luminous .element-neutral { --element-rgb: 87,93,52; }
body.visual-luminous .palace-topline { gap: 8px; align-items: flex-start; }
body.visual-luminous .palace-location strong { color: #123e35; font-size: 1.15rem; font-weight: 750; line-height: 1.4; }
body.visual-luminous .palace-location small { display: block; color: #56694f; font-size: .74rem; line-height: 1.6; }
body.visual-luminous .palace-seals { gap: 4px; flex-direction: column; }
body.visual-luminous :is(.element-seal,.palace-number) { background: #f1f5e8; font-size: .69rem; border-color: rgba(var(--element-rgb),.45); color: rgb(var(--element-rgb)); }
body.visual-luminous .palace-number { width: 29px; height: 29px; font-size: .85rem; }
body.visual-luminous .palace-main { margin-top: 13px; gap: 6px; }
body.visual-luminous .palace-main-row, body.visual-luminous .palace-main-row:nth-child(n) { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 7px; align-items: baseline; }
body.visual-luminous .palace-main-row span { display: block; color: #5a694f; font-size: .72rem; letter-spacing: .015em; line-height: 1.55; }
body.visual-luminous .palace-main-row strong { display: block; color: #204637; font-size: .92rem; line-height: 1.5; font-weight: 650; white-space: normal; overflow: visible; text-overflow: clip; }
body.visual-luminous .palace-growth-row strong { color: #705623; font-size: .82rem; }
body.visual-luminous .palace-hidden-row strong { color: #315c47; }
body.visual-luminous .palace-shensha-label { color: #5a694f; font-size: .72rem; letter-spacing: .025em; }
body.visual-luminous .palace-shensha-empty { color: #63715b; font-size: .78rem; }
body.visual-luminous .palace-tags { display: flex; gap: 5px; border-color: #e1e5d5; }
body.visual-luminous .mini-tag, body.visual-luminous .palace-tags .mini-tag, body.visual-luminous .palace-shensha-list .mini-tag.shensha { display: inline-flex; min-height: 24px; padding: 3px 7px; color: #526044; border: 1px solid #c9d4b7; background: #f4f6e9; font-size: .73rem; line-height: 1.45; white-space: normal; }
body.visual-luminous .mini-tag.focus { color: #735116; background: #fff0c3; border-color: #c3a762; }
body.visual-luminous .mini-tag.void { color: #21567a; background: #e9f3f8; border-color: #aac8d9; }
body.visual-luminous .mini-tag.horse { color: #993e31; background: #fff0e9; border-color: #ddb2a3; }
body.visual-luminous .palace-card.center .palace-main { width: 100%; max-width: none; }
body.visual-luminous .palace-card.center .center-axis { width: 88px; left: 76%; top: 76%; opacity: .3; border-color: #9aaa76; background: radial-gradient(circle,#e3cb7e 0 12%,#fff6cf 13% 28%,#dceac8 29% 48%,#faf9e5 49%); box-shadow: none; }
body.visual-luminous .center-axis-seal { color: #755922; border-color: #9c7c37; }
body.visual-luminous .board-hint { color: #4d6553; margin-top: 20px; font-size: .87rem; line-height: 1.75; }
body.visual-luminous .result-tabs { border-color: #c6d7c2; gap: 4px; }
body.visual-luminous .result-tab { color: #526b55; background: transparent; padding: 12px 15px; font-size: .88rem; }
body.visual-luminous .result-tab.active { color: #006253; background: #eaf4e7; box-shadow: inset 0 -3px #00725e; font-weight: 750; }
body.visual-luminous :is(.content-card,.evidence-item,.indicator-item,.audit-item,.detail-item,.account-section,.history-item) { background: #f8faf3; border-color: #d4deca; border-radius: 9px; }
body.visual-luminous :is(.content-card p,.simple-list) { color: #425c49; line-height: 1.85; }
body.visual-luminous .verdict-card { border-left: 4px solid #478162; background: #f0f6e9; }
body.visual-luminous :is(.evidence-item,.indicator-item,.audit-item,.detail-item) small { font-size: .8rem; color: #5d6a56; }
body.visual-luminous dialog { border: 1px solid #9fbc9f; background: #fffef8; box-shadow: 0 24px 70px #183c3440; }
body.visual-luminous dialog::backdrop { background: #173e386b; backdrop-filter: blur(5px); }
body.visual-luminous .dialog-heading { background: #f4f8ee; border-color: #d0ddc5; }
body.visual-luminous .study-card { background: #f8faf2; border-color: #d3ddc8; }
body.visual-luminous .natal-palace :is(span,small) { font-size: .87rem; line-height: 1.75; }
body.visual-luminous .fs-board { grid-template-columns: repeat(3,minmax(205px,1fr)); overflow-x: auto; padding-bottom: 8px; }
body.visual-luminous .fs-palace { padding: 14px 12px; }
body.visual-luminous .fs-palace strong { font-size: 1rem; }
body.visual-luminous .fs-palace :is(span,small) { font-size: .87rem; }
body.visual-luminous .extension-badge { color: #265c47; background: #eaf4e9; border-color: #abcaa5; }
body.visual-luminous .stem-existing_rule { color: #24543d; background: #e7f2e3; }
body.visual-luminous .stem-reference_only { color: #76551b; background: #fff3d4; }
body.visual-luminous .stem-unverified { color: #545a53; background: #eceee7; }
body.visual-luminous .stem-cell[aria-pressed=true] { outline-color: #006b5b; }
body.visual-luminous .toast { color: #fffef6; background: #125448; border-color: #427b64; }
body.visual-luminous .site-footer { color: #53644f; border-color: #d0dac6; font-size: .82rem; }
@media (max-width: 1200px) {
  body.visual-luminous { --page: calc(100% - 40px); }
  body.visual-luminous .site-header { flex-wrap: wrap; padding-block: 16px; gap: 12px; }
  body.visual-luminous .header-actions { justify-content: flex-start; }
  body.visual-luminous .workspace { grid-template-columns: 1fr; }
  body.visual-luminous #chartForm { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 42px; }
  body.visual-luminous #chartForm > :is(.advanced,.profile-support,.profile-support-details,.privacy-note,.form-actions,.form-status) { grid-column: 1/-1; }
  body.visual-luminous #chartForm::before { display: none; }
  body.visual-luminous .form-grid.two-columns, body.visual-luminous .input-panel .form-grid.two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  body.visual-luminous { --page: calc(100% - 28px); }
  body.visual-luminous .site-header { gap: 12px; }
  body.visual-luminous .header-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
  body.visual-luminous .header-actions > * { flex-shrink: 0; }
  body.visual-luminous .header-actions .header-button { font-size: .8rem; min-height: 44px; padding-inline: 12px; }
  body.visual-luminous .intro { padding: 28px 0; grid-template-columns: 1fr; gap: 26px; text-align: left; }
  body.visual-luminous .intro h1 { font-size: clamp(2.5rem, 9vw, 3.7rem); }
  body.visual-luminous .intro-copy { font-size: 1rem; }
  body.visual-luminous .intro-actions { justify-content: flex-start; gap: 16px; }
  body.visual-luminous .intro-trust { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 22px; }
  body.visual-luminous .intro-trust li { padding: 10px 5px !important; }
  body.visual-luminous .intro-trust li + li { border-top: 0; border-left: 1px solid #d5ddce; padding-left: 10px !important; }
  body.visual-luminous .intro-trust strong { font-size: .78rem; }
  body.visual-luminous .qimen-hero-image { max-height: 320px; aspect-ratio: 1.65; border-radius: 14px; object-position: 50% 56%; }
  body.visual-luminous .instrument-caption { margin-top: 10px; }
  body.visual-luminous .workspace { margin-top: 26px; gap: 24px; }
  body.visual-luminous #chartForm { display: block; }
  body.visual-luminous .form-grid.two-columns, body.visual-luminous .input-panel .form-grid.two-columns { grid-template-columns: 1fr; }
  body.visual-luminous .result-panel { padding: 22px 12px; }
  body.visual-luminous .empty-state { min-height: 410px; padding: 16px; }
  body.visual-luminous .empty-steps { grid-template-columns: 1fr; text-align: left; gap: 13px; }
  body.visual-luminous .empty-steps li + li { border: 0; }
  body.visual-luminous .empty-steps span { display: inline; margin-right: 10px; }
  body.visual-luminous .tool-strip-exports { grid-template-columns: auto repeat(4,minmax(0,1fr)); }
  body.visual-luminous .tool-button { padding-inline: 9px; font-size: .8rem; }
  body.visual-luminous .summary-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.visual-luminous .summary-item:nth-child(n) { border-left: 0; }
  body.visual-luminous .summary-item:nth-child(even) { border-left: 1px solid #d4dfcc; }
  body.visual-luminous .summary-item:nth-child(n+3) { border-top: 1px solid #d4dfcc; }
  body.visual-luminous .heaven-board-rim { padding: 27px 12px; }
  body.visual-luminous .palace-location strong { font-size: 1.12rem; }
  body.visual-luminous .result-heading { display: block; }
  body.visual-luminous .tool-strip { margin-top: 18px; }
  body.visual-luminous .study-dialog { padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.visual-luminous) { scroll-behavior: auto; }
  body.visual-luminous *, body.visual-luminous *::before, body.visual-luminous *::after { animation: none !important; transition: none !important; }
}
@media print {
  body.visual-luminous { background: white; }
  body.visual-luminous .qimen-hero-image { display: none; }
}