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 }
2026-09-16 08:55:25 +08:00
. 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 }
. image-generation-panel { margin-top : 22 px ; padding : 18 px ; background : #f3f7fb ; border : 1 px solid #d6e1ee }. image-generation-panel header span { display : block ; font-size : 10 px ; color : #316dcc ; font-weight : 800 ; letter-spacing : .08 em }. image-generation-panel h3 { margin : 6 px 0 ; font-size : 20 px ; color : var ( -- v925 - ink )}. image-generation-panel header p { margin : 0 ; color : var ( -- v92 - muted ); font-size : 12 px ; line-height : 1.55 }. image-generation-controls { display : flex ; flex-wrap : wrap ; gap : 14 px ; align-items : center ; margin : 16 px 0 }. image-generation-controls label { font-size : 12 px ; color : var ( -- v92 - text ); font-weight : 700 }. image-generation-controls input { accent-color : #316dcc }. image-generation-controls select { margin-left : 4 px ; padding : 5 px 8 px ; border : 1 px solid #c6d4e2 ; background : #fff }. generate-images-btn { width : 100 % ; padding : 12 px ; border : 0 ; background : #316dcc ; color : #fff ; font-weight : 800 ; cursor : pointer }. generate-images-btn : disabled { opacity : .55 ; cursor : wait }. image-generation-status { min-height : 18 px ; margin : 10 px 0 0 ; color : #316dcc ; font-size : 12 px ; line-height : 1.5 }. generated-image-results { display : grid ; grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); gap : 8 px ; margin-top : 12 px }. generated-image-results : empty { display : none }. generated-image-results figure { margin : 0 ; background : #fff ; border : 1 px solid #d6e1ee }. generated-image-results img { display : block ; width : 100 % ; aspect-ratio : 1 / 1 ; object-fit : contain }. generated-image-results figcaption { padding : 6 px 7 px ; font-size : 10 px ; color : var ( -- v92 - muted ); line-height : 1.4 }. generated-image-results a { color : #316dcc }. prompt-preview { margin-top : 12 px ; border-top : 1 px solid #d6e1ee ; padding-top : 10 px }. prompt-preview summary { cursor : pointer ; color : #316dcc ; font-size : 12 px ; font-weight : 800 }. prompt-preview pre { max-height : 260 px ; overflow : auto ; white-space : pre-wrap ; margin : 10 px 0 0 ; padding : 10 px ; background : #fff ; border : 1 px solid #d6e1ee ; color : #4f5b68 ; font : 11 px / 1.55 ui-monospace , SFMono-Regular , Menlo , monospace }
. image-model-controls { display : flex ; flex-wrap : wrap ; align-items : center ; gap : 8 px ; margin : 12 px 0 ; padding : 11 px 12 px ; border : 1 px solid #d6e1ee ; background : #fff }. image-model-controls > b { color : #20313a ; font-size : 12 px }. image-model-controls label { display : inline-flex ; align-items : center ; gap : 7 px ; padding : 7 px 9 px ; border : 1 px solid #cbd8e4 ; background : #f7fafc ; color : #314253 ; font-size : 11 px ; font-weight : 800 ; cursor : pointer }. image-model-controls label : has ( input [ data-image-model ] : checked ) { border-color : #316dcc ; background : #edf4ff ; color : #1f5dab }. image-model-controls input { accent-color : #316dcc }. image-model-option-name { display : flex ; min-width : 120 px ; flex-direction : column ; gap : 1 px }. image-model-option-name b { font-size : 11 px }. image-model-option-name small { color : #718092 ; font-size : 9 px ; font-weight : 500 }. image-model-controls select { min-width : 104 px ; padding : 5 px 7 px ; border : 1 px solid #c6d4e2 ; background : #fff ; color : #314253 ; font-size : 10 px }. image-model-hint , . image-model-loading { color : #718092 ; font-size : 11 px ; line-height : 1.4 }
. reference-upload { margin-top : 20 px ; padding : 16 px ; border : 1 px solid #d6e1ee ; background : #fff }. reference-upload header { display : flex ; justify-content : space-between ; align-items : center }. reference-upload header b { color : var ( -- v925 - ink ); font-size : 14 px }. reference-upload header span , . reference-upload p { color : var ( -- v92 - muted ); font-size : 11 px }. reference-list { display : flex ; gap : 8 px ; overflow-x : auto ; margin : 12 px 0 }. reference-list : empty { display : none }. reference-list figure { position : relative ; flex : 0 0 92 px ; margin : 0 ; border : 1 px solid #d6e1ee ; background : #f4f6f8 }. reference-list img { display : block ; width : 92 px ; height : 92 px ; object-fit : contain }. reference-list button { position : absolute ; right : 3 px ; top : 3 px ; width : 22 px ; height : 22 px ; border : 0 ; border-radius : 50 % ; background : rgba ( 20 , 28 , 38 , .78 ); color : #fff ; cursor : pointer }. reference-upload-btn { display : inline-flex ; padding : 9 px 12 px ; border : 1 px dashed #75a8d9 ; color : #316dcc ; font-size : 12 px ; font-weight : 800 ; cursor : pointer }. reference-upload-btn input { display : none }. reference-upload p { margin : 9 px 0 0 ; line-height : 1.45 }
2026-09-04 16:57:04 +08:00
@ 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 }}
2026-09-16 08:55:25 +08:00
@ media ( max-width : 520px ) {. generated-image-results { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr ))}. image-generation-controls { gap : 10 px }}
. quick-plan-dialog { box-sizing : border-box ; width : min ( 1240 px , calc ( 100 % - 32 px )); max-height : calc ( 100 vh - 32 px ); padding : 30 px 34 px ; overflow : auto }
. product-brief > span { color : #316dcc ; font-size : 10 px ; font-weight : 800 ; letter-spacing : .08 em }. product-brief > p { margin : 0 0 18 px ; color : var ( -- v92 - muted ); line-height : 1.55 }
. dialog-close { position : sticky ; z-index : 5 ; float : right ; right : 0 ; top : 0 ; width : 38 px ; height : 38 px ; font-size : 24 px ; line-height : 1 }. dialog-close : hover { background : #d9e4f0 }
. generated-image-results { display : block ; margin-top : 18 px }. generation-task-row + . generation-task-row { margin-top : 26 px }. generation-task-row > header { display : flex ; align-items : end ; justify-content : space-between ; margin-bottom : 11 px }. generation-task-row > header span { color : #6f7b89 ; font-size : 9 px ; font-weight : 800 ; letter-spacing : .08 em }. generation-task-row > header h3 { margin : 3 px 0 0 ; font-size : 16 px }. generation-task-row > header b { color : #316dcc ; font-size : 12 px }. generation-task-track { display : flex ; gap : 14 px ; overflow-x : auto ; padding : 3 px 3 px 14 px ; scroll-snap-type : x mandatory }. generation-task-card { flex : 0 0 calc (( 100 % - 56 px ) / 5 ); min-width : 0 ; background : #fff ; border : 1 px solid #d6e1ee ; scroll-snap-align : start }. generation-task-media { position : relative ; background : #edf2f7 ; overflow : hidden }. generation-task-media img , . generation-task-placeholder { display : flex ; width : 100 % ; aspect-ratio : 1 / 1 ; align-items : center ; justify-content : center ; object-fit : contain }. generation-task-placeholder { flex-direction : column ; color : #9aa7b5 ; background : linear-gradient ( 135 deg , #f7f9fb , #e8eef5 )}. generation-task-row : nth-child ( 2 ) . generation-task-media img , . generation-task-row : nth-child ( 2 ) . generation-task-placeholder { aspect-ratio : 2 / 3 }. generation-task-placeholder span { font-size : 9 px ; font-weight : 800 ; letter-spacing : .12 em }. generation-task-placeholder b { margin-top : 4 px ; font-size : 25 px }. generation-task-media i { position : absolute ; left : 9 px ; top : 9 px ; z-index : 4 ; padding : 4 px 7 px ; background : rgba ( 37 , 51 , 68 , .82 ); color : #fff ; font-size : 10 px ; font-style : normal ; pointer-events : none }. generation-task-generating { border-color : #316dcc ; box-shadow : 0 0 0 2 px rgba ( 49 , 109 , 204 , .12 )}. generation-task-generating . generation-task-media i { background : #316dcc }. generation-task-complete . generation-task-media i { background : #16857f }. generation-task-error { border-color : #c84242 }. generation-task-error . generation-task-media i { background : #c84242 }. generation-task-overlay { position : absolute ; inset : auto 0 0 ; z-index : 3 ; box-sizing : border-box ; padding : 42 px 12 px 12 px ; color : #fff ; background : linear-gradient ( 180 deg , rgba ( 13 , 27 , 44 , 0 ) 0 % , rgba ( 13 , 27 , 44 , .78 ) 38 % , rgba ( 13 , 27 , 44 , .94 ) 100 % ); transition : opacity .16 s ease , transform .16 s ease }. generation-task-complete . generation-task-overlay { opacity : 0 ; transform : translateY ( 10 px ); pointer-events : none }. generation-task-complete : hover . generation-task-overlay , . generation-task-complete : focus-within . generation-task-overlay { opacity : 1 ; transform : translateY ( 0 ); pointer-events : auto }. generation-task-overlay small { color : rgba ( 235 , 243 , 252 , .82 ); font-size : 9 px ; font-weight : 850 ; letter-spacing : .08 em }. generation-task-overlay h4 { margin : 3 px 0 0 ; color : #fff ; font-size : 14 px ; line-height : 1.28 }. generation-task-overlay p { display : -webkit- box ; -webkit- line-clamp : 2 ; -webkit- box-orient : vertical ; overflow : hidden ; margin : 4 px 0 0 ; color : rgba ( 241 , 246 , 252 , .82 ); font-size : 10 px ; line-height : 1.45 }. generation-slot-select { display : inline-flex ; align-items : center ; gap : 5 px ; margin-top : 8 px ; padding : 5 px 7 px ; border : 1 px solid rgba ( 255 , 255 , 255 , .42 ); background : rgba ( 255 , 255 , 255 , .15 ); color : #fff ; font-size : 11 px ; font-weight : 850 ; cursor : pointer }. generation-slot-select input { accent-color : #4f8ee8 }. generation-task-overlay . task-prompt { margin-top : 8 px ; padding-top : 0 ; border-top : 0 }. generation-task-overlay . task-prompt summary { display : inline-flex ; padding : 5 px 7 px ; border : 1 px solid rgba ( 255 , 255 , 255 , .38 ); background : rgba ( 255 , 255 , 255 , .15 ); color : #fff ; font-size : 10 px ; font-weight : 850 ; cursor : pointer }. generation-task-overlay . task-prompt [ open ] { position : absolute ; inset : 0 ; z-index : 6 ; display : flex ; box-sizing : border-box ; flex-direction : column ; margin : 0 ; padding : 12 px ; background : rgba ( 10 , 22 , 38 , .96 )}. generation-task-overlay . task-prompt [ open ] summary { flex : 0 0 auto ; background : rgba ( 255 , 255 , 255 , .14 )}. generation-task-overlay . task-prompt [ open ] pre { box-sizing : border-box ; display : block ; flex : 1 ; min-height : 0 ; width : 100 % ; max-height : none ; overflow : auto ; margin : 10 px 0 0 ; padding : 0 ; border : 0 ; background : transparent ; color : #edf5ff ; white-space : pre-wrap ; overflow-wrap : anywhere ; font : 10 px / 1.55 ui-monospace , SFMono-Regular , Menlo , monospace }
. generation-comparison-row { margin-top : 22 px }. generation-comparison-row > header { display : flex ; align-items : end ; justify-content : space-between ; margin-bottom : 10 px }. generation-comparison-row > header span { color : #6f7b89 ; font-size : 9 px ; font-weight : 800 ; letter-spacing : .08 em }. generation-comparison-row > header h3 { margin : 3 px 0 0 ; font-size : 16 px }. generation-comparison-row > header b { color : #316dcc ; font-size : 12 px }. generation-comparison-table { display : grid ; grid-template-columns : minmax ( 150 px , 1.1 fr ) repeat ( var ( -- comparison - columns ), minmax ( 180 px , 1 fr )); gap : 1 px ; overflow-x : auto ; background : #d6e1ee ; border : 1 px solid #d6e1ee }. generation-comparison-corner , . generation-comparison-model , . generation-comparison-task , . generation-comparison-cell { min-width : 0 ; background : #fff }. generation-comparison-corner , . generation-comparison-model { padding : 11 px 12 px ; color : #536170 ; font-size : 11 px ; font-weight : 850 }. generation-comparison-model { display : flex ; flex-direction : column ; gap : 2 px ; color : #1f5dab ; background : #edf4ff ; text-align : center }. generation-comparison-model small { color : #718092 ; font-size : 9 px ; font-weight : 600 }. generation-comparison-task { display : flex ; min-height : 170 px ; flex-direction : column ; justify-content : center ; gap : 4 px ; padding : 12 px }. generation-comparison-task small { color : #718092 ; font-size : 9 px ; font-weight : 800 ; letter-spacing : .08 em }. generation-comparison-task strong { color : #20313a ; font-size : 12 px ; line-height : 1.35 }. generation-comparison-task . generation-slot-select { align-self : flex-start ; margin-top : 6 px ; padding : 5 px 7 px ; color : #316dcc ; border : 1 px solid #b9cce3 ; background : #f4f8fd }. generation-comparison-cell { min-height : 170 px }. generation-comparison-cell > header { display : flex ; align-items : center ; justify-content : space-between ; gap : 5 px ; padding : 8 px 9 px ; border-bottom : 1 px solid #e4ebf2 }. generation-comparison-cell > header b { display : flex ; min-width : 0 ; flex-direction : column ; overflow : hidden ; color : #33475a ; font-size : 10 px ; text-overflow : ellipsis ; white-space : nowrap }. generation-comparison-cell > header b small { overflow : hidden ; color : #718092 ; font-size : 9 px ; font-weight : 600 ; text-overflow : ellipsis }. generation-comparison-cell > header i { flex : 0 0 auto ; color : #718092 ; font-size : 9 px ; font-style : normal }. generation-comparison-media { background : #edf2f7 }. generation-comparison-media img , . generation-comparison-media . generation-task-placeholder { display : flex ; width : 100 % ; aspect-ratio : 1 / 1 ; align-items : center ; justify-content : center ; object-fit : contain }. generation-comparison-cell . generation-task-placeholder { flex-direction : column ; color : #9aa7b5 ; background : linear-gradient ( 135 deg , #f7f9fb , #e8eef5 )}. generation-comparison-cell . generation-task-placeholder span { font-size : 9 px ; font-weight : 800 ; letter-spacing : .12 em }. generation-comparison-cell . generation-task-placeholder b { margin-top : 4 px ; font-size : 25 px }. generation-comparison-cell . generation-error { margin : 7 px 9 px ; font-size : 10 px ; line-height : 1.35 }. generation-comparison-cell . generation-task-generating { box-shadow : inset 0 3 px 0 #316dcc }. generation-comparison-cell . generation-task-complete { box-shadow : inset 0 3 px 0 #16857f }. generation-comparison-cell . generation-task-error { box-shadow : inset 0 3 px 0 #c84242 }
@ media ( max-width : 900px ) {. generation-task-track { display : flex ; overflow-x : auto ; padding-bottom : 8 px }. generation-task-card { flex : 0 0 min ( 82 vw , 360 px )}}
@ media ( max-width : 700px ) {. quick-plan-dialog { width : calc ( 100 % - 16 px ); max-height : calc ( 100 vh - 16 px ); padding : 20 px }}
@ media ( max-width : 520px ) {. generation-task-card { flex-basis : 82 vw }}
2026-09-04 16:57:04 +08:00
/* Clean white hero: no background image or overlay, larger complete-image card deck. */
2026-09-16 08:55:25 +08:00
. quick-plan-top { display : grid ; grid-template-columns : minmax ( 0 , 1.05 fr ) minmax ( 360 px , .95 fr ); gap : 28 px ; align-items : stretch ; margin-bottom : 20 px }. quick-plan-top . reference-upload { margin-top : 0 ; display : flex ; flex-direction : column ; justify-content : center ; min-height : 210 px }. reference-upload em { display : block ; margin-top : 10 px ; color : #718092 ; font-size : 11 px ; font-style : normal ; line-height : 1.5 }. task-prompt { margin-top : 9 px ; padding-top : 8 px ; border-top : 1 px solid #e2e8ef }. task-prompt summary { cursor : pointer ; color : #316dcc ; font-size : 10 px ; font-weight : 800 }. task-prompt pre { box-sizing : border-box ; width : 100 % ; max-height : 210 px ; overflow : auto ; margin : 7 px 0 0 ; padding : 8 px ; background : #f5f8fb ; border : 1 px solid #e0e6ed ; color : #536170 ; white-space : pre-wrap ; overflow-wrap : anywhere ; font : 9 px / 1.5 ui-monospace , SFMono-Regular , Menlo , monospace }. prompt-preview { display : none !important }
@ media ( max-width : 900px ) {. quick-plan-top { grid-template-columns : 1 fr ; gap : 14 px }. quick-plan-top . reference-upload { min-height : 0 }}
2026-09-04 16:57:04 +08:00
. 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 % ;
2026-09-16 08:55:25 +08:00
padding : 9 px 13 px ;
background : #fff ;
color : #111820 !important ;
border : 1 px solid #111820 ;
font-size : 15 px ;
2026-09-04 16:57:04 +08:00
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 }
2026-09-04 17:18:20 +08:00
/* Cover emphasis: give the evidence gallery more visual weight and make report status scannable. */
. hero-deck { right : 3 % ; width : 590 px ; height : 650 px }
. hero-deck-card { width : 340 px ; height : 550 px }
. hero-carousel . hero-copy { max-width : 560 px }
. hero-meta { gap : 12 px ; align-items : stretch }
. hero-stat { display : inline-flex ; flex-direction : column ; gap : 3 px ; padding : 9 px 14 px ; border : 1 px solid #d9e1e8 ; background : #f7f9fb ; color : #27313d ; font-size : 14 px ; line-height : 1.2 }
. hero-stat small { font-size : 10 px ; color : #7a8794 ; letter-spacing : .03 em }
. hero-stat b { font-size : 16 px ; font-weight : 750 }
. hero-stat-status { border : 2 px solid #2c8a68 ; background : #eaf8f1 ; color : #145d43 ; box-shadow : 0 5 px 16 px rgba ( 44 , 138 , 104 , .14 )}
. hero-stat-status small { color : #237454 ; font-weight : 800 }
. hero-stat-status b { font-size : 20 px ; letter-spacing : .02 em }
2026-09-16 08:55:25 +08:00
. buyer-story . case-scenario , . buyer-story . case-insight { margin : 12 px 0 0 ; color : var ( -- v92 - text ); font-size : 13 px ; line-height : 1.55 }. buyer-story . case-scenario b , . buyer-story . case-insight b { display : inline-block ; margin-right : 8 px ; color : #a56520 ; font-size : 11 px }
2026-09-04 17:18:20 +08:00
@ media ( max-width : 1050px ) {. hero-deck { right : 0 ; width : 470 px ; height : 560 px }. hero-deck-card { width : 285 px ; height : 460 px }}
@ media ( max-width : 800px ) {. hero-deck { width : 380 px ; height : 400 px }. hero-deck-card { width : 215 px ; height : 340 px }}
@ media ( max-width : 560px ) {. hero-deck { width : 300 px ; height : 320 px }. hero-deck-card { width : 175 px ; height : 275 px }. hero-stat { padding : 7 px 10 px }. hero-stat-status b { font-size : 17 px }}
2026-09-16 08:55:25 +08:00
. generation-history-section { background : #f5f8fb }. generation-history { display : grid ; gap : 14 px }. generation-history-empty { margin : 0 ; padding : 22 px ; border : 1 px dashed #c8d5df ; background : #fff ; color : var ( -- v92 - muted )}. generation-record { padding : 20 px ; border : 1 px solid #dce5eb ; background : #fff }. generation-record > header { display : flex ; justify-content : space-between ; gap : 20 px ; align-items : flex-start }. generation-record > header span { display : block ; color : #316dcc ; font-size : 10 px ; font-weight : 850 ; letter-spacing : .08 em }. generation-record h3 { margin : 5 px 0 ; color : var ( -- v925 - ink ); font-size : 20 px }. generation-record header p { margin : 0 ; color : var ( -- v92 - muted ); font-size : 12 px }. generation-record > small { display : block ; margin-top : 10 px ; color : #98a3ab ; font-size : 9 px }. generation-record-policy { margin : 10 px 0 0 ; color : #316dcc ; font-size : 11 px ; line-height : 1.45 }. generation-status { padding : 6 px 9 px ; background : #eef3f8 ; color : #526579 ; font-size : 11 px ; white-space : nowrap }. generation-status-complete { background : #e7f6ef ; color : #187151 }. generation-status-error , . generation-error { color : #ad3947 }. generation-thumbs { display : grid ; grid-template-columns : repeat ( 6 , minmax ( 0 , 1 fr )); gap : 8 px ; margin-top : 16 px }. generation-thumbs a { display : block ; border : 1 px solid #dce5eb ; background : #f6f8fa }. generation-thumbs img { display : block ; width : 100 % ; aspect-ratio : 1 / 1 ; object-fit : contain }. generation-error { font-size : 12 px }
@ media ( max-width : 700px ) {. generation-thumbs { grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr ))}. generation-record > header { display : block }. generation-status { display : inline-block ; margin-top : 10 px }}
@ media ( max-width : 520px ) {. generation-thumbs { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr ))}}
. report-footer-brand { display : flex ; align-items : baseline ; gap : 10 px ; margin-bottom : 10 px }. report-footer-brand b { font-size : 20 px ; color : var ( -- v92 - blue )}. report-footer-brand span { font-size : 11 px ; letter-spacing : .08 em }
/* Reference previews: keep the source image complete inside a readable, stable frame. */
. reference-list { display : flex ; gap : 10 px ; overflow-x : auto }
. reference-list figure { flex : 0 0 180 px ; width : 180 px ; height : 180 px ; min-width : 0 ; display : flex ; align-items : center ; justify-content : center ; overflow : hidden }
. report-app . reference-list figure img { display : block ; width : 100 % ; height : 100 % ; max-width : 100 % ; max-height : 100 % ; object-fit : contain !important ; object-position : center }
@ media ( max-width : 900px ) {. reference-list figure { flex-basis : 160 px ; width : 160 px ; height : 160 px }}
@ media ( max-width : 560px ) {. reference-list figure { flex-basis : 140 px ; width : 140 px ; height : 140 px }}
/* Reference hero layout: make the first product image the visual anchor and layer copy over it. */
. quick-plan-top . reference-upload {
position : relative ;
display : block ;
min-height : 520 px ;
padding : 0 ;
overflow : hidden ;
background : #eef3f8 ;
}
. quick-plan-top . reference-upload :: after {
content : '' ;
position : absolute ;
inset : 0 ;
z-index : 2 ;
pointer-events : none ;
background : linear-gradient ( 180 deg , rgba ( 13 , 27 , 43 , .62 ) 0 % , rgba ( 13 , 27 , 43 , 0 ) 24 % , rgba ( 13 , 27 , 43 , 0 ) 54 % , rgba ( 13 , 27 , 43 , .76 ) 100 % );
}
. quick-plan-top . reference-list {
position : absolute ;
inset : 0 ;
z-index : 1 ;
display : block ;
margin : 0 ;
overflow : hidden ;
}
. quick-plan-top . reference-list : empty { display : none }
. quick-plan-top . reference-list figure {
position : absolute ;
inset : 0 ;
width : auto ;
height : auto ;
min-width : 0 ;
display : flex ;
align-items : center ;
justify-content : center ;
border : 0 ;
background : #eef3f8 ;
}
. quick-plan-top . reference-list figure : first-child { z-index : 1 }
. quick-plan-top . reference-list figure : not ( : first-child ) {
inset : auto auto 18 px 18 px ;
width : 64 px ;
height : 64 px ;
z-index : 3 ;
border : 2 px solid rgba ( 255 , 255 , 255 , .92 );
box-shadow : 0 5 px 16 px rgba ( 10 , 24 , 40 , .2 );
}
. quick-plan-top . reference-list figure : nth-child ( 3 ) { left : 90 px }
. quick-plan-top . reference-list figure : nth-child ( 4 ) { left : 162 px }
. quick-plan-top . reference-list figure : not ( : first-child ) button { width : 18 px ; height : 18 px ; right : -7 px ; top : -7 px ; font-size : 13 px }
. quick-plan-top . reference-list figure img {
display : block ;
width : 100 % ;
height : 100 % ;
max-width : 100 % ;
max-height : 100 % ;
object-fit : contain !important ;
object-position : center ;
}
. quick-plan-top . reference-upload header {
position : absolute ;
inset : 0 0 auto ;
z-index : 4 ;
padding : 20 px 22 px 48 px ;
align-items : center ;
}
. quick-plan-top . reference-upload header b ,
. quick-plan-top . reference-upload header span {
color : #fff ;
text-shadow : 0 1 px 8 px rgba ( 8 , 18 , 30 , .38 );
}
. quick-plan-top . reference-upload-btn {
position : absolute ;
right : 18 px ;
bottom : 18 px ;
z-index : 5 ;
border-color : rgba ( 255 , 255 , 255 , .82 );
background : rgba ( 255 , 255 , 255 , .94 );
box-shadow : 0 6 px 18 px rgba ( 9 , 25 , 42 , .16 );
}
. quick-plan-top . reference-upload p {
position : absolute ;
left : 18 px ;
right : 18 px ;
bottom : 70 px ;
z-index : 5 ;
margin : 0 ;
color : #fff ;
text-shadow : 0 1 px 8 px rgba ( 8 , 18 , 30 , .52 );
}
. quick-plan-top . reference-upload em {
position : absolute ;
left : 18 px ;
right : 190 px ;
bottom : 18 px ;
z-index : 5 ;
margin : 0 ;
color : rgba ( 255 , 255 , 255 , .9 );
text-shadow : 0 1 px 8 px rgba ( 8 , 18 , 30 , .52 );
}
@ media ( max-width : 900px ) {
. quick-plan-top . reference-upload { min-height : 460 px }
}
@ media ( max-width : 560px ) {
. quick-plan-top . reference-upload { min-height : 400 px }
. quick-plan-top . reference-upload header { padding : 16 px 16 px 42 px }
. quick-plan-top . reference-upload-btn { right : 14 px ; bottom : 14 px }
. quick-plan-top . reference-upload p { left : 14 px ; right : 14 px ; bottom : 62 px }
. quick-plan-top . reference-upload em { left : 14 px ; right : 150 px ; bottom : 14 px ; font-size : 10 px }
. quick-plan-top . reference-list figure : not ( : first-child ) { left : 14 px ; bottom : 14 px ; width : 54 px ; height : 54 px }
. quick-plan-top . reference-list figure : nth-child ( 3 ) { left : 76 px }
. quick-plan-top . reference-list figure : nth-child ( 4 ) { left : 138 px }
}
/* Generated image preview: every finished image can be inspected one by one. */
. generation-preview-btn {
display : block ;
width : 100 % ;
padding : 0 ;
border : 0 ;
background : transparent ;
cursor : zoom-in ;
}
. generation-preview-btn : focus-visible {
outline : 2 px solid #316dcc ;
outline-offset : -2 px ;
}
. generation-thumbs button {
display : block ;
width : 100 % ;
padding : 0 ;
border : 1 px solid #dce5eb ;
background : #f6f8fa ;
cursor : zoom-in ;
}
. generation-thumbs button : focus-visible {
outline : 2 px solid #316dcc ;
outline-offset : 2 px ;
}
. image-preview-dialog {
width : min ( 1120 px , calc ( 100 % - 34 px ));
height : min ( 88 vh , 920 px );
padding : 0 ;
border : 0 ;
background : #08111f ;
color : #fff ;
box-shadow : 0 28 px 90 px rgba ( 0 , 0 , 0 , .45 );
}
. image-preview-dialog :: backdrop {
background : rgba ( 5 , 10 , 18 , .72 );
backdrop-filter : blur ( 5 px );
}
. image-preview-dialog figure {
display : grid ;
grid-template-rows : minmax ( 0 , 1 fr ) auto ;
width : 100 % ;
height : 100 % ;
margin : 0 ;
}
. image-preview-dialog img {
display : block ;
max-width : 100 % ;
max-height : 100 % ;
align-self : center ;
justify-self : center ;
object-fit : contain ;
}
. image-preview-dialog figcaption {
display : flex ;
justify-content : space-between ;
gap : 18 px ;
padding : 12 px 18 px ;
background : rgba ( 255 , 255 , 255 , .08 );
font-size : 13 px ;
}
. image-preview-close ,
. image-preview-nav {
position : absolute ;
z-index : 2 ;
border : 0 ;
background : rgba ( 255 , 255 , 255 , .13 );
color : #fff ;
cursor : pointer ;
}
. image-preview-close {
right : 12 px ;
top : 12 px ;
width : 38 px ;
height : 38 px ;
font-size : 26 px ;
}
. image-preview-nav {
top : 50 % ;
width : 46 px ;
height : 70 px ;
transform : translateY ( -50 % );
font-size : 48 px ;
line-height : 1 ;
}
. image-preview-prev { left : 12 px }
. image-preview-next { right : 12 px }
. image-preview-close : hover ,
. image-preview-nav : hover {
background : rgba ( 255 , 255 , 255 , .24 );
}
@ media ( max-width : 560px ) {
. image-preview-dialog { width : calc ( 100 % - 16 px ); height : 82 vh }
. image-preview-nav { width : 38 px ; height : 58 px ; font-size : 40 px }
. image-preview-dialog figcaption { padding : 10 px 12 px ; font-size : 12 px }
}
/* Unified rounded frame system: major containers 24px, compact controls 12px. */
. report-app . card ,
. report-app figure ,
. report-app . report-figure ,
. report-app . image-analysis ,
. report-app . image-analysis figure ,
. report-app . buyer-gallery figure ,
. hero-card ,
. owner-card ,
. buyer-evidence ,
. buyer-review-group ,
. param-card ,
. product-conclusion ,
. feature-card ,
. insight-card ,
. sku-status article ,
. recommended-titles ,
. loading-shell ,
. loading-images figure ,
. image-generation-panel ,
. reference-upload ,
. quick-plan-dialog ,
. quick-plan-top . reference-upload ,
. generation-task-card ,
. generation-task-media ,
. generation-task-placeholder ,
. generation-record ,
. generation-history-empty ,
. image-preview-dialog ,
. hero-deck-card ,
# plan . plan-card ,
. v92-title-current ,
. v92-title3 article ,
. v92-detail-card ,
. v92-value-grid article ,
. v92-plan-points > div ,
. v92-plan-placeholder ,
. v92-empty ,
. v924-title2 article ,
. v924-plan-card ,
. v925-plan-card ,
. decision-grid article ,
. title-compare article ,
. sku-grid article ,
. plan-grid article ,
. support-analysis-card ,
. structured-card {
border-radius : 24 px !important ;
overflow : hidden ;
}
. report-app button ,
. report-app input ,
. report-app select ,
. report-app textarea ,
. report-app summary ,
. report-app a . quick-product-btn ,
. report-app . generate-plan-btn ,
. report-app . generate-images-btn ,
. report-app . generation-status ,
. report-app . generation-slot-select ,
. report-app . reference-upload-btn ,
. report-app . task-prompt summary ,
. report-app . dialog-close ,
. report-app . image-preview-close ,
. report-app . image-preview-nav ,
. report-app . navlinks a ,
. report-app . signal ,
. report-app . jmeta span ,
. report-app . evidence-tags b ,
. report-app . v92-flow . node ,
. report-app . v924-chips i {
border-radius : 12 px !important ;
}
. report-app . role-block > summary > span ,
. report-app . loading-step i {
border-radius : 50 % !important ;
}
. quick-plan-dialog {
overflow : auto !important ;
}
. image-generation-controls label {
display : inline-flex ;
align-items : center ;
gap : 7 px ;
padding : 8 px 10 px ;
border : 1 px solid #c9d7e5 ;
background : #fff ;
border-radius : 12 px !important ;
}
. image-generation-controls label span {
color : #718092 ;
font-size : 11 px ;
font-weight : 800 ;
}
. image-user-direction {
display : grid ;
gap : 7 px ;
margin : 14 px 0 6 px ;
color : var ( -- v92 - text );
font-size : 12 px ;
font-weight : 800 ;
}
. image-user-direction textarea {
box-sizing : border-box ;
width : 100 % ;
min-height : 76 px ;
padding : 11 px 12 px ;
border : 1 px solid #c9d7e5 ;
background : #fff ;
color : var ( -- v925 - ink );
resize : vertical ;
line-height : 1.5 ;
}
. fission-pattern-toggle {
position : absolute ;
left : 18 px ;
bottom : 118 px ;
z-index : 5 ;
display : inline-flex ;
align-items : center ;
gap : 7 px ;
max-width : calc ( 100 % - 36 px );
padding : 9 px 11 px ;
border : 1 px solid rgba ( 255 , 255 , 255 , .64 );
background : rgba ( 255 , 255 , 255 , .92 );
color : #20313a ;
font-size : 12 px ;
font-weight : 850 ;
box-shadow : 0 6 px 18 px rgba ( 9 , 25 , 42 , .16 );
}
. fission-pattern-toggle input {
accent-color : #316dcc ;
}
. match-reference-shooting-toggle {
bottom : 170 px ;
}
. match-reference-shooting-toggle > span {
display : grid ;
gap : 2 px ;
}
. match-reference-shooting-toggle b {
color : #20313a ;
font-size : 12 px ;
font-weight : 850 ;
}
. match-reference-shooting-toggle small {
display : block ;
max-width : 430 px ;
color : #60717d ;
font-size : 10 px ;
font-weight : 600 ;
line-height : 1.35 ;
}
. match-reference-shooting-toggle : has ( input : disabled ) {
opacity : .72 ;
}
. generation-task-card {
cursor : pointer ;
}
. generation-task-card . is-selected {
border-color : #316dcc !important ;
box-shadow : 0 0 0 3 px rgba ( 49 , 109 , 204 , .2 );
}
. generation-task-card : not ( . generation-task-queued ) {
cursor : default ;
}
. generation-slot-select {
position : relative ;
}
. generation-slot-select input {
width : 17 px ;
height : 17 px ;
}
. generation-slot-select span {
pointer-events : none ;
}
. generation-task-overlay . task-prompt textarea {
box-sizing : border-box ;
width : 100 % ;
min-height : 190 px ;
max-height : 280 px ;
margin-top : 8 px ;
padding : 10 px ;
border : 1 px solid rgba ( 255 , 255 , 255 , .32 );
background : rgba ( 255 , 255 , 255 , .94 );
color : #17202a ;
resize : vertical ;
white-space : pre-wrap ;
overflow : auto ;
font : 10 px / 1.55 ui-monospace , SFMono-Regular , Menlo , monospace ;
}
. generation-task-overlay . task-prompt em {
display : block ;
margin-top : 6 px ;
color : rgba ( 236 , 245 , 255 , .76 );
font-size : 9 px ;
font-style : normal ;
line-height : 1.45 ;
}
. generation-task-overlay . task-prompt [ open ] textarea {
flex : 1 ;
min-height : 0 ;
max-height : none ;
}
/* Floating generation history: keep the report focused while making every
completed image task reachable from the lower-left corner. */
. generation-history-fab {
position : fixed ;
left : 18 px ;
bottom : 18 px ;
z-index : 60 ;
display : inline-flex ;
align-items : center ;
gap : 8 px ;
min-height : 42 px ;
padding : 0 13 px 0 9 px ;
border : 1 px solid #26384a ;
border-radius : 22 px ;
background : #172635 ;
color : #fff ;
box-shadow : 0 10 px 26 px rgba ( 19 , 36 , 53 , .22 );
cursor : pointer ;
font-size : 12 px ;
font-weight : 800 ;
}
. generation-history-fab : hover { background : #21415d }
. generation-history-fab : focus-visible { outline : 3 px solid rgba ( 49 , 109 , 204 , .3 ); outline-offset : 3 px }
. generation-history-fab-icon {
display : grid ;
width : 25 px ;
height : 25 px ;
place-items : center ;
border-radius : 50 % ;
background : #316dcc ;
color : #fff ;
font-size : 16 px ;
line-height : 1 ;
}
. generation-history-fab > b {
display : grid ;
min-width : 20 px ;
height : 20 px ;
padding : 0 5 px ;
place-items : center ;
border-radius : 10 px ;
background : #e9f1ff ;
color : #316dcc ;
font-size : 10 px ;
}
. generation-history-dialog {
box-sizing : border-box ;
width : min ( 920 px , calc ( 100 % - 32 px ));
max-height : calc ( 100 vh - 48 px );
padding : 0 ;
border : 0 ;
border-top : 5 px solid #316dcc ;
border-radius : 0 ;
background : #f5f8fb ;
color : var ( -- v92 - text );
box-shadow : 0 28 px 90 px rgba ( 12 , 24 , 42 , .3 );
}
. generation-history-dialog :: backdrop { background : rgba ( 10 , 18 , 30 , .58 ); backdrop-filter : blur ( 4 px )}
. generation-history-dialog-head {
display : flex ;
align-items : flex-start ;
justify-content : space-between ;
gap : 22 px ;
padding : 25 px 28 px 20 px ;
border-bottom : 1 px solid #dbe5ee ;
background : #fff ;
}
. generation-history-dialog-head > div { min-width : 0 }
. generation-history-dialog-head span {
color : #316dcc ;
font-size : 10 px ;
font-weight : 800 ;
letter-spacing : .08 em ;
}
. generation-history-dialog-head h2 {
margin : 6 px 0 5 px ;
color : var ( -- v925 - ink );
font-size : 27 px ;
}
. generation-history-dialog-head p {
margin : 0 ;
color : var ( -- v92 - muted );
font-size : 12 px ;
line-height : 1.55 ;
}
. generation-history-dialog . dialog-close {
position : static ;
flex : 0 0 auto ;
float : none ;
}
. generation-history-dialog . generation-history {
max-height : calc ( 100 vh - 190 px );
padding : 18 px 24 px 24 px ;
overflow : auto ;
}
. generation-history-dialog . generation-history-empty {
margin : 0 ;
background : #fff ;
}
. generation-record-actions {
display : flex ;
align-items : center ;
justify-content : flex-end ;
gap : 10 px ;
flex-wrap : wrap ;
}
. generation-download {
display : inline-flex ;
align-items : center ;
min-height : 30 px ;
padding : 0 10 px ;
border : 1 px solid #9dbbe0 ;
background : #f4f8ff ;
color : #316dcc ;
font-size : 11 px ;
font-weight : 800 ;
text-decoration : none ;
}
. generation-download : hover { border-color : #316dcc ; background : #e8f1ff }
. generation-record-meta {
display : flex ;
align-items : center ;
gap : 14 px ;
flex-wrap : wrap ;
margin-top : 10 px ;
}
. generation-record-meta small { margin-top : 0 }
. generation-thumbs button {
display : block ;
min-width : 0 ;
padding : 0 ;
border : 1 px solid #dce5eb ;
background : #f6f8fa ;
cursor : pointer ;
}
. generation-thumbs button : hover { border-color : #316dcc }
@ media ( max-width : 700px ) {
. generation-history-fab { left : 12 px ; bottom : 12 px }
. generation-history-dialog { width : calc ( 100 % - 16 px ); max-height : calc ( 100 vh - 16 px )}
. generation-history-dialog-head { padding : 20 px 18 px 16 px }
. generation-history-dialog . generation-history { max-height : calc ( 100 vh - 168 px ); padding : 12 px }
. generation-record { padding : 16 px }
. generation-record-actions { justify-content : flex-start ; margin-top : 10 px }
}
/* System modal contract: all report dialogs share one outer radius and one
compact control radius, regardless of where the dialog is mounted. */
# quick-plan-dialog ,
. generation-history-dialog ,
. image-preview-dialog {
border-radius : 24 px !important ;
background-clip : padding-box ;
}
# quick-plan-dialog . dialog-close ,
. generation-history-dialog . dialog-close ,
. image-preview-dialog . image-preview-close ,
. image-preview-dialog . image-preview-nav {
border-radius : 12 px !important ;
}
/* Ardot-style production modal: quiet workbench surface, compact controls,
and horizontally scannable image tasks. */
# quick-plan-dialog {
box-sizing : border-box ;
width : min ( 1240 px , calc ( 100 % - 32 px ));
max-height : calc ( 100 vh - 32 px );
padding : 30 px 34 px ;
border : 0 ;
border-top : 5 px solid #316dcc ;
border-radius : 24 px !important ;
overflow : auto !important ;
background : #fff ;
color : #27333d ;
box-shadow : 0 30 px 90 px rgba ( 12 , 24 , 42 , .28 );
}
# quick-plan-dialog :: before {
display : none ;
}
# quick-plan-dialog :: backdrop {
background : rgba ( 27 , 39 , 53 , .46 );
backdrop-filter : blur ( 3 px );
}
# quick-plan-dialog . dialog-close {
position : sticky ;
top : 0 ;
right : 0 ;
float : right ;
z-index : 10 ;
width : 38 px ;
height : 38 px ;
padding : 0 ;
border : 0 ;
border-radius : 12 px !important ;
background : #eef2f6 ;
color : #141a24 ;
font-size : 24 px ;
line-height : 34 px ;
}
# quick-plan-dialog . dialog-close : hover { background : #eaf1f5 ; color : #1e2b35 }
# quick-plan-dialog . quick-plan-top {
display : grid ;
grid-template-columns : minmax ( 0 , 1.08 fr ) minmax ( 320 px , .92 fr );
gap : 28 px ;
align-items : start ;
min-height : 360 px ;
margin : 0 0 20 px ;
}
# quick-plan-dialog . product-brief {
min-width : 0 ;
padding : 10 px 4 px 0 0 ;
}
# quick-plan-dialog . product-brief > span {
color : #3c83c8 ;
font-size : 9 px ;
font-weight : 800 ;
letter-spacing : .08 em ;
}
# quick-plan-dialog . product-brief h2 {
margin : 8 px 42 px 18 px 0 ;
color : #18242e ;
font-size : 28 px ;
line-height : 1.2 ;
}
# quick-plan-dialog . product-brief dl { margin : 0 }
# quick-plan-dialog . product-brief dl div {
display : grid ;
grid-template-columns : 88 px minmax ( 0 , 1 fr );
gap : 12 px ;
padding : 12 px 0 ;
border-top : 1 px solid #e4ebf0 ;
}
# quick-plan-dialog . product-brief dt {
color : #84909a ;
font-size : 11 px ;
font-weight : 800 ;
}
# quick-plan-dialog . product-brief dd {
margin : 0 ;
color : #27333d ;
font-size : 13 px ;
line-height : 1.55 ;
overflow-wrap : anywhere ;
}
# quick-plan-dialog . brief-controls {
display : grid ;
gap : 10 px ;
margin-top : 18 px ;
}
# quick-plan-dialog . brief-controls . fission-pattern-toggle {
position : static ;
display : flex ;
max-width : none ;
margin : 0 ;
padding : 9 px 10 px ;
border : 1 px solid #d6e1e8 ;
border-radius : 8 px !important ;
background : #f8fbfd ;
box-shadow : none ;
color : #53646e ;
font-size : 10 px ;
font-weight : 700 ;
line-height : 1.35 ;
}
# quick-plan-dialog . brief-controls . match-reference-shooting-toggle > span { display : grid ; gap : 2 px }
# quick-plan-dialog . brief-controls . match-reference-shooting-toggle b { color : #435660 ; font-size : 10 px }
# quick-plan-dialog . brief-controls . match-reference-shooting-toggle small { max-width : none ; color : #83919b ; font-size : 9 px }
# quick-plan-dialog . brief-controls . image-user-direction { margin : 0 ; color : #60717d ; font-size : 10 px }
# quick-plan-dialog . brief-controls . image-user-direction textarea { min-height : 64 px }
# quick-plan-dialog . quick-plan-top . reference-upload {
position : relative ;
display : grid ;
grid-template-rows : auto 178 px auto auto ;
gap : 0 ;
height : 360 px ;
min-height : 360 px ;
margin : 0 ;
padding : 14 px ;
overflow : visible ;
border : 1 px solid #d6e1ea ;
border-radius : 24 px !important ;
background : #f5f8fb ;
}
# quick-plan-dialog . quick-plan-top . reference-upload :: after { display : none }
# quick-plan-dialog . quick-plan-top . reference-upload . is-dragging {
border-color : #316dcc ;
background : #edf4ff ;
box-shadow : 0 0 0 3 px rgba ( 49 , 109 , 204 , .14 );
}
# quick-plan-dialog . reference-upload header {
position : static ;
display : flex ;
align-items : center ;
justify-content : space-between ;
gap : 12 px ;
padding : 0 0 10 px ;
}
# quick-plan-dialog . reference-upload header b {
color : #26333e ;
font-size : 13 px ;
text-shadow : none ;
}
# quick-plan-dialog . reference-upload header span {
color : #87939e ;
font-size : 10 px ;
text-shadow : none ;
}
# quick-plan-dialog . reference-list {
position : relative ;
inset : auto ;
display : flex ;
align-items : center ;
justify-content : center ;
gap : 8 px ;
min-height : 178 px ;
margin : 0 ;
padding : 8 px ;
overflow : hidden ;
border : 1 px solid #d8e2eb ;
border-radius : 24 px !important ;
background : #eef3f7 ;
}
# quick-plan-dialog . reference-list : empty { display : none }
# quick-plan-dialog . reference-list figure ,
# quick-plan-dialog . reference-list figure : not ( : first-child ) {
position : relative ;
inset : auto ;
flex : 1 1 0 ;
width : auto ;
height : 162 px ;
min-width : 0 ;
margin : 0 ;
border : 0 ;
border-radius : 5 px !important ;
box-shadow : none ;
background : transparent ;
}
# quick-plan-dialog . reference-list figure : first-child {
flex-basis : 100 % ;
z-index : 1 ;
}
# quick-plan-dialog . reference-list figure : not ( : first-child ) {
flex : 0 0 56 px ;
height : 56 px ;
border : 2 px solid #fff ;
box-shadow : 0 3 px 10 px rgba ( 26 , 42 , 58 , .14 );
}
# quick-plan-dialog . reference-list figure : nth-child ( 3 ),
# quick-plan-dialog . reference-list figure : nth-child ( 4 ) { left : auto }
# quick-plan-dialog . reference-list figure img {
display : block ;
width : 100 % ;
height : 100 % ;
object-fit : contain !important ;
object-position : center ;
}
# quick-plan-dialog . reference-list figure : not ( : first-child ) img { border-radius : 3 px }
# quick-plan-dialog . reference-list button {
position : absolute ;
top : -7 px ;
right : -7 px ;
width : 18 px ;
height : 18 px ;
padding : 0 ;
border : 0 ;
border-radius : 50 % !important ;
background : #263844 ;
color : #fff ;
font-size : 12 px ;
line-height : 18 px ;
}
# quick-plan-dialog . reference-empty {
display : grid ;
min-height : 178 px ;
place-items : center ;
align-content : center ;
gap : 5 px ;
border : 1 px solid #d8e2eb ;
border-radius : 24 px !important ;
background : #eef3f7 ;
color : #72808b ;
text-align : center ;
}
# quick-plan-dialog . reference-upload . has-reference . reference-empty { display : none }
# quick-plan-dialog . reference-empty span {
display : grid ;
width : 32 px ;
height : 32 px ;
place-items : center ;
border : 1 px solid #9fb4c5 ;
border-radius : 50 % ;
color : #4e81a7 ;
font-size : 23 px ;
line-height : 1 ;
}
# quick-plan-dialog . reference-empty b {
color : #667681 ;
font-size : 11 px ;
}
# quick-plan-dialog . reference-empty small {
color : #9aa6af ;
font-size : 9 px ;
}
# quick-plan-dialog . reference-upload-btn {
position : relative ;
justify-self : start ;
margin-top : 10 px ;
padding : 7 px 10 px ;
border : 1 px solid #8bb6d1 ;
border-radius : 7 px !important ;
background : #fff ;
color : #3679ae ;
font-size : 11 px ;
}
# quick-plan-dialog . reference-upload-btn input {
position : absolute ;
inset : 0 ;
display : block ;
width : 100 % ;
height : 100 % ;
margin : 0 ;
opacity : 0 ;
cursor : pointer ;
}
# quick-plan-dialog . reference-upload p {
position : static ;
grid-column : 1 /- 1 ;
margin : 8 px 0 0 ;
color : #7d8b95 ;
text-shadow : none ;
font-size : 10 px ;
line-height : 1.45 ;
}
# quick-plan-dialog . reference-upload em {
position : static ;
grid-column : 1 /- 1 ;
margin : 8 px 0 0 ;
color : #8b98a2 ;
text-shadow : none ;
font-size : 9 px ;
line-height : 1.4 ;
}
# quick-plan-dialog . reference-upload . fission-pattern-toggle {
position : static ;
z-index : auto ;
display : flex ;
max-width : none ;
margin-top : 8 px ;
padding : 8 px 9 px ;
border : 1 px solid #d6e1e8 ;
border-radius : 7 px !important ;
background : #fff ;
box-shadow : none ;
color : #53646e ;
font-size : 10 px ;
font-weight : 700 ;
line-height : 1.35 ;
}
# quick-plan-dialog . reference-upload . match-reference-shooting-toggle { margin-top : 10 px }
# quick-plan-dialog . reference-upload . match-reference-shooting-toggle > span { gap : 2 px }
# quick-plan-dialog . reference-upload . match-reference-shooting-toggle b { color : #435660 ; font-size : 10 px }
# quick-plan-dialog . reference-upload . match-reference-shooting-toggle small { max-width : none ; color : #83919b ; font-size : 9 px }
# quick-plan-dialog . image-generation-panel {
margin-top : 0 ;
padding : 18 px ;
border : 1 px solid #d6e1ee ;
border-radius : 24 px !important ;
background : #f3f7fb ;
}
# quick-plan-dialog . image-generation-panel > header {
display : flex ;
align-items : flex-start ;
justify-content : space-between ;
gap : 18 px ;
margin-bottom : 12 px ;
}
# quick-plan-dialog . image-generation-panel header span {
color : #3b81c5 ;
font-size : 9 px ;
letter-spacing : .08 em ;
}
# quick-plan-dialog . image-generation-panel h3 {
margin : 4 px 0 3 px ;
color : #1d2a34 ;
font-size : 18 px ;
}
# quick-plan-dialog . image-generation-panel header p {
margin : 0 ;
color : #87939d ;
font-size : 10 px ;
line-height : 1.4 ;
}
# quick-plan-dialog . generate-images-btn {
flex : 0 0 auto ;
width : 200 px ;
min-width : 0 ;
margin : 0 ;
align-self : flex-start ;
padding : 9 px 12 px ;
border-radius : 7 px !important ;
background : #4b77c8 ;
font-size : 11 px ;
}
# quick-plan-dialog . generate-images-btn : hover { background : #3e67ae }
# quick-plan-dialog . image-user-direction {
display : grid ;
gap : 5 px ;
margin : 10 px 0 8 px ;
color : #60717d ;
font-size : 10 px ;
}
# quick-plan-dialog . image-user-direction textarea {
min-height : 52 px ;
padding : 8 px 10 px ;
border : 1 px solid #d2dfe8 ;
border-radius : 7 px !important ;
background : #fff ;
color : #2b3944 ;
font-size : 11 px ;
}
# quick-plan-dialog . image-generation-controls {
display : flex ;
flex-wrap : wrap ;
align-items : center ;
gap : 8 px ;
margin : 10 px 0 2 px ;
}
# quick-plan-dialog . image-generation-controls > b {
flex : 1 0 100 % ;
color : #71808c ;
font-size : 10 px ;
}
# quick-plan-dialog . image-generation-controls label {
padding : 6 px 8 px ;
border : 1 px solid #cbd9e5 ;
border-radius : 7 px !important ;
background : #fff ;
color : #566873 ;
font-size : 10 px ;
}
# quick-plan-dialog . image-model-controls {
margin : 8 px 0 0 ;
padding : 8 px 10 px ;
border : 1 px solid #d7e2ea ;
border-radius : 7 px !important ;
background : #fff ;
}
# quick-plan-dialog . image-model-controls label {
border-radius : 6 px !important ;
font-size : 10 px ;
}
# quick-plan-dialog . image-generation-status {
min-height : 15 px ;
margin : 8 px 0 0 ;
color : #4c78b7 ;
font-size : 10 px ;
}
# quick-plan-dialog . generated-image-results { margin-top : 12 px }
# quick-plan-dialog . generation-task-row + . generation-task-row { margin-top : 18 px }
# quick-plan-dialog . generation-task-row > header ,
# quick-plan-dialog . generation-comparison-row > header {
margin-bottom : 8 px ;
}
# quick-plan-dialog . generation-task-row > header span ,
# quick-plan-dialog . generation-comparison-row > header span {
color : #6f8290 ;
font-size : 9 px ;
}
# quick-plan-dialog . generation-task-row > header h3 ,
# quick-plan-dialog . generation-comparison-row > header h3 {
margin : 3 px 0 0 ;
color : #334653 ;
font-size : 13 px ;
}
# quick-plan-dialog . generation-task-row > header b ,
# quick-plan-dialog . generation-comparison-row > header b { color : #4d77bd ; font-size : 10 px }
# quick-plan-dialog . generation-task-hint {
align-self : flex-end ;
color : #8a94a6 ;
font-size : 12 px ;
font-weight : 400 ;
white-space : nowrap ;
}
# quick-plan-dialog . generation-task-track {
position : relative ;
margin : 0 ;
gap : 18 px ;
padding : 2 px 2 px 10 px ;
scrollbar-width : thin ;
scrollbar-color : #c7d0dc #e3e8ef ;
}
# quick-plan-dialog . generation-task-track :: -webkit-scrollbar { height : 4 px }
# quick-plan-dialog . generation-task-track :: -webkit-scrollbar-track { border-radius : 2 px ; background : #e3e8ef }
# quick-plan-dialog . generation-task-track :: -webkit-scrollbar-thumb { border-radius : 2 px ; background : #c7d0dc }
# quick-plan-dialog . generation-task-row-detail . generation-task-track :: after {
content : "" ;
position : absolute ;
z-index : 8 ;
top : 2 px ;
right : 0 ;
width : 56 px ;
height : 272 px ;
pointer-events : none ;
background : linear-gradient ( to right , rgba ( 243 , 247 , 251 , 0 ), rgba ( 243 , 247 , 251 , .15 ) 70 % , #f3f7fb 100 % );
}
# quick-plan-dialog . generation-task-card {
flex : 0 0 210 px ;
box-sizing : border-box ;
height : 272 px ;
min-height : 272 px ;
padding : 10 px ;
border : 1.5 px solid #e3e8ef ;
border-radius : 24 px !important ;
background : #fff ;
box-shadow : none ;
}
# quick-plan-dialog . generation-task-card . is-selected {
border-color : #316dcc !important ;
background : #f7faff ;
box-shadow : 0 0 0 3 px rgba ( 49 , 109 , 204 , .2 );
}
# quick-plan-dialog . generation-task-media {
position : relative ;
height : 250 px ;
min-height : 250 px ;
border-radius : 24 px !important ;
background : #f0f5fa ;
}
# quick-plan-dialog . generation-task-media img ,
# quick-plan-dialog . generation-task-placeholder {
min-height : 250 px ;
height : 250 px ;
aspect-ratio : auto !important ;
border-radius : 24 px !important ;
}
# quick-plan-dialog . generation-task-placeholder {
color : #a2afbb ;
background : #f1f5f9 ;
}
# quick-plan-dialog . generation-task-placeholder span {
color : #9aaab7 ;
font-size : 8 px ;
}
# quick-plan-dialog . generation-task-placeholder b {
margin-top : 3 px ;
color : #8193a2 ;
font-size : 23 px ;
}
# quick-plan-dialog . generation-task-media > i {
top : 8 px ;
right : 8 px ;
left : auto ;
padding : 3 px 5 px ;
border-radius : 4 px !important ;
background : #dbe9f4 ;
color : #55758d ;
font-size : 8 px ;
}
# quick-plan-dialog . generation-task-generating . generation-task-media > i { background : #d9e8ff ; color : #3167ae }
# quick-plan-dialog . generation-task-complete . generation-task-media > i { background : #dcf2ea ; color : #2d7b62 }
# quick-plan-dialog . generation-task-error . generation-task-media > i { background : #f8dfdf ; color : #ae4a4a }
# quick-plan-dialog . generation-task-overlay {
inset : 0 ;
display : flex ;
flex-direction : column ;
align-items : flex-start ;
padding : 28 px 10 px 10 px ;
border-radius : 8 px !important ;
background : linear-gradient ( 180 deg , rgba ( 240 , 245 , 250 , 0 ) 0 % , rgba ( 240 , 245 , 250 , .92 ) 52 % , #f0f5fa 100 % );
color : #334653 ;
}
# quick-plan-dialog . generation-task-complete . generation-task-overlay {
opacity : 0 ;
transform : none ;
}
# quick-plan-dialog . generation-task-complete : hover . generation-task-overlay ,
# quick-plan-dialog . generation-task-complete : focus-within . generation-task-overlay {
opacity : 1 ;
background : rgba ( 241 , 247 , 251 , .94 );
}
# quick-plan-dialog . generation-task-overlay small {
color : #477bb9 ;
font-size : 9 px ;
}
# quick-plan-dialog . generation-task-overlay h4 {
max-width : 90 % ;
margin : 4 px 0 0 ;
color : #334653 ;
font-size : 14 px ;
line-height : 1.3 ;
}
# quick-plan-dialog . generation-task-overlay p {
display : block ;
margin : 4 px 0 0 ;
color : #71828e ;
font-size : 10 px ;
line-height : 1.35 ;
}
# quick-plan-dialog . generation-task-overlay . generation-prompt-status { font-size : 9 px ; color : #8190a0 }
# quick-plan-dialog . generation-slot-select {
margin-top : auto ;
padding : 4 px 6 px ;
border : 1 px solid #b6c9dc ;
border-radius : 5 px !important ;
background : rgba ( 255 , 255 , 255 , .88 );
color : #52718c ;
font-size : 9 px ;
}
# quick-plan-dialog . generation-slot-select input { width : 13 px ; height : 13 px }
# quick-plan-dialog . task-prompt summary { border-radius : 5 px !important ; font-size : 9 px }
# quick-plan-dialog . generation-task-queued . generation-task-overlay . task-prompt {
width : 100 % ;
margin-top : auto ;
}
# quick-plan-dialog . generation-task-queued . generation-task-overlay . task-prompt summary {
display : inline-flex ;
align-items : center ;
padding : 4 px 6 px ;
border : 1 px solid #b8cad9 ;
border-radius : 5 px !important ;
background : #fff ;
color : #52718c ;
font-size : 9 px ;
font-weight : 800 ;
line-height : 1.2 ;
}
# quick-plan-dialog . generation-task-queued . generation-task-overlay . task-prompt summary : hover {
border-color : #7fa9c5 ;
background : #f7fbfd ;
color : #356b91 ;
}
# quick-plan-dialog . generation-task-queued . generation-task-overlay . task-prompt [ open ] summary {
border-color : rgba ( 255 , 255 , 255 , .38 );
background : rgba ( 255 , 255 , 255 , .14 );
color : #edf5ff ;
}
# quick-plan-dialog . generation-comparison-table {
gap : 1 px ;
border-radius : 8 px !important ;
}
@ media ( max-width : 900px ) {
# quick-plan-dialog { width : calc ( 100 % - 20 px ); padding : 20 px }
# quick-plan-dialog . quick-plan-top { grid-template-columns : 1 fr ; gap : 14 px }
# quick-plan-dialog . quick-plan-top . reference-upload { grid-template-rows : auto 178 px auto auto }
# quick-plan-dialog . generation-task-card { flex-basis : min ( 180 px , 42 vw )}
}
@ media ( max-width : 560px ) {
# quick-plan-dialog { width : calc ( 100 % - 12 px ); max-height : calc ( 100 vh - 12 px ); padding : 16 px }
# quick-plan-dialog . product-brief h2 { font-size : 23 px }
# quick-plan-dialog . product-brief dl div { grid-template-columns : 1 fr ; gap : 4 px }
# quick-plan-dialog . image-generation-panel > header { display : block }
# quick-plan-dialog . generate-images-btn { margin-top : 10 px ; width : 100 % }
# quick-plan-dialog . generation-task-card { flex-basis : 78 vw }
}
/* Keep the exact request parameters visible after the controls are rerendered. */
. generation-run-summary {
display : grid ;
grid-template-columns : repeat ( auto - fit , minmax ( 190 px , 1 fr ));
gap : 8 px ;
margin : 10 px 0 0 ;
padding : 11 px 12 px ;
border : 1 px solid #b9d4ed ;
background : #f5f9ff ;
color : #2d4a67 ;
}
. generation-run-summary [ hidden ] { display : none }
. generation-run-summary > b {
grid-column : 1 /- 1 ;
color : #1f5dab ;
font-size : 11 px ;
}
. generation-run-summary > span {
display : flex ;
min-width : 0 ;
flex-direction : column ;
gap : 2 px ;
padding : 7 px 8 px ;
border-left : 3 px solid #6b9ed8 ;
background : #fff ;
}
. generation-run-summary > span strong {
overflow : hidden ;
color : #263b50 ;
font-size : 11 px ;
text-overflow : ellipsis ;
white-space : nowrap ;
}
. generation-run-summary > span small {
color : #61758b ;
font-size : 10 px ;
line-height : 1.4 ;
}
. generation-task-result-meta {
display : flex ;
flex-direction : column ;
gap : 2 px ;
padding : 7 px 9 px ;
border-top : 1 px solid #e2eaf1 ;
background : #fff ;
}
. generation-task-result-meta > b {
color : #53708d ;
font-size : 9 px ;
font-weight : 800 ;
letter-spacing : .04 em ;
}
. generation-task-result-meta . generation-task-spec {
color : #315f8b ;
font-size : 10 px ;
line-height : 1.35 ;
}
. generation-reference-preview {
display : flex ;
align-items : center ;
gap : 7 px ;
min-width : 0 ;
padding : 7 px 9 px ;
border-top : 1 px solid #e2eaf1 ;
background : #f7fafc ;
color : #52708e ;
font-size : 9 px ;
line-height : 1.25 ;
}
. generation-plan-context {
display : block ;
margin : 4 px 0 0 ;
color : #58728b ;
font-size : 9 px ;
line-height : 1.35 ;
}
. generation-plan-context b {
color : #315f8b ;
font-weight : 800 ;
}
. generation-reference-preview img {
width : 38 px ;
height : 38 px ;
flex : 0 0 38 px ;
border : 1 px solid #cbd9e6 ;
background : #fff ;
object-fit : cover ;
}
. generation-reference-preview span {
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
}
. generation-comparison-task . generation-reference-preview {
margin : 4 px 0 ;
padding : 4 px ;
}
