:root{
  --main:#06b6d4;
  --accent:#ec4899;
  --bg:#0c0a1a;
  --text:#e0f2fe;
  --panel:#14122a;
  --line:#2a2750;
  --muted:#8b93b8;
  --shadow:6px 6px 0 #000;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.85;letter-spacing:.2px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-weight:800;letter-spacing:.5px;line-height:1.35}
::selection{background:var(--accent);color:#fff}

/* ---------- 顶部导航 ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(12,10,26,.35);
  border-bottom:2px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
  backdrop-filter:blur(6px);
}
.topbar.stuck{
  background:rgba(12,10,26,.94);
  border-bottom:2px solid var(--main);
  box-shadow:0 4px 0 rgba(6,182,212,.25);
}
.topbar-inner{
  max-width:1320px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:26px;
}
.brand{
  font-weight:900;font-size:1.28rem;color:#fff;white-space:nowrap;
  border:2px solid var(--main);padding:5px 12px;
  box-shadow:4px 4px 0 var(--accent);
  letter-spacing:1px;
}
.brand i{color:var(--accent);margin-right:6px}
.navlinks{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.navlinks a{
  padding:6px 13px;font-weight:600;font-size:.94rem;color:var(--text);
  border:2px solid transparent;transition:.2s;
}
.navlinks a:hover{background:var(--main);color:#04131a;border-color:var(--main)}
.navlinks a.active{color:var(--main);border-color:var(--main)}
.nav-toggle{
  display:none;background:none;border:2px solid var(--main);color:var(--main);
  padding:6px 12px;font-size:1.1rem;
}

/* ---------- Hero ---------- */
.hero{
  padding:132px 20px 56px;
  background:
    radial-gradient(circle at 12% 18%,rgba(236,72,153,.20),transparent 46%),
    radial-gradient(circle at 88% 12%,rgba(6,182,212,.22),transparent 48%),
    linear-gradient(180deg,#100d24 0%,var(--bg) 100%);
  border-bottom:2px solid var(--line);
}
.hero-wrap{max-width:1320px;margin:0 auto}
.kicker{
  display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:3px;
  color:var(--accent);border:2px solid var(--accent);
  padding:2px 12px;margin-bottom:22px;text-transform:uppercase;
}
.hero h1{
  font-size:clamp(1.8rem,4.4vw,3.1rem);font-weight:900;margin:0 0 18px;
  color:#fff;
}
.hero h1 em{font-style:normal;color:var(--main)}
.hero-lead{max-width:760px;color:var(--muted);font-size:1.03rem;margin-bottom:28px}

/* 关键词标签云 */
.cloud{display:flex;flex-wrap:wrap;gap:10px;max-width:980px}
.cloud span{
  font-size:.86rem;font-weight:700;padding:5px 13px;
  border:2px solid var(--line);color:var(--text);background:rgba(20,18,42,.7);
  transition:.2s;cursor:default;
}
.cloud span:hover{border-color:var(--main);color:var(--main);transform:translate(2px,2px)}
.cloud span.hot{border-color:var(--accent);color:var(--accent)}

/* ---------- 主体布局:左侧筛选 + 右侧瀑布流 ---------- */
.layout{
  max-width:1320px;margin:0 auto;padding:48px 20px 20px;
  display:grid;grid-template-columns:236px 1fr;gap:34px;align-items:start;
}
.sidebar{position:sticky;top:96px}
.side-card{
  border:2px solid var(--line);background:var(--panel);
  box-shadow:var(--shadow);padding:18px;margin-bottom:22px;
}
.side-card h3{
  font-size:.82rem;letter-spacing:2px;color:var(--main);
  margin:0 0 14px;text-transform:uppercase;font-weight:800;
}
.filter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.filter-list a{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 10px;font-weight:600;font-size:.93rem;color:var(--text);
  border-left:3px solid transparent;transition:.18s;
}
.filter-list a:hover{background:rgba(6,182,212,.12);border-left-color:var(--main);color:var(--main)}
.filter-list a .num{font-size:.78rem;color:var(--muted);font-weight:600}
.side-note{font-size:.85rem;color:var(--muted);line-height:1.9}

/* ---------- 区块标题 ---------- */
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:24px;flex-wrap:wrap;
  border-bottom:2px solid var(--line);padding-bottom:12px;
}
.sec-head h2{
  font-size:1.42rem;margin:0;color:#fff;display:flex;align-items:center;gap:10px;
}
.sec-head h2 i{color:var(--accent);font-size:1.1rem}
.sec-head .more{font-size:.86rem;font-weight:700;color:var(--main);border-bottom:2px solid transparent}
.sec-head .more:hover{border-bottom-color:var(--main)}

/* ---------- 海报瀑布流 ---------- */
.poster-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:20px;margin-bottom:56px;
}
.poster{
  border:2px solid var(--line);background:var(--panel);cursor:pointer;
  box-shadow:var(--shadow);transition:transform .22s,border-color .22s,box-shadow .22s;
  position:relative;
}
.poster:hover{transform:translate(-3px,-3px);border-color:var(--main);box-shadow:8px 8px 0 rgba(6,182,212,.4)}
.thumb{position:relative;overflow:hidden;aspect-ratio:2/3;background:#1b1838}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.poster:hover .thumb img{transform:scale(1.09)}
.thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,26,0) 32%,rgba(12,10,26,.9) 100%);
  pointer-events:none;
}
.play-layer{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .28s;z-index:2;
}
.poster:hover .play-layer{opacity:1}
.play-layer i{
  font-size:1.15rem;color:#04131a;background:var(--main);
  width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  border:2px solid #000;box-shadow:4px 4px 0 rgba(236,72,153,.85);
  transform:translateY(8px);transition:transform .28s;
}
.poster:hover .play-layer i{transform:translateY(0)}
.rate{
  position:absolute;top:8px;right:8px;z-index:3;
  font-size:.78rem;font-weight:900;color:#04131a;background:var(--accent);
  padding:1px 7px;border:2px solid #000;
}
.poster-body{padding:10px 11px 12px}
.poster-body .name{
  font-size:.94rem;font-weight:800;color:#fff;margin:0 0 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.poster-body .meta{font-size:.76rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.poster-body .meta span{white-space:nowrap}

/* ---------- 周榜 ---------- */
.rank-wrap{
  border:2px solid var(--line);background:var(--panel);box-shadow:var(--shadow);
  padding:22px;margin-bottom:56px;
}
.rank-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:12px;margin:0;padding:0;list-style:none;
}
.rank-item{
  display:flex;gap:14px;align-items:center;padding:10px;
  border:2px solid var(--line);transition:.2s;cursor:pointer;background:#191735;
}
.rank-item:hover{border-color:var(--accent);transform:translateX(3px)}
.rank-no{
  font-weight:900;font-size:1.18rem;color:var(--main);width:38px;text-align:center;flex:none;
}
.rank-item:nth-child(1) .rank-no,.rank-item:nth-child(2) .rank-no,.rank-item:nth-child(3) .rank-no{color:var(--accent)}
.rank-pic{width:52px;height:74px;flex:none;overflow:hidden;border:2px solid #000;background:#1b1838}
.rank-pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.rank-item:hover .rank-pic img{transform:scale(1.1)}
.rank-info{min-width:0}
.rank-info h4{font-size:.95rem;margin:0 0 2px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-info p{margin:0;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 即将上线 ---------- */
.soon-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;margin-bottom:56px;
}
.soon-card{
  border:2px solid var(--line);background:var(--panel);box-shadow:var(--shadow);
  display:flex;gap:12px;padding:12px;transition:.2s;
}
.soon-card:hover{border-color:var(--main);transform:translate(-2px,-2px)}
.soon-pic{width:84px;flex:none;aspect-ratio:2/3;overflow:hidden;border:2px solid #000;background:#1b1838}
.soon-pic img{width:100%;height:100%;object-fit:cover}
.soon-info h4{font-size:.95rem;margin:0 0 4px;color:#fff}
.soon-info .date{font-size:.78rem;font-weight:800;color:var(--accent);display:block;margin-bottom:6px}
.soon-info p{font-size:.8rem;color:var(--muted);margin:0;line-height:1.7}

/* ---------- 图标列表 / 片单 ---------- */
.icon-list{list-style:none;margin:0 0 56px;padding:0;display:grid;gap:14px}
.icon-list li{
  display:flex;gap:14px;align-items:flex-start;
  border:2px solid var(--line);background:var(--panel);padding:16px 18px;
  box-shadow:var(--shadow);transition:.2s;
}
.icon-list li:hover{border-color:var(--accent);transform:translate(2px,2px);box-shadow:3px 3px 0 #000}
.icon-list .ico{
  flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--main);color:#04131a;border:2px solid #000;font-size:1rem;
}
.icon-list h4{font-size:1rem;margin:0 0 3px;color:#fff}
.icon-list p{margin:0;font-size:.88rem;color:var(--muted)}

/* ---------- 手风琴 ---------- */
.acc{border:2px solid var(--line);box-shadow:var(--shadow);margin-bottom:56px;background:var(--panel)}
.acc-item + .acc-item{border-top:2px solid var(--line)}
.acc-head{
  width:100%;background:none;border:0;color:var(--text);text-align:left;
  padding:16px 20px;font-weight:800;font-size:.98rem;
  display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;
  font-family:inherit;transition:.2s;
}
.acc-head:hover{background:rgba(6,182,212,.1);color:var(--main)}
.acc-head i{color:var(--accent);transition:transform .3s;font-size:.86rem}
.acc-item.open .acc-head i{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .38s ease}
.acc-body p{margin:0;padding:0 20px 18px;font-size:.9rem;color:var(--muted);line-height:1.95}

/* ---------- 相关推荐 ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:56px}
.rel-card{
  border:2px solid var(--line);background:var(--panel);padding:18px;
  box-shadow:var(--shadow);transition:.2s;
}
.rel-card:hover{border-color:var(--main);transform:translate(-2px,-2px)}
.rel-card i{color:var(--accent);font-size:1.15rem;margin-bottom:8px;display:block}
.rel-card h4{font-size:1rem;margin:0 0 5px;color:#fff}
.rel-card p{margin:0;font-size:.86rem;color:var(--muted)}

/* ---------- 友链 ---------- */
.friend{
  border-top:2px solid var(--line);background:#0a0817;padding:40px 20px;
}
.friend-inner{max-width:1320px;margin:0 auto}
.friend h3{
  font-size:1rem;color:var(--main);margin:0 0 14px;letter-spacing:2px;
  display:flex;align-items:center;gap:8px;
}
.friend-links{
  font-size:.88rem;color:var(--muted);line-height:2.1;
  border:2px dashed var(--line);padding:14px 18px;
}

/* ---------- 页脚 ---------- */
footer{
  background:#080714;border-top:2px solid var(--main);padding:40px 20px 26px;
}
.foot-inner{max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.foot-col{min-width:180px}
.foot-col h4{font-size:.86rem;letter-spacing:2px;color:var(--main);margin:0 0 12px;text-transform:uppercase}
.foot-col a,.foot-col p{display:block;font-size:.86rem;color:var(--muted);margin:0 0 7px;transition:.2s}
.foot-col a:hover{color:var(--accent)}
.copy{
  max-width:1320px;margin:26px auto 0;padding-top:18px;border-top:2px solid var(--line);
  font-size:.82rem;color:#5e6690;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* ---------- 回到顶部 ---------- */
#toTop{
  position:fixed;right:20px;bottom:24px;z-index:900;
  width:48px;height:48px;background:var(--main);color:#04131a;
  border:2px solid #000;box-shadow:4px 4px 0 var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:.3s;
}
#toTop.show{opacity:1;visibility:visible;transform:translateY(0)}
#toTop:hover{background:var(--accent);color:#fff}

/* ---------- 底部抽屉弹窗 ---------- */
.drawer-mask{
  position:fixed;inset:0;background:rgba(4,3,12,.78);z-index:1200;
  opacity:0;visibility:hidden;transition:.3s;
}
.drawer-mask.show{opacity:1;visibility:visible}
.drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:1300;
  background:var(--panel);border-top:3px solid var(--main);
  max-height:86vh;overflow-y:auto;transform:translateY(102%);
  transition:transform .36s cubic-bezier(.22,.8,.3,1);
  box-shadow:0 -10px 0 rgba(236,72,153,.22);
}
.drawer.show{transform:translateY(0)}
.drawer-inner{max-width:960px;margin:0 auto;padding:22px 22px 34px}
.drawer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.drawer-top h3{font-size:1.28rem;margin:0;color:#fff}
.drawer-close{
  flex:none;background:none;border:2px solid var(--accent);color:var(--accent);
  width:38px;height:38px;font-size:1rem;cursor:pointer;transition:.2s;
}
.drawer-close:hover{background:var(--accent);color:#fff}
.drawer-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.drawer-tags span{
  font-size:.78rem;font-weight:800;padding:2px 10px;
  border:2px solid var(--line);color:var(--main);
}
.drawer-tags span.score{border-color:var(--accent);color:var(--accent)}
.drawer-row{margin-bottom:12px;font-size:.92rem}
.drawer-row b{color:var(--main);margin-right:8px;font-weight:800}
.drawer-row span{color:var(--text)}
.drawer-plot{
  font-size:.92rem;color:var(--muted);border-left:3px solid var(--main);
  padding-left:14px;line-height:1.95;margin:6px 0 0;
}

/* ---------- 响应式 ---------- */
@media (max-width:991px){
  .layout{grid-template-columns:1fr;gap:26px}
  .sidebar{position:static}
  .side-card{margin-bottom:16px}
}
@media (max-width:767px){
  .nav-toggle{display:block;margin-left:auto}
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:rgba(12,10,26,.98);border-bottom:2px solid var(--main);
    flex-direction:column;padding:10px 16px 16px;gap:4px;
  }
  .navlinks.open{display:flex}
  .navlinks a{border:2px solid transparent;padding:9px 10px}
  .topbar-inner{flex-wrap:wrap;padding:12px 16px;gap:14px;position:relative}
  .hero{padding-top:112px}
  .poster-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
  .rank-list{grid-template-columns:1fr}
  .drawer-inner{padding:18px 16px 30px}
  .brand{font-size:1.1rem}
}
@media (max-width:420px){
  .poster-grid{grid-template-columns:repeat(2,1fr)}
}

/* --- 子页面追加 --- */
/* 本页少量专属样式，复用站点变量 */
    .about-page .hero {
      padding: 64px 0 40px;
      position: relative;
      overflow: hidden;
    }
.about-page .hero-wrap {
      position: relative;
      z-index: 2;
      max-width: 860px;
    }
.about-page .hero h1 {
      font-size: clamp(1.9rem, 4.2vw, 3.2rem);
      font-weight: 800;
      line-height: 1.18;
      margin: 14px 0 18px;
      letter-spacing: -0.02em;
    }
.about-page .hero h1 .hl {
      color: var(--main);
      text-shadow: 3px 3px 0 #000;
    }
.about-page .hero-lead {
      color: var(--text);
      opacity: .88;
      font-size: 1.02rem;
      line-height: 1.85;
      max-width: 720px;
    }
.about-page .kicker {
      display: inline-block;
      font-size: .78rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--main);
      background: rgba(6,182,212,.12);
      border: 1px solid rgba(6,182,212,.35);
      border-radius: 999px;
      padding: 6px 14px;
      font-weight: 600;
    }
.about-page .sec-head {
      display: flex;
      align-items: baseline;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 26px;
    }
.about-page .sec-head h2 {
      font-size: clamp(1.35rem, 2.6vw, 1.9rem);
      font-weight: 800;
      margin: 0;
      letter-spacing: -0.01em;
    }
.about-page .sec-head .sec-tag {
      font-size: .78rem;
      color: var(--muted);
      border-left: 2px solid var(--accent);
      padding-left: 12px;
      line-height: 1.4;
    }
.about-page .layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 36px;
      align-items: start;
      padding-bottom: 70px;
    }
.about-page .layout { grid-template-columns: 1fr; }
.about-page .content-block {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 30px 32px;
      box-shadow: var(--shadow);
      margin-bottom: 28px;
    }
.about-page .content-block { padding: 22px 18px; }
.about-page .content-block p {
      color: var(--text);
      opacity: .86;
      line-height: 1.9;
      font-size: .98rem;
      margin-bottom: 16px;
    }
.about-page .content-block p:last-child { margin-bottom: 0; }
.about-page .content-block strong { color: var(--main); font-weight: 700; }
.about-page .feature-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      margin-top: 8px;
    }
.about-page .feature-grid { grid-template-columns: 1fr; }
.about-page .feature-item {
      background: rgba(6,182,212,.06);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 20px 20px;
      transition: border-color .2s, transform .2s;
    }
.about-page .feature-item:hover {
      border-color: var(--main);
      transform: translateY(-2px);
    }
.about-page .feature-item .f-icon {
      font-size: 1.35rem;
      color: var(--accent);
      margin-bottom: 10px;
      display: block;
    }
.about-page .feature-item h3 {
      font-size: 1.02rem;
      font-weight: 700;
      margin: 0 0 8px;
      color: var(--text);
    }
.about-page .feature-item p {
      font-size: .88rem;
      line-height: 1.75;
      color: var(--muted);
      margin: 0;
    }
.about-page .timeline {
      list-style: none;
      padding: 0;
      margin: 6px 0 0;
      position: relative;
    }
.about-page .timeline::before {
      content: "";
      position: absolute;
      left: 9px;
      top: 6px;
      bottom: 6px;
      width: 2px;
      background: linear-gradient(var(--main), var(--accent));
      opacity: .5;
    }
.about-page .timeline li {
      position: relative;
      padding-left: 36px;
      margin-bottom: 22px;
    }
.about-page .timeline li:last-child { margin-bottom: 0; }
.about-page .timeline li::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 6px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--bg);
      border: 2px solid var(--main);
      box-shadow: 0 0 0 4px rgba(6,182,212,.12);
    }
.about-page .timeline .t-date {
      font-size: .76rem;
      letter-spacing: .06em;
      color: var(--accent);
      font-weight: 700;
      text-transform: uppercase;
      display: block;
      margin-bottom: 4px;
    }
.about-page .timeline .t-title {
      font-weight: 700;
      font-size: .98rem;
      margin-bottom: 4px;
      display: block;
    }
.about-page .timeline .t-desc {
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.7;
      margin: 0;
    }
.about-page .sidebar .side-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 24px 22px;
      box-shadow: var(--shadow);
      margin-bottom: 24px;
    }
