:root{
  --site-bg: #080b13;
  --site-panel: rgba(15, 23, 42, 0.7);
  --site-border: rgba(148, 163, 184, 0.2);
  --site-text: #f8fafc;
  --site-muted: rgba(226, 232, 240, 0.75);
  --site-accent: #4ade80;
  --site-accent-2: #38bdf8;
}

body.official-site{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(16,185,129,0.28), transparent 60%),
    radial-gradient(1000px 640px at 85% 0%, rgba(59,130,246,0.28), transparent 60%),
    linear-gradient(135deg, rgba(15,23,42,0.95), rgba(8,11,19,0.95)),
    var(--site-bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--site-text);
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

.official-site a{color: inherit}

.official-site .site-shell{
  width:min(1200px, 92vw);
  margin:0 auto;
  padding: 48px 0 90px;
}

.official-site .site-hero{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items:center;
  border: 1px solid var(--site-border);
  border-radius: 26px;
  padding: 32px;
  background: var(--site-panel);
  box-shadow: 0 24px 60px rgba(8, 11, 18, 0.6);
  position:relative;
  overflow:hidden;
}

.official-site .site-hero::after{
  content:"";
  position:absolute;
  inset:auto -20% -40% auto;
  width:320px;
  height:320px;
  border-radius: 30%;
  border: 1px dashed rgba(148, 163, 184, 0.25);
  transform: rotate(18deg);
  opacity:0.5;
}

.official-site .site-hero-content{
  display:flex;
  gap:18px;
  align-items:center;
}

.official-site .site-badge{
  width:68px;
  height:68px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(74,222,128,0.6), rgba(56,189,248,0.6));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 30px;
  font-weight: 800;
  color: #ecfeff;
  border: 1px solid rgba(148,163,184,0.35);
  flex: 0 0 auto;
}

.official-site .site-hero-title{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.official-site .site-hero-sub{
  color: var(--site-muted);
  font-size: 14px;
  line-height: 1.7;
  margin-top: 6px;
  max-width: 460px;
}

.official-site .site-hero-actions{
  display:flex;
  justify-content:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.official-site .site-cta{
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(8, 11, 19, 0.6);
  border: 1px solid rgba(148,163,184,0.25);
  min-width: 180px;
}

.official-site .site-cta-label{font-size:12px; color: var(--site-muted)}
.official-site .site-cta-value{font-size:20px; font-weight:700; margin-top:4px}
.official-site .site-cta-meta{font-size:12px; color: rgba(148,163,184,0.85); margin-top: 2px}

.official-site .site-section-title{
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.8);
}

.official-site .site-status{
  margin-top: 30px;
  display:grid;
  gap:16px;
}

.official-site .site-stats{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
}

.official-site .site-stat{
  padding: 16px;
  border-radius: 16px;
  background: var(--site-panel);
  border: 1px solid var(--site-border);
}

.official-site .site-stat-label{
  font-size:12px;
  color: rgba(148,163,184,0.8);
}

.official-site .site-stat-value{
  font-size:20px;
  font-weight:700;
  margin-top:6px;
}

.official-site .site-stat-bar{
  margin-top: 10px;
  height:6px;
  border-radius: 999px;
  background: rgba(148,163,184,0.2);
  overflow:hidden;
}

.official-site .site-stat-bar span{
  display:block;
  height:100%;
  background: linear-gradient(90deg, var(--site-accent), var(--site-accent-2));
}

.official-site .site-updated{
  font-size: 12px;
  color: rgba(148,163,184,0.7);
}

.official-site .site-charts{
  margin-top: 24px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}

.official-site .site-chart{
  padding: 16px;
  border-radius: 18px;
  background: var(--site-panel);
  border: 1px solid var(--site-border);
  color: var(--site-accent-2);
}

.official-site .site-chart-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 12px;
  color: rgba(148,163,184,0.8);
  margin-bottom: 12px;
}

.official-site .site-chart svg{width:100%; height:auto}

.official-site .site-chart-empty{
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(148,163,184,0.6);
  font-size: 12px;
  border:1px dashed rgba(148,163,184,0.25);
  border-radius: 12px;
}

.official-site .site-info{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.official-site .site-info-card{
  padding: 18px;
  border-radius: 18px;
  background: var(--site-panel);
  border: 1px solid var(--site-border);
}

.official-site .site-info-title{
  font-size: 12px;
  color: rgba(148,163,184,0.8);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.official-site .site-info-body{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--site-muted);
  white-space: pre-wrap;
}

.official-site .site-tags{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.official-site .site-tag{
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  border: 1px solid rgba(148,163,184,0.25);
  font-size: 12px;
  color: rgba(226,232,240,0.8);
}

@media (min-width: 900px){
  .official-site .site-hero-actions{justify-content:flex-end}
}