/* 财富荣耀 | wheel | layout-05 | mobile-rayesports.com.cn */
:root{
--bg:#0a0a0a;
--bg-2:#b45309;
--surface:rgba(15,23,42,.76);
--card:rgba(15,23,42,.68);
--primary:#0a0a0a;
--accent:#fbbf24;
--text:#f8fafc;
--muted:#dbe4f0;
--radius:18px;
--gap:15px;
--max:1188px;
--shadow-y:12px;
--card-pad:21px;
}

*{
box-sizing:border-box;
font-family: "Segoe UI"}

html{
scroll-behavior:smooth}
 body{
margin:0;
color:var(--text);
background:radial-gradient(circle at 4% 24%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 34%),linear-gradient(129deg,var(--bg),var(--bg-2));
background-attachment:fixed;
line-height:1.75;
min-height:100vh}

a{
color:var(--accent);
text-decoration:none}
 a:hover{
filter:brightness(1.15)}
 nav{
position:sticky;
top:0;
z-index:20;
background:color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:blur(12px);
border-bottom:1px solid color-mix(in srgb,var(--accent) 52%,transparent)}

.nav-links{
max-width:var(--max);
margin:auto;
padding:16px 22px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px}
 .nav-links a{
font-weight:700;
color:var(--text);
font-size:1.00rem}

main{
max-width:var(--max);
margin:auto;
padding:0 22px 70px}
 .hero{
min-height:610px;
display:grid;
grid-template-columns:52fr 48fr;
gap:var(--gap);
align-items:center;
text-align:center;
padding:58px 0}

.hero-copy{
order:0}
.hero-art{
order:1;
position:relative}
 .hero img{
height:422px;
object-fit:cover;
border-radius:36px 9px;
box-shadow:0 18px 48px rgba(0,0,0,.20)}

h1{
font-size:clamp(2.15rem,5.2vw,5.3rem);
line-height:1.08;
margin:.2em 0;
letter-spacing:-0.01em}
 h2{
font-size:clamp(1.55rem,3vw,2.55rem);
line-height:1.2;
margin:.25em 0 .65em}
 h3{
line-height:1.3}

.eyebrow,.tag{
display:inline-block;
padding:5px 11px;
border-radius:8px;
background:var(--accent);
color:#111827;
font-size:.8rem;
font-weight:800;
letter-spacing:.08em}
 .lede{
font-size:1.05rem;
color:var(--muted);
max-width:880px}

.content-flow{
display:flex;
flex-direction:column;
gap:26px}
 section{
scroll-margin-top:90px}
 .section-shell{
padding:29px;
border-radius:var(--radius);
background:color-mix(in srgb,var(--surface) 82%,transparent);
border:1px solid color-mix(in srgb,var(--primary) 31%,transparent);
box-shadow:0 var(--shadow-y) 45px rgba(0,0,0,.12)}

.section-shell:nth-child(2n){
margin-left:0%;
margin-right:9%}
 .section-shell:nth-child(4n){
border-left:7px solid var(--accent)}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
gap:var(--gap)}
 .card,article,.faq-item,.data-row{
padding:var(--card-pad);
border-radius:var(--radius);
background:var(--card);
border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
box-shadow:0 18px 48px rgba(0,0,0,.20);
backdrop-filter:blur(18px);
}

article{
overflow:hidden}
 article h3{
font-size:1.2rem;
margin:.7em 0 .35em}
 article p,.card p{
color:var(--muted)}
 .feature-image{
width:100%;
height:360px;
object-fit:cover;
border-radius:var(--radius)}

.article-media-group{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
gap:calc(var(--gap) * .7);
margin:16px 0 4px}
 .article-media{
margin:16px 0 4px}
 .article-media-group .article-media{
margin:0}
 .article-media .feature-image{
display:block;
height:252px;
box-shadow:0 10px 28px rgba(0,0,0,.16)}

.image-gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:var(--gap);
margin-top:calc(var(--gap) * 1.2)}
 .image-gallery .feature-image{
height:258px;
box-shadow:0 12px 32px rgba(0,0,0,.16)}
 .image-gallery .feature-image:nth-child(2n){
grid-column:span 1}

