*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:url('../../pic/bg-miku.png') center/cover fixed;color:#1a1e24;font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;font-weight:400;overflow-x:hidden;line-height:1.6;font-size:14px;min-height:100vh}
body::before{content:'';position:fixed;inset:0;background:rgba(255,255,255,0.25);z-index:-1}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 32px;height:52px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e8ecf0}
.nav-brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#1a1e24;text-decoration:none;flex-shrink:0}
.nav-brand svg{width:24px;height:24px}
.nav-brand svg rect[fill]{fill:#e8ecf0}
.nav-brand svg circle[stroke]{stroke:#4a9e94}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:0 14px;color:#5e6a76;text-decoration:none;font-size:13px;height:52px;line-height:52px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:#1a1e24;border-bottom-color:#4a9e94}

/* ===== HAMBURGER ===== */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;width:32px;height:32px;border:none;background:transparent;cursor:pointer;padding:4px}
.hamburger span{display:block;height:2px;border-radius:1px;background:#5e6a76;transition:.25s}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-overlay{position:fixed;inset:0;z-index:98;background:rgba(0,0,0,.25);display:none}
.nav-overlay.open{display:block}

/* ===== PAGE HEADER ===== */
.page-header{background:rgba(255,255,255,0.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #e8ecf0;padding:72px 24px 28px;text-align:center}
.page-header h1{font-size:26px;font-weight:700;color:#1a1e24;margin-bottom:4px}
.page-header p{font-size:14px;color:#5e6a76;max-width:480px;margin:0 auto}
.page-header .breadcrumb{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#9aa6b2;margin-bottom:8px}
.page-header .breadcrumb a{color:#9aa6b2;text-decoration:none}
.page-header .breadcrumb a:hover{color:#4a9e94}

/* ===== CONTENT WRAPPER ===== */
.content-wrap{padding:24px 32px 60px;max-width:800px;margin:0 auto}

/* ===== CARDS (通用) ===== */
.card{background:rgba(255,255,255,0.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #e8ecf0;padding:24px;margin-bottom:12px}
.card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e8ecf0}
.card-header h3{font-size:15px;font-weight:700;color:#1a1e24;display:flex;align-items:center;gap:6px}
.card-header h3 .icon{width:16px;height:16px;color:#4a9e94}
.card-header a{font-size:12px;color:#9aa6b2;text-decoration:none}
.card-header a:hover{color:#4a9e94}

/* ===== FOOTER ===== */
footer{border-top:1px solid #e8ecf0;padding:24px 32px;max-width:800px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer .copy{font-size:13px;color:#9aa6b2;display:flex;align-items:center;gap:4px}
footer .copy .icon{width:14px;height:14px;color:#d4826a}
footer .links{display:flex;gap:16px}
footer .links a{font-size:13px;color:#9aa6b2;text-decoration:none;display:flex;align-items:center;gap:4px}
footer .links a:hover{color:#4a9e94}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  nav{padding:0 16px}
  .hamburger{display:flex}
  .nav-links{position:fixed;top:0;right:-240px;width:220px;height:100vh;flex-direction:column;gap:0;padding:60px 16px 16px;background:#fff;border-left:1px solid #e8ecf0;z-index:99;transition:right .3s;display:flex;overflow-y:auto}
  .nav-links.open{right:0}
  .nav-links a{padding:12px 0;font-size:14px;height:auto;line-height:1.4;border-bottom:none;border-bottom:1px solid #f0f2f4;width:100%;display:block}
  .nav-links a:hover,.nav-links a.active{border-bottom-color:#f0f2f4;color:#4a9e94}
  .content-wrap{padding:16px 16px 60px}
  footer{padding:16px;flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .page-header{padding:60px 16px 20px}
  .page-header h1{font-size:22px}
}

/* ===== CHANGELOG SPECIFIC ===== */
.changelog-content{padding:24px 32px 60px;max-width:800px;margin:0 auto}
.timeline{position:relative;padding-left:32px}
.timeline::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:#e8ecf0}
.entry{position:relative;margin-bottom:16px}
.entry:last-child{margin-bottom:0}
.dot{position:absolute;left:-26px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #4a9e94;z-index:1}
.dot.future{border-color:#d0d5db;background:#f5f7f8}
.card{background:#fff;border:1px solid #e8ecf0;padding:20px 24px}
.card.future{opacity:0.5}
.card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #f0f2f4}
.card-version{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:#1a1e24}
.card-version .icon{width:16px;height:16px;color:#4a9e94}
.card-date{font-size:12px;color:#9aa6b2;display:flex;align-items:center;gap:4px}
.card-date .icon{width:12px;height:12px}
.tag{display:inline-block;padding:2px 10px;font-size:11px;font-weight:500;margin-bottom:8px;color:#5e6a76;border:1px solid #e8ecf0;background:#f5f7f8}
.tag.release{color:#4a9e94;border-color:#d4ece8;background:#f0f7f6}
.card ul{list-style:none;padding:0}
.card ul li{font-size:13px;color:#5e6a76;line-height:1.8;padding-left:16px;position:relative}
.card ul li::before{content:'';position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:#4a9e94}
.back-link{text-align:center;margin-top:32px}
.back-link a{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;color:#5e6a76;font-size:13px;text-decoration:none;border:1px solid #e8ecf0;font-family:inherit;background:#fff}
.back-link a:hover{border-color:#4a9e94;color:#4a9e94}
.back-link a .icon{width:14px;height:14px}

@media(max-width:768px){
  .changelog-content{padding:16px 16px 60px}
  .timeline{padding-left:28px}
  .dot{left:-24px;width:10px;height:10px}
  .card{padding:16px}
}

/* ===== VERSIONS SPECIFIC ===== */
.version-content{padding:24px 32px 60px;max-width:800px;margin:0 auto}
.detail-card{background:rgba(255,255,255,0.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #e8ecf0;padding:28px 32px;margin-bottom:16px}
.detail-card .vd-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-bottom:16px;border-bottom:1px solid #e8ecf0;margin-bottom:20px}
.detail-card .vd-version{font-size:18px;font-weight:700;color:#1a1e24;display:flex;align-items:center;gap:8px}
.detail-card .vd-version .icon{width:18px;height:18px;color:#4a9e94}
.detail-card .vd-meta{display:flex;gap:14px;flex-wrap:wrap}
.detail-card .vd-meta span{font-size:12px;color:#9aa6b2;display:flex;align-items:center;gap:4px}
.detail-card .vd-meta span .icon{width:14px;height:14px}
.detail-card .vd-module{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #f0f2f4}
.detail-card .vd-module:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.detail-card .vd-module h5{font-size:14px;font-weight:600;color:#1a1e24;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.detail-card .vd-module h5 .icon{width:16px;height:16px;color:#4a9e94}
.detail-card .vd-module ul{list-style:none;padding:0}
.detail-card .vd-module ul li{font-size:13px;color:#5e6a76;line-height:1.8;padding-left:14px;position:relative}
.detail-card .vd-module ul li::before{content:'';position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:#d0d5db}
.back-link{text-align:center;margin-top:24px}
.back-link a{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;color:#5e6a76;font-size:13px;text-decoration:none;border:1px solid #e8ecf0;font-family:inherit;background:#fff}
.back-link a:hover{border-color:#4a9e94;color:#4a9e94}
.back-link a .icon{width:14px;height:14px}

@media(max-width:768px){
  .version-content{padding:16px 16px 60px}
  .detail-card{padding:20px 16px}
}