.about-page .side-card h3 {
      font-size: 1rem;
      font-weight: 800;
      margin: 0 0 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
.about-page .side-card h3 i { color: var(--main); font-size: .95rem; }
.about-page .side-card ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
.about-page .side-card ul li {
      padding: 9px 0;
      border-bottom: 1px dashed var(--line);
      font-size: .9rem;
      color: var(--text);
      opacity: .85;
      display: flex;
      align-items: center;
      gap: 10px;
    }
.about-page .side-card ul li:last-child { border-bottom: none; }
.about-page .side-card ul li i {
      color: var(--accent);
      font-size: .72rem;
    }
.about-page .side-note {
      font-size: .84rem;
      color: var(--muted);
      line-height: 1.8;
      background: rgba(236,72,153,.07);
      border-left: 3px solid var(--accent);
      border-radius: 0 10px 10px 0;
      padding: 14px 16px;
    }
.about-page .side-note a {
      color: var(--main);
      text-decoration: none;
      border-bottom: 1px dotted var(--main);
    }
.about-page .side-note a:hover { color: var(--accent); border-color: var(--accent); }
.about-page .stat-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 4px;
    }
.about-page .stat-row .stat {
      text-align: center;
      padding: 10px 4px;
      border-radius: 10px;
      background: rgba(6,182,212,.06);
      border: 1px solid var(--line);
    }