.key-points{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:12px;
padding:0;
list-style:none}
.key-points li{
position:relative;
padding:15px 16px 15px 42px;
border-radius:calc(var(--radius) * .7);
background:color-mix(in srgb,var(--surface) 88%,var(--primary) 12%);
border:1px solid color-mix(in srgb,var(--primary) 25%,transparent)}
.key-points li::before{
content:"✓";
position:absolute;
left:16px;
color:var(--accent);
font-weight:900}

.data-list{
display:grid;
gap:12px}
.data-row{
display:grid;
grid-template-columns:minmax(130px,.7fr) 1.8fr;
gap:20px;
align-items:start}
 .data-row strong{
color:var(--accent)}

.score-board{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
gap:var(--gap)}
 .score-entry{
padding:18px;
border-radius:var(--radius);
background:color-mix(in srgb,var(--card) 92%,var(--primary) 8%);
border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
 .score-meta{
display:flex;
justify-content:space-between;
gap:12px;
color:var(--muted);
font-size:.9rem}
 .score-teams{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:12px;
align-items:center;
margin-top:13px;
font-size:1.02rem;
font-weight:750}
 .score-teams span:last-child{
text-align:right}
 .scoreline{
font-size:1.35rem;
color:var(--accent);
white-space:nowrap}
 .match-status{
padding:3px 9px;
border-radius:999px;
background:var(--accent);
color:#111827;
font-size:.78rem;
font-weight:800}
 .score-note{
margin-top:14px;
color:var(--muted);
font-size:.9rem}

.cta{
text-align:center;
padding:38px;
background:linear-gradient(118deg,var(--primary),var(--accent));
color:white;
border-radius:var(--radius);
box-shadow:0 18px 48px rgba(0,0,0,.20)}
 .cta a{
color:white;
font-weight:800;
border-bottom:1px solid white}

footer{
padding:38px 20px;
text-align:center;
background:color-mix(in srgb,var(--surface) 86%,black 14%);
color:var(--muted)}
 footer p{
margin:5px auto;
max-width:var(--max)}

.grid{
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:center}
.grid>*:nth-child(3n+2){
transform:translateY(-18px) scale(1.025)}
.grid>*:nth-child(3n+1){
transform:rotate(-1deg)}
.grid>*:nth-child(3n){
transform:rotate(1deg)}

@media(max-width:760px){
.hero{
grid-template-columns:1fr;
text-align:left;
min-height:auto;
padding:42px 0}
.hero-copy,.hero-art{
order:initial}
.nav-links{
justify-content:flex-start}
.data-row{
grid-template-columns:1fr}
.section-shell:nth-child(n){
margin-left:0;
margin-right:0}
.image-gallery .feature-image:nth-child(n){
grid-column:span 1}
.grid{
display:grid;
grid-template-columns:1fr;
grid-auto-flow:row;
grid-auto-columns:auto;
columns:1;
overflow:visible;
padding-left:0;
border-left:0}
.grid>*:nth-child(n){
grid-column:span 1;
grid-row:span 1;
margin-left:0;
margin-right:0;
transform:none}
}


/* Applied blueprint: structural overrides, independent of legacy preset */
:root{
--bg:#f4f8f7;
--bg-2:#f4f8f7;
--surface:#fefefe;
--card:#fefefe;
--text:#182126;
--muted:#4e5f5e;
--accent:#1a5b57;
--primary:#385894;
--gap:38px;
--max:1280px;
--radius:0px}

*{
font-family: "Segoe UI"}

body{
background:var(--bg);
line-height:1.75;
background-attachment:initial}

a{
color:var(--accent)}

.design-root main{
padding:0 32px 72px;
min-width:0}

.design-root nav{
background:var(--surface);
backdrop-filter:none;
border-bottom:1px solid var(--muted)}

.design-root .hero{
position:relative;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:var(--gap);
min-height:0;
padding:54px 0;
text-align:left;
align-items:center}

.design-root .hero-copy,.design-root .hero-art{
order:initial;
min-width:0;
margin:0}

.design-root .hero img{
height:420px;
border-radius:0;
box-shadow:none;
display:block}

.design-root h1{
font-size:clamp(2.1rem,4.5vw,4.7rem);
letter-spacing:-.035em;
overflow-wrap:anywhere}

.design-root .content-flow{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:var(--gap);
margin-top:0}

.design-root .section-shell{
margin:0;
padding:38px 0;
border:0;
border-top:1px solid var(--muted);
border-radius:0;
background:transparent;
box-shadow:none;
min-width:0}

.design-root .grid{
display:grid;
grid-auto-flow:row;
grid-auto-columns:auto;
columns:auto;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gap);
overflow:visible;
padding:0;
border:0;
perspective:none}

