*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* primary */
  --color-primary-500: #ecd227;
  --color-primary-alpha-10: rgba(236, 210, 39, 0.1);

  /* neutral (dark UI surfaces) */
  --color-neutral-50: #282828;
  --color-neutral-200: #464646;
  --color-neutral-600: #656565;
  --color-neutral-900: #0d0d0d;

  /* white alpha */
  --color-white-alpha-60: rgba(255, 255, 255, 0.6);

  /* hairline / wash on dark surfaces */
  --color-black-alpha-5: rgba(255, 255, 255, 0.05);
  --color-black-alpha-10: rgba(255, 255, 255, 0.1);
  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
  --color-black-alpha-30: rgba(0, 0, 0, 0.3);

  /* text */
  --text-primary: #fff;
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-placeholder: rgba(255, 255, 255, 0.35);
  --text-on-dark: #fff;
  --text-on-dark-secondary: rgba(255, 255, 255, 0.55);
  --dot-on-dark: rgba(255, 255, 255, 0.3);

  /* layout */
  --layout-max-width: 1280px;
  --layout-padding-x: 16px;
  --hero-width: 1420px;
  --hero-active-width: 1280px;
  --hero-active-height: 350px;
  --hero-side-width: 1050px;
  --hero-side-height: 288px;

  /* surface */
  --surface-input: rgba(255, 255, 255, 0.05);
  --surface-foreground: #282828;

  /* page */
  --page-bg: #0f0f0f;
  --accent-pink: #ea1e61;

  /* scrollbar */
  --scroll-size: 8px;
  --scroll-thumb: rgba(255, 255, 255, 0.22);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.38);
  --scroll-thumb-active: rgba(236, 210, 39, 0.72);
  --scroll-track: var(--page-bg);

  /* rank accents */
  --rank-1: #ffcd9a;
  --rank-2: #cce9ff;
  --rank-3: #ffbfa4;
}

@media (max-width: 768px) {
  :root {
    --scroll-size: 5px;
  }
}

body {
  margin: 0;
}
a {
  text-decoration: none;
}

.page-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 30px 0;
}

.layout-section {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

@media (max-width: 1280px) {
  .page-main {
    gap: 48px;
    padding: 24px 0;
  }
}

@media (max-width: 768px) {
  .layout-section {
    padding-left: var(--layout-padding-x);
    padding-right: var(--layout-padding-x);
    box-sizing: border-box;
  }

  .page-main {
    gap: 18px;
    padding: 12px 0 32px;
  }
}

/* 语义化板块/卡片标题（#16 H-03/H-04）：沿用原 class 样式，仅消除 h2/h3 默认边距 */
h2.section-title--sm,
h3.media-card__title,
h3.gossip-feature__title {
  margin: 0;
}

/* 视觉隐藏但可被爬虫/读屏读取（首页 SEO H1，#5 H-01） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}