.about-page .stat-row .stat b {
      display: block;
      font-size: 1.25rem;
      color: var(--main);
      font-weight: 800;
      line-height: 1.2;
    }
.about-page .stat-row .stat span {
      font-size: .74rem;
      color: var(--muted);
    }
.about-page .cta-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      background: linear-gradient(120deg, rgba(6,182,212,.15), rgba(236,72,153,.12));
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 26px 30px;
      margin-top: 8px;
    }
.about-page .cta-strip h3 {
      margin: 0 0 6px;
      font-size: 1.1rem;
      font-weight: 800;
    }
.about-page .cta-strip p {
      margin: 0;
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.7;
    }
.about-page .cta-links { display: flex; gap: 12px; flex-wrap: wrap; }
.about-page .cta-links a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid var(--main);
      color: var(--main);
      transition: all .2s;
    }
.about-page .cta-links a:hover {
      background: var(--main);
      color: var(--bg);
      box-shadow: 3px 3px 0 #000;
    }
.about-page .cta-links a.alt {
      border-color: var(--accent);
      color: var(--accent);
    }
.about-page .cta-links a.alt:hover {
      background: var(--accent);
      color: #fff;
    }
.about-page .site-footer {
      border-top: 1px solid var(--line);
      padding: 34px 0 40px;
      background: var(--panel);
      margin-top: 30px;
    }