.design-root .grid>*:nth-child(n){
grid-column:auto;
grid-row:auto;
transform:none;
margin:0;
min-width:0}

.design-root .grid>*::before{
display:none}

.design-root .card,.design-root article,.design-root .faq-item,.design-root .data-row{
background:var(--surface);
border:0;
border-radius:0;
box-shadow:none;
backdrop-filter:none}

.design-root .eyebrow,.design-root .tag,.match-status{
color:#ffffff;
background:var(--accent)}

.design-root .design-primary,.design-root .design-aside{
display:grid;
gap:var(--gap);
align-content:start;
min-width:0}

.design-root .cta{
background:var(--surface);
border:0;
padding:28px;
margin:0;
border-radius:0}

.design-cover .hero{
display:block;
padding-top:320px;
isolation:isolate}

.design-cover .hero-art{
position:absolute;
inset:0;
z-index:-1}

.design-cover .hero img{
height:100%;
opacity:.35}

.design-cover .hero-copy{
background:var(--surface);
padding:30px;
max-width:750px}

.design-masthead .hero{
grid-template-columns:1fr;
padding:30px 0}

.design-masthead .hero-copy{
border-top:8px solid var(--accent);
padding-top:24px}

.design-masthead .hero img{
height:260px}

.design-poster .hero{
grid-template-columns:1fr 1.3fr;
align-items:end}

.design-poster .hero img{
height:560px}

.design-reverse .hero{
grid-template-columns:1.4fr 1fr}

.design-banner .hero{
grid-template-columns:1fr}

.design-banner .hero img{
height:230px}

.design-banner .hero-copy{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px}

.design-banner .eyebrow{
grid-column:1/-1;
justify-self:start}

.design-caption .hero{
grid-template-columns:1fr}

.design-caption .hero-copy{
max-width:850px;
margin-left:12%;
border-left:5px solid var(--accent);
padding-left:28px}

.design-caption .hero img{
height:440px}

.design-text .hero{
grid-template-columns:1fr;
max-width:980px;
padding:90px 0}

.design-text .hero h1{
font-size:clamp(2.7rem,7vw,6rem)}

.design-sidebar .content-flow{
grid-template-columns:minmax(0,2fr) minmax(0,1fr);
align-items:start}

.design-paired .content-flow{
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start}

.design-paired .content-flow>section:first-child,.design-paired .cta{
grid-column:1/-1}

.design-alternating .content-flow>section:nth-child(odd){
margin-right:15%}

.design-alternating .content-flow>section:nth-child(even){
margin-left:15%}

.design-feature .content-flow{
grid-template-columns:minmax(0,3fr) minmax(0,2fr);
align-items:start}

.design-feature .content-flow>section:nth-child(3n+1){
grid-column:1/-1}

.design-bands .section-shell:nth-child(even){
background:var(--surface);
padding:38px}

.design-rows .grid{
grid-template-columns:1fr}

.design-rows .grid>article{
display:grid;
grid-template-columns:1fr 2fr;
gap:24px;
border-bottom:1px solid var(--muted)}

.design-rows .grid>article h3{
grid-column:1}
.design-rows .grid>article p{
grid-column:2}

.design-rows .grid>article .article-media-group{
grid-column:1/-1}

.design-plain .grid{
display:block}

.design-plain .grid>*:nth-child(n){
background:transparent;
padding:20px 0;
border-bottom:1px solid var(--muted)}

.design-timeline .grid{
grid-template-columns:1fr;
border-left:3px solid var(--accent);
padding-left:26px}

.design-timeline .grid>*:nth-child(n){
border-left:7px solid var(--accent)}

.design-ledger .grid{
grid-template-columns:1fr;
counter-reset:entry}

.design-ledger .grid>*:nth-child(n){
position:relative;
padding-left:70px;
border-bottom:1px solid var(--muted);
background:transparent;
counter-increment:entry}

.design-ledger .grid>*::after{
content:counter(entry,decimal-leading-zero);
position:absolute;
left:12px;
top:18px;
color:var(--accent);
font-size:1.5rem}

.design-lead .grid>*:first-child{
grid-column:1/-1;
background:var(--surface);
border-left:7px solid var(--accent)}

