/* ==========================================================================
   盛煌娱乐 · 页面区块样式（pages.css）
   --------------------------------------------------------------------------
   依赖 arena.css 的设计令牌与组件；本文件只写各业务区块的专属版式。
   所有页面首屏统一用「竞技场分屏 + 六边形信号台」，与站群其他模板不同。
   ========================================================================== */

/* ---------- 首页 Hero：竞技场分屏 ---------- */
.sh-hero { padding: 54px 0 40px; }
.sh-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.sh-hero__copy h1 { font-family: var(--sh-display); font-weight: 900; font-size: clamp(2.1rem, 5.4vw, 3.7rem); line-height: 1.08; letter-spacing: -1px; margin: 18px 0; }
.sh-hero__copy h1 span { color: var(--sh-brass-hi); display: block; }
.sh-lead { color: var(--sh-ink-2); font-size: 1.08rem; max-width: 560px; }
.sh-hero__acts { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 22px; }
.sh-hero__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-hero__tags li { font-family: var(--sh-mono); font-size: .78rem; letter-spacing: .5px; color: var(--sh-ink-2); padding: 6px 13px; clip-path: var(--sh-bevel-sm); background: rgba(255, 255, 255, .04); border: 1px solid var(--sh-line); }

/* 信号台面板 */
.sh-signal { position: relative; background: linear-gradient(160deg, var(--sh-panel-solid), #0b1826); clip-path: var(--sh-bevel); border: 1px solid var(--sh-line); padding: 0 0 22px; box-shadow: var(--sh-glow-brass); }
.sh-signal__top { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--sh-line); font-family: var(--sh-mono); font-size: .74rem; letter-spacing: 1.5px; color: var(--sh-ink-2); }
.sh-signal__top .sh-co { margin-left: auto; color: var(--sh-ink-3); }
.sh-pulse { width: 9px; height: 9px; border-radius: 50%; background: #ff5a4d; box-shadow: 0 0 0 0 rgba(255, 90, 77, .6); animation: sh-pulse 1.8s infinite; }
@keyframes sh-pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 90, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 77, 0); } }
@media (prefers-reduced-motion: reduce) { .sh-pulse { animation: none; } }
.sh-signal__stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 20px; }
.sh-signal__cell { aspect-ratio: 1; clip-path: var(--sh-hex); background: linear-gradient(150deg, rgba(55, 210, 217, .2), rgba(123, 92, 255, .22)); display: grid; place-items: center; font-family: var(--sh-display); font-weight: 900; color: var(--sh-brass-hi); font-size: 1.1rem; border: 0; }
.sh-signal__cell--on { background: linear-gradient(150deg, var(--sh-brass-hi), var(--sh-brass)); color: #1a1206; }
.sh-signal__list { padding: 6px 20px 0; }
.sh-signal__list li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--sh-line); }
.sh-signal__list li:last-child { border-bottom: 0; }
.sh-signal__list time { font-family: var(--sh-mono); font-size: .74rem; color: var(--sh-cyan); letter-spacing: 1px; white-space: nowrap; }
.sh-signal__list b { font-weight: 600; }
.sh-signal__list i { margin-left: auto; font-style: normal; font-size: .82rem; color: var(--sh-ink-3); }
.sh-signal__foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 20px 0; padding-top: 16px; border-top: 1px solid var(--sh-line); }
.sh-signal__foot div { text-align: center; }
.sh-signal__foot span { display: block; font-family: var(--sh-mono); font-size: .66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--sh-ink-3); }
.sh-signal__foot b { font-family: var(--sh-display); font-weight: 800; font-size: 1.5rem; color: var(--sh-brass-hi); }

/* 首屏数据条 */
.sh-hero__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--sh-line); }
.sh-hero__strip b { font-family: var(--sh-display); font-weight: 900; font-size: 2rem; color: var(--sh-ink); }
.sh-hero__strip b em { font-style: normal; font-size: .9rem; color: var(--sh-cyan); margin-left: 3px; }
.sh-hero__strip span { display: block; color: var(--sh-ink-2); font-size: .9rem; margin-top: 4px; }

/* ---------- 业务矩阵 ---------- */
.sh-matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .sh-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sh-matrix { grid-template-columns: 1fr; } }

