/* ============ 凤凰竞技台 共享样式 /assets/site.css ============ */
:root{
  --color-gold:#D4A017;
  --color-red:#E34234;
  --color-night:#1A1A2E;
  --color-orange:#FF6B35;
  --color-mist:#F5F0E6;
  --color-smoke:#2A2A3C;
  --color-fog:#E8E4D8;
  --color-steel:#4A90D9;
  --color-white:#FFFFFF;
  --color-darkgold:#B8860B;
  --bg-body:var(--color-mist);
  --bg-deep:var(--color-night);
  --bg-card:var(--color-white);
  --text-body:rgba(26,26,46,.88);
  --text-muted:rgba(26,26,46,.6);
  --text-invert:var(--color-mist);
  --line-color:rgba(26,26,46,.14);
  --font-head:"Noto Serif SC","Songti SC",SimSun,Georgia,serif;
  --font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Consolas,"Courier New",monospace;
  --space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-7:64px;--space-8:96px;
  --radius:4px;
  --shadow-1:0 1px 3px rgba(10,10,24,.12);
  --shadow-2:0 8px 24px rgba(10,10,24,.18);
  --transition-base:180ms ease;
  --sidebar-width:280px;
  --topbar-height:60px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  color:var(--text-body);
  background:var(--bg-body);
  min-height:100vh;
  margin:0;
}
img,svg{display:block;max-width:100%}
a{color:var(--color-steel);text-decoration:none;transition:color var(--transition-base)}
a:hover{color:var(--color-red)}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:900;line-height:1.3;color:var(--color-night)}
:focus-visible{outline:2px dashed var(--color-gold);outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============ 跳转链接 ============ */
.skip-link{
  position:fixed;
  top:-100px;
  left:16px;
  z-index:200;
  background:var(--color-gold);
  color:var(--color-night);
  font-weight:700;
  font-size:14px;
  padding:10px 18px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  transition:top .2s ease;
}
.skip-link:focus{top:16px}

/* ============ 滚动进度 ============ */
.scroll-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:90;
  background:rgba(26,26,46,.08);
  pointer-events:none;
}
.scroll-progress span{
  display:block;
  width:100%;
  height:100%;
  transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--color-gold),var(--color-red) 75%,var(--color-orange));
  transition:transform 80ms linear;
}
@media (min-width:1024px){
  .scroll-progress{left:var(--sidebar-width);background:rgba(26,26,46,.06)}
}

/* ============ 移动端顶栏 ============ */
.header-topbar{
  position:sticky;
  top:0;
  height:var(--topbar-height);
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  background:var(--color-night);
  border-bottom:1px solid rgba(212,160,23,.5);
  box-shadow:0 2px 12px rgba(10,10,24,.25);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--color-mist);
  min-width:0;
}
.brand:hover{color:var(--color-gold)}
.brand-mark{
  width:36px;
  height:36px;
  flex:0 0 auto;
  color:var(--color-gold);
  filter:drop-shadow(0 0 8px rgba(212,160,23,.35));
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.25;
}
.brand-name{
  font-family:var(--font-head);
  font-weight:900;
  font-size:18px;
  letter-spacing:.05em;
  color:currentColor;
}
.brand-sub{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(245,240,230,.65);
  margin-top:2px;
}