.design-center .nav-links{
justify-content:center}

.design-bar nav{
border-top:8px solid var(--accent);
position:relative}

.design-rail{
display:grid;
grid-template-columns:220px minmax(0,1fr);
align-items:start}

.design-rail nav{
position:sticky;
top:0;
border:0;
border-right:1px solid var(--muted);
min-height:100vh}

.design-rail .nav-links{
flex-direction:column;
align-items:start;
padding:32px 18px}

.design-rail main{
width:100%}

.design-editorial h2{
font-style:italic}
.design-directory h2{
border-bottom:3px solid var(--accent)}

.design-journal main,.design-story main{
max-width:1050px}

.design-atlas .section-shell h2{
border-left:8px solid var(--accent);
padding-left:18px}

.design-dashboard .section-shell{
border:1px solid var(--muted);
padding:24px}

.design-catalogue .section-shell h2{
text-transform:uppercase;
letter-spacing:.08em}

.design-portfolio .hero h1{
font-weight:400}

.design-bulletin .section-shell h2{
border-top:4px solid var(--accent);
padding-top:12px}

.design-research .section-shell{
padding-left:32px;
border-left:1px solid var(--muted)}

.design-studio .hero-copy{
border-bottom:10px solid var(--accent);
padding-bottom:24px}

.design-index .section-shell h2{
font-size:1.4rem;
letter-spacing:.1em}

.design-review .section-shell{
border-bottom:1px solid var(--muted)}

.design-fieldnotes .section-shell{
border-left:3px double var(--accent);
padding-left:24px}

.design-gallery .hero img{
object-position:center 35%}

footer{
background:var(--surface);
color:var(--text);
border-top:1px solid var(--muted)}

@media(max-width:900px){
.design-rail{
grid-template-columns:170px minmax(0,1fr)}
.design-root main{
padding-inline:20px}
}

@media(max-width:760px){

.design-root{
display:block}
.design-root nav{
position:relative;
min-height:0;
border-right:0}

.design-root .nav-links{
flex-direction:row;
gap:12px;
padding:16px;
max-width:100%;
overflow-wrap:anywhere}

.design-root .hero,.design-root .hero-copy,.design-root .content-flow,.design-root .grid,.design-root .grid>article{
display:grid;
grid-template-columns:minmax(0,1fr);
min-height:0;
max-width:100%;
padding-top:24px}

.design-root .hero-copy{
padding:20px 0;
margin:0}
.design-root .hero img{
height:260px}

.design-root .hero-art{
position:static;
opacity:1;
z-index:auto}
.design-cover .hero{
isolation:auto}
.design-cover .hero img{
opacity:1}

.design-root .content-flow>section:nth-child(n){
margin:0;
grid-column:auto}

.design-root .grid>*:nth-child(n),.design-root .grid>article>*:nth-child(n){
grid-column:auto;
grid-row:auto;
transform:none}

.design-root .hero h1{
font-size:2.35rem;
overflow-wrap:anywhere}

.design-root .design-aside{
border-top:2px solid var(--accent);
padding-top:24px}

}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
}


* {
 box-sizing: border-box;
 font-family: "Segoe UI";
 }

body {
 margin: 0;
 color: var(--text);
 }

img {
 max-width: 100%;
 width: 100%;
 object-fit: cover;
 }

figure {
 margin: 0;
 }

a {
 text-decoration-thickness: 1px;
 text-underline-offset: 4px;
 }

p {
 overflow-wrap: anywhere;
 }

h1, h2, h3, summary {
 overflow-wrap: anywhere;
 }

.design-root main {
 width: min(100%, 1320px);
 margin-inline: auto;
 }

.navigation {
 padding: 20px;
 }

.navigation .brand {
 font-size: 1.35rem;
 font-weight: 700;
 }

.nav-links {
 display: flex;
 flex-wrap: wrap;
 gap: 12px 22px;
 padding-top: 12px;
 }

.jump-links {
 position: static !important;
 display: flex;
 flex-wrap: wrap;
 gap: 10px 18px;
 padding: 18px 0;
 background: transparent !important;
 border: 0 !important;
 }

.hero-text {
 font-size: 1.06rem;
 max-width: 76ch;
 line-height: 1.95;
 }

.eyebrow {
 display: inline-block;
 padding: 5px 10px;
 }

.news-card {
 padding: 22px;
 min-width: 0;
 }

