/* Reset & Variables */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-primary:#E63946;
  --c-secondary:#C0C0C0;
  --c-dark:#2B2D42;
  --c-accent:#39FF14;
  --c-light:#F8F9FA;
  --gradient-red:linear-gradient(135deg,#E63946,#FF6B6B);
  --gradient-silver:linear-gradient(135deg,#C0C0C0,#E0E0E0);
  --gradient-dark:linear-gradient(135deg,#2B2D42,#4A4E69);
  --font-head:'Inter',-apple-system,sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','Consolas',monospace;
  --scale-h1:2.5rem;
  --scale-h2:2rem;
  --scale-h3:1.5rem;
  --scale-body:1rem;
  --scale-small:0.875rem;
  --max-width:1200px;
  --grid-gap:1rem;
}
[data-version="old"]{
  --c-primary:#B23B3B;
  --c-secondary:#A0A0A0;
  --c-accent:#2ECC71;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--scale-body);color:var(--c-dark);background:var(--c-light);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-head);font-weight:700}
h1{font-size:var(--scale-h1);line-height:1.2}
h2{font-size:var(--scale-h2);line-height:1.3}
h3{font-size:var(--scale-h3);line-height:1.4}
a{color:var(--c-primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--c-accent)}
a:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
ul{list-style:none}

/* Skip Link */
.skip-link{position:absolute;top:-100px;left:0;background:var(--c-dark);color:#fff;padding:.5rem 1rem;z-index:1000}
.skip-link:focus{top:0}

/* Header */
.header-top{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:var(--gradient-dark);flex-wrap:wrap}
.brand{font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--c-light);letter-spacing:-.02em}
.shortcuts{display:flex;gap:.75rem;margin-left:auto}
.shortcuts a{color:var(--c-secondary);font-size:var(--scale-small);padding:.2rem .4rem;border-bottom:1px solid transparent}
.shortcuts a:hover{color:var(--c-accent);border-bottom-color:var(--c-accent)}
.version-switch{background:var(--c-primary);color:#fff;border:none;padding:.3rem .8rem;font-family:var(--font-mono);font-size:var(--scale-small);cursor:pointer;border-radius:2px;transition:background .2s}
.version-switch:hover{background:var(--c-accent);color:var(--c-dark)}
.version-switch:focus-visible{outline:2px solid var(--c-accent)}

.main-nav{background:var(--c-dark);border-top:1px solid var(--c-secondary)}
.main-nav ul{display:flex;flex-wrap:wrap;gap:0;padding:0 1rem}
.main-nav li{position:relative}
.main-nav a{display:block;padding:.75rem 1rem;color:var(--c-secondary);font-family:var(--font-head);font-size:var(--scale-small);text-transform:uppercase;letter-spacing:.05em;transition:color .2s,background .2s}
.main-nav a:hover{color:var(--c-light);background:rgba(255,255,255,.05)}
.main-nav a[aria-current="page"]{color:var(--c-primary);border-bottom:2px solid var(--c-primary)}
.nav-toggle{display:none;background:none;border:none;font-size:2rem;color:var(--c-light);padding:.25rem .75rem;cursor:pointer;position:absolute;top:.5rem;right:1rem;z-index:100}
.nav-toggle:focus-visible{outline:2px solid var(--c-accent)}

/* Side Nav */
.side-nav{position:fixed;top:0;left:0;width:220px;height:100vh;background:var(--gradient-silver);padding:4rem 1rem 1rem;z-index:90;overflow-y:auto;transform:translateX(-100%);transition:transform .3s}
.side-nav ul{display:flex;flex-direction:column;gap:.25rem}
.side-nav a{display:block;padding:.5rem .75rem;color:var(--c-dark);font-family:var(--font-mono);font-size:var(--scale-small);border-left:2px solid transparent;transition:border-color .2s,background .2s}
.side-nav a:hover{border-left-color:var(--c-primary);background:rgba(230,57,70,.1)}
.side-nav a[aria-current="page"]{border-left-color:var(--c-primary);background:rgba(230,57,70,.15)}
@media(min-width:1024px){
  .side-nav{transform:translateX(0)}
  .header-top,.main-nav{padding-left:240px}
}
[data-nav][data-open="true"]{display:block}

/* Footer */
.site-footer{background:var(--gradient-dark);color:var(--c-secondary);padding:2rem 1rem}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){
  .footer-inner{grid-template-columns:repeat(3,1fr)}
}
.footer-brand{font-family:var(--font-head);font-size:1.25rem;color:var(--c-light)}
.footer-links{display:flex;flex-direction:column;gap:.5rem}
.footer-links a{color:var(--c-secondary);font-size:var(--scale-small);border-bottom:1px solid transparent}
.footer-links a:hover{color:var(--c-accent);border-bottom-color:var(--c-accent)}
.footer-contact{display:flex;flex-direction:column;gap:.25rem;font-size:var(--scale-small)}
.footer-contact a{color:var(--c-primary)}
.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(192,192,192,.3);padding-top:1rem;display:flex;justify-content:space-between;font-size:var(--scale-small);color:var(--c-secondary)}

/* Scroll-to-top */
[data-scroll-top]{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:var(--c-primary);color:#fff;border:none;border-radius:4px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:999;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
[data-scroll-top]:hover{background:var(--c-accent);color:var(--c-dark)}
[data-scroll-top="visible"]{opacity:1;visibility:visible}
[data-scroll-top]:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* Utility */
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto}
}

/* Responsive */
@media(max-width:1023px){
  .main-nav{display:none;position:absolute;top:100%;left:0;width:100%;background:var(--c-dark);z-index:99}
  .main-nav ul{flex-direction:column}
  .nav-toggle{display:block}
  .side-nav{width:100%;transform:translateX(-100%)}
  [data-nav-toggle][aria-expanded="true"] + .main-nav,[data-nav-toggle][aria-expanded="true"] ~  .main-nav? 使用通用兄弟选择器，但HTML结构需要调整：nav和button是兄弟，可以使用~。为简化，我们使用JS控制data-open属性，CSS隐藏/显示。
  /* 由于JS控制data-open，此处不需复杂选择器 */
}
@media(max-width:599px){
  .header-top{flex-direction:column;align-items:flex-start}
  .shortcuts{margin-left:0}
  .version-switch{align-self:flex-end}
}