:root  {
  --cyan: #009ad6;
  --gold: #fdb933;
  --green: #006c54;
  --brown: #845538;
  --blue: #426ab3;
  --navy: #2b4490;
  --ink: #142433;
  --text: #31495a;
  --muted: #6e7f8a;
  --line: #dce7ee;
  --paper: #ffffff;
  --bg: #f3f7fa;
  --radius: 8px;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}
*  {
  box-sizing: border-box;
}
html  {
  scroll-behavior: smooth;
}
body  {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
}
a  {
  color: inherit;
  text-decoration: none;
}
img  {
  display: block;
  max-width: 100%;
}
button, input  {
  font: inherit;
}
.page  {
  min-width: 1440px;
}
.shell  {
  width: 1400px;
  margin: 0 auto;
}
.btn  {
  height: 38px;
  min-width: 78px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
}
.btn-primary  {
  background: linear-gradient(135deg, var(--gold), var(--brown));
}
.btn-secondary  {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.btn-plain  {
  color: var(--blue);
  background: #eef7fb;
}
.topbar  {
  height: 34px;
  color: rgba(255, 255, 255, .88);
  background: var(--navy);
  font-size: 13px;
}
.topbar .shell,
.masthead .shell,
.mainnav .shell  {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-links  {
  display: flex;
  gap: 18px;
}
.top-links a:hover  {
  color: #fff;
}
.masthead  {
  height: 94px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 154, 214, .14);
}
.brand  {
  width: 210px;
  display: flex;
  align-items: center;
}
.brand img  {
  width: 168px;
}
.search  {
  width: 660px;
  height: 46px;
  display: grid;
  grid-template-columns: 1fr 112px;
  border: 2px solid var(--cyan);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.search input  {
  border: 0;
  outline: 0;
  padding: 0 16px;
  color: var(--ink);
  font-size: 14px;
}
.search button  {
  border: 0;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.auth  {
  display: flex;
  gap: 10px;
}
.mainnav  {
  height: 50px;
  color: #fff;
  background: linear-gradient(90deg, var(--navy), var(--blue) 58%, var(--cyan));
  box-shadow: 0 12px 24px rgba(43, 68, 144, .16);
}
.mainnav .shell  {
  justify-content: flex-start;
}
.mainnav a  {
  height: 50px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  font-weight: 900;
}
.mainnav a.active,
.mainnav a:hover  {
  background: rgba(255, 255, 255, .16);
}
.panel,
.section,
.feature,
.metric,
.download,
.loginbox,
.rail-card  {
  border: 1px solid rgba(0, 154, 214, .16);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 30px rgba(43, 68, 144, .06);
  overflow: hidden;
}
.panel-title,
.section-title  {
  height: 50px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 154, 214, .14);
  background: linear-gradient(90deg, rgba(0, 154, 214, .08), rgba(253, 185, 51, .10), rgba(0, 108, 84, .05));
  color: var(--navy);
  font-weight: 900;
}
.section-title h2  {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
}
.section-title h2::before  {
  content: "";
  width: 5px;
  height: 23px;
  background: linear-gradient(180deg, var(--cyan), var(--gold));
}
.section-title a  {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}
.quick-lottery  {
  padding: 10px;
  display: grid;
  gap: 8px;
}
.lottery-tab  {
  min-height: 54px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 154, 214, .14);
  border-radius: 7px;
  background: linear-gradient(90deg, #fff, rgba(0, 154, 214, .04));
  font-weight: 900;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lottery-tab:hover  {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 0 10px 24px rgba(0, 154, 214, .12);
}
.lottery-tab img  {
  width: 31px;
  height: 31px;
}
.feature  {
  position: relative;
  min-height: 360px;
}
.feature > img  {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}
.feature-copy  {
  position: absolute;
  inset: auto 0 0;
  padding: 34px 38px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(43, 68, 144, .96));
}
.feature-copy small  {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 10px;
  color: #563804;
  background: var(--gold);
  font-weight: 900;
}
.feature-copy h1  {
  margin: 0 0 10px;
  font-size: 38px;
  line-height: 1.16;
  letter-spacing: 0;
}
.feature-copy p  {
  width: 690px;
  margin: 0;
  line-height: 1.75;
  font-size: 15px;
}
.headline-strip  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(0, 154, 214, .14);
  background: #fff;
}
.headline-strip a  {
  min-height: 82px;
  padding: 14px 16px;
  border-right: 1px solid rgba(0, 154, 214, .14);
}
.headline-strip a:last-child  {
  border-right: 0;
}
.headline-strip strong  {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
}
.headline-strip span  {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.notice-list,
.mini-list  {
  padding: 12px 16px 16px;
  display: grid;
  gap: 10px;
}
.mini-list a,
.notice-list a  {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  align-items: center;
  color: var(--text);
  font-size: 14px;
}
.mini-dot  {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.qr-placeholder,
.download img  {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}
.download  {
  padding: 16px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, rgba(0, 108, 84, .08), rgba(253, 185, 51, .14));
}
.download h3,
.loginbox h3  {
  margin: 0 0 8px;
  font-size: 18px;
}
.download p,
.loginbox p  {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
}
.loginbox  {
  padding: 16px;
}
.metrics  {
  margin-top: 18px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.metric  {
  height: 82px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.metric strong  {
  min-width: 58px;
  color: var(--cyan);
  font-size: 30px;
}
.metric:nth-child(2) strong  {
  color: var(--gold);
}
.metric:nth-child(3) strong  {
  color: var(--green);
}
.metric:nth-child(4) strong  {
  color: var(--blue);
}
.metric span  {
  color: #43596a;
  font-weight: 900;
}
.draw-grid  {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.draw-card  {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(180deg, #fff, #f8fbfd);
}
.draw-head  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.draw-name  {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}
.draw-name img  {
  width: 28px;
  height: 28px;
}
.issue  {
  color: var(--muted);
  font-size: 12px;
}
.balls  {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.ball  {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--brown));
}
.ball.blue  {
  background: linear-gradient(135deg, var(--cyan), var(--navy));
}
.draw-actions  {
  display: flex;
  justify-content: space-between;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}
.article-matrix  {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.article-group  {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}
.article-group-head  {
  height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 900;
  background: linear-gradient(90deg, rgba(66, 106, 179, .08), rgba(253, 185, 51, .10));
}
.article-group-head img  {
  width: 30px;
  height: 30px;
}
.article-list  {
  padding: 10px 12px 14px;
  display: grid;
  gap: 6px;
}
.article-item  {
  min-height: 34px;
  padding: 4px 6px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  align-items: center;
  border-radius: 6px;
  font-size: 14px;
}
.article-item:hover  {
  background: rgba(0, 154, 214, .06);
}
.article-item img  {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.article-title  {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.article-author  {
  color: var(--green);
  font-size: 12px;
}
.trend-grid  {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.trend-link,
.tool-link,
.friend-link  {
  min-height: 66px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font-weight: 900;
}
.trend-link img,
.tool-link img,
.friend-link img  {
  width: 34px;
  height: 34px;
}
.ad-row  {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ad-row img  {
  width: 100%;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.side-ads  {
  display: grid;
  gap: 10px;
}
.side-ads img  {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.news-grid  {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.news-card  {
  min-height: 104px;
  padding: 14px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.news-card:nth-child(2)  {
  background: linear-gradient(135deg, var(--green), var(--cyan));
}
.news-card:nth-child(3)  {
  background: linear-gradient(135deg, var(--gold), var(--brown));
}
.news-card:nth-child(4)  {
  background: linear-gradient(135deg, var(--brown), var(--navy));
}
.news-card:nth-child(5)  {
  background: linear-gradient(135deg, var(--blue), var(--navy));
}
.news-card strong  {
  display: block;
  margin-bottom: 8px;
}
.news-card span  {
  font-size: 13px;
  line-height: 1.6;
  opacity: .92;
}
.friends  {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.footer  {
  margin-top: 24px;
  padding: 26px 0;
  color: rgba(255,255,255,.86);
  background: var(--navy);
  font-size: 13px;
}
.footer .shell  {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
/* 01 - Newsroom */
.home-news  {
  background: linear-gradient(180deg, rgba(0, 154, 214, .10), #f3f7fa 360px);
}
.news-hero  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 240px 1fr 340px;
  gap: 18px;
}
.news-hero .feature  {
  min-height: 382px;
  display: grid;
  grid-template-rows: 382px 92px;
}
.news-hero .feature-copy  {
  bottom: 92px;
}
.news-body  {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 20px;
}
.news-body .section  {
  margin-bottom: 20px;
}
/* 02 - Data */
.home-data  {
  background: linear-gradient(180deg, rgba(43, 68, 144, .13), #f3f7fa 330px);
}
.data-hero  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
}
.data-hero .feature  {
  min-height: 320px;
}
.data-hero .feature-copy  {
  background: linear-gradient(180deg, transparent, rgba(0, 108, 84, .94));
}
.data-grid  {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 20px;
}
.data-grid .draw-grid  {
  grid-template-columns: repeat(3, 1fr);
}
/* 03 - Editorial */
.home-editorial  {
  background: linear-gradient(180deg, rgba(253, 185, 51, .14), #f6f3ef 360px);
}
.home-editorial .mainnav  {
  background: linear-gradient(90deg, var(--brown), var(--navy), var(--cyan));
}
.editorial-hero  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
}
.editorial-hero .feature  {
  min-height: 460px;
}
.editorial-hero .feature-copy  {
  background: linear-gradient(180deg, transparent, rgba(132, 85, 56, .94));
}
.editorial-grid  {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 20px;
}
.editorial-grid .article-matrix  {
  grid-template-columns: repeat(2, 1fr);
}
/* 04 - Classic */
.home-classic  {
  background: #f7fafb;
}
.classic-grid  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}
.classic-grid .feature  {
  min-height: 330px;
  margin-bottom: 20px;
}
.classic-grid .feature-copy  {
  background: linear-gradient(180deg, transparent, rgba(0, 108, 84, .94));
}
/* 05 - Panorama */
.home-wide  {
  background: linear-gradient(180deg, rgba(0, 154, 214, .10), #f3f7fa 430px);
}
.wide-hero  {
  margin-top: 18px;
  height: 430px;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0, 154, 214, .16);
  box-shadow: 0 12px 30px rgba(43, 68, 144, .08);
}
.wide-hero img  {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wide-hero .feature-copy  {
  top: 0;
  bottom: 0;
  width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(90deg, rgba(43, 68, 144, .96), rgba(43, 68, 144, .58), transparent);
}
.wide-columns  {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
}
/* 06 - Left Rail */
.home-left  {
  background: #f4f8fa;
}
.left-layout  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
}
.left-rail  {
  display: grid;
  align-content: start;
  gap: 16px;
}
.left-main .feature  {
  min-height: 324px;
  margin-bottom: 20px;
}
/* 07 - Topic Cards */
.home-cards  {
  background: linear-gradient(180deg, #fff, rgba(0, 154, 214, .08) 360px, #f3f7fa 361px);
}
.topic-grid  {
  margin-top: 18px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.topic  {
  min-height: 178px;
  padding: 24px;
  color: #fff;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 14px 28px rgba(43, 68, 144, .12);
}
.topic:nth-child(2)  {
  background: linear-gradient(135deg, var(--gold), var(--brown));
}
.topic:nth-child(3)  {
  background: linear-gradient(135deg, var(--green), var(--cyan));
}
.topic:nth-child(4)  {
  background: linear-gradient(135deg, var(--blue), var(--navy));
}
.topic strong  {
  display: block;
  margin-bottom: 12px;
  font-size: 28px;
}
.topic span  {
  line-height: 1.7;
  opacity: .92;
}
.home-cards .article-matrix  {
  grid-template-columns: repeat(4, 1fr);
}
/* 08 - Balanced Portal */
.home-balanced  {
  background: linear-gradient(180deg, rgba(0, 154, 214, .10), rgba(66, 106, 179, .06) 360px, #f3f7fa 361px);
}
.balanced-hero  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 230px 1fr 330px;
  gap: 18px;
}
.balanced-hero .feature  {
  min-height: 350px;
  display: grid;
  grid-template-rows: 350px 82px;
}
.balanced-hero .feature-copy  {
  bottom: 82px;
}
.balanced-content  {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 20px;
}
.expert-list  {
  padding: 12px 16px 16px;
  display: grid;
  gap: 10px;
}
.expert-list a  {
  min-height: 48px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
}
.expert-list img  {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.expert-list span  {
  font-weight: 900;
}
.expert-list em  {
  color: var(--brown);
  font-size: 12px;
  font-style: normal;
}
.tool-stack  {
  padding: 14px;
  display: grid;
  gap: 10px;
}
/* Structural redesign helpers */
.s-paper  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 260px 1fr 360px;
  grid-template-areas:
    "left lead right"
    "left articles right"
    "draw draw right";
  gap: 18px;
}
.s-paper-left  {
  grid-area: left;
}
.s-paper-lead  {
  grid-area: lead;
}
.s-paper-right  {
  grid-area: right;
  display: grid;
  align-content: start;
  gap: 16px;
}
.s-paper-articles  {
  grid-area: articles;
}
.s-paper-draw  {
  grid-area: draw;
}
.s-terminal  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 310px 1fr 310px;
  grid-template-areas:
    "nav stats side"
    "nav draws side"
    "nav trends articles";
  gap: 18px;
}
.s-terminal-nav  {
  grid-area: nav;
}
.s-terminal-stats  {
  grid-area: stats;
  margin: 0;
}
.s-terminal-draws  {
  grid-area: draws;
}
.s-terminal-trends  {
  grid-area: trends;
}
.s-terminal-articles  {
  grid-area: articles;
}
.s-terminal-side  {
  grid-area: side;
  display: grid;
  align-content: start;
  gap: 16px;
}
.s-terminal .draw-grid  {
  grid-template-columns: repeat(3, 1fr);
}
.s-terminal .article-matrix  {
  grid-template-columns: 1fr;
}
.s-terminal .trend-grid  {
  grid-template-columns: repeat(4, 1fr);
}
.s-mag  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  grid-template-areas:
    "cover side"
    "cover articles"
    "nav articles";
  gap: 18px;
}
.s-mag-cover  {
  grid-area: cover;
  min-height: 560px;
}
.s-mag-side  {
  grid-area: side;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.s-mag-nav  {
  grid-area: nav;
}
.s-mag-articles  {
  grid-area: articles;
}
.s-mag .article-matrix  {
  grid-template-columns: repeat(2, 1fr);
}
.s-classic  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 250px 1fr 320px;
  grid-template-areas:
    "left center right"
    "left draw right"
    "left article article";
  gap: 18px;
}
.s-classic-left  {
  grid-area: left;
  display: grid;
  align-content: start;
  gap: 16px;
}
.s-classic-center  {
  grid-area: center;
}
.s-classic-right  {
  grid-area: right;
  display: grid;
  align-content: start;
  gap: 16px;
}
.s-classic-draw  {
  grid-area: draw;
}
.s-classic-article  {
  grid-area: article;
}
.s-cinema  {
  margin-top: 18px;
}
.s-cinema-hero  {
  height: 460px;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0, 154, 214, .16);
}
.s-cinema-hero img  {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s-cinema-hero .feature-copy  {
  top: 0;
  bottom: 0;
  width: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(90deg, rgba(43,68,144,.96), rgba(43,68,144,.55), transparent);
}
.s-cinema-grid  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
}
.s-workbench  {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: calc(100vh - 34px);
}
.s-workbench-sidebar  {
  padding: 18px;
  background: #fff;
  border-right: 1px solid rgba(0,154,214,.16);
  display: grid;
  align-content: start;
  gap: 16px;
}
.s-workbench-main  {
  padding: 18px 0 0;
}
.s-workbench-main .shell  {
  width: 1060px;
}
.s-workbench .masthead,
.s-workbench .mainnav  {
  display: none;
}
.s-workbench-brand img  {
  width: 168px;
  margin-bottom: 8px;
}
.s-topic  {
  margin-top: 18px;
}
.s-topic-board  {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.s-topic-main  {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
}
.s-topic-stack  {
  display: grid;
  gap: 18px;
}
.s-feed  {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  gap: 16px;
}
.s-feed-center  {
  display: grid;
  gap: 16px;
}
.s-feed .feature  {
  min-height: 300px;
}
.s-feed .draw-grid  {
  grid-template-columns: repeat(2, 1fr);
}
.s-feed .article-matrix  {
  grid-template-columns: repeat(2, 1fr);
}
.feature.tall  {
  min-height: 520px;
}
.feature.short  {
  min-height: 300px;
}
.panel + .panel,
.section + .section  {
  margin-top: 16px;
}