2026-09-03 15:42:05 +08:00
: root {
--paper : #fff ; --paper2 : #f5f2ee ; --ink : #171614 ; --muted : #6b6760 ;
--line : #ddd8d1 ; --dark : #181715 ; --dark2 : #24211d ; --cream : #ebe4db ;
--good : #3f6f58 ; --risk : #9a4d43 ; --ask : #9a7a4f ; --accent : #b88b5b
}
* { box-sizing : border-box } html { scroll-behavior : smooth }
body { margin : 0 ; background : var ( -- paper2 ); color : var ( -- ink ); font-family : - apple-system , BlinkMacSystemFont , "SF Pro Display" , "PingFang SC" , "Helvetica Neue" , Arial , sans-serif }
. wrap { width : min ( 1380 px , calc ( 100 % - 72 px )); margin : auto }
nav { height : 64 px ; position : sticky ; top : 0 ; z-index : 40 ; background : rgba ( 255 , 255 , 255 , .95 ); backdrop-filter : blur ( 14 px ); border-bottom : 1 px solid var ( -- line )}
. navin { height : 100 % ; display : flex ; align-items : center ; justify-content : space-between }. brand { font-size : 13 px ; font-weight : 800 }
. navlinks { display : flex ; gap : 5 px }. navlinks a { text-decoration : none ; font-size : 11 px ; color : #6f685f ; padding : 8 px 10 px ; border-radius : 999 px }. navlinks a : hover { background : #201e1b ; color : #fff }
. hero { min-height : 0 ; background : linear-gradient ( 180 deg , #fff 0 % , #f8f4ef 100 % ); padding : 72 px 0 60 px }
. hero-grid { display : grid ; grid-template-columns : 1 fr .72 fr ; gap : 58 px ; align-items : center }
. hero-grid . text-only { grid-template-columns : minmax ( 0 , 1100 px )}
. kicker { font-size : 11 px ; letter-spacing : 0 ; color : #938980 ; margin-bottom : 16 px }
h1 { margin : 0 ; font-size : 56 px ; line-height : 1.06 ; letter-spacing : 0 ; font-weight : 720 }
. hero-copy { font-size : 19 px ; line-height : 1.78 ; color : #625c55 ; max-width : 900 px ; margin : 28 px 0 0 }
. hero-copy-block h1 { max-width : 840 px }. fact-line { font-size : 13 px ; line-height : 1.6 ; color : #6b645d ; margin : 24 px 0 0 }. hero-verdict { margin-top : 34 px ; padding : 20 px 0 ; border-top : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}. hero-verdict span , . hero-actions > span { display : block ; font-size : 10 px ; color : #918981 ; margin-bottom : 8 px }. hero-verdict strong { display : block ; font-size : 25 px ; line-height : 1.35 }. hero-actions { margin-top : 22 px }. hero-actions . gate { padding : 9 px 0 ; grid-template-columns : 155 px 1 fr }. hero-actions . gate b { font-size : 12 px }. hero-actions . gate span { font-size : 13 px ; line-height : 1.5 }
. hero-card { background : #f5f7f6 ; border : 1 px solid var ( -- line ); padding : 27 px }
. hero-card span { font-size : 10 px ; color : #8e857c }. hero-card strong { display : block ; font-size : 35 px ; line-height : 1.22 ; margin : 10 px 0 }
. hero-card p { font-size : 14 px ; line-height : 1.72 ; color : #68615a ; margin : 0 }
. hero-kpis { display : grid ; grid-template-columns : repeat ( 2 , 1 fr ); border-left : 1 px solid var ( -- line ); border-top : 1 px solid var ( -- line ); margin-top : 22 px }
. hero-kpi { background : #fff ; padding : 15 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}
. hero-kpi small { font-size : 10 px ; color : #918981 }. hero-kpi b { display : block ; font-size : 23 px ; margin-top : 5 px }
. chapter { padding : 68 px 0 }. white { background : #fff }. soft { background : #f4f6f5 }. ink { background : var ( -- dark ); color : #fff }
. section-head { display : grid ; grid-template-columns : 1 fr .47 fr ; gap : 44 px ; align-items : end ; margin-bottom : 40 px }
. section-index { display : flex ; gap : 19 px }. section-index > span { font-size : 12 px ; color : #958c83 ; margin-top : 9 px }
. section-kicker { display : block ; font-size : 10 px ; letter-spacing : 0 ; color : #948a81 ; margin-bottom : 9 px }
h2 { font-size : 44 px ; line-height : 1.16 ; letter-spacing : 0 ; margin : 0 }
. section-head . compact { display : block ; margin-bottom : 24 px }. section-head . compact h2 { font-size : 48 px ; max-width : 1050 px }. evidence-note { font-size : 12 px ; color : #8a8178 ; margin : 0 0 24 px }
. section-head > p { font-size : 15 px ; line-height : 1.72 ; color : #6b645d ; margin : 0 }. ink . section-head > p { color : #c5bdb5 }
. shopper-decision { border-top : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}
. decision-boundary { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); border-top : 1 px solid var ( -- line ); border-left : 1 px solid var ( -- line ); margin-bottom : 24 px }
. decision-boundary article { padding : 17 px ; background : #f7f8f7 ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line ); min-width : 0 }
. decision-boundary span { display : block ; font-size : 10 px ; color : #817970 }. decision-boundary strong { display : block ; font-size : 15 px ; line-height : 1.48 ; margin : 7 px 0 ; overflow-wrap : anywhere }. decision-boundary small { display : block ; font-size : 10 px ; line-height : 1.5 ; color : #777f7a }
. shopper-verdict { display : grid ; grid-template-columns : 120 px 1 fr ; gap : 18 px ; padding : 24 px 0 ; border-bottom : 1 px solid var ( -- line ); align-items : start }
. shopper-verdict > span { font-size : 10 px ; color : #7f776f ; margin-top : 6 px }. shopper-verdict strong { font-size : 24 px ; line-height : 1.4 }. shopper-verdict small { grid-column : 2 ; font-size : 11 px ; color : #77706a ; margin-top : -8 px }
. shopper-groups { display : grid ; grid-template-columns : 1 fr 1 fr }. shopper-group { padding : 24 px 26 px 26 px 0 ; border-bottom : 1 px solid var ( -- line )}. shopper-group : nth-child ( even ) { padding-left : 26 px ; padding-right : 0 ; border-left : 1 px solid var ( -- line )}. shopper-group . full { grid-column : 1 /- 1 ; padding-left : 0 ; border-left : 0 }. shopper-group . full . shopper-grid { grid-template-columns : repeat ( 3 , 1 fr )}
. shopper-group h3 { font-size : 16 px ; margin : 0 0 14 px }. shopper-grid { display : grid ; grid-template-columns : 1 fr 1 fr ; border-top : 1 px solid var ( -- line ); border-left : 1 px solid var ( -- line )}
. shopper-row { padding : 14 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line ); min-width : 0 }. shopper-row strong { display : block ; font-size : 12 px ; line-height : 1.4 }. shopper-row p { font-size : 14 px ; line-height : 1.55 ; margin : 6 px 0 0 ; overflow-wrap : anywhere }. shopper-meta { display : block ; font-size : 9 px ; color : #817970 ; margin-bottom : 7 px }. shopper-row . check { background : #f3f6f4 }. shopper-row . question { background : #faf8f4 }
. owner-thesis { font-size : 22 px ; line-height : 1.45 ; margin : -8 px 0 12 px ; max-width : 980 px }
. owner { border : 1 px solid var ( -- line ); background : #faf8f5 }
. owner > header { padding : 28 px 30 px ; border-bottom : 1 px solid var ( -- line )}
. owner > header > span { font-size : 10 px ; color : #8f867d }. owner > header h3 { font-size : 34 px ; line-height : 1.3 ; letter-spacing : 0 ; margin : 9 px 0 }
. owner > header p { font-size : 13 px ; color : #736b63 ; margin : 0 }
. owner-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr )}
. owner-card { background : #fff ; padding : 21 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line ); min-height : 0 }. owner-card strong { font-size : 21 px ; line-height : 1.38 }. owner-card ul { padding-left : 16 px ; margin : 12 px 0 0 }. owner-card li { font-size : 12 px ; line-height : 1.5 ; margin : 4 px 0 }
. owner-card : nth-child ( 3n ) { border-right : 0 }. owner-card . wide { grid-column : span 2 }
. owner-card span { font-size : 10 px ; color : #918981 }. owner-card strong { display : block ; font-size : 27 px ; line-height : 1.3 ; margin : 10 px 0 }
. owner-card p { font-size : 14 px ; line-height : 1.72 ; color : #68625b ; margin : 0 }. owner-card ul { padding-left : 18 px ; margin : 13 px 0 0 }
. owner-card li { font-size : 13 px ; line-height : 1.58 ; margin : 5 px 0 ; color : #5e5852 }. owner-card . good strong { color : var ( -- good )}. owner-card . risk strong { color : var ( -- risk )}
. story { margin-top : 28 px }. story-item { display : grid ; grid-template-columns : .9 fr 1.1 fr ; border-top : 1 px solid var ( -- line ); padding : 25 px 0 ; gap : 38 px ; align-items : start }. story-item : last-child { border-bottom : 1 px solid var ( -- line )}
. story-media { margin : 0 ; background : #fff ; border : 1 px solid var ( -- line ); display : flex ; justify-content : center ; align-items : flex-start ; padding : 10 px }. story-media img { width : 100 % ; height : auto ; object-fit : contain ; display : block }
. story-copy > span { font-size : 10 px ; color : #918981 }. story-copy h3 { font-size : 25 px ; line-height : 1.3 ; margin : 9 px 0 18 px }. story-copy > p { font-size : 15 px ; line-height : 1.75 ; color : #68625b }
. story-copy . source-badge { display : inline-block ; color : #405e4b ; border : 1 px solid #b9c8bf ; padding : 6 px 8 px ; background : #f3f7f4 }
. evidence { display : grid ; grid-template-columns : 1 fr ; border-left : 1 px solid var ( -- line ); border-top : 1 px solid var ( -- line ); margin-top : 18 px }
. evidence div { padding : 13 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}
. evidence span { display : block ; font-size : 10 px ; color : #918981 }. evidence b { display : block ; font-size : 13 px ; line-height : 1.55 ; margin-top : 4 px }
. evidence . action { background : #eef2f0 }
. param-strip { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); border-left : 1 px solid var ( -- line ); border-top : 1 px solid var ( -- line )}
. param { background : #fff ; padding : 16 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}. param span { font-size : 10 px ; color : #918981 }. param b { display : block ; font-size : 13 px ; line-height : 1.55 ; margin-top : 6 px }
. voice-stats { display : grid ; grid-template-columns : repeat ( 6 , 1 fr ); border : 1 px solid #4a443e }
. voice-stat { padding : 17 px ; border-right : 1 px solid #4a443e }. voice-stat : last-child { border-right : 0 }
. voice-stat span { display : block ; font-size : 10 px ; color : #aaa199 }. voice-stat strong { display : block ; font-size : 28 px ; margin : 6 px 0 }. voice-stat small { font-size : 10 px ; color : #bbb2aa }
. result-block { margin-top : 28 px }. result-block h3 { font-size : 17 px ; margin : 0 0 12 px }. result-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); border-top : 1 px solid #4a443e ; border-left : 1 px solid #4a443e }
. result-row { padding : 16 px ; border-right : 1 px solid #4a443e ; border-bottom : 1 px solid #4a443e ; min-width : 0 }. result-row > span { display : block ; font-size : 9 px ; color : #aaa199 ; margin-bottom : 7 px }. result-row strong { display : block ; font-size : 15 px ; line-height : 1.4 }. result-row p { font-size : 13 px ; line-height : 1.6 ; color : #d1c9c1 ; margin : 7 px 0 0 ; overflow-wrap : anywhere }. result-row . positive { background : #29312c }. result-row . risk { background : #342724 }. result-row . question { background : #302d27 }
. journey-wrap { margin-top : 28 px ; border : 1 px solid #4a443e ; background : #282520 }
. journey-head { padding : 22 px ; border-bottom : 1 px solid #4a443e }. journey-head span { font-size : 10 px ; color : #aaa199 }. journey-head h3 { font-size : 25 px ; line-height : 1.28 ; margin : 8 px 0 }. journey-head p { font-size : 14 px ; line-height : 1.7 ; color : #c4bcb4 ; margin : 0 }
. journey-tabs { display : grid ; grid-template-columns : repeat ( 7 , 1 fr ); border-bottom : 1 px solid #4a443e }
. jtab { padding : 15 px ; border-right : 1 px solid #4a443e ; background : #24211e ; color : #d2cac2 ; cursor : pointer }. jtab : last-child { border-right : 0 }. jtab . active { background : #fff ; color : #1a1815 }
. jtab small { font-size : 9 px ; display : block ; opacity : .65 }. jtab b { font-size : 13 px ; display : block ; margin-top : 5 px }
. jpanel { display : none ; padding : 22 px }. jpanel . active { display : block }
. jpanel > header span { font-size : 10 px ; color : #aaa199 }. jpanel > header h4 { font-size : 28 px ; margin : 8 px 0 }. jpanel > header p { font-size : 14 px ; color : #c5bdb5 }
. jgrid { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); border-left : 1 px solid #4a443e ; border-top : 1 px solid #4a443e ; margin-top : 20 px }
. jgrid section { padding : 15 px ; border-right : 1 px solid #4a443e ; border-bottom : 1 px solid #4a443e }. jgrid span { font-size : 10 px ; color : #aaa199 }. jgrid p { font-size : 13 px ; line-height : 1.6 ; color : #d1c9c1 ; margin : 5 px 0 0 }
. jmeta { display : flex ; gap : 9 px ; margin-top : 16 px }. jmeta span { font-size : 10 px ; border : 1 px solid #514a43 ; padding : 6 px 9 px ; border-radius : 999 px ; color : #c7bfb7 }
. quotes { margin : 16 px 0 0 ; padding-left : 20 px }. quotes li { font-size : 13 px ; color : #cfc7bf ; line-height : 1.65 ; margin : 7 px 0 }
. buyer-evidence { margin-top : 24 px ; border : 1 px solid #4a514d ; background : #252a27 ; padding : 22 px }. buyer-evidence > header { padding : 0 0 18 px ; border-bottom : 1 px solid #4a514d }. buyer-evidence > header span { font-size : 10 px ; color : #aeb8b2 }. buyer-evidence > header h3 { font-size : 24 px ; margin : 7 px 0 }. buyer-evidence > header p { font-size : 12 px ; line-height : 1.55 ; color : #aeb8b2 ; margin : 0 }. buyer-groups { display : grid ; gap : 18 px ; padding-top : 18 px }. buyer-review-group { display : grid ; grid-template-columns : minmax ( 220 px , 300 px ) minmax ( 0 , 1 fr ); gap : 18 px ; border : 1 px solid #48504b ; background : #202522 ; padding : 16 px ; min-width : 0 }. buyer-review-copy { padding : 4 px }. buyer-review-copy span { font-size : 10 px ; color : #aeb8b2 }. buyer-review-copy blockquote { font-size : 14 px ; line-height : 1.65 ; margin : 10 px 0 ; color : #f0f3f1 ; overflow-wrap : anywhere }. buyer-review-copy small { display : block ; font-size : 10 px ; line-height : 1.5 ; color : #aeb8b2 }. buyer-gallery { display : grid ; grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); gap : 10 px ; align-items : start }. buyer-gallery figure { margin : 0 ; background : #fff ; min-width : 0 }. buyer-gallery img { width : 100 % ; height : auto ; object-fit : contain ; display : block }. buyer-gallery figcaption { padding : 7 px 8 px ; color : #68716c ; background : #eef1ef ; font-size : 9 px ; border-top : 1 px solid #d8dedb }
. signal-atlas { margin-top : 24 px ; border : 1 px solid #4a443e ; padding : 22 px ; background : #26231f }
. signal-atlas span . label { font-size : 10 px ; color : #aaa199 }. signal-atlas h3 { font-size : 30 px ; margin : 8 px 0 }. signal-atlas p { font-size : 14 px ; color : #c5bdb5 }
. signals { display : flex ; flex-wrap : wrap ; gap : 8 px ; margin-top : 18 px }. signal { font-size : 12 px ; border : 1 px solid #575049 ; border-radius : 999 px ; padding : 8 px 11 px }. signal . good { color : #bfd4bd }. signal . ask { color : #ddc9a9 }. signal . risk { color : #e2b1a9 }
. product-box { display : grid ; grid-template-columns : .82 fr 1.18 fr ; gap : 25 px }
. param-card , . product-conclusion { background : #fff ; border : 1 px solid var ( -- line ); padding : 25 px }
. param-card h3 , . product-conclusion h3 { font-size : 31 px ; line-height : 1.28 ; margin : 0 0 17 px }
. prow { display : grid ; grid-template-columns : 135 px 1 fr ; gap : 18 px ; padding : 13 px 0 ; border-top : 1 px solid var ( -- line )}. prow : first-of-type { border-top : 0 }
. prow span { font-size : 10 px ; color : #918981 }. prow b { font-size : 14 px ; line-height : 1.6 }
. product-conclusion > p { font-size : 15 px ; line-height : 1.76 ; color : #68625b }
. gate { padding : 14 px 0 ; border-top : 1 px solid var ( -- line ); display : grid ; grid-template-columns : 145 px 1 fr ; gap : 20 px }. gate b { font-size : 13 px }. gate span { font-size : 14 px ; line-height : 1.65 ; color : #67615a }
. plans { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 20 px }
. plan { border : 1 px solid #4a443e ; background : #282520 ; padding : 24 px }. plan > span { font-size : 10 px ; color : #aaa199 }. plan h3 { font-size : 27 px ; line-height : 1.25 ; margin : 9 px 0 }. plan > p { font-size : 13 px ; line-height : 1.65 ; color : #c9c1b9 }
. plan-specs { display : grid ; grid-template-columns : 1 fr 1 fr ; border-left : 1 px solid #4a443e ; border-top : 1 px solid #4a443e ; margin-top : 19 px }
. plan-specs div { padding : 13 px ; border-right : 1 px solid #4a443e ; border-bottom : 1 px solid #4a443e }. plan-specs span { font-size : 10 px ; color : #aaa199 ; display : block }. plan-specs b { font-size : 13 px ; line-height : 1.55 ; display : block ; margin-top : 4 px }
. plan-section { padding : 15 px 0 ; border-top : 1 px solid #4a443e }. plan-section h4 { font-size : 17 px ; margin : 0 0 6 px }. plan-section p { font-size : 13 px ; line-height : 1.65 ; color : #c6beb6 ; margin : 0 }
. plan-actions { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 24 px ; margin-top : 18 px }. plan-actions h4 { font-size : 15 px ; margin : 0 0 7 px }. action-list { padding-left : 17 px ; margin : 0 }. action-list li { font-size : 12 px ; line-height : 1.55 ; color : #c6beb6 ; margin : 5 px 0 }
. commercial { margin-top : 26 px ; border : 1 px solid #4a443e }. commercial header { padding : 21 px ; border-bottom : 1 px solid #4a443e }
. commercial header span { font-size : 10 px ; color : #aaa199 }. commercial header strong { font-size : 27 px ; display : block ; margin-top : 6 px }
. commercial-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr )}. commercial-grid p { padding : 20 px ; margin : 0 ; border-right : 1 px solid #4a443e }. commercial-grid p : last-child { border-right : 0 }
. commercial-grid span { font-size : 10 px ; color : #aaa199 ; display : block }. commercial-grid b { font-size : 14 px ; line-height : 1.62 ; display : block ; margin-top : 5 px }
. governance { background : #181715 ; color : #fff ; border-top : 1 px solid #2f2b26 ; border-bottom : 1 px solid #2f2b26 }. governance-grid { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); border-left : 1 px solid #3b352e }. governance article { padding : 16 px 18 px ; border-right : 1 px solid #3b352e }. governance span { display : block ; font-size : 9 px ; color : #bfb4a8 ; margin-bottom : 7 px }. governance b { font-size : 12 px ; line-height : 1.55 ; color : #f5efe8 }
. selling-points { margin-top : 22 px ; border : 1 px solid #4d443a ; background : #211e1a }. selling-points header { padding : 18 px 18 px 0 }. selling-points header span { font-size : 9 px ; color : #bfb4a8 }. selling-points h4 { font-size : 22 px ; margin : 6 px 0 14 px }. selling-points > div { display : grid ; grid-template-columns : repeat ( 2 , 1 fr ); border-top : 1 px solid #4d443a ; border-left : 1 px solid #4d443a }. selling-points article { padding : 16 px ; border-right : 1 px solid #4d443a ; border-bottom : 1 px solid #4d443a ; min-width : 0 }. selling-points article strong { display : block ; font-size : 18 px ; line-height : 1.35 ; color : #fff }. selling-points article p { font-size : 12 px ; line-height : 1.55 ; color : #d5ccc2 ; margin : 8 px 0 }. selling-points article small { display : block ; font-size : 10 px ; color : #b8ab9c }. selling-points article b { display : block ; font-size : 12 px ; line-height : 1.55 ; color : #d8bea1 ; margin-top : 8 px }
. profile-board { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); border-left : 1 px solid var ( -- line ); border-top : 1 px solid var ( -- line ); background : #fff }. profile-cell { padding : 16 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line ); min-width : 0 }. profile-cell span , . market-slot span { display : block ; font-size : 10 px ; color : #918981 }. profile-cell b , . market-slot b { display : block ; font-size : 14 px ; line-height : 1.55 ; margin-top : 6 px ; overflow-wrap : anywhere }
. logic-chain { display : grid ; grid-template-columns : repeat ( 5 , 1 fr ); gap : 12 px }. logic-step { background : #fff ; border : 1 px solid var ( -- line ); padding : 20 px ; min-height : 180 px }. logic-step span { font-size : 11 px ; color : #918981 }. logic-step strong { display : block ; font-size : 22 px ; line-height : 1.28 ; margin : 10 px 0 }. logic-step p { font-size : 13 px ; line-height : 1.6 ; color : #67615a ; margin : 0 0 12 px }. logic-step small { font-size : 10 px ; color : #8c847b }
. feature-grid { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); border-left : 1 px solid #4a443e ; border-top : 1 px solid #4a443e }. feature-card { padding : 20 px ; border-right : 1 px solid #4a443e ; border-bottom : 1 px solid #4a443e ; min-height : 150 px ; background : #24211e }. feature-card span { font-size : 10 px ; color : #aaa199 }. feature-card strong { display : block ; font-size : 23 px ; line-height : 1.32 ; margin : 9 px 0 ; color : #fff }. feature-card p { font-size : 12 px ; line-height : 1.58 ; color : #cbc3bb ; margin : 0 }. feature-card . good strong { color : #c6dcc4 }. feature-card . risk strong { color : #e0b1a9 }
. marketing-grid { display : grid ; grid-template-columns : 1.05 fr .95 fr ; gap : 18 px }. marketing-grid > article { background : #fff ; border : 1 px solid var ( -- line ); padding : 22 px ; min-width : 0 }. marketing-grid > article > span { font-size : 10 px ; color : #918981 }. marketing-grid strong { display : block ; font-size : 26 px ; line-height : 1.35 ; margin : 9 px 0 18 px }. marketing-grid ul { margin : 14 px 0 0 ; padding-left : 18 px }. marketing-grid li { font-size : 14 px ; line-height : 1.65 ; margin : 7 px 0 }. market-slots { display : grid ; grid-template-columns : repeat ( 2 , 1 fr ); border-left : 1 px solid var ( -- line ); border-top : 1 px solid var ( -- line )}. market-slot { padding : 14 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}
. visual-states { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); border-left : 1 px solid var ( -- line ); border-top : 1 px solid var ( -- line ); margin-bottom : 18 px }. visual-state { background : #fff ; padding : 17 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}. visual-state span { font-size : 10 px ; color : #918981 }. visual-state strong { display : block ; font-size : 28 px ; margin : 5 px 0 }. visual-state small { font-size : 10 px ; color : #77706a }. visual-state . ready strong { color : var ( -- good )}. visual-state . missing strong { color : var ( -- risk )}
. competition-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 16 px }. competition-grid article { border : 1 px solid var ( -- line ); background : #fff ; padding : 24 px ; min-height : 190 px }. competition-grid span { font-size : 10 px ; color : #918981 }. competition-grid strong { display : block ; font-size : 28 px ; line-height : 1.28 ; margin : 9 px 0 }. competition-grid p { font-size : 13 px ; line-height : 1.65 ; color : #67615a ; margin : 0 }. competition-grid . strong strong { color : var ( -- good )}. competition-grid . mid strong { color : var ( -- ask )}. competition-grid . weak strong { color : var ( -- risk )}
. validation-wrap { margin-top : 28 px ; border : 1 px solid #4a443e ; background : #221f1b ; padding : 22 px ; overflow-x : auto }. validation-wrap header { margin-bottom : 14 px }. validation-wrap span { font-size : 10 px ; color : #aaa199 }. validation-wrap h3 { font-size : 26 px ; margin : 7 px 0 ; color : #fff }. validation-wrap . validation { min-width : 980 px }
. validation { width : 100 % ; border-collapse : collapse ; background : #fff ; border : 1 px solid var ( -- line )}
. validation th , . validation td { text-align : left ; vertical-align : top ; padding : 13 px ; border-bottom : 1 px solid var ( -- line )}. validation th { font-size : 10 px ; color : #8e857c }. validation td { font-size : 12 px ; line-height : 1.55 }. validation tr : last-child td { border-bottom : 0 }
. footer { padding : 38 px 0 52 px ; font-size : 11 px ; color : #8c847b }
. reveal { opacity : 1 ; transform : none }
@ media ( max-width : 1000px ) {. wrap { width : min ( 1380 px , calc ( 100 % - 28 px ))}. hero-grid , . section-head , . story-item , . product-box , . marketing-grid { grid-template-columns : 1 fr }. decision-boundary { grid-template-columns : 1 fr 1 fr }. owner-grid , . voice-stats , . journey-tabs , . jgrid , . param-strip , . result-grid , . governance-grid , . profile-board , . feature-grid , . visual-states { grid-template-columns : 1 fr 1 fr }. logic-chain , . competition-grid { grid-template-columns : 1 fr }. owner-card . wide { grid-column : auto }. plans { grid-template-columns : 1 fr }. commercial-grid { grid-template-columns : 1 fr }# validate . wrap { overflow-x : auto }. validation { min-width : 980 px }. shopper-group . full . shopper-grid { grid-template-columns : 1 fr 1 fr }. buyer-review-group { grid-template-columns : 240 px minmax ( 0 , 1 fr )}. buyer-gallery { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr ))}}
@ media ( max-width : 680px ) { nav { height : auto }. navin { min-height : 56 px }. navlinks { display : none }. hero { padding : 42 px 0 34 px } h1 { font-size : 38 px }. hero-shot { order : -1 ; padding : 8 px }. hero-verdict strong { font-size : 20 px }. hero-actions . gate { grid-template-columns : 1 fr ; gap : 4 px }. chapter { padding : 46 px 0 }. section-head . compact h2 { font-size : 34 px }. decision-boundary { grid-template-columns : 1 fr }. owner-grid , . voice-stats , . journey-tabs , . jgrid , . param-strip , . hero-kpis , . plan-specs , . plan-actions , . shopper-groups , . shopper-grid , . shopper-group . full . shopper-grid , . result-grid , . governance-grid , . selling-points > div , . profile-board , . feature-grid , . visual-states , . market-slots { grid-template-columns : 1 fr }. shopper-verdict { grid-template-columns : 1 fr ; gap : 7 px }. shopper-verdict small { grid-column : 1 ; margin-top : 0 }. shopper-group , . shopper-group : nth-child ( even ), . shopper-group . full { grid-column : 1 ; padding : 20 px 0 ; border-left : 0 }. buyer-evidence { padding : 16 px }. buyer-review-group { grid-template-columns : 1 fr ; padding : 12 px }. buyer-gallery { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr ))}. owner-card { min-height : auto }. section-index { gap : 12 px }. story-media { height : auto }. story-copy h3 { font-size : 23 px }. owner-thesis { font-size : 19 px }. logic-step , . feature-card , . competition-grid article { min-height : 0 }. marketing-grid strong { font-size : 22 px }}
. hero-shot { min-height : 360 px ; background : #f8f5f1 ; border : 1 px solid var ( -- line ); display : flex ; align-items : center ; justify-content : center ; padding : 14 px ; box-shadow : 0 24 px 80 px rgba ( 39 , 31 , 24 , .08 )}. hero-shot img , . story-media img { width : 100 % ; height : auto ; object-fit : contain ; display : block }. scroll-progress { position : fixed ; left : 0 ; top : 0 ; width : 100 % ; height : 2 px ; z-index : 90 }. scroll-progress span { display : block ; height : 100 % ; background : #1d211f ; transform-origin : left ; transform : scaleX ( 0 )}
. loading-page { min-height : 100 vh ; background : #eef1ef ; padding : 34 px ; color : #171a18 }. loading-shell { width : min ( 1180 px , 100 % ); margin : auto ; background : #fff ; border : 1 px solid #d8dedb }. loading-head { display : flex ; justify-content : space-between ; gap : 30 px ; padding : 34 px 36 px 28 px ; border-bottom : 1 px solid var ( -- line )}. loading-head h1 { font-size : 42 px ; line-height : 1.12 ; margin : 9 px 0 12 px }. loading-head p { font-size : 14 px ; line-height : 1.6 ; color : #646b67 ; margin : 0 ; max-width : 720 px }. loading-head > strong { font-size : 42 px ; line-height : 1 ; color : #556d5a }. loading-evidence , . loading-work { padding : 25 px 36 px ; border-bottom : 1 px solid var ( -- line )}. loading-section-title { display : flex ; justify-content : space-between ; align-items : baseline ; gap : 20 px ; margin-bottom : 15 px }. loading-section-title > span { font-size : 16 px ; font-weight : 750 }. loading-section-title > small { font-size : 11 px ; color : #717873 }. loading-stats { display : grid ; grid-template-columns : repeat ( 7 , 1 fr ); border-top : 1 px solid var ( -- line ); border-left : 1 px solid var ( -- line )}. loading-stats > div { padding : 13 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}. loading-stats span { display : block ; font-size : 10 px ; color : #727a75 }. loading-stats b { display : block ; font-size : 23 px ; margin-top : 6 px }. loading-images { display : grid ; grid-template-columns : repeat ( 8 , minmax ( 0 , 1 fr )); gap : 8 px ; margin-top : 14 px }. loading-images figure { margin : 0 ; border : 1 px solid var ( -- line ); background : #f5f7f6 }. loading-images img { display : block ; width : 100 % ; aspect-ratio : 3 / 4 ; object-fit : contain ; background : #fff }. loading-images figcaption { font-size : 9 px ; color : #69706c ; padding : 6 px 7 px ; border-top : 1 px solid var ( -- line )}. loading-steps { display : grid ; grid-template-columns : repeat ( 2 , 1 fr ); border-top : 1 px solid var ( -- line ); border-left : 1 px solid var ( -- line )}. loading-step { display : grid ; grid-template-columns : 10 px 1 fr auto ; align-items : center ; gap : 10 px ; padding : 11 px 13 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}. loading-step i { width : 8 px ; height : 8 px ; border : 1 px solid #929a95 ; border-radius : 50 % }. loading-step span { font-size : 12 px }. loading-step b { font-size : 10 px ; color : #7b837e ; font-weight : 600 }. loading-step . done i { background : #556d5a ; border-color : #556d5a }. loading-step . done b { color : #556d5a }. loading-step . processing { background : #f1f5f2 }. loading-step . processing i { background : #171a18 ; border-color : #171a18 }. loading-step . not_collected { background : #faf8f5 }. loading-step . not_collected i { border-color : #a88a64 }. loading-step . not_collected b { color : #8d6f4c }. loading-step . failed { background : #fff2f0 }. loading-step . failed i { background : #a2463d ; border-color : #a2463d }. loading-step . failed b { color : #a2463d }. loading-page . topic-bar { height : 5 px ; background : #e5e9e6 ; margin : 0 36 px 28 px }. loading-page . topic-bar i { display : block ; height : 100 % ; background : #556d5a ; transition : width .35 s ease }. loading-page . error { color : #a2463d ; white-space : pre-wrap ; margin : 0 36 px 28 px }. loading-page . eyebrow { font-size : 10 px ; color : #7c847f }
@ media ( max-width : 680px ) { h1 { font-size : 38 px }}
@ media ( max-width : 800px ) {. loading-page { padding : 0 }. loading-shell { border-left : 0 ; border-right : 0 }. loading-head { padding : 25 px 18 px 22 px }. loading-head h1 { font-size : 32 px }. loading-head > strong { font-size : 28 px }. loading-evidence , . loading-work { padding : 21 px 18 px }. loading-section-title { display : block }. loading-section-title small { display : block ; margin-top : 6 px }. loading-stats { grid-template-columns : repeat ( 2 , 1 fr )}. loading-images { grid-template-columns : repeat ( 4 , 1 fr )}. loading-steps { grid-template-columns : 1 fr }. loading-page . topic-bar { margin : 0 18 px 24 px }}
/* V9：白色阅读背景，青绿到青蓝为品牌强调色。 */
: root { --paper : #fff ; --paper2 : #f5faf9 ; --ink : #10191d ; --muted : #60757c ; --line : #dbe8e8 ; --dark : #071114 ; --dark2 : #0d2025 ; --good : #00a98f ; --risk : #d34f5f ; --ask : #167ca7 ; --accent : #00cdb0 ; --accent2 : #008fd8 ; --gradient : linear-gradient ( 110 deg , #00d9b6 0 % , #00acd0 56 % , #008bd8 100 % )}
body { background : #fff ; color : var ( -- ink )} nav { background : rgba ( 255 , 255 , 255 , .96 ); border-color : #dce9e9 ; box-shadow : 0 8 px 26 px rgba ( 8 , 54 , 63 , .06 )}
. brand { background : var ( -- gradient ); -webkit- background-clip : text ; background-clip : text ; color : transparent ; font-weight : 900 }. navlinks a { color : #526d74 }. navlinks a : hover { background : #071114 ; color : #fff }
. hero { background : linear-gradient ( 180 deg , #fff 0 % , #f1fbf9 100 % ); position : relative ; overflow : hidden }. hero : before { content : "" ; position : absolute ; inset : 0 0 auto auto ; width : 46 % ; height : 5 px ; background : var ( -- gradient )}
. kicker , . section-kicker { color : #008fae ; font-weight : 800 ; letter-spacing : .08 em }. hero-verdict { border-color : #bfe6e1 }. hero-shot { background : #fff ; border-color : #cfe4e4 ; box-shadow : 0 28 px 70 px rgba ( 0 , 105 , 128 , .13 )}
. scroll-progress span { background : var ( -- gradient )}. soft { background : #f5faf9 }. white { background : #fff }. ink { background : #071114 ; color : #f2fbfc }. ink . section-kicker { color : #12d8bb }. ink . section-head h2 { color : #fff }
. evidence-tags { display : flex ; flex-wrap : wrap ; gap : 8 px ; margin-top : 22 px }. evidence-tags b { font-size : 10 px ; padding : 7 px 10 px ; border : 1 px solid #b9e2df ; border-radius : 999 px ; background : #fff ; color : #24717b }. evidence-tags b : nth-child ( 2 ) { border-color : #9dd5ef ; color : #117ba7 }. evidence-tags b : nth-child ( 3 ) { background : var ( -- gradient ); color : #fff ; border : 0 }. evidence-tags b : nth-child ( 4 ) { color : #708187 }
. title-original { padding : 26 px 28 px ; border : 1 px solid var ( -- line ); background : #071114 ; color : #fff }. title-original span { display : block ; font-size : 10 px ; color : #7fb9c1 ; margin-bottom : 9 px }. title-original strong { font-size : 25 px ; line-height : 1.5 }
. title-segments { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); border-left : 1 px solid var ( -- line ); border-top : 1 px solid var ( -- line )}. title-segments article { padding : 18 px ; background : #fff ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}. title-segments span , . analysis-strip span { display : block ; font-size : 10 px ; color : #698087 }. title-segments strong { display : block ; font-size : 17 px ; line-height : 1.4 ; margin : 8 px 0 }. title-segments p { font-size : 12 px ; line-height : 1.6 ; color : #5c7076 ; margin : 0 }
. analysis-strip { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); margin-top : 18 px ; border : 1 px solid #cde4e3 ; background : #effaf8 }. analysis-strip article { padding : 18 px ; border-right : 1 px solid #cde4e3 }. analysis-strip article : last-child { border : 0 }. analysis-strip b { display : block ; margin-top : 8 px ; font-size : 13 px ; line-height : 1.6 }
. image-analysis-list { display : grid ; gap : 24 px }. image-analysis { display : grid ; grid-template-columns : minmax ( 300 px , .9 fr ) minmax ( 0 , 1.1 fr ); border : 1 px solid var ( -- line ); background : #fff ; box-shadow : 0 16 px 42 px rgba ( 15 , 63 , 72 , .07 )}. image-analysis figure { margin : 0 ; padding : 12 px ; background : #f7fbfa ; border-right : 1 px solid var ( -- line )}. image-analysis img { display : block ; width : 100 % ; height : auto ; max-height : 720 px ; object-fit : contain ; background : #fff }. image-analysis figcaption { padding : 10 px 4 px 0 ; font-size : 10 px ; color : #668087 }. image-copy { display : grid ; grid-template-columns : 1 fr 1 fr ; align-content : start }. image-copy > div { padding : 17 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line )}. image-copy span { display : block ; font-size : 10 px ; color : #668087 }. image-copy b { display : block ; font-size : 13 px ; line-height : 1.62 ; margin-top : 6 px ; overflow-wrap : anywhere }
. empty-state { padding : 30 px ; border : 1 px dashed #a8cdca ; background : #f3fbf9 ; color : #61777d ; text-align : center ; font-size : 13 px }. table-scroll { overflow : auto }. table-scroll . validation { min-width : 840 px }
. asset-levels , . dna-grid , . parameter-grid , . shot-grid { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); border-left : 1 px solid var ( -- line ); border-top : 1 px solid var ( -- line ); margin-top : 24 px }. asset-levels article , . dna-grid article , . parameter-grid article , . shot-grid article { padding : 20 px ; border-right : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line ); background : #fff ; color : var ( -- ink )}. asset-levels span , . dna-grid span , . parameter-grid span , . shot-grid span { font-size : 10 px ; color : #008ca7 }. asset-levels li , . asset-levels p , . dna-grid p , . parameter-grid p , . shot-grid p { font-size : 13 px ; line-height : 1.62 ; color : #526a70 }. shot-grid strong { display : block ; font-size : 18 px ; line-height : 1.4 ; margin : 9 px 0 }. shot-grid small { font-size : 10 px ; color : #75898e }. subhead { font-size : 22 px ; margin : 34 px 0 0 }
. ink . plans { grid-template-columns : repeat ( 3 , 1 fr )}. ink . plan { border-color : #24444a ; background : #0d2025 }. ink . asset-levels article { background : #0d2025 ; color : #fff ; border-color : #31565a }. ink . asset-levels li , . ink . asset-levels p { color : #bad0d3 }
@ media ( max-width : 1000px ) {. title-segments , . analysis-strip , . asset-levels , . dna-grid , . parameter-grid , . shot-grid { grid-template-columns : 1 fr 1 fr }. image-analysis { grid-template-columns : 1 fr }. image-analysis figure { border-right : 0 ; border-bottom : 1 px solid var ( -- line )}. ink . plans { grid-template-columns : 1 fr }}
@ media ( max-width : 620px ) {. title-segments , . analysis-strip , . asset-levels , . dna-grid , . parameter-grid , . shot-grid , . image-copy { grid-template-columns : 1 fr }}
/* V9.1 information hierarchy additions — preserves existing palette */
. evidence-fold { margin-top : 18 px ; border-top : 1 px solid var ( -- line ); padding-top : 14 px }. evidence-fold > summary { cursor : pointer ; font-size : 13 px ; font-weight : 700 ; padding : 10 px 0 ; list-style : none }. evidence-fold > summary :: -webkit-details-marker { display : none }. evidence-fold > summary : after { content : '＋ ; float : right }. evidence-fold [ open ]> summary : after { content : '－ }
. insight-grid { display : grid ; grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); gap : 12 px ; margin : 18 px 0 }. insight-card { padding : 18 px ; border : 1 px solid var ( -- line ); background : var ( -- card , #fff )}. insight-card span , . consumer-thesis span , . continuity header span { display : block ; font-size : 11 px ; color : var ( -- muted ); margin-bottom : 7 px }. insight-card strong , . consumer-thesis strong { display : block ; font-size : 18 px ; line-height : 1.45 }. insight-card p { margin : 8 px 0 0 ; font-size : 13 px ; line-height : 1.55 ; color : var ( -- muted )}
. consumer-thesis { padding : 20 px 0 ; border-bottom : 1 px solid var ( -- line ); margin-bottom : 14 px }. continuity { margin : 22 px 0 }. continuity header h3 { margin : 0 0 12 px }. sku-status { display : grid ; grid-template-columns : repeat ( 4 , minmax ( 0 , 1 fr )); gap : 10 px ; margin-bottom : 16 px }. sku-status article { padding : 16 px ; border : 1 px solid var ( -- line ); background : var ( -- card , #fff )}. sku-status span { display : block ; font-size : 11 px ; color : var ( -- muted ); margin-bottom : 6 px }. sku-status strong { font-size : 15 px ; line-height : 1.4 }. recommended-titles { margin-top : 14 px ; padding : 16 px ; border : 1 px solid var ( -- line )}. recommended-titles > span { font-size : 11 px ; color : var ( -- muted )}. recommended-titles ul { margin : 8 px 0 0 ; padding-left : 18 px }. image-error { opacity : .18 ; min-height : 120 px ; background : repeating-linear-gradient ( 45 deg , transparent , transparent 8 px , rgba ( 127 , 127 , 127 , .08 ) 8 px , rgba ( 127 , 127 , 127 , .08 ) 16 px )}
@ media ( max-width : 900px ) {. insight-grid { grid-template-columns : 1 fr 1 fr }. sku-status { grid-template-columns : 1 fr 1 fr }}@ media ( max-width : 560px ) {. insight-grid , . sku-status { grid-template-columns : 1 fr }}
/* =========================================================
V9.2.0 IMAGE-DRIVEN PROFESSIONAL REPORT
图片 > 专业意见 > 专业建议 > 证据
========================================================= */
: root {
--v92-ink : #17202a ; --v92-text : #465364 ; --v92-muted : #8a95a3 ; --v92-line : #e8edf2 ;
--v92-soft : #f7f9fb ; --v92-blue : #396bc8 ; --v92-blue-soft : #f2f6fd ; --v92-white : #fff ;
}
body { background : #fff ; color : var ( -- v92 - text ); font-size : 14 px ; line-height : 1.55 }
. wrap { width : min ( 1180 px , calc ( 100 % - 40 px )); margin : auto }
. v92-nav { height : 52 px ; position : sticky ; top : 0 ; z-index : 50 ; background : rgba ( 255 , 255 , 255 , .96 ); backdrop-filter : blur ( 10 px ); border-bottom : 1 px solid var ( -- v92 - line ); box-shadow : none }
. v92-nav . wrap { height : 100 % ; display : flex ; align-items : center ; justify-content : space-between ; gap : 18 px }
. v92-nav . brand { font-size : 13 px ; color : var ( -- v92 - ink ); font-weight : 760 ; background : none ; -webkit- background-clip : initial ; background-clip : initial }
. v92-links { display : flex ; gap : 18 px ; overflow : auto }. v92-links a { font-size : 12 px ; color : var ( -- v92 - muted ); text-decoration : none ; white-space : nowrap ; padding : 0 }. v92-links a : hover { background : none ; color : var ( -- v92 - blue )}
. v92-hero { padding : 42 px 0 30 px ; border-bottom : 1 px solid var ( -- v92 - line ); background : #fff ; min-height : 0 }
. v92-hero : before { display : none }. v92-hero-grid { display : grid ; grid-template-columns : 1.08 fr .92 fr ; gap : 42 px ; align-items : center }
. v92-kicker { font-size : 10 px ; font-weight : 800 ; color : var ( -- v92 - blue ); letter-spacing : .08 em ; margin-bottom : 8 px }
. v92-hero h1 { margin : 0 ; color : var ( -- v92 - ink ); font-size : 32 px ; line-height : 1.2 ; letter-spacing : -.02 em ; font-weight : 720 }
. v92-meta { font-size : 12 px ; color : var ( -- v92 - muted ); margin : 10 px 0 0 }
. v92-cover { min-width : 0 }. v92-cover . visual { background : transparent ; border : 0 ; border-radius : 0 ; box-shadow : none }. v92-cover img { display : block ; width : 100 % ; max-height : 390 px ; object-fit : contain ; background : transparent }
. cover-ratio { aspect-ratio : auto !important }. v92-cover-empty { min-height : 280 px ; display : grid ; place-items : center ; background : var ( -- v92 - soft ); color : var ( -- v92 - muted )}
. v92-opinion { margin : 20 px 0 0 ; padding : 14 px 16 px ; background : var ( -- v92 - blue - soft ); border-left : 3 px solid var ( -- v92 - blue ); border-radius : 8 px ; display : grid ; grid-template-columns : 78 px 1 fr ; gap : 14 px }
. v92-opinion span { font-size : 10 px ; color : var ( -- v92 - blue ); font-weight : 800 }. v92-opinion strong { font-size : 15 px ; line-height : 1.55 ; color : var ( -- v92 - ink ); font-weight : 700 }
. v92-section { padding : 42 px 0 ; background : #fff }. v92-section + . v92-section { border-top : 1 px solid var ( -- v92 - line )}
. v92-head { display : flex ; align-items : baseline ; gap : 10 px ; margin-bottom : 18 px }. v92-head > span { font-size : 10 px ; color : var ( -- v92 - blue ); font-weight : 800 }. v92-head h2 { margin : 0 ; font-size : 21 px ; color : var ( -- v92 - ink ); line-height : 1.25 }. v92-head p { margin : 0 0 0 auto ; font-size : 11 px ; color : var ( -- v92 - muted )}
. v92-section > . wrap > . v92-opinion { margin-top : 0 ; margin-bottom : 18 px }
. v92-summary3 { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); border-top : 1 px solid var ( -- v92 - line ); border-bottom : 1 px solid var ( -- v92 - line )}
. v92-summary3 article { padding : 15 px 17 px ; border-right : 1 px solid var ( -- v92 - line )}. v92-summary3 article : last-child { border-right : 0 }
. v92-summary3 span , . v92-title3 span { display : block ; font-size : 10 px ; color : var ( -- v92 - muted ); font-weight : 700 }. v92-summary3 b , . v92-title3 b { display : block ; margin-top : 5 px ; color : var ( -- v92 - ink ); font-size : 13 px ; line-height : 1.5 }. v92-summary3 p { margin : 4 px 0 0 ; color : var ( -- v92 - muted ); font-size : 11 px }
. v92-title-current { padding : 14 px 16 px ; background : var ( -- v92 - soft ); border-radius : 8 px ; color : var ( -- v92 - ink ); margin-bottom : 13 px }. v92-title-current small { display : block ; font-size : 10 px ; color : var ( -- v92 - muted ); margin-bottom : 4 px }
. v92-title3 { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 12 px }. v92-title3 article { padding : 15 px ; border : 1 px solid var ( -- v92 - line ); border-radius : 9 px ; background : #fff }
. v92-flow { display : flex ; gap : 7 px ; align-items : center ; flex-wrap : wrap ; margin : 7 px 0 17 px }. v92-flow . node { font-size : 11 px ; color : var ( -- v92 - ink ); font-weight : 700 ; padding : 6 px 9 px ; background : var ( -- v92 - soft ); border-radius : 99 px }. v92-flow i { font-style : normal ; color : #b7c0ca }
. v92-main-grid { display : grid ; grid-template-columns : repeat ( 5 , 1 fr ); gap : 10 px }. v92-main-card { min-width : 0 }. visual { margin : 0 ; position : relative ; background : var ( -- v92 - soft ); border-radius : 9 px ; overflow : hidden }. visual img { width : 100 % ; height : 100 % ; display : block ; object-fit : cover }. main-ratio { aspect-ratio : 4 / 5 }. wide-ratio { aspect-ratio : 16 / 10 }. square-ratio { aspect-ratio : 1 / 1 }. plan-ratio { aspect-ratio : 4 / 3 }
. image-fallback { display : none ; width : 100 % ; height : 100 % ; min-height : 120 px ; align-items : center ; justify-content : center ; color : var ( -- v92 - muted ); font-size : 10 px ; text-align : center ; padding : 16 px }. visual . failed . image-fallback { display : flex }. visual . failed { background : var ( -- v92 - soft )}
. v92-main-copy { padding : 8 px 1 px 0 }. v92-main-copy span { display : block ; color : var ( -- v92 - ink ); font-size : 12 px ; font-weight : 760 }. v92-main-copy b { display : block ; margin-top : 2 px ; color : var ( -- v92 - text ); font-size : 11 px ; line-height : 1.45 }. v92-main-copy p { margin : 3 px 0 0 ; color : var ( -- v92 - muted ); font-size : 10 px ; line-height : 1.45 }
. v92-table-wrap { overflow : auto ; margin-top : 18 px }. v92-matrix { width : 100 % ; border-collapse : collapse ; min-width : 720 px }. v92-matrix th , . v92-matrix td { padding : 10 px 11 px ; border-bottom : 1 px solid var ( -- v92 - line ); text-align : left ; font-size : 11 px ; vertical-align : top }. v92-matrix th { font-size : 9 px ; color : var ( -- v92 - muted ); background : var ( -- v92 - soft )}. v92-matrix . ok { color : #3c765e ; font-weight : 800 }. v92-matrix . mid { color : #a06d2f ; font-weight : 800 }. v92-matrix . none { color : #9aa3ae }
. v92-detail-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 12 px }. v92-detail-card { border : 1 px solid var ( -- v92 - line ); border-radius : 10 px ; overflow : hidden ; background : #fff }. v92-detail-card > div : last-child { padding : 12 px }. v92-detail-card span { font-size : 9 px ; color : var ( -- v92 - blue ); font-weight : 800 }. v92-detail-card b { display : block ; margin-top : 3 px ; color : var ( -- v92 - ink ); font-size : 13 px }. v92-detail-card p { margin : 4 px 0 0 ; color : var ( -- v92 - muted ); font-size : 10.5 px }. v92-evidence-note { margin-top : 12 px ; font-size : 10 px ; color : var ( -- v92 - muted )}
. v92-sku-layout { display : grid ; grid-template-columns : 1.15 fr .85 fr ; gap : 24 px ; align-items : start }. v92-sku-mosaic { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); gap : 8 px }. v92-choice { border-left : 1 px solid var ( -- v92 - line ); padding-left : 20 px }. v92-choice-row { display : grid ; grid-template-columns : 36 px 1 fr ; gap : 10 px ; padding : 9 px 0 ; border-bottom : 1 px solid var ( -- v92 - line )}. v92-choice-row span { font-size : 9 px ; color : var ( -- v92 - blue ); font-weight : 800 }. v92-choice-row b { font-size : 12 px ; color : var ( -- v92 - ink )}. v92-choice-row small { grid-column : 2 ; font-size : 9 px ; color : var ( -- v92 - muted )}. v92-choice-note { margin-top : 13 px ; padding : 12 px ; background : var ( -- v92 - blue - soft ); border-radius : 8 px ; font-size : 11 px ; color : #345077 }. v92-status { display : block ; margin-top : 9 px ; font-size : 9 px ; color : var ( -- v92 - muted )}
. v92-review-layout { display : grid ; grid-template-columns : 1.15 fr .85 fr ; gap : 24 px ; align-items : start }. v92-buyer-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 8 px }. v92-insights { border-top : 1 px solid var ( -- v92 - line )}. v92-insights article { padding : 12 px 0 ; border-bottom : 1 px solid var ( -- v92 - line )}. v92-insights span { display : block ; font-size : 9 px ; color : var ( -- v92 - muted ); font-weight : 750 }. v92-insights b { display : block ; margin-top : 3 px ; color : var ( -- v92 - ink ); font-size : 12.5 px }. v92-insights p { margin : 4 px 0 0 ; color : var ( -- v92 - muted ); font-size : 10.5 px }
. v92-value-grid { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); gap : 10 px }. v92-value-grid article { padding : 15 px ; border-top : 2 px solid var ( -- v92 - line ); background : var ( -- v92 - soft ); border-radius : 0 0 8 px 8 px }. v92-value-grid span { font-size : 9 px ; color : var ( -- v92 - muted ); font-weight : 800 }. v92-value-grid b { display : block ; margin-top : 5 px ; color : var ( -- v92 - ink ); font-size : 13 px }. v92-value-grid p { margin : 4 px 0 0 ; color : var ( -- v92 - muted ); font-size : 10.5 px }
. v92-plan-stack { display : grid ; gap : 16 px }. v92-plan { display : grid ; grid-template-columns : 190 px 1 fr 1 fr ; gap : 20 px ; padding-top : 16 px ; border-top : 1 px solid var ( -- v92 - line )}. v92-plan : first-child { border-top : 0 ; padding-top : 0 }. v92-plan-copy small { font-size : 9 px ; color : var ( -- v92 - blue ); font-weight : 800 }. v92-plan-copy h3 { margin : 3 px 0 7 px ; color : var ( -- v92 - ink ); font-size : 17 px }. v92-plan-copy p { margin : 0 ; color : var ( -- v92 - muted ); font-size : 11 px }. v92-plan-points { display : grid ; gap : 8 px }. v92-plan-points > div { padding : 10 px 12 px ; background : var ( -- v92 - soft ); border-radius : 8 px }. v92-plan-points span { display : block ; font-size : 9 px ; color : var ( -- v92 - muted ); font-weight : 750 }. v92-plan-points b { display : block ; margin-top : 3 px ; color : var ( -- v92 - ink ); font-size : 11 px }. v92-plan-placeholder { aspect-ratio : 4 / 3 ; background : var ( -- v92 - soft ); display : grid ; place-items : center ; color : var ( -- v92 - muted ); font-size : 10 px ; border-radius : 9 px }
. v92-empty { padding : 18 px ; background : var ( -- v92 - soft ); color : var ( -- v92 - muted ); font-size : 11 px ; border-radius : 8 px }. v92-footer { padding : 28 px 0 40 px ; border-top : 1 px solid var ( -- v92 - line ); font-size : 10 px ; color : var ( -- v92 - muted ); background : #fff }
. image-error { display : none !important }
@ media ( max-width : 900px ) {. v92-hero-grid { grid-template-columns : 1 fr }. v92-summary3 , . v92-title3 , . v92-detail-grid , . v92-value-grid { grid-template-columns : 1 fr }. v92-main-grid { grid-template-columns : repeat ( 2 , 1 fr )}. v92-sku-layout , . v92-review-layout { grid-template-columns : 1 fr }. v92-choice { border-left : 0 ; border-top : 1 px solid var ( -- v92 - line ); padding : 16 px 0 0 }. v92-plan { grid-template-columns : 1 fr }. v92-head p { display : none }}
@ media ( max-width : 560px ) {. wrap { width : min ( 100 % - 24 px , 1180 px )}. v92-hero h1 { font-size : 27 px }. v92-opinion { grid-template-columns : 1 fr ; gap : 5 px }. v92-main-grid { grid-template-columns : 1 fr 1 fr }. v92-sku-mosaic , . v92-buyer-grid { grid-template-columns : repeat ( 2 , 1 fr )}}
/* =========================================================
2026-09-04 16:57:04 +08:00
V9.3.0 OWNER + PROFESSIONAL USER FINAL REPORT
2026-09-03 15:42:05 +08:00
老板先决策；专业用户再看图片证据
图片完整展示，不裁切
========================================================= */
. visual img { object-fit : contain !important ; background : var ( -- v92 - soft )}
. v92-cover . visual , . v92-cover img { background : transparent !important }
. main-ratio { aspect-ratio : auto !important ; height : 310 px }
. wide-ratio { aspect-ratio : auto !important ; height : 260 px }
. square-ratio { aspect-ratio : auto !important ; height : 145 px }
. plan-ratio { aspect-ratio : auto !important ; height : 190 px }
. v92-buyer-grid . square-ratio { height : 160 px }
. v92-cover . cover-ratio { height : auto ; min-height : 300 px ; max-height : 420 px }
. v92-cover . cover-ratio img { height : auto !important ; max-height : 420 px ; width : 100 % ; object-fit : contain !important }
. v924-decision3 article { padding : 15 px 16 px }
. v924-decision3 b { font-size : 14 px }
. v924-decision3 p { font-size : 10.5 px ; margin-top : 4 px }
. v924-title2 { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 12 px ; margin-top : 12 px }
. v924-title2 article { padding : 13 px 14 px ; border : 1 px solid var ( -- v92 - line ); border-radius : 8 px ; background : #fff }
. v924-title2 span { display : block ; font-size : 9 px ; color : var ( -- v92 - muted ); font-weight : 760 }
. v924-title2 b { display : block ; margin-top : 5 px ; color : var ( -- v92 - ink ); font-size : 12.5 px ; line-height : 1.45 }
. v924-image-info { padding-top : 8 px }
. v924-row-title { display : flex ; align-items : baseline ; justify-content : space-between ; gap : 8 px }
. v924-row-title strong { font-size : 12 px ; color : var ( -- v92 - ink )}
. v924-row-title span { font-size : 8 px ; color : var ( -- v92 - muted )}
. v924-chips { display : flex ; gap : 5 px ; flex-wrap : wrap ; margin-top : 6 px }
. v924-chips i { font-style : normal ; padding : 3 px 6 px ; border-radius : 99 px ; background : var ( -- v92 - soft ); color : #586675 ; font-size : 9 px ; line-height : 1.35 }
. v924-image-info p , . v924-detail-info p { margin : 7 px 0 0 ; font-size : 10 px ; color : var ( -- v92 - text ); line-height : 1.4 }
. v924-image-info p b { font-size : 8 px ; color : var ( -- v92 - blue ); margin-right : 5 px }
. v924-details { margin-top : 15 px ; border-top : 1 px solid var ( -- v92 - line )}
. v924-details summary { padding : 12 px 0 ; cursor : pointer ; color : var ( -- v92 - blue ); font-size : 11 px ; font-weight : 700 ; list-style : none }
. v924-details summary :: -webkit-details-marker { display : none }
. v924-details . v92-table-wrap { margin-top : 0 }
. v924-detail-info { padding : 10 px 11 px !important }
. v924-detail-info strong { font-size : 12 px !important ; color : var ( -- v92 - ink )}
. v924-plan-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 12 px }
. v924-plan-card { border : 1 px solid var ( -- v92 - line ); border-radius : 9 px ; overflow : hidden ; background : #fff }
. v924-plan-body { padding : 12 px }
. v924-plan-eyebrow { font-size : 8 px ; color : var ( -- v92 - blue ); font-weight : 800 }
. v924-plan-body h3 { margin : 4 px 0 8 px ; color : var ( -- v92 - ink ); font-size : 15 px ; line-height : 1.3 }
. v924-plan-body > p { margin : 0 0 8 px ; color : var ( -- v92 - muted ); font-size : 10.5 px ; line-height : 1.45 }
. v924-plan-body dl { margin : 0 }
. v924-plan-body dl div { display : grid ; grid-template-columns : 36 px 1 fr ; gap : 6 px ; padding : 7 px 0 ; border-top : 1 px solid var ( -- v92 - line )}
. v924-plan-body dt { font-size : 8 px ; color : var ( -- v92 - muted ); font-weight : 760 }
. v924-plan-body dd { margin : 0 ; font-size : 10.5 px ; color : var ( -- v92 - text ); line-height : 1.45 }
2026-09-04 16:57:04 +08:00
/* V9.3.0 removes repeated explanatory subcopy from default reading layer. */
2026-09-03 15:42:05 +08:00
. v92-evidence-note { font-size : 9 px }
. v92-insights article p { display : none }
. v92-summary3 p : empty { display : none }
@ media ( max-width : 900px ) {
. v924-title2 , . v924-plan-grid { grid-template-columns : 1 fr }
. main-ratio { height : 340 px }. wide-ratio { height : 300 px }. plan-ratio { height : 240 px }
}
@ media ( max-width : 560px ) {
. main-ratio { height : 280 px }. wide-ratio { height : 240 px }. square-ratio { height : 150 px }. plan-ratio { height : 220 px }
}
/* =========================================================
2026-09-04 16:57:04 +08:00
V9.3.0 BIG VISUAL / BIG TYPE FINAL REPORT
2026-09-03 15:42:05 +08:00
Big images tell facts; big type tells judgement; short lines tell actions.
========================================================= */
: root { --v925-ink : #141b24 ; --v925-text : #44505d ; --v925-muted : #8a95a3 ; --v925-line : #e8edf2 ; --v925-soft : #f6f8fa ; --v925-blue : #315fba ; --v925-blue-soft : #eef4ff }
. wrap { width : min ( 1240 px , calc ( 100 % - 56 px ))}
. v92-nav . wrap { height : 58 px }. v92-nav . brand { font-size : 15 px }. v92-links { gap : 22 px }. v92-links a { font-size : 13 px }
. v92-hero { padding : 58 px 0 42 px }. v92-hero-grid { grid-template-columns : .9 fr 1.1 fr ; gap : 54 px ; align-items : center }
. v92-kicker { font-size : 12 px ; letter-spacing : .08 em }. v92-hero h1 { font-size : 48 px ; line-height : 1.12 ; letter-spacing : -.035 em ; margin : 10 px 0 14 px }. v92-meta { font-size : 14 px }
. v925-hero-claim { margin-top : 28 px ; font-size : 26 px ; line-height : 1.48 ; font-weight : 800 ; color : var ( -- v925 - ink ); max-width : 620 px }
. v92-cover . cover-ratio { min-height : 420 px ; max-height : 530 px }. v92-cover . cover-ratio img { max-height : 530 px !important }
. v92-section { padding : 70 px 0 }. v92-head { margin-bottom : 28 px }. v92-head > span { font-size : 12 px }. v92-head h2 { font-size : 36 px ; line-height : 1.2 ; letter-spacing : -.025 em }. v92-head p { font-size : 12 px }
. v925-opinion { display : block !important ; padding : 0 !important ; background : transparent !important ; border : 0 !important ; margin : 0 0 34 px !important ; max-width : 940 px }. v925-opinion strong { font-size : 22 px !important ; line-height : 1.55 !important ; color : var ( -- v925 - ink ) !important }
. v92-summary3 { gap : 28 px ; border : 0 }. v92-summary3 article { padding : 20 px 0 0 ; border-right : 0 !important ; border-top : 2 px solid var ( -- v925 - ink )}. v92-summary3 span { font-size : 13 px }. v92-summary3 b { font-size : 28 px ; line-height : 1.25 ; margin-top : 9 px }. v92-summary3 p { font-size : 15 px ; line-height : 1.5 ; margin-top : 8 px }
. v92-title-current { padding : 18 px 20 px ; border-radius : 12 px ; font-size : 17 px ; margin-bottom : 18 px }. v92-title-current small { font-size : 12 px }. v924-title2 { gap : 18 px }. v924-title2 article { padding : 22 px ; border-radius : 12 px }. v924-title2 span { font-size : 12 px }. v924-title2 b { font-size : 22 px ; line-height : 1.35 ; margin-top : 7 px }
. visual { background : var ( -- v925 - soft ); border-radius : 14 px }. visual img { object-fit : contain !important }. main-ratio , . wide-ratio , . square-ratio , . plan-ratio { aspect-ratio : auto }
. v92-main-grid { grid-template-columns : 1 fr 1 fr ; gap : 28 px }. v925-main-card : nth-child ( 5 ) { grid-column : 1 /- 1 ; max-width : 620 px }. v925-main-card . main-ratio { height : 560 px }. v925-main-card : nth-child ( 5 ) . main-ratio { height : 620 px }
. v925-image-info { padding : 16 px 2 px 0 }. v925-row-title { display : flex ; justify-content : space-between ; align-items : baseline ; gap : 12 px }. v925-row-title h3 { font-size : 24 px ; margin : 0 ; color : var ( -- v925 - ink )}. v925-row-title span { font-size : 12 px ; color : var ( -- v925 - muted )}
. v925-signals { margin-top : 9 px ; font-size : 18 px ; line-height : 1.5 ; font-weight : 760 ; color : var ( -- v925 - ink )}. v925-action { margin : 9 px 0 0 !important ; font-size : 14 px !important ; line-height : 1.45 !important ; color : var ( -- v925 - blue ) !important ; font-weight : 800 !important }
. v924-details { margin-top : 26 px }. v924-details summary { font-size : 14 px ; padding : 16 px 0 }
. v925-detail-list { display : grid ; gap : 54 px }. v925-detail-block { display : grid ; grid-template-columns : 1.2 fr .8 fr ; gap : 34 px ; align-items : center }. v925-detail-block : nth-child ( even ) { grid-template-columns : .8 fr 1.2 fr }. v925-detail-block : nth-child ( even ) . visual { order : 2 }. v925-detail-block . wide-ratio { min-height : 520 px }. v925-detail-copy h3 { font-size : 30 px ; line-height : 1.2 ; margin : 0 0 14 px ; color : var ( -- v925 - ink )}. v925-detail-copy . v925-signals { font-size : 20 px }. v925-detail-copy . v925-action { font-size : 15 px !important }. v92-evidence-note { font-size : 12 px ; margin-top : 24 px }
. v92-sku-layout { grid-template-columns : 1.3 fr .7 fr ; gap : 36 px }. v92-sku-mosaic { grid-template-columns : repeat ( 2 , 1 fr ); gap : 12 px }. v92-sku-mosaic . square-ratio { height : 300 px }. v92-choice { padding-left : 24 px }. v92-choice-row { padding : 17 px 0 ; grid-template-columns : 42 px 1 fr }. v92-choice-row span { font-size : 11 px }. v92-choice-row b { font-size : 21 px }. v92-choice-row small { font-size : 13 px ; line-height : 1.45 }. v92-choice-note { margin-top : 22 px ; padding : 18 px ; border-radius : 12 px ; font-size : 17 px ; font-weight : 760 }. v92-status { font-size : 11 px ; margin-top : 12 px }
. v92-review-layout { grid-template-columns : 1.15 fr .85 fr ; gap : 38 px }. v92-buyer-grid { grid-template-columns : 1 fr 1 fr ; gap : 12 px }. v92-buyer-grid . square-ratio { height : 330 px }. v92-insights article { padding : 20 px 0 }. v92-insights span { font-size : 12 px }. v92-insights b { font-size : 24 px ; line-height : 1.35 ; margin-top : 6 px }
. v925-plan-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 18 px }. v925-plan-card { border : 1 px solid var ( -- v925 - line ); border-radius : 16 px ; overflow : hidden ; background : #fff }. v925-plan-card . plan-ratio { height : 300 px }. v925-plan-body { padding : 22 px }. v925-plan-eyebrow { font-size : 12 px ; color : var ( -- v925 - blue ); font-weight : 800 }. v925-plan-body h3 { font-size : 25 px ; line-height : 1.25 ; margin : 6 px 0 14 px ; color : var ( -- v925 - ink )}. v925-plan-body dl { margin : 0 }. v925-plan-body dl div { display : grid ; grid-template-columns : 52 px 1 fr ; gap : 10 px ; padding : 12 px 0 ; border-top : 1 px solid var ( -- v925 - line )}. v925-plan-body dt { font-size : 12 px ; color : var ( -- v925 - muted ); font-weight : 800 }. v925-plan-body dd { margin : 0 ; font-size : 15 px ; color : var ( -- v925 - ink ); line-height : 1.5 }
. v92-footer { font-size : 12 px ; padding : 34 px 0 54 px }
@ media ( max-width : 900px ) {. wrap { width : min ( 100 % - 28 px , 1240 px )}. v92-hero-grid , . v92-sku-layout , . v92-review-layout , . v925-detail-block , . v925-detail-block : nth-child ( even ) { grid-template-columns : 1 fr }. v92-hero h1 { font-size : 38 px }. v925-hero-claim { font-size : 21 px }. v92-summary3 , . v924-title2 , . v925-plan-grid { grid-template-columns : 1 fr }. v92-main-grid { grid-template-columns : 1 fr }. v925-main-card : nth-child ( 5 ) { grid-column : auto ; max-width : none }. v925-detail-block : nth-child ( even ) . visual { order : 0 }. v92-head h2 { font-size : 30 px }. v92-head p { display : none }. v92-sku-mosaic { grid-template-columns : 1 fr 1 fr }. v92-buyer-grid { grid-template-columns : 1 fr 1 fr }}
@ media ( max-width : 560px ) {. v92-hero h1 { font-size : 32 px }. v925-hero-claim { font-size : 19 px }. v925-main-card . main-ratio , . v925-main-card : nth-child ( 5 ) . main-ratio { height : 440 px }. v925-detail-block . wide-ratio { min-height : 400 px }. v92-sku-mosaic . square-ratio , . v92-buyer-grid . square-ratio { height : 220 px }}
2026-09-04 16:57:04 +08:00
/* Evidence report view: detail proof chain, review visualizations, and full role outputs. */
. report-nav { position : sticky ; top : 0 ; z-index : 20 ; background : rgba ( 255 , 255 , 255 , .96 ); border-bottom : 1 px solid var ( -- v92 - line ); backdrop-filter : blur ( 10 px )}
. report-nav . wrap { min-height : 58 px ; display : flex ; align-items : center ; justify-content : space-between ; gap : 20 px }. report-nav a { color : var ( -- v92 - muted ); font-size : 13 px ; text-decoration : none ; margin-left : 20 px }. report-nav a : hover { color : var ( -- v92 - blue )}. report-nav . brand { color : var ( -- v92 - ink ); font-weight : 800 ; margin-left : 0 }
. report-hero { padding : 62 px 0 52 px ; border-bottom : 1 px solid var ( -- v92 - line )}. report-kicker { color : var ( -- v92 - blue ); font-size : 11 px ; font-weight : 800 ; letter-spacing : .08 em }. report-hero h1 { margin : 12 px 0 14 px ; color : var ( -- v925 - ink ); font-size : 46 px ; line-height : 1.15 }. report-hero p { max-width : 760 px ; margin : 0 ; color : var ( -- v92 - text ); font-size : 20 px ; line-height : 1.6 }. hero-meta { display : flex ; gap : 24 px ; flex-wrap : wrap ; margin-top : 24 px ; color : var ( -- v92 - muted ); font-size : 13 px }
. report-heading { display : flex ; gap : 14 px ; align-items : flex-start ; margin-bottom : 30 px }. report-heading > span { color : var ( -- v92 - blue ); font-size : 12 px ; font-weight : 800 ; padding-top : 7 px }. report-heading h2 { margin : 0 ; color : var ( -- v925 - ink ); font-size : 34 px ; line-height : 1.2 }. report-heading p { margin : 7 px 0 0 ; color : var ( -- v92 - muted ); font-size : 13 px }. report-section { padding : 64 px 0 ; border-bottom : 1 px solid var ( -- v92 - line )}. lead-opinion { max-width : 920 px ; margin : 0 0 26 px ; color : var ( -- v925 - ink ); font-size : 19 px ; line-height : 1.6 ; font-weight : 700 }
. decision-grid , . plan-grid , . title-compare , . sku-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 18 px }. decision-grid article , . title-compare article , . sku-grid article { padding : 22 px ; border-top : 2 px solid var ( -- v925 - ink ); background : var ( -- v925 - soft )}. decision-grid span , . title-compare span , . sku-grid span , . image-copy > span , . detail-proof-copy > span , . sample-strip span , . signal-card > span , . buyer-section header span , . topic-panel header span , . signal-panel header span { display : block ; color : var ( -- v92 - muted ); font-size : 12 px ; font-weight : 750 }. decision-grid h3 , . title-compare b { display : block ; margin : 10 px 0 0 ; color : var ( -- v925 - ink ); font-size : 21 px ; line-height : 1.4 }. decision-grid p { margin : 8 px 0 0 ; color : var ( -- v92 - text ); line-height : 1.55 }. decision-grid ul { margin : 12 px 0 0 ; padding-left : 18 px ; color : var ( -- v92 - text ); font-size : 13 px }. plan-grid { grid-template-columns : repeat ( 3 , 1 fr )}. plan-grid article { padding : 22 px ; border : 1 px solid var ( -- v92 - line ); background : #fff }. plan-grid article > span { color : var ( -- v92 - blue ); font-size : 12 px ; font-weight : 800 }. plan-grid h3 { margin : 9 px 0 10 px ; color : var ( -- v925 - ink ); font-size : 22 px ; line-height : 1.35 }. plan-grid p { min-height : 48 px ; margin : 0 ; color : var ( -- v92 - text ); line-height : 1.55 }. plan-grid dl { margin : 18 px 0 0 }. plan-grid dl div { display : grid ; grid-template-columns : 40 px 1 fr ; gap : 10 px ; padding : 10 px 0 ; border-top : 1 px solid var ( -- v92 - line )}. plan-grid dt { color : var ( -- v92 - muted ); font-size : 12 px ; font-weight : 800 }. plan-grid dd { margin : 0 ; color : var ( -- v925 - ink ); font-size : 13 px ; line-height : 1.5 }
. current-title { padding : 18 px 20 px ; background : var ( -- v925 - soft ); color : var ( -- v925 - ink ); font-size : 17 px ; line-height : 1.55 }. current-title span { display : block ; margin-bottom : 5 px ; color : var ( -- v92 - muted ); font-size : 12 px }. title-compare { margin-top : 18 px ; grid-template-columns : 1 fr 1 fr }. evidence-drawer { margin-top : 22 px ; border-top : 1 px solid var ( -- v92 - line )}. evidence-drawer summary { cursor : pointer ; padding : 16 px 0 ; color : var ( -- v92 - blue ); font-size : 13 px ; font-weight : 800 }. evidence-drawer ol { margin : 0 0 18 px ; padding-left : 22 px ; color : var ( -- v92 - text ); line-height : 1.8 }
. main-analysis-grid { display : grid ; grid-template-columns : repeat ( 2 , 1 fr ); gap : 34 px 22 px }. main-analysis-grid > article { min-width : 0 }. report-figure { margin : 0 ; overflow : hidden ; border-radius : 10 px ; background : var ( -- v925 - soft )}. report-figure img { display : block ; width : 100 % ; height : 100 % ; min-height : 220 px ; object-fit : contain }. main-analysis-grid . report-figure { height : 460 px }. report-figure figcaption { display : flex ; justify-content : space-between ; gap : 12 px ; padding : 9 px 12 px ; color : var ( -- v92 - text ); font-size : 12 px }. report-figure figcaption small { color : var ( -- v92 - muted )}. image-copy { padding : 14 px 2 px }. image-copy h3 { margin : 5 px 0 8 px ; color : var ( -- v925 - ink ); font-size : 23 px }. image-copy b { display : block ; color : var ( -- v925 - ink ); font-size : 16 px ; line-height : 1.5 }. image-copy p { margin : 8 px 0 ; color : var ( -- v92 - text ); line-height : 1.5 }. image-copy em { display : block ; margin-top : 10 px ; color : var ( -- v92 - blue ); font-style : normal ; font-size : 13 px ; font-weight : 800 }
. detail-sequence { display : flex ; gap : 8 px ; flex-wrap : wrap ; margin : 0 0 30 px }. detail-sequence span { padding : 8 px 11 px ; border-radius : 999 px ; background : var ( -- v925 - blue - soft ); color : var ( -- v92 - blue ); font-size : 12 px ; font-weight : 800 }. detail-proof-list { display : grid ; gap : 48 px }. detail-proof-row { display : grid ; grid-template-columns : minmax ( 0 , 1.15 fr ) minmax ( 260 px , .85 fr ); gap : 34 px ; align-items : center }. detail-proof-media { position : relative }. detail-proof-media . report-figure { height : 430 px }. image-source-badge { position : absolute ; left : 12 px ; top : 12 px ; padding : 5 px 8 px ; border-radius : 4 px ; background : rgba ( 20 , 27 , 36 , .78 ); color : #fff ; font-size : 11 px }. detail-proof-copy h3 { margin : 7 px 0 12 px ; color : var ( -- v925 - ink ); font-size : 29 px }. detail-proof-copy > b { display : block ; color : var ( -- v925 - ink ); font-size : 18 px ; line-height : 1.55 }. detail-proof-copy > p { margin : 10 px 0 ; color : var ( -- v92 - text ); line-height : 1.6 }. next-action { margin-top : 18 px ; padding : 14 px 16 px ; background : var ( -- v925 - blue - soft ); border-left : 3 px solid var ( -- v92 - blue ); color : var ( -- v92 - blue ); font-size : 14 px ; line-height : 1.5 ; font-weight : 700 }. next-action small { display : block ; margin-bottom : 4 px ; font-size : 11 px ; color : var ( -- v92 - muted )}. drawer-note { margin : 0 0 14 px ; color : var ( -- v92 - muted ); font-size : 12 px }. evidence-gallery { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); gap : 10 px }. evidence-gallery . report-figure { height : 180 px }. evidence-gallery figcaption { font-size : 10 px }
. sku-grid { grid-template-columns : 1 fr 1 fr }. sku-grid article h3 { margin : 8 px 0 0 ; color : var ( -- v925 - ink ); font-size : 18 px ; line-height : 1.5 }. action-banner { display : flex ; gap : 18 px ; align-items : baseline ; margin-top : 20 px ; padding : 17 px 20 px ; background : var ( -- v925 - blue - soft ); border-left : 3 px solid var ( -- v92 - blue )}. action-banner span { color : var ( -- v92 - muted ); font-size : 12 px }. action-banner b { color : var ( -- v92 - blue ); font-size : 15 px }
. sample-strip { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); gap : 12 px ; margin : 22 px 0 30 px }. sample-strip article { padding : 17 px ; border : 1 px solid var ( -- v92 - line ); background : var ( -- v925 - soft )}. sample-strip article . limited { border-color : #d7b47c ; background : #fffaf1 }. sample-strip b { display : block ; margin-top : 8 px ; color : var ( -- v925 - ink ); font-size : 20 px ; line-height : 1.35 }. sample-strip . limited b { color : #9a6a2b ; font-size : 14 px }. review-visual-grid { display : grid ; grid-template-columns : 1.15 fr .85 fr ; gap : 26 px }. topic-panel , . signal-panel { border-top : 2 px solid var ( -- v925 - ink ); padding-top : 16 px }. topic-panel header , . signal-panel header , . buyer-section > header { display : flex ; justify-content : space-between ; align-items : flex-end ; gap : 12 px }. topic-panel h3 , . signal-panel h3 , . buyer-section h3 { margin : 5 px 0 0 ; color : var ( -- v925 - ink ); font-size : 20 px }. topic-panel header small { color : var ( -- v92 - muted ); font-size : 11 px }. topic-bars { margin-top : 18 px }. topic-row { display : grid ; grid-template-columns : 106 px minmax ( 80 px , 1 fr ) 45 px 52 px ; gap : 10 px ; align-items : center ; margin : 13 px 0 }. topic-row > span { color : var ( -- v92 - text ); font-size : 12 px }. topic-track { height : 10 px ; overflow : hidden ; background : #edf1f4 ; border-radius : 99 px }. topic-track i { display : block ; height : 100 % ; background : var ( -- v92 - blue ); border-radius : inherit }. topic-row b { color : var ( -- v925 - ink ); font-size : 12 px ; text-align : right }. topic-row em { color : var ( -- v92 - muted ); font-size : 11 px ; font-style : normal ; text-align : right }. signal-panel { padding-left : 22 px ; border-left : 1 px solid var ( -- v92 - line ); border-top : 0 }. signal-card { padding : 15 px 0 ; border-bottom : 1 px solid var ( -- v92 - line )}. signal-card h4 { margin : 5 px 0 6 px ; color : var ( -- v925 - ink ); font-size : 17 px ; line-height : 1.45 }. signal-card small { color : var ( -- v92 - muted ); font-size : 11 px }. buyer-section { margin-top : 44 px ; padding-top : 24 px ; border-top : 1 px solid var ( -- v92 - line )}. buyer-story { margin-top : 18 px ; padding : 16 px ; border : 1 px solid var ( -- v92 - line )}. buyer-story-head { display : flex ; justify-content : space-between ; gap : 10 px ; color : var ( -- v92 - blue ); font-size : 12 px ; font-weight : 800 }. buyer-story-head small { color : var ( -- v92 - muted ); font-weight : 400 }. buyer-photo-grid { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ); gap : 8 px ; margin-top : 12 px }. buyer-photo-grid . report-figure { height : 180 px }. buyer-story blockquote { margin : 14 px 0 0 ; padding : 12 px 14 px ; background : var ( -- v925 - soft ); color : var ( -- v925 - ink ); font-size : 15 px ; line-height : 1.55 }. buyer-story > p { margin : 12 px 0 0 ; color : var ( -- v92 - muted ); font-size : 12 px }
. role-list { display : grid ; gap : 12 px }. role-block { border : 1 px solid var ( -- v92 - line ); background : #fff }. role-block summary { display : grid ; grid-template-columns : 40 px 1 fr auto ; gap : 14 px ; align-items : center ; cursor : pointer ; padding : 17 px 20 px ; list-style : none }. role-block summary :: -webkit-details-marker { display : none }. role-block summary > span { color : var ( -- v92 - blue ); font-size : 12 px ; font-weight : 800 }. role-block summary h3 { margin : 0 ; color : var ( -- v925 - ink ); font-size : 17 px }. role-block summary p { margin : 4 px 0 0 ; color : var ( -- v92 - muted ); font-size : 12 px }. role-block summary > b { color : var ( -- v92 - blue ); font-size : 11 px }. role-content { padding : 0 20 px 22 px ; border-top : 1 px solid var ( -- v92 - line )}. structured-object { display : grid ; gap : 12 px }. structured-field { padding-top : 12 px ; border-top : 1 px solid var ( -- v92 - line )}. structured-field > span { display : block ; margin-bottom : 4 px ; color : var ( -- v92 - muted ); font-size : 11 px ; font-weight : 800 }. structured-field p { margin : 0 ; color : var ( -- v92 - text ); line-height : 1.55 }. structured-field ul { margin : 6 px 0 0 ; padding-left : 20 px ; color : var ( -- v92 - text ); line-height : 1.6 }. structured-list { display : grid ; grid-template-columns : repeat ( 2 , 1 fr ); gap : 10 px }. structured-list > article { padding : 13 px ; background : var ( -- v925 - soft )}. structured-list . structured-field { border-top : 0 ; padding-top : 0 }. evidence-field code { display : inline-block ; margin : 2 px 4 px 2 px 0 ; padding : 2 px 5 px ; background : var ( -- v925 - blue - soft ); color : var ( -- v92 - blue ); font-size : 10 px }. compact-field { display : inline-block ; margin-right : 20 px }. compact-field b { color : var ( -- v92 - blue )}. muted , . empty-state { color : var ( -- v92 - muted ); font-size : 13 px }. empty-state { padding : 18 px ; background : var ( -- v925 - soft )}. report-image-missing { display : grid ; place-items : center ; height : 100 % ; min-height : 220 px ; color : var ( -- v92 - muted ); background : var ( -- v925 - soft ); font-size : 12 px }. report-footer { padding : 28 px 0 46 px ; color : var ( -- v92 - muted ); font-size : 12 px }. report-footer b { color : var ( -- v925 - ink )}. report-error { max-width : 720 px ; margin : 100 px auto ; padding : 30 px }. report-error h1 { color : var ( -- v925 - ink )}
@ media ( max-width : 900px ) {. report-nav . wrap { padding : 0 20 px }. report-nav a { margin-left : 12 px }. report-hero h1 { font-size : 36 px }. report-hero p { font-size : 17 px }. report-section { padding : 46 px 0 }. report-heading h2 { font-size : 28 px }. decision-grid , . plan-grid , . main-analysis-grid , . review-visual-grid { grid-template-columns : 1 fr 1 fr }. detail-proof-row { grid-template-columns : 1 fr }. detail-proof-copy { padding : 0 4 px }. signal-panel { padding-left : 0 ; border-left : 0 ; border-top : 1 px solid var ( -- v92 - line ); padding-top : 20 px }. sample-strip { grid-template-columns : 1 fr 1 fr }}
@ media ( max-width : 560px ) {. report-nav . wrap { min-height : 52 px }. report-nav . brand { font-size : 12 px }. report-nav > div > div { overflow : auto ; white-space : nowrap }. report-nav a { font-size : 11 px ; margin-left : 9 px }. report-hero { padding : 42 px 0 34 px }. report-hero h1 { font-size : 30 px }. report-hero p { font-size : 16 px }. hero-meta { gap : 10 px ; font-size : 11 px }. report-heading { margin-bottom : 22 px }. report-heading h2 { font-size : 25 px }. lead-opinion { font-size : 17 px }. decision-grid , . plan-grid , . title-compare , . main-analysis-grid , . sample-strip , . review-visual-grid , . sku-grid { grid-template-columns : 1 fr }. main-analysis-grid . report-figure , . detail-proof-media . report-figure { height : 340 px }. evidence-gallery { grid-template-columns : repeat ( 2 , 1 fr )}. evidence-gallery . report-figure , . buyer-photo-grid . report-figure { height : 150 px }. buyer-photo-grid { grid-template-columns : repeat ( 2 , 1 fr )}. topic-row { grid-template-columns : 94 px minmax ( 60 px , 1 fr ) 38 px 46 px ; gap : 6 px }. role-block summary { grid-template-columns : 28 px 1 fr }. role-block summary > b { display : none }. structured-list { grid-template-columns : 1 fr }}
/* Compact detail proof cards: keep every conclusion bound to its image without a long page. */
. detail-proof-list { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); gap : 18 px }
. detail-proof-row { display : block ; min-width : 0 ; overflow : hidden ; border : 1 px solid var ( -- v92 - line ); border-radius : 12 px ; background : #fff }
. detail-proof-media . report-figure { height : 260 px ; border-radius : 0 }
. detail-proof-copy { padding : 17 px 18 px 18 px }
. detail-proof-copy h3 { margin : 5 px 0 8 px ; font-size : 23 px }
. detail-proof-copy > b { font-size : 15 px ; line-height : 1.5 }
. detail-proof-copy > p { margin : 7 px 0 0 ; font-size : 13 px ; line-height : 1.5 }
. next-action { margin-top : 12 px ; padding : 10 px 12 px ; font-size : 13 px ; line-height : 1.45 }
. next-action small { display : inline ; margin : 0 8 px 0 0 ; font-size : 10 px }
@ media ( max-width : 900px ) {. detail-proof-list { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); gap : 14 px }. detail-proof-media . report-figure { height : 220 px }. detail-proof-copy { padding : 14 px 15 px 15 px }. detail-proof-copy h3 { font-size : 20 px }. detail-proof-copy > b { font-size : 14 px }. detail-proof-copy > p { font-size : 12 px }. next-action { padding : 9 px 10 px ; font-size : 12 px }}
@ media ( max-width : 560px ) {. detail-proof-list { grid-template-columns : 1 fr }. detail-proof-media . report-figure { height : 250 px }. detail-proof-copy h3 { font-size : 21 px }}
/* Compact main-image analysis: portrait assets and their conclusions share one card. */
. main-analysis-grid { gap : 18 px }
. main-analysis-grid > article { display : grid ; grid-template-columns : minmax ( 190 px , .78 fr ) minmax ( 0 , 1.22 fr ); overflow : hidden ; border : 1 px solid var ( -- v92 - line ); border-radius : 12 px ; background : #fff }
. main-analysis-grid . report-figure { display : grid ; grid-template-rows : minmax ( 0 , 1 fr ) auto ; height : 310 px ; border-radius : 0 }
. main-analysis-grid . report-figure img { min-height : 0 }
. main-analysis-grid . image-copy { align-self : center ; padding : 18 px }
. main-analysis-grid . image-copy h3 { font-size : 21 px }
. main-analysis-grid . image-copy b { font-size : 14 px }
. main-analysis-grid . image-copy p { font-size : 12 px }
@ media ( max-width : 900px ) {. main-analysis-grid { grid-template-columns : 1 fr }. main-analysis-grid > article { grid-template-columns : 190 px minmax ( 0 , 1 fr )}. main-analysis-grid . report-figure { height : 270 px }. main-analysis-grid . image-copy { padding : 15 px }}
@ media ( max-width : 560px ) {. main-analysis-grid > article { grid-template-columns : 140 px minmax ( 0 , 1 fr )}. main-analysis-grid . report-figure { height : 245 px }. main-analysis-grid . image-copy { padding : 12 px }. main-analysis-grid . image-copy h3 { font-size : 18 px }. main-analysis-grid . image-copy b { font-size : 13 px }. main-analysis-grid . image-copy p { display : none }}
/* Review issue insights: frequency becomes an actionable product diagnosis. */
. problem-section { margin-top : 42 px ; padding-top : 24 px ; border-top : 1 px solid var ( -- v92 - line )}
. problem-section > header { margin-bottom : 16 px }. problem-section > header span { color : var ( -- v92 - muted ); font-size : 12 px ; font-weight : 800 }. problem-section h3 { margin : 5 px 0 0 ; color : var ( -- v925 - ink ); font-size : 20 px }. problem-section > header p { margin : 5 px 0 0 ; color : var ( -- v92 - muted ); font-size : 12 px }
. problem-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 12 px }. problem-card { padding : 15 px 16 px ; border : 1 px solid var ( -- v92 - line ); border-top : 3 px solid #c38a43 ; background : #fff }. problem-card . gap { border-top-color : #b87953 }. problem-card . question { border-top-color : var ( -- v92 - blue )}
. problem-card > span { color : var ( -- v92 - muted ); font-size : 11 px ; font-weight : 800 }. problem-card h4 { margin : 6 px 0 9 px ; color : var ( -- v925 - ink ); font-size : 16 px ; line-height : 1.45 }. problem-card p { margin : 5 px 0 ; color : var ( -- v92 - text ); font-size : 12 px ; line-height : 1.5 }. problem-card p b { color : var ( -- v92 - muted ); font-size : 11 px }. problem-card small { display : block ; margin-top : 10 px ; color : var ( -- v92 - muted ); font-size : 10 px }
@ media ( max-width : 900px ) {. problem-grid { grid-template-columns : 1 fr 1 fr }}
@ media ( max-width : 560px ) {. problem-grid { grid-template-columns : 1 fr }}
/* Deterministic detail sequence: one semantic axis, one visual rule. */
. sequence-rule { display : flex ; align-items : baseline ; gap : 12 px ; margin-bottom : 12 px }. sequence-rule > span { color : var ( -- v92 - blue ); font-size : 11 px ; font-weight : 800 }. sequence-rule > b { color : var ( -- v925 - ink ); font-size : 13 px }. sequence-rule > small { margin-left : auto ; color : var ( -- v92 - muted ); font-size : 10 px }
. detail-sequence { display : grid ; grid-template-columns : repeat ( auto - fit , minmax ( 128 px , 1 fr )); gap : 0 ; margin : 0 0 24 px ; border : 1 px solid var ( -- v92 - line ); border-radius : 10 px ; overflow : hidden ; background : #fff }
. detail-sequence span { display : grid ; grid-template-columns : 28 px 1 fr ; gap : 1 px 7 px ; align-items : center ; min-width : 0 ; padding : 11 px 12 px ; border-radius : 0 ; border-right : 1 px solid var ( -- v92 - line ); background : #fff ; color : var ( -- v925 - ink )}
. detail-sequence span : last-child { border-right : 0 }. detail-sequence span i { grid-row : 1 / 3 ; color : var ( -- v92 - blue ); font-size : 11 px ; font-style : normal ; font-weight : 800 }. detail-sequence span b { font-size : 12 px ; line-height : 1.3 }. detail-sequence span small { overflow : hidden ; color : var ( -- v92 - muted ); font-size : 10 px ; line-height : 1.3 ; text-overflow : ellipsis ; white-space : nowrap }
@ media ( max-width : 900px ) {. sequence-rule { align-items : flex-start ; flex-wrap : wrap }. sequence-rule > small { width : 100 % ; margin-left : 0 }. detail-sequence { grid-template-columns : repeat ( 3 , 1 fr )}. detail-sequence span : nth-child ( 3n ) { border-right : 0 }. detail-sequence span : nth-child ( n + 4 ) { border-top : 1 px solid var ( -- v92 - line )}}
@ media ( max-width : 560px ) {. detail-sequence { grid-template-columns : 1 fr 1 fr }. detail-sequence span : nth-child ( 3n ) { border-right : 1 px solid var ( -- v92 - line )}. detail-sequence span : nth-child ( 2n ) { border-right : 0 }. detail-sequence span : nth-child ( n + 3 ) { border-top : 1 px solid var ( -- v92 - line )}}
/* Report cover: the declared coverImageId is always a product main image. */
. hero-layout { display : grid ; grid-template-columns : minmax ( 0 , 1.08 fr ) minmax ( 320 px , .72 fr ); gap : 48 px ; align-items : center }. hero-copy { min-width : 0 }. hero-product { display : grid ; grid-template-rows : minmax ( 0 , 1 fr ) auto ; height : 390 px ; margin : 0 ; overflow : hidden ; border-radius : 14 px ; background : var ( -- v925 - soft )}. hero-product img { display : block ; width : 100 % ; height : 100 % ; min-height : 0 ; object-fit : contain }. hero-product figcaption { display : flex ; justify-content : space-between ; gap : 12 px ; padding : 9 px 12 px ; background : #fff ; color : var ( -- v92 - muted ); font-size : 11 px }. hero-product figcaption small { font-size : 10 px }. hero-product-empty { place-items : center ; color : var ( -- v92 - muted ); font-size : 12 px }
@ media ( max-width : 900px ) {. hero-layout { grid-template-columns : minmax ( 0 , 1 fr ) minmax ( 250 px , .7 fr ); gap : 24 px }. hero-product { height : 320 px }. report-hero h1 { font-size : 32 px }}
@ media ( max-width : 700px ) {. hero-layout { grid-template-columns : 1 fr }. hero-product { height : 340 px }. report-hero { padding-bottom : 28 px }}
@ media ( max-width : 560px ) {. hero-product { height : 300 px }}
/* Product imagery fills every allocated visual frame. */
. report-app . report-figure img , . report-app . hero-product img { width : 100 % ; height : 100 % ; object-fit : cover !important ; object-position : center top }
/* Full-screen main-image carousel with a seamless top navigation. */
. report-top { position : relative ; background : #111 }. report-top . report-nav { position : absolute ; inset : 0 0 auto ; z-index : 30 ; background : transparent ; border : 0 ; backdrop-filter : none }. report-top . report-nav . wrap { border-bottom : 1 px solid rgba ( 255 , 255 , 255 , .28 )}. report-top . report-nav a , . report-top . report-nav . brand { color : #fff ; text-shadow : 0 1 px 12 px rgba ( 0 , 0 , 0 , .35 )}. report-top . report-nav a : hover { color : #dce9ff }
. report-hero . hero-carousel { position : relative ; isolation : isolate ; height : 100 svh ; min-height : 650 px ; padding : 0 ; overflow : hidden ; border : 0 ; background : #111 }. hero-slides , . hero-slide , . hero-shade { position : absolute ; inset : 0 }. hero-slide { margin : 0 ; opacity : 0 ; transition : opacity .65 s ease }. hero-slide . active { opacity : 1 }. hero-slide img { display : block ; width : 100 % ; height : 100 % ; object-fit : cover !important ; object-position : center center }. hero-slide figcaption { position : absolute ; right : 28 px ; top : 76 px ; z-index : 2 ; color : rgba ( 255 , 255 , 255 , .78 ); font-size : 10 px }. hero-slide-empty { display : grid ; place-items : center ; color : #fff }. hero-shade { z-index : 1 ; background : linear-gradient ( 180 deg , rgba ( 7 , 15 , 25 , .34 ) 0 % , rgba ( 7 , 15 , 25 , .03 ) 35 % , rgba ( 7 , 15 , 25 , .78 ) 100 % ); pointer-events : none }
. hero-overlay { position : relative ; z-index : 3 ; height : 100 % ; display : flex ; align-items : flex-end ; justify-content : space-between ; gap : 32 px ; padding-bottom : 54 px }. hero-carousel . hero-copy { max-width : 780 px }. hero-carousel . report-kicker { color : #dce9ff }. report-hero . hero-carousel h1 { margin : 10 px 0 12 px ; color : #fff ; font-size : 52 px ; text-shadow : 0 2 px 22 px rgba ( 0 , 0 , 0 , .28 )}. report-hero . hero-carousel p { color : rgba ( 255 , 255 , 255 , .92 ); font-size : 21 px ; text-shadow : 0 1 px 16 px rgba ( 0 , 0 , 0 , .32 )}. hero-carousel . hero-meta { color : rgba ( 255 , 255 , 255 , .78 )}
. hero-carousel-ui { display : flex ; align-items : center ; gap : 12 px ; flex : 0 0 auto ; padding-bottom : 4 px }. hero-carousel-ui > button { width : 38 px ; height : 38 px ; padding : 0 ; border : 1 px solid rgba ( 255 , 255 , 255 , .5 ); border-radius : 50 % ; background : rgba ( 0 , 0 , 0 , .15 ); color : #fff ; cursor : pointer ; font-size : 18 px }. hero-carousel-ui > button : hover { background : rgba ( 255 , 255 , 255 , .18 )}. hero-dots { display : flex ; gap : 6 px }. hero-dot { width : 7 px !important ; height : 7 px !important ; border : 0 !important ; border-radius : 50 % ; background : rgba ( 255 , 255 , 255 , .45 ) !important }. hero-dot . active { width : 22 px !important ; border-radius : 10 px ; background : #fff !important }. hero-carousel-count { min-width : 48 px ; color : #fff ; font-size : 11 px ; text-align : center }
@ media ( max-width : 900px ) {. report-hero . hero-carousel h1 { font-size : 40 px }. hero-overlay { padding-bottom : 38 px }. hero-carousel-ui { position : absolute ; right : 28 px ; bottom : 38 px }. hero-carousel . hero-copy { padding-right : 170 px }}
@ media ( max-width : 700px ) {. report-top . report-nav . wrap { padding : 0 20 px }. report-hero . hero-carousel { height : 100 svh ; min-height : 620 px }. hero-overlay { display : flex ; padding : 0 22 px 28 px }. hero-carousel . hero-copy { padding-right : 0 ; padding-bottom : 62 px }. report-hero . hero-carousel h1 { font-size : 32 px }. report-hero . hero-carousel p { font-size : 16 px }. hero-carousel-ui { left : 22 px ; right : auto ; bottom : 28 px }. hero-slide figcaption { right : 18 px ; top : 66 px }}
@ media ( prefers-reduced-motion : reduce ) {. hero-slide { transition : none }}
/* Main-image display correction: full bleed atmosphere plus an uncropped product image. */
. hero-slide . hero-slide-backdrop { position : absolute ; inset : -24 px ; width : calc ( 100 % + 48 px ); height : calc ( 100 % + 48 px ); object-fit : cover !important ; filter : blur ( 22 px ) saturate ( .82 ); transform : scale ( 1.04 ); opacity : .78 }
. hero-slide . hero-slide-product { position : absolute ; inset : 0 ; width : 100 % ; height : 100 % ; object-fit : contain !important ; object-position : center center ; filter : none }
. report-app . report-figure , . report-app . hero-product , . main-analysis-grid > article , . detail-proof-row { border-radius : 0 !important }
/* Fanned-card hero gallery. */
. hero-slide . hero-slide-product { opacity : .2 ; filter : saturate ( .8 )}
. hero-deck { position : absolute ; right : 7 % ; top : 50 % ; width : 390 px ; height : 500 px ; transform : translateY ( -52 % ); z-index : 5 ; pointer-events : none }
. hero-deck-card { position : absolute ; left : 50 % ; bottom : 0 ; width : 235 px ; height : 380 px ; padding : 0 ; overflow : hidden ; border : 1 px solid rgba ( 255 , 255 , 255 , .72 ); border-radius : 0 ; background : #fff ; box-shadow : 0 24 px 55 px rgba ( 0 , 0 , 0 , .32 ); transform-origin : 50 % 115 % ; transform : translateX ( calc ( -50 % + var ( -- deck - x ))) rotate ( var ( -- deck - r )); transition : transform .5 s ease , filter .35 s ease , opacity .35 s ease ; z-index : calc ( var ( -- deck - index ) + 1 ); cursor : pointer ; pointer-events : auto }
. hero-deck-card img { display : block ; width : 100 % ; height : 100 % ; object-fit : cover ; object-position : center top }. hero-deck-card span { position : absolute ; left : 10 px ; bottom : 9 px ; padding : 3 px 6 px ; background : rgba ( 10 , 20 , 32 , .74 ); color : #fff ; font-size : 10 px ; font-weight : 800 }. hero-deck-card . active { z-index : 20 ; transform : translateX ( calc ( -50 % + var ( -- deck - x ))) translateY ( -24 px ) rotate ( 0 ); box-shadow : 0 30 px 70 px rgba ( 0 , 0 , 0 , .45 )}. hero-deck-card : not ( . active ) { filter : saturate ( .78 ) brightness ( .9 )}
. hero-carousel . hero-copy { position : relative ; z-index : 8 ; max-width : 570 px }. hero-carousel-ui { position : absolute ; right : 7 % ; bottom : 38 px ; z-index : 9 }
/* Semantic color hierarchy shared by every report module. */
. report-section { --module-accent : var ( -- v92 - blue ); --module-soft : #f1f6ff }
# plan { --module-accent : #5968b0 ; --module-soft : #f3f3fb }# title , # main { --module-accent : #276bb5 ; --module-soft : #eef6ff }# detail , # sku { --module-accent : #087b78 ; --module-soft : #edf8f7 }# review { --module-accent : #b37027 ; --module-soft : #fff7ec }# roles { --module-accent : #5d6875 ; --module-soft : #f4f6f8 }
. report-section . report-heading > span { color : var ( -- module - accent )}. report-section . report-heading h2 { position : relative }. report-section . report-heading h2 : after { content : '' ; display : block ; width : 34 px ; height : 3 px ; margin-top : 9 px ; background : var ( -- module - accent )}
. report-section . lead-opinion { max-width : none ; padding : 16 px 18 px ; border-left : 4 px solid var ( -- module - accent ); background : var ( -- module - soft ); font-size : 17 px }. report-section . decision-grid article , . report-section . title-compare article , . report-section . sku-grid article { border-top-color : var ( -- module - accent )}
. report-section . plan-grid article > span , . report-section . image-copy > span , . report-section . detail-proof-copy > span , . report-section . detail-sequence span i , . report-section . sequence-rule > span { color : var ( -- module - accent )}
. report-section . image-copy em , . report-section . next-action , . report-section . action-banner b { color : #276bc7 }. report-section . next-action , . report-section . action-banner { border-left-color : #276bc7 ; background : #eef5ff }
. evidence-field code { background : #eaf7f5 ; color : #087b78 }. sample-strip . complete { border-color : #78b7a9 ; background : #eff9f6 }. sample-strip . limited , . problem-card { border-color : #dfbd8c }. problem-card { border-top-color : #b37027 }
@ media ( max-width : 1050px ) {. hero-deck { right : 2 % ; width : 330 px }. hero-deck-card { width : 205 px ; height : 335 px }. hero-carousel . hero-copy { max-width : 500 px }. hero-carousel-ui { right : 3 % }}
@ media ( max-width : 800px ) {. hero-deck { right : 0 ; top : 38 % ; width : 290 px ; height : 330 px }. hero-deck-card { width : 165 px ; height : 265 px }. hero-deck-card . active { transform : translateX ( calc ( -50 % + var ( -- deck - x ))) translateY ( -15 px ) rotate ( 0 )}. hero-carousel . hero-copy { max-width : none ; padding : 0 0 78 px }. hero-overlay { align-items : flex-end }. hero-carousel-ui { left : 22 px ; right : auto ; bottom : 24 px }}
@ media ( max-width : 560px ) {. hero-deck { top : 36 % ; left : 50 % ; right : auto ; width : 250 px ; height : 285 px ; transform : translate ( -50 % , -50 % )}. hero-deck-card { width : 145 px ; height : 230 px }. hero-deck-card . active { transform : translateX ( calc ( -50 % + var ( -- deck - x ))) translateY ( -12 px ) rotate ( 0 )}. hero-carousel . hero-copy { padding-bottom : 72 px }. report-hero . hero-carousel h1 { font-size : 27 px }. report-section . lead-opinion { padding : 13 px 14 px ; font-size : 15 px }}
@ media ( prefers-reduced-motion : reduce ) {. hero-deck-card { transition : none }}
/* Complete-image rule: a full uncropped image over a filled atmospheric backdrop. */
. report-figure { position : relative }. report-image-stage { position : relative ; display : block ; width : 100 % ; height : 100 % ; min-height : 0 ; overflow : hidden ; background : #eef1f2 }. report-app . report-figure img . report-image-backdrop { position : absolute ; inset : -16 px ; width : calc ( 100 % + 32 px ); height : calc ( 100 % + 32 px ); min-height : 0 ; object-fit : cover !important ; object-position : center ; filter : blur ( 16 px ) saturate ( .75 ); transform : scale ( 1.05 ); opacity : .48 }. report-app . report-figure img . report-image-product { position : relative ; z-index : 1 ; display : block ; width : 100 % ; height : 100 % ; min-height : 0 ; object-fit : contain !important ; object-position : center }
. report-figure figcaption { position : relative ; z-index : 2 ; background : #fff }. main-analysis-grid . report-figure , . detail-proof-media . report-figure , . evidence-gallery . report-figure , . buyer-photo-grid . report-figure { display : grid ; grid-template-rows : minmax ( 0 , 1 fr ) auto }. main-analysis-grid . report-image-stage , . detail-proof-media . report-image-stage , . evidence-gallery . report-image-stage , . buyer-photo-grid . report-image-stage { min-height : 0 }
/* Primary header action. */
. report-nav-actions { display : flex ; align-items : center ; gap : 0 }. report-top . report-nav . quick-product-btn { display : inline-flex ; align-items : center ; gap : 12 px ; margin-left : 22 px ; padding : 9 px 14 px ; background : #276bc7 ; color : #fff ; border : 1 px solid #4d89db ; text-shadow : none ; font-weight : 800 }. report-top . report-nav . quick-product-btn : hover { background : #1f59a8 ; color : #fff }. quick-product-btn span { font-size : 15 px ; line-height : 1 }
@ media ( max-width : 700px ) {. report-top . report-nav . quick-product-btn { margin-left : 10 px ; padding : 7 px 10 px }. report-top . report-nav . quick-product-btn span { display : none }}
@ media ( max-width : 560px ) {. report-nav-actions > a : not ( . quick-product-btn ) { display : none }. report-top . report-nav . quick-product-btn { margin-left : 0 ; font-size : 11 px }}
/* Clean complete-image mode: one source image, no blurred duplicate, no crop. */
. hero-slide . hero-slide-backdrop , . report-image-backdrop { display : none !important }. hero-slide . hero-slide-product { opacity : 1 ; filter : none ; object-fit : contain !important ; object-position : center }. hero-deck-card img { box-sizing : border-box ; padding : 5 px ; object-fit : contain !important ; object-position : center ; background : #f3f4f2 }. report-image-stage { background : #f3f4f2 }. report-app . report-figure img . report-image-product { object-fit : contain !important ; object-position : center }
. report-top , . report-hero . hero-carousel { background : #171b20 }. hero-shade { background : linear-gradient ( 180 deg , rgba ( 7 , 15 , 25 , .12 ) 0 % , rgba ( 7 , 15 , 25 , 0 ) 48 % , rgba ( 7 , 15 , 25 , .82 ) 100 % )}
. report-section { padding : 52 px 0 }. report-heading { margin-bottom : 24 px }. report-heading p { margin-top : 5 px }. report-section . lead-opinion { margin-bottom : 20 px ; padding : 13 px 15 px ; font-size : 16 px }. decision-grid , . plan-grid { gap : 14 px }. detail-sequence { margin-bottom : 18 px }. detail-proof-list { gap : 14 px }. buyer-section , . problem-section { margin-top : 32 px ; padding-top : 20 px }. role-list { gap : 8 px }
@ media ( max-width : 700px ) {. report-section { padding : 40 px 0 }. report-heading { margin-bottom : 18 px }. report-section . lead-opinion { margin-bottom : 16 px }}
/* Quick-product plan area and actionable generation controls. */
# plan { background : linear-gradient ( 180 deg , #f2f5ff 0 % , #f7f9ff 100 % )}# plan . plan-grid article { display : flex ; flex-direction : column ; background : rgba ( 255 , 255 , 255 , .9 ); border : 0 ; border-top : 4 px solid #416fc0 ; box-shadow : 0 10 px 30 px rgba ( 44 , 65 , 105 , .08 )}# plan . plan-card . plan-upgrade { border-top-color : #16857f }# plan . plan-card . plan-explore { border-top-color : #7662ba }# plan . plan-card > span { color : #416fc0 }# plan . plan-upgrade > span { color : #16857f }# plan . plan-explore > span { color : #7662ba }# plan . plan-card dl { flex : 1 }
. generate-plan-btn { display : flex ; align-items : center ; justify-content : space-between ; width : 100 % ; margin-top : 18 px ; padding : 13 px 15 px ; border : 0 ; background : #316dcc ; color : #fff ; font-size : 13 px ; font-weight : 800 ; cursor : pointer }. generate-plan-btn : hover { background : #255aa9 }. plan-upgrade . generate-plan-btn { background : #16857f }. plan-upgrade . generate-plan-btn : hover { background : #0d6c67 }. plan-explore . generate-plan-btn { background : #6d5ab1 }. plan-explore . generate-plan-btn : hover { background : #574694 }. generate-plan-btn span { font-size : 17 px }
. quick-plan-dialog { width : min ( 620 px , calc ( 100 % - 32 px )); padding : 28 px ; border : 0 ; border-top : 5 px solid #316dcc ; border-radius : 0 ; box-shadow : 0 30 px 90 px rgba ( 12 , 24 , 42 , .28 ); color : var ( -- v92 - text )}. quick-plan-dialog :: backdrop { background : rgba ( 10 , 18 , 30 , .58 ); backdrop-filter : blur ( 4 px )}. quick-plan-dialog > span { color : #316dcc ; font-size : 10 px ; font-weight : 800 ; letter-spacing : .08 em }. quick-plan-dialog h2 { margin : 7 px 38 px 8 px 0 ; color : var ( -- v925 - ink ); font-size : 28 px }. quick-plan-dialog > p { margin : 0 0 18 px ; color : var ( -- v92 - muted ); line-height : 1.55 }. quick-plan-dialog dl { margin : 0 }. quick-plan-dialog dl div { display : grid ; grid-template-columns : 76 px 1 fr ; gap : 12 px ; padding : 13 px 0 ; border-top : 1 px solid var ( -- v92 - line )}. quick-plan-dialog dt { color : var ( -- v92 - muted ); font-size : 12 px ; font-weight : 800 }. quick-plan-dialog dd { margin : 0 ; color : var ( -- v925 - ink ); line-height : 1.55 }. dialog-close { position : absolute ; right : 18 px ; top : 16 px ; width : 32 px ; height : 32 px ; border : 0 ; background : #eef2f6 ; color : var ( -- v925 - ink ); cursor : pointer ; font-size : 20 px }. copy-plan-btn { width : 100 % ; margin-top : 18 px ; padding : 13 px ; border : 0 ; background : #316dcc ; color : #fff ; font-weight : 800 ; cursor : pointer }
@ media ( max-width : 700px ) {# plan . plan-grid { grid-template-columns : 1 fr }. quick-plan-dialog { padding : 22 px }. quick-plan-dialog h2 { font-size : 23 px }. quick-plan-dialog dl div { grid-template-columns : 1 fr ; gap : 4 px }}
/* Clean white hero: no background image or overlay, larger complete-image card deck. */
. report-top , . report-hero . hero-carousel { background : #fff }. hero-slides , . hero-shade { display : none }. report-top . report-nav . wrap { border-bottom : 1 px solid #e6ebf0 }. report-top . report-nav a { color : #687381 ; text-shadow : none }. report-top . report-nav . brand { color : #17202a ; text-shadow : none }. report-top . report-nav a : hover { color : #276bc7 }
. report-hero . hero-carousel { min-height : 680 px }. hero-overlay { align-items : center ; padding-top : 72 px ; padding-bottom : 34 px }. hero-carousel . hero-copy { max-width : 510 px ; padding : 0 }. hero-carousel . report-kicker { color : #276bc7 }. report-hero . hero-carousel h1 { color : #17202a ; text-shadow : none }. report-hero . hero-carousel p { color : #566270 ; text-shadow : none }. hero-carousel . hero-meta { color : #87919d }
. hero-deck { right : 5 % ; top : 51 % ; width : 500 px ; height : 570 px }. hero-deck-card { width : 290 px ; height : 470 px ; border-color : #dfe5eb ; box-shadow : 0 22 px 55 px rgba ( 32 , 44 , 60 , .18 )}. hero-deck-card . active { box-shadow : 0 28 px 70 px rgba ( 32 , 44 , 60 , .24 )}. hero-deck-card : not ( . active ) { filter : saturate ( .9 ) brightness ( .97 )}. hero-carousel-ui { right : 6 % ; bottom : 32 px }. hero-carousel-ui > button { border-color : #9aa6b3 ; background : #fff ; color : #27313d }. hero-carousel-ui > button : hover { background : #eef3f8 }. hero-dot { background : #c4ccd5 !important }. hero-dot . active { background : #276bc7 !important }. hero-carousel-count { color : #566270 }
. report-top . report-nav . quick-product-btn { border-radius : 12 px ; background : #276bc7 ; color : #fff ; text-shadow : none }. report-top . report-nav . quick-product-btn : hover { background : #1f59a8 ; color : #fff }
@ media ( max-width : 1050px ) {. hero-deck { right : 1 % ; width : 410 px ; height : 520 px }. hero-deck-card { width : 250 px ; height : 405 px }. hero-carousel . hero-copy { max-width : 460 px }}
@ media ( max-width : 800px ) {. report-hero . hero-carousel { min-height : 720 px }. hero-overlay { align-items : flex-end ; padding : 64 px 24 px 34 px }. hero-deck { top : 38 % ; right : 2 % ; width : 340 px ; height : 360 px }. hero-deck-card { width : 190 px ; height : 305 px }. hero-carousel . hero-copy { max-width : 520 px ; padding-bottom : 72 px }. hero-carousel-ui { left : 24 px ; right : auto ; bottom : 26 px }}
@ media ( max-width : 560px ) {. report-hero . hero-carousel { min-height : 720 px }. hero-deck { top : 34 % ; left : 50 % ; right : auto ; width : 280 px ; height : 310 px }. hero-deck-card { width : 165 px ; height : 260 px }. hero-carousel . hero-copy { padding-bottom : 70 px }. report-top . report-nav . quick-product-btn { border-radius : 10 px }}
/* Unframed product imagery: preserve every source image without cropping or labels. */
. report-app . report-figure ,
. report-app . report-image-stage ,
. report-app . image-analysis figure ,
. report-app . story-media ,
. report-app . buyer-gallery figure ,
. hero-deck-card {
border : 0 !important ;
border-radius : 0 !important ;
outline : 0 !important ;
background : transparent !important ;
box-shadow : none !important ;
}
. hero-deck-card . active { box-shadow : none !important }
. hero-deck-card img {
padding : 0 !important ;
background : transparent !important ;
object-fit : contain !important ;
object-position : center !important ;
}
. report-app . report-image-stage { overflow : visible }
. report-app . report-figure img ,
. report-app . report-image-product ,
. report-app . image-analysis img ,
. report-app . story-media img ,
. report-app . buyer-gallery img ,
. report-app . visual img {
max-width : 100 % ;
object-fit : contain !important ;
object-position : center !important ;
background : transparent !important ;
}
. main-analysis-grid . report-figure ,
. detail-proof-media . report-figure ,
. evidence-gallery . report-figure ,
. buyer-photo-grid . report-figure { grid-template-rows : minmax ( 0 , 1 fr ) !important }
. image-source-badge , . hero-deck-card span , . report-figure figcaption , . hero-slide figcaption { display : none !important }
/* Refined alignment and interaction; reference accent: cyan to sky-blue. */
: root { --v925-reference-gradient : linear-gradient ( 100 deg , #37dcc9 0 % , #83c9ef 100 % )}
# plan . plan-grid { align-items : stretch }
# plan . plan-card {
position : relative ;
min-height : 100 % ;
transition : transform .2 s ease , box-shadow .2 s ease ;
}
# plan . plan-card : hover { transform : translateY ( -3 px ); box-shadow : 0 14 px 34 px rgba ( 42 , 104 , 130 , .12 )}
# plan . plan-card : focus-within { box-shadow : 0 0 0 3 px rgba ( 55 , 220 , 201 , .22 ), 0 14 px 34 px rgba ( 42 , 104 , 130 , .12 )}
# plan . plan-card > span {
align-self : flex-start ;
width : max-content ;
max-width : 100 % ;
padding : 5 px 9 px ;
background : var ( -- v925 - reference - gradient );
color : #fff !important ;
font-size : 11 px ;
line-height : 1.25 ;
}
# plan . generate-plan-btn ,
. report-top . report-nav . quick-product-btn {
border-radius : 10 px ;
background : var ( -- v925 - reference - gradient );
color : #fff ;
transition : transform .18 s ease , filter .18 s ease , box-shadow .18 s ease ;
}
# plan . generate-plan-btn : hover ,
. report-top . report-nav . quick-product-btn : hover {
background : var ( -- v925 - reference - gradient );
filter : saturate ( 1.08 ) brightness ( .96 );
box-shadow : 0 8 px 22 px rgba ( 45 , 190 , 190 , .2 );
}
# plan . generate-plan-btn : active ,
. report-top . report-nav . quick-product-btn : active { transform : translateY ( 1 px ); box-shadow : none }
# plan . generate-plan-btn : focus-visible ,
. report-top . report-nav . quick-product-btn : focus-visible { outline : 3 px solid rgba ( 55 , 220 , 201 , .3 ); outline-offset : 3 px }
. detail-proof-list { align-items : stretch }
. detail-proof-row { display : grid ; grid-template-rows : 260 px minmax ( 0 , 1 fr ); height : 100 % }
. detail-proof-row : last-child : nth-child ( odd ) { grid-column : 1 /- 1 ; grid-template-columns : minmax ( 0 , 1 fr ) minmax ( 0 , 1 fr ); grid-template-rows : 300 px }
. detail-proof-copy { display : flex ; min-height : 0 ; flex-direction : column ; align-items : flex-start }
. detail-proof-copy > span {
width : max-content ;
max-width : 100 % ;
padding : 5 px 9 px ;
background : var ( -- v925 - reference - gradient );
color : #fff !important ;
font-size : 11 px ;
line-height : 1.25 ;
}
. detail-proof-copy . next-action { width : 100 % ; margin-top : auto ; box-sizing : border-box }
. detail-proof-media , . detail-proof-media . report-figure , . detail-proof-media . report-image-stage { height : 100 % }
. detail-proof-media . report-image-stage ,
. main-analysis-grid . report-image-stage ,
. evidence-gallery . report-image-stage ,
. buyer-photo-grid . report-image-stage { display : flex ; align-items : flex-end ; justify-content : center }
. detail-proof-media img ,
. main-analysis-grid img ,
. evidence-gallery img ,
. buyer-photo-grid img { height : auto !important ; max-height : 100 % ; object-fit : contain !important }
. main-analysis-grid > article { align-items : stretch ; transition : background-color .2 s ease }
. main-analysis-grid > article : hover { background : #fbfefe }
. main-analysis-grid . image-copy { display : flex ; flex-direction : column ; justify-content : center ; align-self : stretch }
. evidence-drawer summary { display : flex ; align-items : center ; gap : 7 px ; transition : color .18 s ease , background-color .18 s ease }
. evidence-drawer summary :: before { content : '› ; display : inline-block ; color : #21b9ba ; font-size : 18 px ; line-height : 1 ; transform : rotate ( 0 ); transition : transform .18 s ease }
. evidence-drawer [ open ] summary :: before { transform : rotate ( 90 deg )}
. evidence-drawer summary : hover { color : #18aeb1 ; background : linear-gradient ( 90 deg , rgba ( 55 , 220 , 201 , .08 ), transparent )}
@ media ( max-width : 900px ) {. detail-proof-row { grid-template-rows : 220 px minmax ( 0 , 1 fr )}. detail-proof-row : last-child : nth-child ( odd ) { grid-template-rows : 260 px }}
@ media ( max-width : 560px ) {. detail-proof-row , . detail-proof-row : last-child : nth-child ( odd ) { grid-column : auto ; grid-template-columns : 1 fr ; grid-template-rows : 250 px minmax ( 0 , 1 fr )}# plan . plan-card : hover { transform : none }}
@ media ( prefers-reduced-motion : reduce ) {# plan . plan-card , # plan . generate-plan-btn , . report-top . report-nav . quick-product-btn { transition : none }}
/* Seven-role analysis: decision-first hierarchy with evidence on demand. */
. role-block { --role-accent : #2aaeb1 ; --role-soft : #eefafa ; border : 1 px solid #dfe7e9 ; background : #fff }
. role-productStrategy { --role-accent : #2477c8 ; --role-soft : #eef6ff }
. role-conversion { --role-accent : #1aa9a7 ; --role-soft : #edf9f8 }
. role-consumerInsight { --role-accent : #c18432 ; --role-soft : #fff8ed }
. role-productSupply { --role-accent : #426db2 ; --role-soft : #f1f5fc }
. role-visualDesign { --role-accent : #8a67b5 ; --role-soft : #f7f2fb }
. role-executiveDecision { --role-accent : #198f78 ; --role-soft : #eef9f6 }
. role-editorReview { --role-accent : #66717d ; --role-soft : #f3f5f7 }
. role-block > summary { position : relative ; grid-template-columns : 42 px minmax ( 0 , 1 fr ) auto ; padding : 19 px 20 px ; transition : background-color .18 s ease }
. role-block > summary :: after { content : '+' ; position : absolute ; right : 18 px ; top : 50 % ; display : none ; transform : translateY ( -50 % ); color : var ( -- role - accent ); font-size : 21 px ; font-weight : 400 }
. role-block > summary : hover , . role-block [ open ]> summary { background : var ( -- role - soft )}
. role-block > summary > span { display : grid ; width : 28 px ; height : 28 px ; place-items : center ; background : var ( -- role - accent ); color : #fff ; border-radius : 50 % ; font-size : 10 px }
. role-block > summary h3 { font-size : 19 px }. role-block > summary > b { padding-right : 4 px ; color : var ( -- role - accent ); font-weight : 700 }
. role-content { padding : 20 px ; border-top : 1 px solid #e3e9eb ; background : #fbfcfc }
. role-conclusion { margin-bottom : 14 px ; padding : 17 px 19 px ; border-left : 4 px solid var ( -- role - accent ); background : var ( -- role - soft )}
. role-conclusion > span { display : block ; margin-bottom : 7 px ; color : var ( -- role - accent ); font-size : 11 px ; font-weight : 850 ; letter-spacing : .04 em }
. role-conclusion > p { margin : 0 ; color : var ( -- v925 - ink ); font-size : 17 px ; font-weight : 750 ; line-height : 1.65 }
. role-section-list { display : grid ; gap : 8 px }
. role-section { overflow : hidden ; border : 1 px solid #e0e7e9 ; background : #fff }
. role-section > summary { display : flex ; align-items : center ; justify-content : space-between ; gap : 16 px ; padding : 13 px 15 px ; list-style : none ; cursor : pointer }
. role-section > summary :: -webkit-details-marker , . role-evidence > summary :: -webkit-details-marker , . role-raw > summary :: -webkit-details-marker { display : none }
. role-section > summary > span { color : var ( -- v925 - ink ); font-size : 14 px ; font-weight : 800 }
. role-section > summary > b { color : var ( -- role - accent ); font-size : 11 px ; font-weight : 750 }
. role-section > summary :: before { content : '› ; color : var ( -- role - accent ); font-size : 19 px ; line-height : 1 ; transition : transform .18 s ease }
. role-section [ open ]> summary :: before { transform : rotate ( 90 deg )}
. role-section [ open ]> summary { background : var ( -- role - soft )}
. role-section-body { padding : 4 px 15 px 16 px }
. role-section-body > . structured-object > . structured-field : first-child { border-top : 0 }
. structured-list { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); gap : 10 px }
. structured-card { overflow : hidden ; border : 1 px solid #e2e8ea ; background : #fff !important ; padding : 0 !important }
. structured-card > header { padding : 10 px 12 px ; background : var ( -- role - soft ); border-left : 3 px solid var ( -- role - accent )}
. structured-card > header > span { color : var ( -- v925 - ink ); font-size : 13 px ; font-weight : 800 }
. structured-card > . structured-object { padding : 2 px 12 px 12 px }
. structured-field { padding : 10 px 0 0 ; border-top : 1 px solid #edf0f1 }
. structured-field > span { margin-bottom : 5 px ; color : #7a858e ; font-size : 10 px ; letter-spacing : .02 em }
. structured-field p { color : #35414b ; font-size : 13 px ; line-height : 1.6 }
. role-chip-list { display : flex ; flex-wrap : wrap ; gap : 6 px ; margin-top : 5 px }
. role-chip-list > span { padding : 5 px 8 px ; background : var ( -- role - soft ); color : #3d5059 ; font-size : 11 px ; line-height : 1.35 }
. role-confidence { display : grid ; grid-template-columns : auto minmax ( 70 px , 1 fr ) auto ; gap : 9 px ; align-items : center ; padding-top : 10 px ; border-top : 1 px solid #edf0f1 ; color : #7a858e ; font-size : 10 px }
. role-confidence > i { height : 5 px ; overflow : hidden ; background : #e9eef0 ; border-radius : 9 px }. role-confidence > i > b { display : block ; height : 100 % ; background : var ( -- role - accent )}
. role-confidence > strong { color : var ( -- role - accent ); font-size : 10 px }
. role-evidence , . role-raw { margin-top : 10 px ; border-top : 1 px dashed #d9e1e4 }
. role-evidence > summary , . role-raw > summary { display : flex ; align-items : center ; min-height : auto ; padding : 9 px 0 0 ; color : #7a858e ; font-size : 10 px ; font-weight : 750 ; cursor : pointer }
. role-evidence > summary :: before , . role-raw > summary :: before { content : '+' ; margin-right : 6 px ; color : var ( -- role - accent ); font-size : 13 px }
. role-evidence [ open ]> summary :: before , . role-raw [ open ]> summary :: before { content : '− }
. role-evidence > div { padding-top : 7 px }. role-evidence code { display : inline-block ; margin : 2 px 4 px 2 px 0 ; padding : 3 px 6 px ; background : #f0f4f5 ; color : #66737c ; font-size : 9 px }
. role-raw > . structured-list , . role-raw > . structured-object { margin-top : 9 px }
. support-analysis-grid { display : grid ; gap : 10 px }
. support-analysis-card { border : 1 px solid #dfe7e9 ; background : #fff }
. support-analysis-card > summary { display : flex ; align-items : center ; justify-content : space-between ; gap : 12 px ; padding : 14 px 16 px ; cursor : pointer ; list-style : none ; background : #f7fafb }
. support-analysis-card > summary :: -webkit-details-marker { display : none }
. support-analysis-card > summary > span { color : #20313a ; font-size : 14 px ; font-weight : 800 }
. support-analysis-card > summary > b { color : #2774a8 ; font-size : 11 px }
. support-analysis-card > summary :: before { content : '› ; margin-right : 4 px ; color : #22aeb0 ; font-size : 19 px ; transition : transform .18 s ease }
. support-analysis-card [ open ]> summary :: before { transform : rotate ( 90 deg )}
. support-analysis-body { padding : 4 px 16 px 16 px ; border-top : 1 px solid #e4ecee }
@ media ( max-width : 700px ) {. role-content { padding : 12 px }. role-block > summary { grid-template-columns : 34 px minmax ( 0 , 1 fr ); padding : 15 px }. role-block > summary > b { display : none }. role-block > summary :: after { display : block }. role-conclusion { padding : 14 px }. role-conclusion > p { font-size : 15 px }. structured-list { grid-template-columns : 1 fr }. role-section-body { padding : 2 px 12 px 13 px }}
2026-09-03 15:42:05 +08:00
/* JSON report view */
. report-app . wrap { max-width : 1180 px ; margin : 0 auto ; padding : 0 24 px }
. report-section { padding : 42 px 0 ; border-bottom : 1 px solid #e8ece7 }
. report-section h2 { margin : 0 0 22 px ; font-size : 28 px }
. report-app . grid { display : grid ; grid-template-columns : repeat ( auto - fit , minmax ( 220 px , 1 fr )); gap : 16 px }
. report-app . card { background : #fff ; border : 1 px solid #e1e7e0 ; border-radius : 14 px ; padding : 18 px ; box-shadow : 0 5 px 18 px #172b1a 0 b }
. report-app . card h3 { margin : 0 0 10 px ; font-size : 17 px }. report-app . card p { margin : 7 px 0 ; line-height : 1.6 }
. report-app . gallery { display : grid ; grid-template-columns : repeat ( auto - fit , minmax ( 180 px , 1 fr )); gap : 14 px ; margin-bottom : 18 px }
. report-app figure { margin : 0 ; background : #f4f7f3 ; border-radius : 12 px ; overflow : hidden }. report-app figure img { width : 100 % ; height : 220 px ; object-fit : contain ; display : block }. report-app figcaption { padding : 7 px 10 px ; font-size : 12 px ; color : #647064 }
2026-09-04 16:57:04 +08:00
/* Human-readable evidence references. */
. role-evidence > div . role-evidence-list { display : grid ; grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); gap : 7 px ; padding-top : 9 px }
. role-evidence-item { display : grid ; min-width : 0 ; grid-template-columns : 1 fr ; padding : 10 px ; background : #f6f8f9 }
. role-evidence-item . has-image { grid-template-columns : 68 px minmax ( 0 , 1 fr ); gap : 10 px ; align-items : center }
. role-evidence-item > img { display : block ; width : 68 px !important ; height : 68 px !important ; min-height : 0 !important ; object-fit : contain !important ; background : transparent !important }
. role-evidence-item > div { min-width : 0 }. role-evidence-item b { display : block ; color : var ( -- role - accent ); font-size : 10 px }
. role-evidence-item p { display : -webkit- box ; overflow : hidden ; margin : 4 px 0 !important ; color : #394650 !important ; font-size : 11 px !important ; line-height : 1.5 !important ; -webkit- box-orient : vertical ; -webkit- line-clamp : 3 }
. role-evidence-item code { display : block !important ; width : max-content ; max-width : 100 % ; margin : 5 px 0 0 !important ; padding : 0 !important ; background : transparent !important ; color : #99a2a9 !important ; font-size : 8 px !important }
@ media ( max-width : 700px ) {. role-evidence > div . role-evidence-list { grid-template-columns : 1 fr }. role-evidence-item . has-image { grid-template-columns : 58 px minmax ( 0 , 1 fr )}. role-evidence-item > img { width : 58 px !important ; height : 58 px !important }}
/* 审核失败仍输出报告时的非阻断提示 */
. report-audit-notice { margin-top : 14 px !important ; padding : 10 px 12 px ; border-left : 3 px solid #d59b3f ; background : #fff7e8 ; color : #805a20 !important ; font-size : 13 px !important ; line-height : 1.5 !important ; text-shadow : none !important }
