/* 雷火体育CN · 共享样式 /assets/site.css */

:root{
  --lr-void:#0A0C0F;
  --lr-slate:#14181F;
  --lr-gun:#1E242D;
  --lr-ember:#B01F1B;
  --lr-flame:#E24A22;
  --lr-amber:#FF9424;
  --lr-cool:#3D9BFF;
  --lr-teal:#123F44;
  --lr-violet:#3A2149;
  --lr-wine:#4A1A24;
  --lr-silver:#C7CDD6;
  --lr-ink:#EDF1F6;
  --lr-mist:#8C97A6;
  --lr-line:rgba(199,205,214,.16);
  --lr-line-strong:rgba(199,205,214,.34);
  --lr-font-body:"Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --lr-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --lr-wrap:1240px;
  --lr-gutter:24px;
  --lr-spine:44px;
  --lr-radius:6px;
  --lr-ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
table{border-collapse:collapse;width:100%}

body{
  background-color:var(--lr-void);
  background-image:
    linear-gradient(to right, rgba(199,205,214,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(199,205,214,.055) 1px, transparent 1px);
  background-size:96px 96px;
  color:var(--lr-ink);
  font-family:var(--lr-font-body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

:focus-visible{outline:2px solid var(--lr-amber);outline-offset:3px;border-radius:2px}

.lr-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lr-mono{font-family:var(--lr-font-mono);font-weight:500;letter-spacing:.04em}

/* ---------- 跳转链 ---------- */
.lr-skip{
  position:absolute;left:12px;top:-80px;z-index:200;
  padding:10px 18px;border-radius:var(--lr-radius);
  background:var(--lr-amber);color:var(--lr-void);
  font-weight:700;font-size:15px;
  transition:top .2s var(--lr-ease);
}
.lr-skip:focus{top:12px}

/* ---------- 头部框架 ---------- */
.lr-header{
  position:sticky;top:0;z-index:80;
  background:linear-gradient(180deg,#0C0F13 0%,#0A0C0F 100%);
  border-bottom:1px solid var(--lr-line-strong);
}
.lr-header__grid{display:grid;grid-template-columns:var(--lr-spine) minmax(0,1fr)}

.lr-header__spine{
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--lr-line);
  background:linear-gradient(180deg,rgba(176,31,27,.28),rgba(10,12,15,0) 68%);
}
.lr-header__spine-text{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--lr-font-mono);font-size:11px;font-weight:500;
  letter-spacing:.28em;color:var(--lr-mist);
}

.lr-header__body{padding:0 var(--lr-gutter);min-width:0}

.lr-header__top{
  display:flex;align-items:center;gap:22px;
  padding:14px 0 12px;
  border-bottom:1px solid var(--lr-line);
  transition:padding .24s var(--lr-ease);
}

.lr-brand{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.lr-brand__main{
  font-size:20px;font-weight:900;line-height:1.15;letter-spacing:-.01em;
  transform:skewX(-2deg);color:var(--lr-ink);
}
.lr-brand__sub{
  font-family:var(--lr-font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--lr-mist);text-transform:uppercase;
}

.lr-header__meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--lr-font-mono);font-size:12px;letter-spacing:.05em;
  color:var(--lr-mist);white-space:nowrap;
  transition:opacity .2s var(--lr-ease);
}
.lr-header__ver{color:var(--lr-amber);font-weight:500}
.lr-header__meta-sep{color:var(--lr-line-strong)}

.lr-header__util{margin-left:auto;display:flex;align-items:center;gap:8px;transition:opacity .2s var(--lr-ease)}

.lr-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border:1px solid var(--lr-line);border-radius:999px;
  font-family:var(--lr-font-mono);font-size:11px;letter-spacing:.05em;
  color:var(--lr-silver);white-space:nowrap;
  transition:border-color .2s var(--lr-ease),color .2s var(--lr-ease);
}
.lr-chip:hover{border-color:var(--lr-amber);color:var(--lr-amber)}
.lr-chip--cool:hover{border-color:var(--lr-cool);color:var(--lr-cool)}
.lr-chip--static{color:var(--lr-mist);cursor:default}
.lr-chip--static:hover{border-color:var(--lr-line);color:var(--lr-mist)}

.lr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:1px solid transparent;border-radius:4px;
  font-size:15px;font-weight:700;line-height:1.2;cursor:pointer;
  transition:background-color .18s var(--lr-ease),color .18s var(--lr-ease),border-color .18s var(--lr-ease),transform .18s var(--lr-ease);
}
.lr-btn--flame{background:var(--lr-flame);color:var(--lr-void)}
.lr-btn--flame:hover{background:var(--lr-amber)}
.lr-btn--cool{background:var(--lr-cool);color:var(--lr-void)}
.lr-btn--cool:hover{background:#66B2FF}
.lr-btn--ghost{background:transparent;border-color:var(--lr-line-strong);color:var(--lr-ink)}
.lr-btn--ghost:hover{border-color:var(--lr-amber);color:var(--lr-amber)}
.lr-btn:active{transform:translateY(1px)}
.lr-header__cta{flex:0 0 auto}

/* 移动目录按钮 */
.lr-navtoggle{
  display:none;align-items:center;gap:9px;
  padding:8px 13px;border:1px solid var(--lr-line-strong);border-radius:4px;
  background:var(--lr-slate);color:var(--lr-ink);cursor:pointer;
  font-family:var(--lr-font-mono);font-size:12px;letter-spacing:.14em;
  flex:0 0 auto;
}
.lr-navtoggle__bars{display:inline-flex;flex-direction:column;gap:4px}
.lr-navtoggle__bar{display:block;width:16px;height:2px;background:var(--lr-amber);transition:transform .2s var(--lr-ease)}
.lr-navtoggle[aria-expanded="true"] .lr-navtoggle__bar:first-child{transform:translateY(3px) rotate(45deg)}
.lr-navtoggle[aria-expanded="true"] .lr-navtoggle__bar:last-child{transform:translateY(-3px) rotate(-45deg)}
.lr-navtoggle:hover{border-color:var(--lr-amber);color:var(--lr-amber)}

/* 栏目索引 */
.lr-nav{display:block}
.lr-nav__list{display:flex;align-items:stretch;flex-wrap:wrap}
.lr-nav__item{display:flex}
.lr-nav__link{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:9px 18px 10px;
  border-right:1px solid var(--lr-line);
  color:var(--lr-mist);
  transition:color .18s var(--lr-ease),background-color .18s var(--lr-ease),padding .24s var(--lr-ease);
}
.lr-nav__link:hover{color:var(--lr-ink);background:var(--lr-slate)}
.lr-nav__idx{font-family:var(--lr-font-mono);font-size:10px;letter-spacing:.2em;color:var(--lr-mist)}
.lr-nav__label{font-size:15px;line-height:1.3}
.lr-nav__link[aria-current="page"]{
  color:var(--lr-ink);
  background:linear-gradient(180deg,rgba(176,31,27,.30),rgba(176,31,27,.05));
}
.lr-nav__link[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--lr-ember);
}
.lr-nav__link[aria-current="page"] .lr-nav__idx{color:var(--lr-amber)}