.news-card h3 {
 margin-top: 0;
 font-size: 1.35rem;
 line-height: 1.55;
 }

.article-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 color: var(--muted);
 font-size: .84rem;
 margin-bottom: 18px;
 }

.article-media-group {
 margin-bottom: 18px;
 }

.article-media-group img {
 height: 220px;
 }

.news-text {
 margin-bottom: 0;
 }

.design-rows .grid > article {
 align-items: start;
 }

.design-rows .article-content {
 min-width: 0;
 }

.design-timeline .news-card {
 display: grid;
 grid-template-columns: 100px minmax(0,1fr);
 gap: 24px;
 }

.design-timeline .article-meta {
 display: block;
 }

.design-timeline .article-meta span {
 display: block;
 }

.design-timeline .article-content {
 min-width: 0;
 }

.faq-item {
 padding: 22px;
 min-width: 0;
 }

summary {
 font-weight: 700;
 cursor: pointer;
 font-size: 1.03rem;
 }

.faq-answer {
 margin-bottom: 0;
 }

.topic-pair {
 display: grid;
 grid-template-columns: repeat(2,minmax(0,1fr));
 gap: 24px;
 align-items: start;
 }

.topic-story {
 max-width: 900px;
 }

.topic-photo img {
 height: 260px;
 }

.topic-note {
 border-left: 4px solid var(--accent);
 padding: 20px;
 margin-top: 20px;
 }

.table-wrap {
 overflow-x: auto;
 width: 100%;
 }

table {
 width: 100%;
 border-collapse: collapse;
 font-size: .92rem;
 }

th, td {
 padding: 12px;
 border-bottom: 1px solid var(--muted);
 text-align: left;
 }

th {
 color: var(--text);
 background: var(--surface);
 }

.reader-comment {
 padding: 24px;
 }

.reader-heading {
 display: flex;
 gap: 15px;
 align-items: center;
 }

.reader-initial {
 display: grid;
 place-items: center;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background: var(--accent);
 color: var(--bg);
 font-weight: 700;
 }

blockquote {
 margin: 16px 0 0;
 }

.version-card {
 padding: 24px;
 border-top: 3px solid var(--accent);
 }

.version-note {
 color: var(--muted);
 font-size: .88rem;
 }

.breadcrumbs {
 padding: 15px 0;
 background: transparent !important;
 }

footer {
 padding: 36px max(24px,calc((100% - 1220px)/2));
 }

footer p {
 margin: 5px 0;
 }

.design-rail .navigation {
 min-width: 0;
 padding: 30px 16px;
 }

.design-rail .brand {
 overflow-wrap: anywhere;
 }

.design-root .section-heading h2 {
 color: var(--accent);
 font-size: 1.75rem;
 line-height: 1.5;
 }

.design-root .section-shell > .section-heading {
 padding: 0;
 margin-bottom: 24px;
 }

.design-split .hero {
 grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
 }

.design-linear .content-flow {
 grid-template-columns: minmax(0,1fr);
 }

.design-tiles .grid {
 grid-template-columns: repeat(2,minmax(0,1fr));
 }

.design-top .navigation {
 border-bottom: 1px solid var(--muted);
 }

.design-cinema .hero-art {
 border-bottom: 8px solid var(--accent);
 }

@media (max-width:760px) {

  .design-root main {
 padding-inline: 16px;
 width: 100%;
 }

  .design-root .hero-copy {
 padding: 15px 0;
 }

  .design-root .hero h1 {
 font-size: clamp(1.8rem,7vw,2.5rem);
 }

  .design-root .hero-text {
 font-size: 1rem;
 }

  .design-root .topic-pair, .design-root .news-card {
 display: block;
 }

  .design-root .news-card, .design-root .faq-item {
 padding: 18px;
 }

  .topic-photo {
 margin-block: 15px;
 }

  .design-root .section-shell {
 padding-inline: 0;
 }

  .design-root .nav-links {
 padding-inline: 0;
 }

  .design-root .navigation {
 padding: 16px;
 }

  .design-root .article-meta {
 display: flex;
 }

  .design-root .grid > * {
 width: 100%;
 max-width: 100%;
 min-width: 0;
 }

  .design-root .reader-comments {
 grid-template-columns: 1fr;
 }

  .design-root .hero, .design-root .grid {
 grid-template-columns: minmax(0,1fr);
 }

}