.about-page .site-footer .foot-inner {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
      align-items: flex-start;
    }
.about-page .site-footer .foot-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: .88rem;
      margin-left: 18px;
      transition: color .2s;
    }
.about-page .site-footer .foot-links a:hover { color: var(--main); }
.about-page .site-footer .foot-brand {
      font-weight: 800;
      font-size: 1.05rem;
      color: var(--text);
    }
.about-page .site-footer .foot-brand span { margin-right: 6px; }
.about-page .site-footer .foot-copy {
      font-size: .8rem;
      color: var(--muted);
      margin-top: 8px;
      line-height: 1.7;
    }
.about-page .site-footer .foot-links a {
        margin-left: 0;
        margin-right: 16px;
      }

/* --- 子页面追加 --- */
.doc-wrap { max-width: 900px; margin: 0 auto; }
.doc-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 30px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
  }
.doc-card h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
.doc-card h2 i { color: var(--main); font-size: 1.1rem; }
.doc-card p, .doc-card li {
    color: var(--muted);
    line-height: 1.9;
    font-size: .96rem;
    margin-bottom: 10px;
  }
.doc-card ul { padding-left: 1.2rem; }
.doc-card strong { color: var(--text); font-weight: 600; }
.doc-card em { color: var(--accent); font-style: normal; font-weight: 600; }
.doc-updated {
    display: inline-block;
    background: rgba(6,182,212,.12);
    border: 1px solid rgba(6,182,212,.4);
    color: var(--main);
    font-size: .82rem;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 22px;
  }