/* 滚动进度 */
.lr-progress{height:2px;background:rgba(199,205,214,.08);overflow:hidden}
.lr-progress__bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--lr-ember),var(--lr-flame) 48%,var(--lr-amber));
}

/* 收起态 */
.lr-header[data-condensed] .lr-header__top{padding:7px 0}
.lr-header[data-condensed] .lr-header__meta,
.lr-header[data-condensed] .lr-header__util{display:none}
.lr-header[data-condensed] .lr-nav__link{padding:7px 18px 8px}

/* ---------- 页脚 ---------- */
.lr-footer{
  position:relative;
  margin-top:96px;
  background:linear-gradient(180deg,var(--lr-void) 0%,#07090B 100%);
  border-top:1px solid var(--lr-line-strong);
}
.lr-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--lr-silver),transparent);
  opacity:.5;
}
.lr-footer__wrap{
  width:100%;max-width:var(--lr-wrap);margin:0 auto;
  padding:60px var(--lr-gutter) 32px;
}
.lr-footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.4fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--lr-line);
}
.lr-footer__brandmark{
  font-size:20px;font-weight:900;letter-spacing:-.01em;
  transform:skewX(-2deg);display:inline-block;margin-bottom:10px;
}
.lr-footer__line{font-size:16px;color:var(--lr-ink);max-width:34ch;margin-bottom:12px}
.lr-footer__note{font-size:14px;line-height:1.7;color:var(--lr-mist);max-width:42ch}

