/* ==========================================================================
   jsscapp.com — 极速竞技
   骨架：竞技场节奏表（tempo sheet）· 白底大字 + 蓝色节拍网格
   ========================================================================== */

body.jj-body { background: #f7f8fa; --jj-blue: #1a4fd6; --jj-ink: #0d1220; }

.jj-hero { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.jj-hero .container { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 46px; align-items: center; padding: 58px 0 62px; }
.jj-k { display: inline-block; padding: 4px 12px; border-radius: 4px; background: var(--jj-ink); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; }
.jj-hero h1 { margin-top: 20px; font-size: clamp(38px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -.04em; color: var(--jj-ink); }
.jj-hero h1 span { display: block; font-family: var(--sans-num); font-size: .92em; color: var(--jj-blue); letter-spacing: -.01em; }
.jj-lead { margin-top: 20px; max-width: 40ch; font-size: 15px; line-height: 2.05; color: var(--muted); }
.jj-lead b { color: var(--ink); }
.jj-hero .hero-actions { margin-top: 28px; }
.jj-hero .btn-primary { background: var(--jj-blue); box-shadow: 0 16px 32px -18px rgba(26, 79, 214, .8); }
.jj-hero .btn-room strong { color: var(--jj-blue); }
.jj-figure { margin: 0; }
.jj-figure img { width: 100%; height: auto; border-radius: 12px; }

/* 条件条 */
.jj-bar { background: var(--jj-ink); color: #fff; }
.jj-bar .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.jj-bar div { padding: 18px 20px; border-right: 1px solid rgba(255, 255, 255, .1); }
.jj-bar div:last-child { border-right: 0; }
.jj-bar b { display: block; font-family: var(--sans-num); font-size: 17px; letter-spacing: .04em; color: #7fa6ff; }
.jj-bar span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .55); }

/* 区块 */
.jj-sec { padding: 80px 0; }
.jj-sec.alt { background: #eef1f7; border-block: 1px solid rgba(13, 18, 32, .07); }
.jj-sec.ink { background: var(--jj-ink); color: #fff; }
.jj-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 38px; }
.jj-head .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--jj-blue); white-space: nowrap; }
.jj-head h2 { font-size: clamp(23px, 2.9vw, 33px); letter-spacing: -.025em; color: var(--jj-ink); }
.jj-head .line { flex: 1; height: 1px; background: rgba(13, 18, 32, .14); }
.jj-sec.ink .jj-head .k { color: #7fa6ff; }
.jj-sec.ink .jj-head h2 { color: #fff; }
.jj-sec.ink .jj-head .line { background: rgba(255, 255, 255, .16); }
.jj-sub { max-width: 720px; margin: -22px 0 38px; font-size: 14.5px; line-height: 2; color: var(--muted); }
.jj-sec.ink .jj-sub { color: rgba(255, 255, 255, .6); }

/* 四个条件 */
.cond { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cond article { padding: 28px 26px; background: #fff; border: 1px solid rgba(13, 18, 32, .1); border-radius: 10px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; }
.cond .n { font-family: var(--sans-num); font-size: 30px; font-weight: 700; color: rgba(26, 79, 214, .22); line-height: 1; }
.cond h3 { font-size: 17px; color: var(--jj-ink); }
.cond p { margin-top: 7px; font-size: 13.5px; line-height: 1.95; color: var(--muted); }

/* 节奏板 */
.tempo { display: grid; gap: 10px; }
.tempo > div { display: grid; grid-template-columns: 128px minmax(0, 1fr) 96px; gap: 22px; align-items: center; padding: 16px 18px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px; }
.tempo b { font-size: 14.5px; color: #fff; }
.tempo .track { display: flex; gap: 4px; }
.tempo .track i { flex: 1; height: 22px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.tempo .track i.on { background: #7fa6ff; }
.tempo > div:nth-child(2) .track i.on { background: #d7ef4b; }
.tempo > div:nth-child(3) .track i.on { background: #ff5a2c; }
.tempo > div:nth-child(4) .track i.on { background: #4fc3a8; }
.tempo > div:nth-child(5) .track i.on { background: #e8b95c; }
.tempo span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: rgba(255, 255, 255, .45); text-align: right; }

/* 匹配流程 */
.match { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(13, 18, 32, .1); background: #fff; border-radius: 10px; overflow: hidden; }
.match article { padding: 26px 22px; border-right: 1px solid rgba(13, 18, 32, .07); position: relative; }
.match article:last-child { border-right: 0; }
.match b { display: inline-block; padding: 2px 8px; border-radius: 3px; background: rgba(26, 79, 214, .1); color: var(--jj-blue); font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; }
.match h3 { margin-top: 12px; font-size: 16px; color: var(--jj-ink); }
.match p { margin-top: 7px; font-size: 12.5px; line-height: 1.85; color: var(--muted); }/* 十秒时间轴 */
.tick { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-bottom: 30px; }
.tick div { text-align: center; }
.tick .bar { height: 86px; border-radius: 4px 4px 0 0; background: rgba(13, 18, 32, .07); position: relative; display: flex; align-items: flex-end; }
.tick .bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--jj-blue); }
.tick div:nth-child(1) .bar i { height: 32%; background: #b9c8ef; }
.tick div:nth-child(2) .bar i { height: 48%; background: #93aaea; }
.tick div:nth-child(3) .bar i { height: 66%; background: #6d8ce4; }
.tick div:nth-child(4) .bar i { height: 88%; background: #4a6cdc; }
.tick div:nth-child(5) .bar i { height: 100%; }
.tick div:nth-child(6) .bar i { height: 94%; }
.tick div:nth-child(7) .bar i { height: 76%; background: #2c5cd8; }
.tick div:nth-child(8) .bar i { height: 58%; background: #4a6cdc; }
.tick div:nth-child(9) .bar i { height: 40%; background: #6d8ce4; }
.tick div:nth-child(10) .bar i { height: 26%; background: #93aaea; }
.tick b { display: block; margin-top: 10px; font-family: var(--sans-num); font-size: 13px; color: var(--jj-ink); }
.tick span { display: block; font-size: 10px; color: var(--muted-2); }
.tick-cap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tick-cap div { padding: 18px 20px; border-left: 2px solid var(--jj-blue); background: #fff; font-size: 13.5px; line-height: 1.9; color: var(--muted); }
.tick-cap b { display: block; color: var(--jj-ink); font-size: 14px; }

/* 观战 */
.watch { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 46px; align-items: center; }
.watch h3 { font-size: 21px; color: var(--jj-ink); }
.watch p { margin-top: 12px; font-size: 14.5px; line-height: 2; color: var(--muted); }
.watch ol { counter-reset: wt; display: grid; gap: 10px; margin-top: 22px; }
.watch li { counter-increment: wt; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.watch li::before { content: counter(wt); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--jj-blue); color: #fff; font-family: var(--sans-num); font-size: 12px; }
.watch-card { padding: 30px; background: var(--jj-ink); border-radius: 12px; color: #fff; }
.watch-card .k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: #7fa6ff; }
.watch-card ul { margin-top: 16px; display: grid; gap: 12px; }
.watch-card li { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.watch-card li span { font-family: var(--mono); font-size: 10.5px; color: rgba(255, 255, 255, .45); letter-spacing: .08em; }

/* 数据砖 */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tiles div { padding: 26px 22px; background: #fff; border: 1px solid rgba(13, 18, 32, .1); border-radius: 10px; }
.tiles b { display: block; font-family: var(--sans-num); font-size: 34px; line-height: 1; color: var(--jj-blue); letter-spacing: -.01em; }
.tiles span { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.8; }

/* 失分点 */
.lose { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; counter-reset: ls; }
.lose > div { counter-increment: ls; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(13, 18, 32, .1); }
.lose > div::before { content: counter(ls, decimal-leading-zero); font-family: var(--sans-num); font-size: 14px; color: var(--jj-blue); }
.lose h3 { font-size: 15px; color: var(--jj-ink); }
.lose p { margin-top: 5px; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* 训练 */
.drills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.drills article { padding: 28px 24px; background: #fff; border: 1px solid rgba(13, 18, 32, .1); border-radius: 10px; }
.drills .k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--jj-blue); }
.drills h3 { margin-top: 10px; font-size: 17px; color: var(--jj-ink); }
.drills p { margin-top: 8px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.drills .rep { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(13, 18, 32, .08); font-family: var(--sans-num); font-size: 13px; letter-spacing: .06em; color: var(--jj-blue); }

/* 礼仪 */
.etiq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.etiq div { padding: 18px 20px; background: rgba(255, 255, 255, .05); border-left: 2px solid #7fa6ff; font-size: 13.5px; line-height: 1.9; color: rgba(255, 255, 255, .78); }
.etiq div b { color: #fff; }

/* 术语 */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.terms div { padding: 16px 0; border-bottom: 1px solid rgba(13, 18, 32, .1); }
.terms dt { font-size: 14.5px; font-weight: 700; color: var(--jj-ink); }
.terms dd { margin: 4px 0 0; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* 相关 */
.jj-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jj-rel a { padding: 22px 22px; background: #fff; border: 1px solid rgba(13, 18, 32, .1); border-radius: 10px; transition: border-color .18s, transform .18s; }
.jj-rel a:hover { border-color: var(--jj-blue); transform: translateY(-2px); }
.jj-rel b { display: block; font-size: 15px; color: var(--jj-ink); }
.jj-rel span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* 深浅适配 */
.jj-body .site-cta { background: var(--jj-ink); }
.jj-body .site-cta .btn-primary { background: var(--jj-blue); }
.jj-sec.ink .faq { border-top-color: rgba(255, 255, 255, .16); }
.jj-sec.ink .faq details { border-bottom-color: rgba(255, 255, 255, .08); }
.jj-sec.ink .faq summary { color: #fff; }
.jj-sec.ink .faq .a { color: rgba(255, 255, 255, .6); }
.jj-sec.ink .faq .a a { color: #7fa6ff; border-bottom-color: rgba(127, 166, 255, .3); }

@media (max-width: 1000px) {
  .jj-hero .container { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 44px 0 48px; }
  .jj-figure { max-width: 560px; }
  .cond { grid-template-columns: minmax(0, 1fr); }
  .match { grid-template-columns: 1fr 1fr; }
  .match article:nth-child(2) { border-right: 0; }
  .match article:nth-child(-n+2) { border-bottom: 1px solid rgba(13, 18, 32, .07); }
  .watch { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tiles, .drills { grid-template-columns: 1fr 1fr; }
  .tick-cap { grid-template-columns: minmax(0, 1fr); }
  .lose, .terms { grid-template-columns: minmax(0, 1fr); }
  .jj-rel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .jj-sec { padding: 56px 0; }
  .jj-bar .container { grid-template-columns: 1fr 1fr; }
  .jj-bar div:nth-child(2) { border-right: 0; }
  .jj-bar div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .tempo > div { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .tempo span { display: none; }
  .tick { gap: 3px; }
  .tick span { display: none; }
  .tiles, .drills { grid-template-columns: minmax(0, 1fr); }
  .etiq { grid-template-columns: minmax(0, 1fr); }
  .match { grid-template-columns: minmax(0, 1fr); }
  .match article { border-right: 0; border-bottom: 1px solid rgba(13, 18, 32, .07); }
  .match article:last-child { border-bottom: 0; }
}