/* R188: uses the App design system; every component is feature-scoped. */
.cc-content{display:flex;flex-direction:column;gap:var(--dq-space-4);padding-bottom:100px}
.cc-capsule{display:flex;justify-content:center}.cc-capsule .dq-chip{display:inline-flex;width:max-content;max-width:100%;white-space:nowrap;font:700 clamp(10px,3.2vw,13px)/1.5 var(--dq-font-body);border-radius:var(--dq-radius-pill);padding:9px 16px;background:linear-gradient(120deg,#143449,#002036);border:1px solid #d4a9696b;color:var(--dq-color-accent-soft);box-shadow:0 5px 16px #0003}
.cc-eyebrow{font:700 10px/1.6 var(--dq-font-body);letter-spacing:1.25px;color:var(--dq-color-neutral)}
.cc-intro-top{display:flex;align-items:center;gap:12px}.cc-intro-top>div{flex:1;min-width:0}.cc-intro-top img{width:96px;height:96px;object-fit:cover;border-radius:var(--dq-radius-card);border:1px solid #bd8a4566;box-shadow:0 5px 16px #00203624}.cc-intro h2{font-family:var(--dq-font-display);line-height:1.35;margin:5px 0}.cc-intro p{font-size:13px;line-height:1.8;margin:12px 0 0}.cc-intro-top p{font-size:11px;margin:0;color:var(--dq-color-muted)}
.cc-principles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid #bd8a4540}.cc-principles span{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--dq-color-neutral);font-size:10px}
.cc-head h2{font-family:var(--dq-font-display);margin:3px 0 7px}.cc-head p,.cc-helper{font-size:12px;line-height:1.75;color:var(--dq-color-muted);margin:0}.cc-content .dq-stack{gap:var(--dq-space-4)}.cc-number{font:600 20px/1.5 var(--dq-font-body);letter-spacing:1px}.cc-number::placeholder{font-size:15px;letter-spacing:0}.cc-choice{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:8px;cursor:pointer}.cc-choice span{min-width:0;overflow-wrap:anywhere}.cc-choice svg{flex-shrink:0;transform:rotate(90deg);color:var(--dq-color-neutral)}
.cc-owner-toggle{display:flex;align-items:center;gap:10px;padding:12px;background:#d4a96916;border:1px solid #bd8a453b;border-radius:var(--dq-radius-control);cursor:pointer}.cc-owner-toggle input{width:20px;height:20px;accent-color:var(--dq-color-neutral);flex-shrink:0}.cc-owner-toggle span{display:grid;gap:4px}.cc-owner-toggle b{font-size:13px}.cc-owner-toggle small{font-size:11px;color:var(--dq-color-muted)}.cc-owner-fields{padding:12px;border-left:2px solid #bd8a454d;background:#ffffff38;border-radius:var(--dq-radius-control)}
.cc-primary{width:100%;min-height:48px;background:linear-gradient(110deg,#16384a,#002035)!important;color:#f8e3b8!important;border:1px solid #bd8a4580!important;justify-content:center;font-size:13px!important}.cc-link{background:none;border:0;color:var(--dq-color-neutral);font:600 12px var(--dq-font-body);min-height:44px;text-decoration:underline;cursor:pointer}.cc-error{font-size:13px;padding:10px 12px;border-radius:10px;background:#a6452720;color:#8e341e;line-height:1.6}.cc-error[hidden]{display:none}
.cc-result-banner{background:linear-gradient(120deg,#153648,#001b30);padding:20px;text-align:center;border:1px solid #d4a96966;border-radius:var(--dq-radius-card);color:#f8e3b8;box-shadow:0 8px 22px #0003}.cc-result-banner .cc-eyebrow{color:#d4a969}.cc-result-banner h2{font:700 clamp(21px,5vw,28px)/1.5 var(--dq-font-body);letter-spacing:2px;margin:8px 0}.cc-result-banner p{font-size:13px;margin:4px 0}
.cc-hex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cc-hex-card{padding:12px 10px;background:#ffffff55;border:1px solid #bd8a453d;border-radius:12px}.cc-hex-card>.cc-eyebrow{font-size:8px;letter-spacing:.5px}.cc-hex-card h3{font:700 15px/1.5 var(--dq-font-display);margin:5px 0;min-height:45px}.cc-hex-card p{font-size:12px;line-height:1.75}.cc-hex-card .cc-helper{font-size:11px}.cc-hex-lines{display:flex;flex-direction:column;gap:5px;margin:16px 0;max-width:150px}.cc-line{display:grid;grid-template-columns:12px 1fr 1fr;gap:7px;position:relative;min-height:9px;align-items:center}.cc-line small{font-size:9px;color:#80623e}.cc-line>span{height:5px;background:#16394a}.cc-yang>span:first-of-type{grid-column:2/4}.cc-yang>span:last-of-type{display:none}.cc-moving>span{background:#b57930}.cc-line em{font:600 8px var(--dq-font-body);position:absolute;right:0;top:-8px;color:#925e22;background:#f5ead4;padding:0 2px}
.cc-reading{padding:12px 14px;border-radius:12px;background:#d4a96914;border:1px solid #bd8a4534}.cc-reading h3{font-size:14px;line-height:1.6;margin:0 0 6px}.cc-reading p{font-size:13px;line-height:1.8;margin:6px 0 0}.cc-details{border-top:1px solid #bd8a4536;padding-top:12px;font-size:12px;line-height:1.8}.cc-details summary{font-weight:700;color:var(--dq-color-neutral);cursor:pointer;min-height:32px}.cc-details[open]>summary{margin-bottom:12px}.cc-dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:9px;font-size:12px;line-height:1.75;margin:0}.cc-dl dt{color:var(--dq-color-muted)}.cc-dl dd{margin:0;font-weight:600}
.cc-stars{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}.cc-star{display:grid;grid-template-columns:70px 1fr 14px;align-items:center;gap:6px;font-size:11px}.cc-star>div{height:6px;background:#bd8a4520;border-radius:5px;overflow:hidden}.cc-star i{height:100%;display:block;background:currentColor;border-radius:5px}.cc-good{color:var(--dq-color-positive)}.cc-care{color:var(--dq-color-caution)}.cc-stable{color:var(--dq-color-neutral)}.cc-pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.cc-pair{display:grid;text-align:center;gap:3px;padding:8px 2px;border:1px solid #bd8a4535;border-radius:10px;background:#ffffff45}.cc-pair small{font-size:9px;color:var(--dq-color-muted)}.cc-pair b{font-size:19px}.cc-pair span{font-size:10px;font-weight:600}.cc-trios p{display:flex;gap:12px;font-size:12px;padding:8px;border-bottom:1px solid #bd8a4529;margin:0}.cc-trios b{font-size:16px;min-width:36px}
.cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cc-stats>div{display:grid;gap:5px;text-align:center;padding:10px 5px;background:#bd8a4514;border-radius:10px}.cc-stats b{font-size:18px;color:#16384a}.cc-stats span{font-size:10px;line-height:1.6;color:var(--dq-color-muted)}.cc-elements{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.cc-elements span{display:grid;text-align:center;gap:4px;padding:10px 2px;border:1px solid #bd8a453a;border-radius:10px}.cc-elements b{font-size:11px;color:var(--dq-color-neutral)}.cc-elements strong{font-size:22px;color:#153648}.cc-elements small{font-size:9px;color:var(--dq-color-muted)}.cc-position-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cc-position-grid h3{font-size:13px}.cc-boundary{padding:12px;border-radius:10px;border:1px solid #bd8a4570;background:#d4a96920;font-size:12px;line-height:1.8}.cc-download{justify-content:center}.cc-footer{font-size:11px;line-height:1.8;text-align:center;color:#cfb990;margin:0 6px}
.home-page .cc-feature-tile{position:relative;overflow:hidden;background:none!important}.cc-feature-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cc-feature-tile:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#001324f0)}.home-page .cc-feature-tile b{position:absolute;bottom:7px;left:3px;right:3px;font:700 11px/1.4 var(--dq-font-body);z-index:1;color:var(--dq-color-on-dark);text-align:center;text-shadow:0 2px 4px #000;white-space:normal}.cc-feature-tile>svg{z-index:2}
.cc-picker{width:min(92vw,460px);padding:22px;border:1px solid #d4a96980;border-radius:20px;background:linear-gradient(145deg,#faf4e4,#eee0c6);color:var(--dq-color-text);box-shadow:0 15px 70px #0009;font-family:var(--dq-font-body);max-height:90dvh;overflow:auto}.cc-picker::backdrop{background:#001324bf;backdrop-filter:blur(3px)}.cc-picker h2{font:700 19px/1.5 var(--dq-font-display);margin:0 0 6px;text-align:center}.cc-picker>p{font-size:12px;line-height:1.7;text-align:center;color:var(--dq-color-muted);margin:0 0 16px}.cc-wheel-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cc-single-picker .cc-wheel-columns{grid-template-columns:1fr}.cc-wheel-col{min-width:0;text-align:center}.cc-wheel-col>b{font-size:12px;color:var(--dq-color-neutral);display:block;margin-bottom:8px}.cc-wheel{height:220px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;border-radius:12px;position:relative;background:linear-gradient(to bottom,transparent 88px,#d4a96928 88px,#d4a96928 132px,transparent 132px),#ffffff60;border:1px solid #bd8a4539}.cc-wheel::-webkit-scrollbar{display:none}.cc-wheel-spacer{height:88px;flex-shrink:0}.cc-wheel button{display:block;width:100%;height:44px;min-height:44px;padding:0 4px;border:0;background:transparent;scroll-snap-align:center;font:500 16px/44px var(--dq-font-body);color:#917d60;cursor:pointer;white-space:nowrap}.cc-wheel button[aria-selected=true]{color:#14384a;font-weight:800}.cc-single-picker .cc-wheel button{font-size:13px}.cc-actions{display:flex;gap:10px;margin-top:20px}.cc-actions .dq-button{flex:1;justify-content:center}.cc-actions .dq-button:last-child{background:#14384a;color:#f8e3b8}
@media(max-width:599px){.cc-hex-grid{grid-template-columns:1fr}.cc-hex-card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 14px}.cc-hex-card>.cc-eyebrow{grid-column:1/3}.cc-hex-card h3{grid-column:1/3;min-height:0}.cc-hex-lines{grid-column:1;grid-row:3/5;margin:12px 0}.cc-hex-card p{grid-column:2;margin:4px 0}.cc-stars{gap:10px}.cc-star{grid-template-columns:65px 1fr 12px;font-size:10px}.cc-position-grid{grid-template-columns:1fr}}
@media(max-width:359px){.cc-content .dq-card{padding:13px}.cc-intro-top img{width:76px;height:76px}.cc-intro h2{font-size:19px!important}.cc-capsule .dq-chip{padding-inline:12px}.home-page .cc-feature-tile b{font-size:9px}.cc-picker{padding:16px}.cc-dl{grid-template-columns:90px minmax(0,1fr)}.cc-star{grid-template-columns:57px 1fr 10px}.cc-principles b{font-size:9px}.cc-single-picker .cc-wheel button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.cc-wheel{scroll-behavior:auto}}
/* R188 · result and full reading; uses the existing navy, gold and paper tokens. */
.cc-page .cc-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dq-radius-pill);padding:3px 9px;font:700 10px/1.5 var(--dq-font-body);background:var(--cc-tint,#f1eee7);color:var(--cc-tone,#655741);border:1px solid var(--cc-border,#d6cbbb);white-space:nowrap}
.cc-tier-great{--cc-tone:#246746;--cc-border:#70a888;--cc-tint:#edf7ef}.cc-tier-good{--cc-tone:#185d7c;--cc-border:#7bafc4;--cc-tint:#edf6fa}.cc-tier-neutral{--cc-tone:#655741;--cc-border:#c8bcab;--cc-tint:#f4f0e8}.cc-tier-caution{--cc-tone:#945414;--cc-border:#d5a263;--cc-tint:#fff6e8}.cc-tier-danger{--cc-tone:#9f343b;--cc-border:#d49594;--cc-tint:#fff0f0}
.cc-overview{border-color:#bd8a4570!important}.cc-score-layout{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;align-items:center}.cc-score-ring{aspect-ratio:1;border-radius:50%;padding:7px;background:conic-gradient(var(--cc-tone) var(--cc-score),#e7e2d8 0)}.cc-score-ring>div{border-radius:50%;background:var(--dq-color-surface,#faf4e4);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.cc-score-ring b{font:700 30px/1.1 var(--dq-font-display);color:var(--cc-tone)}.cc-score-ring small{font-size:10px;color:var(--dq-color-muted);margin-top:6px}.cc-score-summary>.cc-badge{margin-bottom:10px}.cc-score-bars{display:grid;gap:9px}.cc-score-bar{display:grid;grid-template-columns:minmax(110px,1fr) minmax(60px,2fr) 24px;gap:8px;align-items:center;font-size:10px}.cc-score-bar>span{line-height:1.5;color:var(--dq-color-muted)}.cc-score-bar>div{height:7px;background:#e6e1d9;border-radius:10px;overflow:hidden}.cc-score-bar i{display:block;height:100%;background:linear-gradient(90deg,#d8b254,#a5772e);border-radius:10px}.cc-score-bar>b{color:var(--dq-color-neutral);text-align:right}
.cc-quality-summary{padding:12px;border:1px solid #bd8a4540;border-radius:12px;background:#fff8;line-height:1.8}.cc-quality-summary p{font-size:12px;margin:0}.cc-quality-summary p+p{margin-top:7px}.cc-quality-summary small{font-size:10px;color:var(--dq-color-muted)}.cc-quality-summary .cc-badge{margin:0 3px}.cc-quality-summary .cc-tier-good{--cc-tone:#15704b;--cc-border:#80b099;--cc-tint:#eef7ee}
.cc-trigram-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cc-trigram-grid article{display:grid;gap:6px;padding:12px;background:#fff8;border:1px solid #bd8a4540;border-radius:12px;text-align:center}.cc-trigram-grid b{color:var(--dq-color-neutral);font-size:13px}.cc-trigram-grid span{font-size:12px;line-height:1.7}.cc-full-actions{text-align:center;border-top:1px dashed #bd8a4560;padding-top:14px}.cc-full-actions>div{display:flex;justify-content:center;gap:16px}.cc-full-button{width:100%;justify-content:center;background:#176442!important;color:#fff7e0!important;min-height:48px;line-height:1.6;font-size:13px!important}.cc-full-button:focus-visible,.cc-return:focus-visible,.cc-detail-toc button:focus-visible{outline:3px solid #d4a969;outline-offset:3px}
.cc-subheading{font:700 15px/1.7 var(--dq-font-display);color:#16384a;margin:0 0 12px}.cc-position{padding:14px;border:1px solid #bd8a4580;border-radius:12px;background:#fff8f0}.cc-position-su{background:#f0f6fa;border-color:#85aabe}.cc-position-head{display:flex;gap:9px;align-items:flex-start}.cc-position-head>span{font-size:23px;line-height:1.5}.cc-position h4{font:700 13px/1.6 var(--dq-font-body);margin:0;color:#805b25}.cc-position-su h4{color:#185d7c}.cc-position p{font-size:12px;line-height:1.85;margin:8px 0}.cc-position-head p{font-size:11px;margin:2px 0 0;color:#685843}.cc-position-trait{border-top:1px dashed #bd8a4565;padding-top:9px;font-size:11px;line-height:1.7;color:#805b25}.cc-position-su .cc-position-trait{color:#185d7c;border-color:#85aabe}
.cc-trio-list,.cc-special-list{display:grid;gap:12px}.cc-trio-card{display:grid;grid-template-columns:80px minmax(0,1fr);gap:13px;padding:14px 12px;border:1px solid var(--cc-border);border-radius:13px;background:var(--cc-tint)}.cc-trio-code{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;padding-top:2px}.cc-trio-code>small{font-size:10px;color:var(--dq-color-muted)}.cc-trio-code>b{font:800 21px/1.3 var(--dq-font-body);letter-spacing:3px;color:#183748;font-variant-numeric:tabular-nums}.cc-trio-code .cc-badge{font-size:9px;padding:3px 7px}.cc-trio-reading{border-left:1px solid var(--cc-border);padding-left:13px}.cc-trio-reading h4,.cc-special h4{color:var(--cc-tone);font:700 13px/1.65 var(--dq-font-body);margin:0 0 6px}.cc-trio-reading p,.cc-special p{font-size:12px;line-height:1.85;margin:5px 0;color:#34414a}.cc-trio-reading .cc-trio-advice{padding-top:7px;border-top:1px dashed var(--cc-border);color:var(--cc-tone);font-style:italic}.cc-trio-reading>small{display:block;margin-top:8px;font-size:10px;line-height:1.7;color:var(--dq-color-muted)}.cc-special{padding:14px;border:1px solid var(--cc-border);border-radius:12px;background:var(--cc-tint)}.cc-special small{font-size:10px;line-height:1.7;color:var(--dq-color-muted)}
.cc-owner-result{background:#eef5f8!important;border-color:#87a8b9!important}.cc-owner-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cc-owner-grid>div{display:grid;gap:4px;padding:11px;background:#fffc;border:1px solid #b4cbd850;border-radius:10px}.cc-owner-grid small{font-size:10px;color:#657c8b}.cc-owner-grid b{font-size:12px;line-height:1.7;color:#14384a}.cc-owner-result>p{font-size:12px;line-height:1.85;margin:0}
.cc-return{align-self:flex-start;min-height:44px;border:1px solid #d4a96966;border-radius:var(--dq-radius-pill);padding:9px 15px;background:#14384a;color:#f8e3b8;font:600 12px/1.7 var(--dq-font-body);cursor:pointer}.cc-detail-banner h1{font:700 27px/1.4 var(--dq-font-display);margin:10px 0}.cc-detail-symbol{max-width:144px;margin:18px auto 0}.cc-detail-symbol .cc-hex-lines{margin:0}.cc-detail-symbol .cc-line>span{background:#ecd3a0}.cc-detail-symbol .cc-line small{color:#d4a969}.cc-detail-symbol .cc-moving>span{background:#fff}.cc-detail-symbol .cc-line em{color:#fff}
.cc-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cc-meta-grid>div{padding:13px;border:1px solid #bd8a4545;border-radius:12px;background:#fff8;display:grid;gap:7px;align-content:start}.cc-meta-grid small{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--dq-color-neutral)}.cc-meta-grid b{font-size:12px;line-height:1.8}.cc-detail-intro{font-size:14px;line-height:1.95;margin:0;font-style:italic}.cc-detail-toc{display:flex;flex-wrap:wrap;gap:8px}.cc-detail-toc button{font:600 11px/1.5 var(--dq-font-body);padding:9px 13px;min-height:40px;border:1px solid #d4a96960;border-radius:var(--dq-radius-pill);background:#14384a;color:#ecd3a0;cursor:pointer}.cc-detail-section{scroll-margin-top:18px}.cc-detail-section>h2{font-size:20px!important;line-height:1.6;font-family:var(--dq-font-display);margin:0;color:#16384a}.cc-detail-section>h3{font:700 15px var(--dq-font-display);margin:0;color:#805b25}.cc-detail-section>p{font-size:14px;line-height:1.95;margin:0}.cc-detail-section blockquote{margin:0;padding:16px;border-left:3px solid #bd8a4580;border-radius:0 12px 12px 0;background:#bd8a4514;font-size:14px;line-height:1.9}.cc-detail-section blockquote p{margin:0}.cc-detail-section blockquote p+p{margin-top:10px}.cc-chinese{font-family:serif;font-size:22px;line-height:1.8}
.cc-scenario-list,.cc-line-readings{display:grid;gap:12px}.cc-scenario{padding:15px;background:#fff8;border:1px solid #bd8a4540;border-radius:13px}.cc-scenario>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.cc-scenario h3{flex:1;min-width:135px;font:700 14px/1.6 var(--dq-font-body);margin:0;color:#16384a}.cc-scenario>div>b{padding:3px 8px;background:#bd8a4518;border-radius:7px;font-size:10px;color:#805b25}.cc-scenario p{font-size:13px;line-height:1.9;margin:10px 0 0}.cc-favorable-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cc-favorable-grid article{padding:16px 11px;display:grid;gap:7px;justify-items:center;text-align:center;background:#fff8;border:1px solid #bd8a4540;border-radius:12px}.cc-favorable-grid span{font-size:25px}.cc-favorable-grid small{font-size:11px;color:var(--dq-color-neutral)}.cc-favorable-grid b{font-size:12px;line-height:1.8}.cc-line-reading{padding:15px;border:1px solid #bd8a4540;background:#fff8;border-radius:12px}.cc-line-reading>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.cc-line-reading h3{font:700 14px/1.6 var(--dq-font-body);color:#16384a;margin:0}.cc-line-reading p{font-size:13px;line-height:1.9;margin:9px 0 0}.cc-active-line{border-color:#a88441;background:#fff5d9}.cc-detail-bottom{display:grid;gap:8px}
@media(max-width:480px){.cc-score-layout{grid-template-columns:76px minmax(0,1fr);gap:12px}.cc-score-ring{padding:6px}.cc-score-ring b{font-size:27px}.cc-score-bar{grid-template-columns:minmax(0,1fr) 23px;gap:3px 7px}.cc-score-bar>span{grid-column:1/3}.cc-score-bar>div{height:6px}.cc-trio-card{grid-template-columns:66px minmax(0,1fr);gap:10px;padding:12px 10px}.cc-trio-reading{padding-left:10px}.cc-trio-code>b{font-size:20px;letter-spacing:2px}.cc-owner-grid{gap:8px}.cc-meta-grid{gap:8px}.cc-meta-grid>div{padding:10px}.cc-detail-banner h1{font-size:25px}.cc-detail-section>h2{font-size:19px!important}}
@media(max-width:359px){.cc-trio-card{grid-template-columns:60px minmax(0,1fr)}.cc-owner-grid{grid-template-columns:1fr}.cc-meta-grid{grid-template-columns:1fr}.cc-detail-toc{gap:6px}.cc-detail-toc button{padding:8px 10px}.cc-trigram-grid article{padding:10px 8px}.cc-score-layout{grid-template-columns:69px minmax(0,1fr)}}