.lr-footer__label{
  font-family:var(--lr-font-mono);font-size:11px;letter-spacing:.22em;
  color:var(--lr-mist);margin-bottom:14px;text-transform:uppercase;
}
.lr-footer__links{display:flex;flex-direction:column;gap:9px}
.lr-footer__links a{
  font-size:15px;color:var(--lr-silver);
  transition:color .18s var(--lr-ease),padding-left .18s var(--lr-ease);
}
.lr-footer__links a:hover{color:var(--lr-amber);padding-left:5px}

.lr-footer__value{font-size:14px;line-height:1.7;color:var(--lr-silver);margin-bottom:7px;word-break:break-word}
.lr-footer__value .lr-mono{
  display:inline-block;min-width:46px;margin-right:8px;
  font-size:11px;letter-spacing:.14em;color:var(--lr-mist);
}

.lr-footer__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-top:22px;
  font-family:var(--lr-font-mono);font-size:12px;letter-spacing:.05em;color:var(--lr-mist);
}
.lr-footer__icp{color:var(--lr-silver)}

.lr-top{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 15px;border:1px solid var(--lr-line-strong);border-radius:999px;
  background:rgba(20,24,31,.94);color:var(--lr-ink);cursor:pointer;
  font-family:var(--lr-font-mono);font-size:12px;letter-spacing:.1em;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--lr-ease),transform .2s var(--lr-ease),visibility .2s,border-color .2s var(--lr-ease),color .2s var(--lr-ease);
}
.lr-top[data-visible]{opacity:1;visibility:visible;transform:translateY(0)}
.lr-top:hover{border-color:var(--lr-amber);color:var(--lr-amber)}
.lr-top__arrow{font-size:14px;line-height:1}

/* ---------- 通用容器与章节 ---------- */
.lr-wrap{width:100%;max-width:var(--lr-wrap);margin:0 auto;padding:0 var(--lr-gutter)}

