/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; line-height: 1.6; color: #1C1C1C; background-color: #F5F0E8; min-height: 100vh; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: #0066CC; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #004499; }
a:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; border-radius: 2px; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Condensed', 'Noto Sans SC', sans-serif; font-weight: 700; line-height: 1.2; color: #1C1C1C; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.375rem); }
h4 { font-size: 1.125rem; }
p { margin-bottom: 1rem; }
small, .text-small { font-size: 0.875rem; color: #6B6B6B; }
.mono { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; border-radius: 2px; }
::selection { background-color: #FFD166; color: #1C1C1C; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* ===== CSS Variables ===== */
:root {
  --color-bg: #F5F0E8;
  --color-text: #1C1C1C;
  --color-primary: #0066CC;
  --color-primary-dark: #004499;
  --color-accent: #E63946;
  --color-highlight: #FFD166;
  --color-gray: #6B6B6B;
  --color-border: #D4C9B8;
  --color-sidebar-bg: #1C1C1C;
  --color-sidebar-text: #F5F0E8;
  --color-footer-bg: #1C1C1C;
  --color-footer-text: #D4C9B8;
  --font-primary: 'Inter', 'Noto Sans SC', sans-serif;
  --font-heading: 'Roboto Condensed', 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --sidebar-width: 220px;
  --header-top-height: 56px;
  --content-max-width: 1200px;
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
}

/* ===== Skip Link ===== */
.skip-link { position: absolute; top: -100%; left: 0; z-index: 10000; padding: 0.5rem 1rem; background: #1C1C1C; color: #F5F0E8; font-size: 0.875rem; font-weight: 600; border-radius: 0 0 4px 0; }
.skip-link:focus { top: 0; outline: 2px solid #FFD166; outline-offset: -2px; }

/* ===== Header ===== */
.site-header { position: relative; z-index: 1000; }

/* --- 移动端顶部栏 --- */
.header-top { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 1100; height: var(--header-top-height); padding: 0 1rem; background: #F5F0E8; border-bottom: 1px solid #D4C9B8; align-items: center; justify-content: space-between; }
.header-top .brand-link { display: flex; align-items: center; text-decoration: none; }
.header-top .brand-name { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; color: #1C1C1C; letter-spacing: 0.02em; }

.nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer; gap: 4px; }
.nav-toggle:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; border-radius: 4px; }
.hamburger-icon { display: block; width: 24px; height: 2px; background: #1C1C1C; border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; }
[data-open] .hamburger-icon:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[data-open] .hamburger-icon:nth-child(2) { opacity: 0; }
[data-open] .hamburger-icon:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- 侧边导航 --- */
.side-nav { position: fixed; top: 0; left: 0; z-index: 1200; width: var(--sidebar-width); height: 100vh; background: var(--color-sidebar-bg); color: var(--color-sidebar-text); display: flex; flex-direction: column; overflow-y: auto; transition: transform 0.3s ease; }

.nav-brand { padding: 1.5rem 1.25rem 1rem; flex-shrink: 0; }
.nav-brand .brand-link { display: block; text-decoration: none; color: inherit; }
.nav-brand .brand-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: #F5F0E8; letter-spacing: 0.03em; }
.nav-brand .brand-tagline { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: #D4C9B8; font-weight: 400; letter-spacing: 0.02em; line-height: 1.4; }
.brand-divider { margin-top: 0.75rem; width: 80%; height: 3px; background: #FFD166; transform: skewX(-12deg); border-radius: 1px; }

.nav-list { padding: 0.5rem 0; flex: 1; }
.nav-item { margin: 0 0.5rem; }
.nav-link { display: flex; align-items: center; padding: 0.625rem 0.75rem; border-radius: 6px; color: #D4C9B8; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; gap: 0.625rem; }
.nav-link:hover { background: rgba(255,255,255,0.08); color: #F5F0E8; }
.nav-link:focus-visible { outline: 2px solid #FFD166; outline-offset: 2px; }
.nav-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: #6B6B6B; flex-shrink: 0; transition: background 0.2s ease, transform 0.2s ease; }
.nav-link:hover .nav-dot { background: #FFD166; }
.nav-link[aria-current="page"] { background: rgba(0,102,204,0.2); color: #F5F0E8; }
.nav-link[aria-current="page"] .nav-dot { background: #0066CC; transform: scale(1.35); box-shadow: 0 0 0 2px rgba(0,102,204,0.3); }

.nav-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
.nav-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #D4C9B8; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #00C853; flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.status-label { font-weight: 400; }

/* --- 遮罩 --- */
.nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1050; background: rgba(0,0,0,0.45); }

/* --- 移动端状态 --- */
@media (max-width: 767px) {
  .header-top { display: flex; }
  .site-header { padding-top: var(--header-top-height); }
  .side-nav { transform: translateX(-100%); width: 280px; box-shadow: 4px 0 24px rgba(0,0,0,0.25); }
  .side-nav[data-open] { transform: translateX(0); }
  .nav-overlay[data-open] { display: block; }
}

@media (min-width: 768px) {
  .header-top { display: none; }
  .side-nav { transform: translateX(0); box-shadow: 1px 0 0 rgba(0,0,0,0.06); }
  .nav-overlay { display: none !important; }
  .site-content { margin-left: var(--sidebar-width); }
  .site-footer { margin-left: var(--sidebar-width); }
}

/* ===== 正文容器 ===== */
.content-container { max-width: var(--content-max-width); margin: 0 auto; padding: 1.5rem 1rem; }
@media (min-width: 768px) { .content-container { padding: 2rem 2rem; } }
@media (min-width: 1024px) { .content-container { padding: 2.5rem 2.5rem; } }

/* ===== 面包屑 ===== */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; padding: 0.75rem 0; font-size: 0.8125rem; color: #6B6B6B; }
.breadcrumb a { color: #0066CC; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #1C1C1C; font-weight: 600; }
.breadcrumb-sep { color: #D4C9B8; user-select: none; }

/* ===== 通用按钮 ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-family: var(--font-primary); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; }
.btn:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: #0066CC; color: #F5F0E8; }
.btn--primary:hover { background: #004499; color: #F5F0E8; box-shadow: 0 4px 12px rgba(0,102,204,0.25); }
.btn--accent { background: #E63946; color: #F5F0E8; }
.btn--accent:hover { background: #C1121F; color: #F5F0E8; box-shadow: 0 4px 12px rgba(230,57,70,0.25); }
.btn--outline { background: transparent; color: #1C1C1C; border: 1.5px solid #D4C9B8; }
.btn--outline:hover { border-color: #0066CC; color: #0066CC; background: rgba(0,102,204,0.04); }
.btn--small { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
.btn--large { padding: 0.875rem 1.75rem; font-size: 1.0625rem; }

/* ===== 网格 ===== */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3,1fr); } }

/* ===== 图片容器 ===== */
.img-container { position: relative; background: #D4C9B8; overflow: hidden; border-radius: 6px; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; color: #6B6B6B; font-size: 0.75rem; }
.img-container--square { aspect-ratio: 1 / 1; }
.img-container--wide { aspect-ratio: 21 / 9; }
.img-container--portrait { aspect-ratio: 3 / 4; }
.img-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== 进度条 ===== */
.progress-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: 3px; background: transparent; pointer-events: none; }
.progress-bar__fill { height: 100%; width: 0%; background: linear-gradient(90deg, #0066CC, #E63946); transition: width 0.1s linear; }
@media (min-width: 768px) { .progress-bar { left: var(--sidebar-width); } }

/* ===== Footer ===== */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: 2.5rem 1rem 1.5rem; }
.footer-inner { max-width: var(--content-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2rem; }
.footer-brand-link { display: inline-block; text-decoration: none; color: #F5F0E8; }
.footer-brand-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.03em; color: #F5F0E8; }
.footer-tagline { margin-top: 0.5rem; font-size: 0.875rem; color: #D4C9B8; line-height: 1.5; max-width: 24rem; }
.footer-divider { margin: 0.75rem 0 0; width: 60px; height: 2px; background: #FFD166; transform: skewX(-12deg); border-radius: 1px; }
.footer-heading { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 700; color: #F5F0E8; margin-bottom: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.footer-contact-list, .footer-link-list { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-contact-list a, .footer-link-list a { color: #D4C9B8; font-size: 0.875rem; transition: color 0.2s ease; text-decoration: none; }
.footer-contact-list a:hover, .footer-link-list a:hover { color: #FFD166; }
.footer-contact-list li { font-size: 0.875rem; color: #D4C9B8; }
.footer-bottom { max-width: var(--content-max-width); margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; }
.footer-icp { font-size: 0.75rem; color: #6B6B6B; }
.footer-copy { font-size: 0.75rem; color: #6B6B6B; }
@media (min-width: 640px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; } }
@media (min-width: 768px) { .site-footer { padding: 3rem 2rem 1.5rem; } }
@media (min-width: 1024px) { .site-footer { padding: 3.5rem 2.5rem 1.5rem; } }

/* ===== 响应式辅助 ===== */
@media (max-width: 767px) {
  .site-content { margin-left: 0; }
  .site-footer { margin-left: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-content { margin-left: var(--sidebar-width); }
  .site-footer { margin-left: var(--sidebar-width); }
}

/* ===== 打印样式 ===== */
@media print {
  .site-header, .site-footer, .progress-bar, .nav-overlay { display: none !important; }
  .site-content, .site-footer { margin-left: 0 !important; }
  body { background: #fff; color: #000; }
}