/* R197 — feature-scoped design system, inherits the approved home palette. */
.dn-content{--dn-ink:#203447;--dn-muted:#596b76;--dn-gold:#9c6e2e;--dn-border:#d4b582;--dn-paper:#fffdf7;--dn-positive:#196749;--dn-caution:#956016;--dn-bad:#9d3b35;--dn-space:16px;--dn-radius:16px;--dq-color-text:var(--dn-ink);--dq-color-muted:var(--dn-muted);--dq-color-border:var(--dn-border);--dq-color-control-border:#c4ced3;--dq-color-surface-gradient:linear-gradient(145deg,#fffdf8,#fbf5e9);--dq-font-body:'DQ Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--dq-font-display:'DQ Serif',Georgia,serif;display:flex;flex-direction:column;gap:var(--dn-space);padding-bottom:calc(95px + env(safe-area-inset-bottom));font-size:14px;line-height:1.7}
.dn-content .dq-card{border-radius:var(--dn-radius);padding:18px;box-shadow:0 5px 18px #00132415;background:var(--dq-color-surface-gradient);color:var(--dn-ink)}
.dn-content h2{font-size:23px;line-height:1.35;overflow-wrap:anywhere;margin-bottom:0}.dn-content h3{font-size:17px;line-height:1.45;overflow-wrap:anywhere;margin-bottom:0}.dn-content .dq-stack{gap:12px}.dn-content p{overflow-wrap:anywhere}
.dn-content .dq-input{font-size:16px;min-height:46px;min-width:0;background:#fffefc;border-radius:11px;color:var(--dn-ink);font-weight:400;line-height:1.35;padding:10px 11px}.dn-content select{appearance:auto}.dn-content input[type=number]{appearance:textfield}.dn-content input[type=number]::-webkit-inner-spin-button{appearance:none}.dn-content input[type=time]{width:100%;min-width:0}.dn-content .dq-field{font-size:12px;line-height:1.5;gap:6px}
.dn-content .dq-button{min-height:46px;font-family:var(--dq-font-body);font-size:13px;border-radius:12px;background:linear-gradient(120deg,#1d445a,#082639);color:#ffe7b1;border:1px solid var(--dn-border)}
.dn-content .dn-primary{padding:12px 18px;font-size:15px}.dn-capsule{display:flex;justify-content:center}.dn-content .dn-chip{min-height:38px;padding:8px 22px;font-size:14px;white-space:normal;border-radius:999px;background:linear-gradient(130deg,#fff1cc,#f1d49b);color:#4a3524;box-shadow:0 4px 12px #0003}
.dn-eyebrow{font:700 10px/1.6 var(--dq-font-body);letter-spacing:.08em;color:var(--dn-gold)}.dn-intro-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.dn-intro-top>div{min-width:0}.dn-intro-top img{width:92px;height:92px;object-fit:cover;border:1px solid var(--dn-border);border-radius:15px;box-shadow:0 4px 16px #071e3733}.dn-intro h2{margin-top:6px;font-size:25px!important}.dn-points{padding-left:18px;margin:14px 0 0;font-size:13px;line-height:1.8}.dn-points li+li{margin-top:5px}.dn-points li::marker{color:var(--dn-gold)}.dn-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;padding-top:14px}.dn-tags span,.dn-relations span{border:1px solid #d4b58280;border-radius:999px;background:#fff7e5;padding:5px 11px;font:700 11px/1.5 var(--dq-font-body);color:#69502f}
.dn-helper{font-size:12px;line-height:1.7;color:var(--dn-muted)}.dn-muted{font-size:12px;color:var(--dn-muted)}.dn-name{font-weight:400!important}.dn-name-preview{padding:9px 11px;border-radius:10px;background:#eaf2f4;font-size:12px;color:#284953}.dn-name-preview:empty{display:none}.dn-birth-section{display:grid;gap:10px;border-top:1px solid #cbd3d680;padding-top:14px}.dn-birth-section h3{font-family:var(--dq-font-body);font-size:14px}.dn-birth-section h3>span{font-size:11px;font-weight:400;color:var(--dn-muted)}.dn-date-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);gap:8px}.dn-secondary-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}.dn-secondary-grid select{font-size:14px!important;padding-inline:6px!important}.dn-secondary-grid input{font-size:14px!important;padding-inline:7px!important}.dn-check{display:flex;align-items:center;gap:9px;font-size:12px}.dn-check input{width:19px;height:19px;accent-color:var(--dn-gold)}.dn-actions,.dn-result-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.dn-reset{border:0;background:transparent;color:#6b5c42;min-height:44px;font:700 12px var(--dq-font-body);padding:8px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.dn-error{border:1px solid #ae4c4555;background:#fff0eb;color:#8c302b;padding:12px;border-radius:11px;font-size:13px;line-height:1.7}
.dn-details{font-size:12px;line-height:1.8}.dn-details summary{font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none;color:#655030}.dn-details summary:before{content:'+';font:700 20px var(--dq-font-body);flex:none;color:var(--dn-gold)}.dn-details[open]>summary:before{content:'−'}.dn-details summary::-webkit-details-marker{display:none}.dn-details[open]>summary{margin-bottom:8px}.dn-details p+p{margin-top:10px}.dn-details p{font-size:13px;color:var(--dn-ink)}.dn-surname-options{border-top:1px solid #cbd3d680}.dn-surname-options .dq-field{margin-bottom:9px}.dn-guide .dn-details,.dn-faq>.dn-details{border-top:1px solid #d4b58255}.dn-guide>p,.dn-guide details p{font-size:13px;line-height:1.85}.dn-guide h3{font-size:17px;margin-bottom:8px}.dn-guide .dn-faq{margin-top:5px}
.dn-overview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.dn-overview-head>div{min-width:0}.dn-overview h2{font-size:22px;font-family:var(--dq-font-body);margin-top:5px}.dn-count{flex:none;border-radius:999px;padding:5px 9px;background:#1c4d53;color:#fff7dc;font:700 10px/1.6 var(--dq-font-body);white-space:nowrap}.dn-name-parts{font-size:12px;line-height:1.9}.dn-name-parts b{font-weight:700}.dn-overview>p:not(.dn-name-parts){font-size:13px}
.dn-grid-results{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dn-content .dn-grid-card{padding:14px;gap:10px;align-content:start}.dn-grid-head{display:flex;align-items:start;justify-content:space-between;gap:7px;flex-wrap:wrap}.dn-grid-head h3{font-family:var(--dq-font-body);font-size:15px}.dn-grid-head .dn-eyebrow{font-size:9px;letter-spacing:0}.dn-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;min-height:23px;font:700 10px/1.3 var(--dq-font-body);border:1px solid currentColor;white-space:normal;background:#fff}.dn-badge.dn-tier-great,.dn-badge.dn-tier-good{color:var(--dn-positive);background:#e9f4ed}.dn-badge.dn-tier-mixed{color:var(--dn-caution);background:#fff4d8}.dn-badge.dn-tier-bad,.dn-badge.dn-tier-veryBad{color:var(--dn-bad);background:#fceee9}.dn-number-row{display:flex;align-items:center;gap:10px}.dn-number-row>strong{font:700 34px/1.1 var(--dq-font-display);color:#213f53}.dn-number-row>span{font:700 12px/1.5 var(--dq-font-body)}.dn-number-row small{display:block;font-size:10px;font-weight:400;color:var(--dn-muted);margin-top:3px}.dn-grid-card .dn-reading{font-size:12px;line-height:1.85}.dn-grid-card .dn-helper{font-size:11px;line-height:1.65}.dn-grid-card .dn-details{border-top:1px solid #d4b58255}.dn-grid-card .dn-details summary{font-size:10px}.dn-grid-card .dn-details p{font-size:11px;line-height:1.8}
.dn-element-chain{display:flex;align-items:center;justify-content:center;gap:11px;padding:8px 0}.dn-element{display:flex;align-items:center;justify-content:center;width:64px;height:42px;border:1px solid #d4b58290;border-radius:12px;background:#edf2e8;color:#304a38;font:700 15px var(--dq-font-body)}.dn-element-Hỏa{background:#fceae1;color:#963d27}.dn-element-Thổ{background:#f9efd9;color:#786032}.dn-element-Kim{background:#eff2f3;color:#344655}.dn-element-Thủy{background:#e8f2fb;color:#345a82}.dn-chain-arrow{color:#a77a3d}.dn-tamtai h3{font-family:var(--dq-font-body);font-size:15px}.dn-relations{display:flex;gap:6px;flex-wrap:wrap}.dn-relations span{font-size:10px}.dn-tamtai>p{font-size:13px;line-height:1.8}
.dn-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.dn-three-pillars{grid-template-columns:repeat(3,minmax(0,1fr))}.dn-pillars>div{display:grid;gap:5px;text-align:center;background:#edf2f4;border-radius:10px;padding:10px 5px;min-width:0}.dn-pillars small{font-size:10px;color:var(--dn-muted)}.dn-pillars b{font:700 11px/1.7 var(--dq-font-body);overflow-wrap:anywhere}.dn-birth-result>p{font-size:13px;line-height:1.8}.dn-callout{padding:12px 13px;border:1px solid #d4b58280;border-radius:11px;background:#fff4db;font-size:12px;line-height:1.8}.dn-callout b{font-weight:700}.dn-callout p{margin-top:5px;font-size:12px}.dn-compatible{background:#edf5ef;border-color:#58806966;color:#285640}.dn-caution{color:#806025}
.dn-syllables{display:grid;gap:10px}.dn-syllables>div{display:grid;gap:5px;background:#f2eddf;border-radius:10px;padding:12px;margin-bottom:8px;overflow-wrap:anywhere}.dn-syllables span{font-size:11px;color:var(--dn-muted)}.dn-syllables strong{font-size:12px}.dn-calculation>p{margin-top:12px}.dn-footer{text-align:center;color:#f1dfbd;font-size:11px;line-height:1.8;margin:0 5px}
.dn-table-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.dn-table-number{min-height:42px;border:1px solid #d7b985;border-radius:9px;background:#edf4ed;color:#255b3d;font:700 14px var(--dq-font-body);cursor:pointer}.dn-table-number.dn-tier-mixed{background:#fff0cf;color:#77510c}.dn-table-number.dn-tier-bad,.dn-table-number.dn-tier-veryBad{background:#f8e3de;color:#853833}.dn-table-number[aria-pressed=true]{outline:2px solid #294c62;outline-offset:2px}.dn-table-description{margin-top:12px;border-radius:10px;padding:12px;background:#ede6d7;font-size:12px}.dn-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.home-page .dn-feature-tile{position:relative;overflow:hidden;background:none!important}.dn-feature-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.dn-feature-tile:after{content:'';position:absolute;inset:43% 0 0;background:linear-gradient(transparent,#001324f0)}.home-page .dn-feature-tile b{position:absolute;bottom:7px;left:3px;right:3px;z-index:1;font:700 11px/1.4 var(--dq-font-body);color:#fff4d9;text-align:center;text-shadow:0 2px 4px #000;white-space:normal}.dn-feature-tile>svg{z-index:2}
@media(max-width:389px){.dn-grid-results{grid-template-columns:1fr}.dn-content .dn-grid-card{padding:16px}.dn-grid-head{flex-wrap:nowrap}.dn-overview-head{flex-wrap:wrap}.dn-content .dq-card{padding:16px}.dn-intro-top img{width:78px;height:78px}.dn-intro h2{font-size:23px!important}.dn-secondary-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.8fr)}.dn-secondary-grid input,.dn-secondary-grid select{font-size:12px!important;padding-inline:4px!important}.dn-table-grid{gap:6px}}
@media(prefers-reduced-motion:reduce){.dn-content *{scroll-behavior:auto!important}}