/* ============ 导航切换按钮 ============ */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:transparent;
  border:1px solid rgba(212,160,23,.55);
  border-radius:var(--radius);
  color:var(--color-gold);
  font-family:var(--font-body);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:background var(--transition-base),border-color var(--transition-base);
}
.nav-toggle:hover{background:rgba(212,160,23,.12)}
.toggle-icon{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:16px;
  height:16px;
}
.toggle-icon span{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .25s ease,opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .toggle-icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .toggle-icon span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .toggle-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.toggle-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ============ 侧边轨道导航 ============ */
.header-sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--sidebar-width);
  z-index:70;
  background:var(--color-night);
  border-right:1px solid rgba(212,160,23,.28);
  transform:translateX(-100%);
  transition:transform .3s ease;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.sidebar-inner{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:24px 20px 28px;
}
.brand-side{margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid rgba(212,160,23,.24)}
.site-nav{flex:1}
.nav-list{display:flex;flex-direction:column;gap:2px}
.nav-link{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:12px 10px 12px 14px;
  border-left:3px solid transparent;
  border-radius:0 var(--radius) var(--radius) 0;
  color:rgba(245,240,230,.78);
  font-size:15px;
  transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base);
}
.nav-link:hover{
  background:rgba(212,160,23,.08);
  color:var(--color-mist);
  border-left-color:var(--color-gold);
}
.nav-link[aria-current="page"]{
  background:linear-gradient(90deg,rgba(227,66,52,.16),rgba(212,160,23,.04));
  color:var(--color-gold);
  border-left-color:var(--color-red);
}
.nav-index{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--color-steel);
  min-width:34px;
  transition:color var(--transition-base);
}
.nav-link[aria-current="page"] .nav-index{color:var(--color-red)}
.nav-link:hover .nav-index{color:var(--color-gold)}
.nav-label{font-weight:500;letter-spacing:.03em}

/* ============ 侧栏底部 ============ */
.sidebar-foot{
  margin-top:48px;
  padding-top:20px;
  border-top:1px solid rgba(212,160,23,.2);
}
.bookmark-tip{
  font-size:12px;
  line-height:1.8;
  color:rgba(245,240,230,.66);
  letter-spacing:.02em;
  padding:10px 12px;
  border:1px solid rgba(212,160,23,.45);
  border-radius:var(--radius);
  background:rgba(212,160,23,.06);
}
.trust-line{margin-top:16px}
.trust-stamp{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--color-gold);
  border:1px solid rgba(212,160,23,.5);
  padding:4px 8px;
  border-radius:2px;
}
.trust-text{
  margin-top:8px;
  font-size:11px;
  line-height:1.7;
  color:rgba(245,240,230,.5);
}
.nav-scrim{
  position:fixed;
  inset:0;
  z-index:65;
  background:rgba(10,10,18,.55);
}
.nav-scrim[hidden]{display:none}

/* ============ 抽屉开合状态 ============ */
@media (max-width:1023.98px){
  .header-sidebar[data-open]{
    transform:translateX(0);
    box-shadow:var(--shadow-2);
  }
}

/* ============ 桌面布局 ============ */
@media (min-width:1024px){
  body{margin-left:var(--sidebar-width)}
  .header-topbar{display:none}
  .header-sidebar{
    transform:none;
    box-shadow:none;
  }
  .nav-scrim{display:none!important}
}

/* ============ 页脚 ============ */
.site-footer{
  background:var(--color-night);
  color:rgba(245,240,230,.72);
  font-size:14px;
  margin-top:auto;
}
.footer-rail{
  height:4px;
  background:linear-gradient(90deg,var(--color-gold),var(--color-red) 60%,var(--color-night));
}
.footer-inner{
  max-width:1280px;
  margin:0 auto;
  padding:48px 24px 24px;
}
.footer-top{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(212,160,23,.18);
}
.footer-brand-name{
  font-family:var(--font-head);
  font-weight:900;
  font-size:26px;
  color:var(--color-gold);
  letter-spacing:.06em;
}
.footer-tagline{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:rgba(245,240,230,.5);
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.footer-col-title{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--color-gold);
  margin-bottom:14px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(212,160,23,.2);
}
.footer-links li+li{margin-top:8px}
.footer-link{
  color:rgba(245,240,230,.68);
  font-size:14px;
  transition:color var(--transition-base),padding-left var(--transition-base);
}
.footer-link:hover{
  color:var(--color-mist);
  padding-left:4px;
}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px 0;
  border-bottom:1px solid rgba(212,160,23,.18);
  font-size:13px;
  color:rgba(245,240,230,.6);
}
.footer-bottom{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:space-between;
  align-items:flex-start;
  padding-top:20px;
  font-family:var(--font-mono);
  font-size:12px;
  color:rgba(245,240,230,.42);
}
.footer-icp{color:rgba(245,240,230,.42)}
.footer-icp:hover{color:var(--color-gold)}
@media (min-width:768px){
  .footer-top{grid-template-columns:2fr 3fr}
  .footer-contact{flex-direction:row;flex-wrap:wrap;gap:24px}
  .footer-bottom{flex-direction:row;align-items:center}
}

