:root{
--bg:#0d1020;
--panel:#171b31;
--panel2:#1d2240;
--text:#edf0ff;
--muted:#99a0bf;
--gold:#ffd36e;
--gold2:#f49b39;
--line:rgba(255,255,255,.1);
--green:#64d7a2
}
*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
body{
margin:0;
background:radial-gradient(circle at 88% -5%,#4b2d57 0,transparent 31rem),radial-gradient(circle at 0 20%,#152957 0,transparent 35rem),var(--bg);
font:15px/1.75,"Microsoft YaHei",system-ui,sans-serif;
color:var(--text)
}
a{
color:inherit;
text-decoration:none
}
.wrap{
width:min(1160px,calc(100% - 36px));
margin:auto
}
.top{
border-bottom:1px solid var(--line);
background:rgba(8,10,23,.68);
backdrop-filter:blur(12px)
}
.top .wrap{
height:70px;
display:flex;
align-items:center;
justify-content:space-between
}
.brand{
font-size:22px;
font-weight:800;
letter-spacing:.5px
}
.brand i{
color:var(--gold);
font-style:normal
}
.nav{
display:flex;
gap:26px;
color:#cbd0e9
}
.nav a:hover,.nav .active{
color:var(--gold)
}
.hero{
padding:84px 0 64px;
position:relative;
overflow:hidden
}
.crumb{
color:var(--muted);
font-size:13px
}
.hero h1{
font-size:42px;
line-height:1.25;
margin:18px 0 14px;
max-width:820px
}
.hero h1 em{
font-style:normal;
color:var(--gold)
}
.hero p{
color:#b7bdd7;
font-size:17px;
max-width:660px
}
.badges{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:27px
}
.badge{
border:1px solid rgba(255,211,110,.38);
color:var(--gold);
background:rgba(255,211,110,.08);
padding:5px 12px;
border-radius:99px;
font-size:13px
}
.grid{
display:grid;
grid-template-columns:1fr 310px;
gap:25px;
padding-bottom:64px
}
.section-title{
font-size:21px;
margin:0 0 16px
}
.cards{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px
}
.card,.side,.article{
background:linear-gradient(145deg,rgba(31,36,66,.96),rgba(18,22,43,.96));
border:1px solid var(--line);
border-radius:14px
}
.card{
padding:22px;
transition:transform .2s,border-color .2s
}
.card:hover{
transform:translateY(-3px);
border-color:rgba(255,211,110,.5)
}
.tag{
font-size:12px;
color:var(--green);
letter-spacing:.8px
}
.card h2{
font-size:18px;
margin:8px 0;
color:#fff
}
.card p{
margin:0;
color:var(--muted);
font-size:14px
}
.meta{
margin-top:16px;
color:#7f88aa;
font-size:12px;
display:flex;
justify-content:space-between
}
.side{
padding:20px;
height:max-content
}
.side h3{
margin:0 0 11px;
font-size:18px
}
.side ul{
margin:0;
padding:0;
list-style:none
}
.side li{
border-bottom:1px solid var(--line);
padding:11px 0;
color:#cbd1e8
}
.side li:last-child{
border:0
}
.notice{
margin-top:18px;
padding:14px;
border-left:3px solid var(--gold2);
background:rgba(244,155,57,.1);
color:#d7d9e5;
font-size:13px
}
.article{
padding:38px
}
.article h1{
font-size:30px;
line-height:1.4;
margin:12px 0
}
.article h2{
font-size:21px;
margin-top:34px
}
.article p,.article li{
color:#c1c7df
}
.article .lead{
font-size:17px;
color:#e0e3f3
}
.article .meta{
justify-content:flex-start;
gap:18px
}
.article blockquote{
margin:20px 0;
padding:12px 18px;
border-left:3px solid var(--gold);
background:rgba(255,255,255,.04);
color:#d9dded
}
.back{
display:inline-block;
margin-top:24px;
color:var(--gold)
}
.footer{
border-top:1px solid var(--line);
padding:26px 0;
color:#8088a8;
text-align:center;
font-size:13px
}
.error{
min-height:calc(100vh - 140px);
display:grid;
place-items:center;
text-align:center
}
.error h1{
font-size:108px;
line-height:1;
margin:0;
color:var(--gold);
text-shadow:0 0 42px rgba(255,211,110,.23)
}
.error h2{
font-size:25px;
margin:15px
}
.button{
display:inline-block;
background:linear-gradient(135deg,var(--gold),var(--gold2));
padding:10px 22px;
border-radius:8px;
color:#20130c;
font-weight:800;
margin-top:12px
}
@media(max-width:760px){
.top .wrap{
height:auto;
min-height:68px;
padding:13px 0
}
.nav{
gap:13px;
font-size:13px
}
.hero{
padding:55px 0 38px
}
.hero h1{
font-size:30px
}
.grid{
grid-template-columns:1fr
}
.cards{
grid-template-columns:1fr
}
.article{
padding:24px
}
.article h1{
font-size:25px
}

}