.doc-card a { color: var(--main); text-decoration: none; }
.doc-card a:hover { color: var(--accent); text-decoration: underline; }
.tip-box {
    border-left: 3px solid var(--accent);
    background: rgba(236,72,153,.08);
    padding: 14px 18px;
    border-radius: 0 10px 10px 0;
    color: var(--text);
    font-size: .93rem;
    line-height: 1.85;
    margin-top: 8px;
  }
.doc-card { padding: 20px 18px; }
.doc-card h2 { font-size: 1.15rem; }

/* --- 子页面追加 --- */
.guide-panel {background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow);margin-bottom:26px}
.guide-panel h2 {font-size:1.35rem;font-weight:800;margin:0 0 14px;color:var(--text);letter-spacing:.2px}
.guide-panel h3 {font-size:1.05rem;font-weight:700;margin:18px 0 8px;color:var(--main)}
.guide-panel p {color:var(--muted);line-height:1.85;margin:0 0 10px;font-size:.95rem}
.guide-panel strong {color:var(--text)}
.guide-panel a {color:var(--main);text-decoration:none;border-bottom:1px dashed rgba(6,182,212,.45)}
.guide-panel a:hover {color:var(--accent);border-bottom-color:var(--accent)}
.step-list {list-style:none;margin:0;padding:0;counter-reset:step}
.step-list li {position:relative;padding:14px 0 14px 54px;border-bottom:1px dashed var(--line);color:var(--muted);line-height:1.8;font-size:.94rem}
.step-list li:last-child {border-bottom:0}
.step-list li::before {counter-increment:step;content:counter(step);position:absolute;left:0;top:12px;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--main),var(--accent));color:#0c0a1a;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.step-list li b {color:var(--text)}
.tag-row {display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.tag-row span {font-size:.8rem;padding:5px 12px;border-radius:999px;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.35);color:var(--main)}
.faq-item {border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;background:rgba(0,0,0,.22)}
.faq-item summary {cursor:pointer;padding:15px 18px;font-weight:700;color:var(--text);font-size:.95rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker {display:none}
.faq-item summary::after {content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.7rem;color:var(--main);transition:transform .2s}
.faq-item[open] summary::after {transform:rotate(180deg)}
.faq-item .faq-body {padding:0 18px 16px;color:var(--muted);line-height:1.85;font-size:.92rem}
.guide-hero {padding:52px 0 30px}
.guide-hero h1 {font-size:clamp(1.6rem,4vw,2.5rem);font-weight:900;line-height:1.3;margin:12px 0 14px;color:var(--text)}
.guide-hero h1 em {font-style:normal;background:linear-gradient(90deg,var(--main),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.mini-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:8px}
.mini-card {background:rgba(6,182,212,.06);border:1px solid var(--line);border-radius:12px;padding:16px 14px;text-align:center}
.mini-card i {font-size:1.3rem;color:var(--accent);margin-bottom:8px;display:block}
.mini-card b {display:block;color:var(--text);font-size:.92rem;margin-bottom:4px}
.mini-card small {color:var(--muted);font-size:.78rem;line-height:1.6}
.guide-panel {padding:20px 16px}
.step-list li {padding-left:46px}