/* ============ 通用容器与网格 ============ */
.container{
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
}
.grid-2,
.grid-3{
  display:grid;
  gap:24px;
}
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
.card{
  background:var(--bg-card);
  border:1px solid var(--line-color);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:24px;
  transition:box-shadow var(--transition-base),transform var(--transition-base),border-color var(--transition-base);
}
.card:hover{box-shadow:var(--shadow-2)}
.media-frame{
  position:relative;
  overflow:hidden;
  background:var(--color-night);
  border:1px solid rgba(212,160,23,.25);
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
}
.media-frame::before{
  content:"IMG // FENIX";
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--color-gold);
  opacity:.65;
}
.media-frame--tall{aspect-ratio:4/5}
.media-frame--square{aspect-ratio:1/1}

/* ============ 标题索引模块 ============ */
.section{
  margin-top:var(--space-6);
}
.section-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line-color);
}
.section-index{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--color-red);
  letter-spacing:.08em;
}
.section-title{
  font-family:var(--font-head);
  font-size:22px;
  font-weight:900;
  color:var(--color-night);
  letter-spacing:.02em;
}

/* ============ 正文排版 ============ */
.prose{
  font-size:16px;
  line-height:1.9;
}
.prose p{margin-bottom:16px}
.prose h2,.prose h3{
  font-family:var(--font-head);
  margin-top:28px;
  margin-bottom:12px;
}
.prose ul{
  list-style:none;
  margin-bottom:16px;
}
.prose ul li{
  padding-left:20px;
  position:relative;
}
.prose ul li::before{
  content:"›";
  position:absolute;
  left:4px;
  color:var(--color-gold);
  font-weight:900;
}
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  font-family:var(--font-mono);
  color:var(--text-muted);
  margin-bottom:24px;
}
.breadcrumbs a{
  color:var(--color-steel);
  transition:color var(--transition-base);
}
.breadcrumbs a:hover{color:var(--color-red)}
.breadcrumbs [aria-current="page"]{
  color:var(--color-night);
  font-weight:600;
}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 22px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base),box-shadow var(--transition-base);
}
.btn-primary{
  background:var(--color-red);
  border-color:var(--color-red);
  color:var(--color-white);
  box-shadow:0 2px 10px rgba(227,66,52,.25);
}
.btn-primary:hover{
  background:#cf2f22;
  color:var(--color-white);
  box-shadow:0 4px 16px rgba(227,66,52,.4);
}
.btn-ghost{
  background:transparent;
  border-color:var(--color-gold);
  color:var(--color-gold);
}
.btn-ghost:hover{
  background:rgba(212,160,23,.12);
  color:var(--color-darkgold);
}

/* ============ 标签页基础样式 ============ */
.tabs-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  border-bottom:1px solid var(--line-color);
  padding-bottom:8px;
  margin-bottom:20px;
}
.tabs-trigger{
  background:transparent;
  border:1px solid var(--line-color);
  border-radius:var(--radius);
  padding:8px 16px;
  font-family:var(--font-mono);
  font-size:13px;
  cursor:pointer;
  color:var(--text-muted);
  transition:color var(--transition-base),border-color var(--transition-base),background var(--transition-base);
}
.tabs-trigger:hover{
  border-color:var(--color-gold);
  color:var(--color-gold);
}
.tabs-trigger[aria-selected="true"]{
  background:var(--color-night);
  border-color:var(--color-night);
  color:var(--color-gold);
}
.tabs-panel[hidden]{display:none}

/* ============ 斜向装饰 ============ */
.diagonal-bg{
  background-image:linear-gradient(135deg,rgba(212,160,23,.05) 25%,transparent 25%,transparent 50%,rgba(212,160,23,.05) 50%,rgba(212,160,23,.05) 75%,transparent 75%,transparent);
  background-size:28px 28px;
}

/* ============ 可访问性辅助 ============ */
[hidden]{display:none!important}
@media print{
  .site-header,.site-footer,.scroll-progress{display:none}
  body{margin-left:0}
}