.lr-section{padding:72px 0;border-top:1px solid var(--lr-line)}
.lr-section:first-of-type{border-top:0}
.lr-section__head{display:flex;align-items:baseline;gap:16px;margin-bottom:24px}
.lr-section__num{
  font-family:var(--lr-font-mono);font-size:12px;font-weight:500;
  letter-spacing:.2em;color:var(--lr-amber);flex:0 0 auto;
}
.lr-section__title{margin:0;font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.lr-section__intro{margin:0 0 32px;max-width:64ch;color:var(--lr-mist);font-size:16px}

.lr-grid{display:grid;gap:24px}
.lr-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lr-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- 面包屑 ---------- */
.lr-crumbs{padding:20px 0;border-bottom:1px solid var(--lr-line)}
.lr-crumbs__list{
  display:flex;flex-wrap:wrap;gap:8px;
  font-family:var(--lr-font-mono);font-size:12px;letter-spacing:.04em;color:var(--lr-mist);
}
.lr-crumbs__list li{display:flex;align-items:center}
.lr-crumbs__list li+li::before{content:"/";margin-right:8px;color:var(--lr-line-strong)}
.lr-crumbs__list a:hover{color:var(--lr-amber)}
.lr-crumbs__list [aria-current="page"]{color:var(--lr-ink)}

/* ---------- 卡片 / 面板 / 标签 ---------- */
.lr-card{
  position:relative;padding:24px;
  background:var(--lr-slate);border:1px solid var(--lr-line);border-radius:var(--lr-radius);
  transition:border-color .2s var(--lr-ease),background-color .2s var(--lr-ease);
}
.lr-card:hover{border-color:var(--lr-amber)}
.lr-card__head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.lr-card__title{margin:0;font-size:20px;font-weight:700;line-height:1.4}
.lr-card__meta{
  margin:0 0 12px;font-family:var(--lr-font-mono);
  font-size:12px;letter-spacing:.05em;color:var(--lr-mist);
}

.lr-panel{padding:24px;border:1px solid var(--lr-line);border-radius:var(--lr-radius);background:var(--lr-slate)}
.lr-panel--teal{background:linear-gradient(155deg,rgba(18,63,68,.92),#0E1319 72%);border-color:rgba(18,63,68,.9)}
.lr-panel--violet{background:linear-gradient(155deg,rgba(58,33,73,.92),#0E1319 72%);border-color:rgba(58,33,73,.9)}
.lr-panel--wine{background:linear-gradient(155deg,rgba(74,26,36,.92),#0E1319 72%);border-color:rgba(74,26,36,.9)}

.lr-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--lr-line-strong);border-radius:999px;
  font-family:var(--lr-font-mono);font-size:11px;letter-spacing:.06em;color:var(--lr-silver);
}
.lr-tag--amber{color:var(--lr-amber);border-color:rgba(255,148,36,.46)}
.lr-tag--cool{color:var(--lr-cool);border-color:rgba(61,155,255,.46)}

.lr-meta-line{
  display:flex;flex-wrap:wrap;gap:16px;
  font-family:var(--lr-font-mono);font-size:12px;letter-spacing:.05em;color:var(--lr-mist);
}

/* ---------- 时间轴 ---------- */
.lr-timeline{margin:0;padding:0;list-style:none}
.lr-timeline__item{
  position:relative;padding:0 0 28px 28px;
  border-left:1px solid var(--lr-line);
}
.lr-timeline__item:last-child{padding-bottom:0}
.lr-timeline__dot{
  position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--lr-amber);box-shadow:0 0 0 3px rgba(255,148,36,.16);
}
.lr-timeline__time{font-family:var(--lr-font-mono);font-size:12px;letter-spacing:.06em;color:var(--lr-mist)}
.lr-timeline__body{margin:4px 0 0;font-size:16px}

/* ---------- 分段切换 ---------- */
.lr-tabs{margin:0}
.lr-tablist{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:6px;border:1px solid var(--lr-line);border-radius:999px;background:var(--lr-slate);
}
.lr-tab{
  padding:9px 18px;border-radius:999px;
  font-size:15px;font-weight:600;color:var(--lr-mist);cursor:pointer;
  transition:background-color .18s var(--lr-ease),color .18s var(--lr-ease);
}
.lr-tab:hover{color:var(--lr-ink);background:var(--lr-gun)}
.lr-tab[aria-selected="true"]{background:var(--lr-ember);color:#FFFFFF}
.lr-tabpanel{padding:28px 0 0}
.lr-tabpanel[hidden]{display:none}

/* ---------- 正文 ---------- */
.lr-prose{max-width:76ch;font-size:17px;line-height:1.75}
.lr-prose h2{font-size:28px;font-weight:800;line-height:1.3;margin:44px 0 16px}
.lr-prose h3{font-size:20px;font-weight:700;line-height:1.4;margin:32px 0 12px}
.lr-prose p{margin:0 0 1.2em}
.lr-prose ul,.lr-prose ol{margin:0 0 1.4em;padding-left:1.4em;list-style:disc}
.lr-prose ol{list-style:decimal}
.lr-prose li{margin-bottom:.5em}
.lr-prose a{color:var(--lr-cool);text-decoration:underline;text-underline-offset:3px}
.lr-prose a:hover{color:var(--lr-amber)}
.lr-prose strong{color:#FFFFFF;font-weight:700}
.lr-prose blockquote{
  margin:0 0 1.4em;padding:16px 20px;
  border-left:3px solid var(--lr-ember);background:var(--lr-slate);
  color:var(--lr-silver);
}

/* ---------- 图片容器 ---------- */
.lr-figure{
  position:relative;margin:0;overflow:hidden;
  background:var(--lr-slate);border:1px solid var(--lr-line);border-radius:var(--lr-radius);
}
.lr-figure__frame{
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:
    radial-gradient(90% 80% at 18% 12%,rgba(226,74,34,.30),transparent 62%),
    radial-gradient(80% 70% at 88% 84%,rgba(61,155,255,.24),transparent 60%),
    linear-gradient(155deg,#1B2129 0%,#0A0C0F 100%);
}
.lr-figure__frame img{width:100%;height:100%;object-fit:cover;display:block;animation:lr-light-up .4s ease both}
@keyframes lr-light-up{from{opacity:0}to{opacity:1}}
.lr-figure--wide .lr-figure__frame{aspect-ratio:21/9}
.lr-figure--tall .lr-figure__frame{aspect-ratio:4/5}
.lr-figure--square .lr-figure__frame{aspect-ratio:1/1}
.lr-figure__cap{
  padding:10px 14px;border-top:1px solid var(--lr-line);
  font-family:var(--lr-font-mono);font-size:12px;letter-spacing:.04em;color:var(--lr-mist);
}

/* ---------- 移动遮罩 ---------- */
body.lr-nav-open{overflow:hidden}
@media (max-width:900px){
  body.lr-nav-open::after{
    content:"";position:fixed;inset:0;z-index:85;
    background:rgba(10,12,15,.66);
  }
}

/* ---------- 响应式 ---------- */
@media (max-width:1100px) and (min-width:901px){
  .lr-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lr-footer__grid{grid-template-columns:1.3fr 1fr;gap:32px}
  .lr-footer__contact{grid-column:1 / -1}
}

@media (max-width:1024px){
  .lr-header__meta{display:none}
  .lr-chip--static{display:none}
}

@media (max-width:900px){
  :root{--lr-gutter:16px}
  .lr-header__grid{grid-template-columns:minmax(0,1fr)}
  .lr-header__spine{display:none}
  .lr-header__body{padding:0 var(--lr-gutter)}
  .lr-header__top{padding:10px 0;gap:12px}
  .lr-header__util{display:none}
  .lr-header__cta{padding:9px 14px;font-size:14px}
  .lr-navtoggle{display:inline-flex;margin-left:auto}
  .lr-header[data-condensed] .lr-header__top{padding:8px 0}

  .lr-nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(340px,88vw);
    display:block;
    padding:76px 0 40px;
    background:var(--lr-slate);
    border-left:1px solid var(--lr-line-strong);
    box-shadow:-24px 0 60px rgba(0,0,0,.55);
    transform:translateX(102%);
    visibility:hidden;
    overflow-y:auto;
    z-index:90;
    transition:transform .3s var(--lr-ease),visibility .3s var(--lr-ease);
  }
  .lr-nav[data-open]{transform:translateX(0);visibility:visible}
  .lr-nav__list{flex-direction:column;flex-wrap:nowrap}
  .lr-nav__item{display:block}
  .lr-nav__link{
    flex-direction:row;align-items:baseline;gap:14px;
    padding:16px 22px;
    border-right:0;border-bottom:1px solid var(--lr-line);
  }
  .lr-nav__label{font-size:17px}
  .lr-nav__link[aria-current="page"]::before{width:3px}
  .lr-header[data-condensed] .lr-nav__link{padding:16px 22px}

  .lr-section{padding:52px 0}
  .lr-section__title{font-size:24px}
  .lr-grid--2,.lr-grid--3{grid-template-columns:minmax(0,1fr)}
  .lr-footer{margin-top:64px}
  .lr-footer__wrap{padding:44px var(--lr-gutter) 28px}
  .lr-footer__grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:28px}
  .lr-footer__legal{flex-direction:column;gap:8px}
  .lr-prose h2{font-size:24px}
}

@media (max-width:600px){
  body{font-size:16px}
  .lr-header__cta{padding:8px 12px;font-size:13px}
  .lr-brand__main{font-size:18px}
  .lr-tablist{border-radius:8px}
  .lr-tab{border-radius:5px;flex:1 1 100%;text-align:center;padding:10px 12px}
  .lr-top{right:12px;bottom:12px}
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .lr-figure__frame img{animation:none;opacity:1}
  .lr-nav{transition:none}
}