/* ---------- 双闸门：开户 / 注册登录 ---------- */
.sh-gates { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .sh-gates { grid-template-columns: 1fr; } }
.sh-gate { position: relative; padding: 32px 30px; background: linear-gradient(165deg, rgba(55, 210, 217, .06), rgba(123, 92, 255, .04)); clip-path: var(--sh-bevel); border: 1px solid var(--sh-line); overflow: hidden; }
.sh-gate::before { content: attr(data-code); position: absolute; right: 12px; top: 4px; font-family: var(--sh-display); font-weight: 900; font-size: 4.2rem; color: rgba(233, 213, 154, .08); letter-spacing: -2px; }
.sh-gate h3 { font-family: var(--sh-display); font-weight: 800; font-size: 1.5rem; margin: 14px 0 12px; }
.sh-gate > p { color: var(--sh-ink-2); }
.sh-gate ol { margin: 20px 0 24px; display: grid; gap: 12px; }
.sh-gate ol li { padding-left: 34px; position: relative; color: var(--sh-ink); font-size: .96rem; }
.sh-gate ol li::before { content: counter(sh-gate); counter-increment: sh-gate; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; clip-path: var(--sh-hex); background: var(--sh-brass); color: #1a1206; font-family: var(--sh-mono); font-size: .76rem; display: grid; place-items: center; }
.sh-gate ol { counter-reset: sh-gate; }

/* ---------- 赛程轨道 ---------- */
.sh-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .sh-rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sh-rail { grid-template-columns: 1fr; } }
.sh-rail__item { padding: 24px 22px; background: rgba(255, 255, 255, .02); clip-path: var(--sh-bevel-sm); border: 1px solid var(--sh-line); transition: border-color .2s, transform .2s; }
.sh-rail__item:hover { border-color: var(--sh-line-cyan); transform: translateY(-3px); }
.sh-rail__day { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sh-rail__day span { font-family: var(--sh-mono); font-size: .72rem; letter-spacing: 1px; color: var(--sh-cyan); }
.sh-rail__day b { margin-left: auto; font-family: var(--sh-display); font-size: .82rem; color: var(--sh-brass); padding: 3px 10px; clip-path: var(--sh-bevel-sm); background: rgba(201, 154, 69, .12); }
.sh-rail__item h3 { font-family: var(--sh-display); font-weight: 800; font-size: 1.12rem; margin-bottom: 8px; }
.sh-rail__item > p { color: var(--sh-ink-2); font-size: .92rem; }
.sh-rail__meta { margin-top: 14px; font-family: var(--sh-mono); font-size: .76rem; color: var(--sh-brass-hi); letter-spacing: .5px; }

/* ---------- 案例 ---------- */
.sh-case { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: center; padding: 30px; background: linear-gradient(160deg, var(--sh-panel-solid), #0c1826); clip-path: var(--sh-bevel); border: 1px solid var(--sh-line); }
@media (max-width: 860px) { .sh-case { grid-template-columns: 1fr; } }
.sh-case__visual { aspect-ratio: 4 / 3; clip-path: var(--sh-bevel); background:
  radial-gradient(120% 120% at 20% 10%, rgba(55, 210, 217, .3), transparent 60%),
  radial-gradient(120% 120% at 90% 90%, rgba(123, 92, 255, .28), transparent 55%),
  repeating-linear-gradient(60deg, rgba(233, 213, 154, .08) 0 2px, transparent 2px 22px), #0a1420;
  display: grid; place-items: center; }
.sh-case__visual span { font-family: var(--sh-display); font-weight: 900; font-size: 3rem; color: var(--sh-brass-hi); letter-spacing: -1px; text-shadow: var(--sh-glow-cyan); }
.sh-case__body h3 { font-family: var(--sh-display); font-weight: 800; font-size: 1.5rem; margin: 12px 0 12px; }
.sh-case__body > p { color: var(--sh-ink-2); }
.sh-case__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.sh-case__tags li { font-family: var(--sh-mono); font-size: .74rem; color: var(--sh-cyan); padding: 5px 12px; clip-path: var(--sh-bevel-sm); background: rgba(55, 210, 217, .08); }
.sh-case__res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 18px; border-top: 1px solid var(--sh-line); }
.sh-case__res b { font-family: var(--sh-display); font-weight: 900; font-size: 1.7rem; color: var(--sh-brass-hi); display: block; }
.sh-case__res span { font-size: .82rem; color: var(--sh-ink-3); }

/* ---------- 动态日志 ---------- */
.sh-log { border-top: 1px solid var(--sh-line); }
.sh-log__row { display: grid; grid-template-columns: 130px 1fr 30px; gap: 20px; align-items: center; padding: 22px 4px; border-bottom: 1px solid var(--sh-line); transition: background .2s, padding .2s; }
.sh-log__row:hover { background: rgba(55, 210, 217, .05); padding-left: 14px; }
.sh-log__date { font-family: var(--sh-mono); font-size: .82rem; color: var(--sh-cyan); letter-spacing: 1px; }
.sh-log__title { font-weight: 600; font-size: 1.08rem; }
.sh-log__title span { display: block; font-weight: 400; font-size: .9rem; color: var(--sh-ink-2); margin-top: 4px; }
.sh-log__go { font-family: var(--sh-mono); color: var(--sh-brass); text-align: right; }
@media (max-width: 640px) { .sh-log__row { grid-template-columns: 1fr; gap: 6px; } .sh-log__go { display: none; } }

/* ---------- 主播 / 战队名册 ---------- */
.sh-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.sh-filter button { padding: 8px 18px; font-family: var(--sh-mono); font-size: .82rem; letter-spacing: .5px; color: var(--sh-ink-2); background: rgba(255, 255, 255, .03); border: 1px solid var(--sh-line); clip-path: var(--sh-bevel-sm); transition: all .2s; }
.sh-filter button[aria-pressed="true"] { color: #1a1206; background: linear-gradient(120deg, var(--sh-brass-hi), var(--sh-brass)); border-color: transparent; }
.sh-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .sh-roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sh-roster { grid-template-columns: 1fr; } }
.sh-tile { padding: 24px 22px; background: linear-gradient(165deg, var(--sh-panel-solid), #0c1826); clip-path: var(--sh-bevel); border: 1px solid var(--sh-line); }
.sh-tile__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sh-tile__avatar { width: 54px; height: 54px; clip-path: var(--sh-hex); background: linear-gradient(150deg, var(--sh-brass), var(--sh-violet)); display: grid; place-items: center; font-family: var(--sh-display); font-weight: 900; color: #fff; font-size: 1.2rem; }
.sh-tile__top b { font-family: var(--sh-display); font-weight: 800; font-size: 1.15rem; display: block; }
.sh-tile__top span { font-family: var(--sh-mono); font-size: .74rem; color: var(--sh-cyan); letter-spacing: .5px; }
.sh-tile p { color: var(--sh-ink-2); font-size: .92rem; }
.sh-tile__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--sh-line); font-family: var(--sh-mono); font-size: .76rem; color: var(--sh-ink-3); }
.sh-tile__meta b { color: var(--sh-brass-hi); }

/* ---------- 步骤流程 ---------- */
.sh-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
@media (max-width: 900px) { .sh-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sh-steps { grid-template-columns: 1fr; } }
.sh-step { padding: 26px 22px; background: rgba(255, 255, 255, .02); clip-path: var(--sh-bevel-sm); border: 1px solid var(--sh-line); position: relative; }
.sh-step__no { font-family: var(--sh-display); font-weight: 900; font-size: 2.4rem; color: rgba(233, 213, 154, .16); line-height: 1; }
.sh-step h3 { font-family: var(--sh-display); font-weight: 800; font-size: 1.12rem; margin: 10px 0 8px; }
.sh-step p { color: var(--sh-ink-2); font-size: .9rem; }

/* ---------- 工作台登录演示 ---------- */
.sh-login { max-width: 460px; margin-inline: auto; padding: 34px 30px; background: linear-gradient(165deg, var(--sh-panel-solid), #0b1826); clip-path: var(--sh-bevel); border: 1px solid var(--sh-line); box-shadow: var(--sh-glow-brass); }
.sh-login__tabs { display: flex; gap: 8px; margin-bottom: 26px; }
.sh-login__tabs button { flex: 1; padding: 11px; font-family: var(--sh-mono); font-size: .82rem; color: var(--sh-ink-2); background: rgba(255, 255, 255, .03); border: 1px solid var(--sh-line); clip-path: var(--sh-bevel-sm); }
.sh-login__tabs button[aria-selected="true"] { color: var(--sh-brass-hi); border-color: var(--sh-line-2); background: rgba(201, 154, 69, .1); }

/* ---------- 分屏（合规 + FAQ） ---------- */
.sh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .sh-split { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */
.sh-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding: 44px 40px; clip-path: var(--sh-bevel); background: linear-gradient(120deg, rgba(201, 154, 69, .16), rgba(55, 210, 217, .1) 60%, rgba(123, 92, 255, .14)); border: 1px solid var(--sh-line-2); }
.sh-cta h2 { font-family: var(--sh-display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 10px 0; }
.sh-cta p { color: var(--sh-ink-2); max-width: 520px; }
.sh-cta__acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 文章正文 ---------- */
.sh-article { max-width: 760px; margin-inline: auto; }
.sh-article h2 { font-family: var(--sh-display); font-weight: 800; font-size: 1.5rem; margin: 34px 0 14px; }
.sh-article h3 { font-family: var(--sh-display); font-weight: 800; font-size: 1.2rem; margin: 26px 0 10px; color: var(--sh-brass-hi); }
.sh-article p { color: var(--sh-ink); margin-bottom: 16px; }
.sh-article ul { margin: 0 0 18px; display: grid; gap: 10px; }
.sh-article ul li { padding-left: 24px; position: relative; color: var(--sh-ink-2); }
.sh-article ul li::before { content: "◆"; position: absolute; left: 0; color: var(--sh-cyan); font-size: .7rem; top: 4px; }
.sh-article__meta { font-family: var(--sh-mono); font-size: .8rem; color: var(--sh-ink-3); letter-spacing: 1px; margin-bottom: 24px; }
.sh-quote { padding: 20px 24px; border-left: 3px solid var(--sh-cyan); background: rgba(55, 210, 217, .06); color: var(--sh-ink); font-style: italic; margin: 22px 0; }

/* ---------- 404 ---------- */
.sh-404 { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: 18px; }
.sh-404 b { font-family: var(--sh-display); font-weight: 900; font-size: 6rem; color: var(--sh-brass-hi); line-height: 1; }
.sh-404 p { color: var(--sh-ink-2); }