:root{
  --main:#2563eb;
  --accent:#06b6d4;
  --bg:#f4f8ff;
  --ink:#0f1e3d;
  --line:#0f1e3d;
  --paper:#ffffff;
  --shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,h4,.handfont{
  font-family:"Inter","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:900;
  letter-spacing:-0.02em;
}
a{color:var(--main);text-decoration:none;}
a:hover{color:var(--accent);}
.container-x{max-width:1280px;margin:0 auto;padding:0 18px;}

/* progress bar */
#readbar{
  position:fixed;top:0;left:0;height:5px;width:0%;
  background:linear-gradient(90deg,var(--main),var(--accent));
  z-index:2000;
}

/* nav */
header.topbar{
  position:sticky;top:0;z-index:1500;
  background:var(--paper);
  border-bottom:4px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;}
.brand{
  font-weight:900;font-size:1.35rem;color:var(--ink);
  letter-spacing:-0.03em;display:flex;align-items:center;gap:8px;
  border:3px solid var(--line);background:var(--accent);color:#04121f;
  padding:4px 12px;box-shadow:4px 4px 0 var(--line);
}
.brand:hover{color:var(--ink);}
.brand i{font-size:1.1rem;}
.navmenu{display:flex;align-items:center;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.navmenu a{
  display:inline-block;padding:7px 13px;font-weight:700;font-size:.94rem;
  color:var(--ink);border:2px solid transparent;
}
.navmenu a:hover,.navmenu a.active{
  border:2px solid var(--line);background:var(--bg);
  box-shadow:3px 3px 0 var(--line);
}
.navtoggle{
  display:none;background:var(--paper);border:3px solid var(--line);
  box-shadow:4px 4px 0 var(--line);padding:6px 12px;font-size:1.1rem;color:var(--ink);
}
@media(max-width:991px){
  .navtoggle{display:block;}
  .navmenu{
    display:none;width:100%;flex-direction:column;align-items:stretch;
    border-top:3px solid var(--line);margin-top:12px;padding-top:12px;
  }
  .navmenu.open{display:flex;}
  .navmenu a{border:2px solid var(--line);}
}

/* hero */
.hero{
  position:relative;min-height:520px;display:flex;align-items:flex-end;
  border-bottom:5px solid var(--line);overflow:hidden;
}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.42) saturate(1.05);
}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(15,30,61,.92) 0%,rgba(15,30,61,.45) 55%,rgba(37,99,235,.25) 100%);
}
.hero-content{position:relative;z-index:2;padding:60px 0 48px;color:#fff;}
.hero-badge{
  display:inline-block;background:var(--accent);color:#04121f;font-weight:900;
  padding:5px 14px;border:3px solid #fff;box-shadow:5px 5px 0 rgba(0,0,0,.45);
  font-size:.82rem;letter-spacing:.08em;
}
.hero h1{
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.1;margin:18px 0 14px;
  text-shadow:5px 5px 0 rgba(0,0,0,.4);
}
.hero p{max-width:640px;color:#dbe7ff;font-size:1.02rem;}
.hero-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.hero-stat{
  border:3px solid #fff;background:rgba(37,99,235,.55);
  padding:10px 18px;min-width:120px;
  box-shadow:5px 5px 0 rgba(0,0,0,.4);
}
.hero-stat b{display:block;font-size:1.7rem;line-height:1.1;color:#fff;}
.hero-stat span{font-size:.8rem;color:#cfe0ff;letter-spacing:.05em;}

/* section base */
section.block{padding:64px 0;border-bottom:4px solid var(--line);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:28px;}
.sec-title{
  font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0;line-height:1.15;
  position:relative;padding-left:18px;
}
.sec-title::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:8px;
  background:var(--accent);border:2px solid var(--line);
}
.sec-sub{margin:6px 0 0;color:#4a5a７a;color:#4a5a7a;font-size:.95rem;}
.sec-head .tag-row{display:flex;gap:8px;flex-wrap:wrap;}

/* pills */
.pill{
  display:inline-block;padding:6px 14px;font-size:.82rem;font-weight:800;
  border:2px solid var(--line);background:var(--paper);color:var(--ink);
  box-shadow:3px 3px 0 var(--line);cursor:pointer;transition:.15s;
}
.pill:hover{background:var(--accent);color:#04121f;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line);}
.pill.on{background:var(--main);color:#fff;}

/* layout: sidebar + grid */
.split{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start;}
@media(max-width:900px){.split{grid-template-columns:1fr;}}
.sidebar{
  background:var(--paper);border:3px solid var(--line);box-shadow:var(--shadow);
  padding:18px;position:sticky;top:92px;
}
@media(max-width:900px){.sidebar{position:static;}}
.sidebar h3{font-size:1rem;margin:0 0 12px;padding-bottom:10px;border-bottom:3px solid var(--line);}
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.side-list a{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 10px;font-weight:700;font-size:.9rem;color:var(--ink);
  border:2px solid transparent;transition:.15s;
}
.side-list a:hover{background:var(--bg);border:2px solid var(--line);box-shadow:3px 3px 0 var(--line);}
.side-list a span{font-size:.75rem;color:var(--main);font-weight:800;}

/* poster grid */
.poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:1100px){.poster-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:720px){.poster-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media(max-width:420px){.poster-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}
.card-film{
  background:var(--paper);border:3px solid var(--line);box-shadow:5px 5px 0 var(--line);
  overflow:hidden;transition:.18s;width:100%;
}
.card-film:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--line);}
.poster-wrap{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;background:#dce8ff;}
.poster-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.card-film:hover .poster-wrap img{transform:scale(1.09);}
.poster-veil{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(0deg,rgba(15,30,61,.92),rgba(15,30,61,.05) 65%);
  opacity:0;transition:opacity .3s ease;padding:12px;
}
.card-film:hover .poster-veil{opacity:1;}
.poster-veil p{margin:0;color:#e7f0ff;font-size:.78rem;line-height:1.5;}
.card-meta{padding:10px 12px;border-top:3px solid var(--line);}
.card-meta h4{font-size:.94rem;margin:0 0 4px;line-height:1.3;font-weight:800;}
.card-meta small{color:#5a6b８a;color:#5a6b8a;font-size:.76rem;font-weight:600;}
.badge-corner{
  position:absolute;top:8px;left:8px;background:var(--accent);color:#04121f;
  font-size:.7rem;font-weight:900;padding:3px 8px;border:2px solid var(--line);
}

/* tabs */
.tabbar{display:flex;gap:0;flex-wrap:wrap;border:3px solid var(--line);border-bottom:none;background:var(--paper);}
.tabbar button{
  border:none;background:transparent;padding:12px 22px;font-weight:800;font-size:.94rem;
  color:var(--ink);border-right:3px solid var(--line);cursor:pointer;transition:.15s;
}
.tabbar button:last-child{border-right:none;}
.tabbar button.on{background:var(--main);color:#fff;}
.tabbar button:hover:not(.on){background:var(--bg);}
.tabpanel{
  border:3px solid var(--line);background:var(--paper);box-shadow:var(--shadow);
  padding:22px;
}
.tabpanel[hidden]{display:none;}

/* chart / ranking */
.chart-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:800px){.chart-list{grid-template-columns:1fr;}}
.chart-item{
  display:flex;gap:14px;align-items:center;border:3px solid var(--line);
  background:var(--paper);padding:10px 14px;box-shadow:4px 4px 0 var(--line);transition:.18s;
}
.chart-item:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line);}
.rank-no{
  min-width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:900;border:3px solid var(--line);flex-shrink:0;
}
.rank-1{background:#ffd166;}
.rank-2{background:#d8e2f0;}
.rank-3{background:#e6a46a;}
.rank-n{background:var(--bg);}
.chart-item .poster-mini{
  width:52px;height:74px;object-fit:cover;border:2px solid var(--line);flex-shrink:0;
}
.chart-body{flex:1;min-width:0;}
.chart-body h4{margin:0 0 3px;font-size:.96rem;font-weight:800;}
.chart-body small{color:#5a6b8a;font-weight:600;font-size:.78rem;}
.chart-score{font-weight:900;color:var(--main);font-size:1.05rem;}

/* upcoming timeline */
.timeline{position:relative;margin:0;padding:0 0 0 26px;list-style:none;}
.timeline::before{
  content:"";position:absolute;left:6px;top:6px;bottom:6px;width:4px;background:var(--line);
}
.timeline li{position:relative;padding:0 0 26px 22px;}
.timeline li::before{
  content:"";position:absolute;left:-26px;top:6px;width:16px;height:16px;
  background:var(--accent);border:3px solid var(--line);
}
.tl-date{
  display:inline-block;font-weight:900;font-size:.8rem;background:var(--main);color:#fff;
  padding:2px 10px;border:2px solid var(--line);margin-bottom:8px;
}
.tl-card{border:3px solid var(--line);background:var(--paper);padding:12px 16px;box-shadow:4px 4px 0 var(--line);}
.tl-card h4{margin:0 0 4px;font-size:1rem;font-weight:800;}
.tl-card p{margin:0;font-size:.85rem;color:#465677;}

/* faq */
.faq-item{border:3px solid var(--line);background:var(--paper);box-shadow:4px 4px 0 var(--line);margin-bottom:14px;}
.faq-q{
  width:100%;text-align:left;background:transparent;border:none;cursor:pointer;
  padding:14px 18px;font-weight:800;font-size:1rem;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.faq-q i{color:var(--main);transition:.2s;}
.faq-q.open i{transform:rotate(45deg);}
.faq-a{padding:0 18px 16px;font-size:.92rem;color:#3d4d6b;display:none;}
.faq-a.show{display:block;}

/* friends */
.friendbox{
  border:3px solid var(--line);background:var(--paper);box-shadow:var(--shadow);
  padding:22px;
}
.friendbox .flinks{display:flex;flex-wrap:wrap;gap:10px;font-size:.92rem;}

/* footer */
footer.site-foot{
  background:var(--ink);color:#c9d8f2;padding:52px 0 26px;
  border-top:5px solid var(--accent);
}
footer.site-foot h5{color:#fff;font-weight:900;font-size:1rem;margin-bottom:14px;}
footer.site-foot a{color:#a8c0e8;font-size:.9rem;}
footer.site-foot a:hover{color:var(--accent);}
.foot-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.foot-bottom{
  border-top:2px solid rgba(255,255,255,.18);margin-top:34px;padding-top:18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;color:#8ea6c8;
}
.foot-brand{
  display:inline-block;font-weight:900;font-size:1.2rem;color:#04121f;background:var(--accent);
  border:3px solid #fff;padding:4px 12px;box-shadow:4px 4px 0 rgba(255,255,255,.3);margin-bottom:14px;
}
.foot-brand a{color:#04121f;}

/* reveal animation */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* misc */
.divider-hard{height:4px;background:var(--line);border:none;margin:0;}
.text-accent{color:var(--accent);}
.btn-hard{
  display:inline-block;padding:11px 24px;font-weight:900;font-size:.94rem;
  background:var(--main);color:#fff;border:3px solid var(--line);
  box-shadow:5px 5px 0 var(--line);transition:.15s;
}
.btn-hard:hover{background:var(--accent);color:#04121f;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--line);}

/* --- 子页面追加 --- */
/* 本页专属少量补充样式 */
  .guide-step {
    background:var(--paper);
    border:3px solid var(--line);
    box-shadow:var(--shadow);
    padding:22px 24px;
    border-radius:14px;
    height:100%;
  }
.guide-step .step-num {
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:10px;
    background:var(--main);color:#fff;font-weight:800;
    border:3px solid var(--line);
    margin-bottom:12px;
  }
.guide-step h3 {
    font-size:1.05rem;font-weight:800;color:var(--ink);margin-bottom:8px;
  }
.guide-step p {font-size:.92rem;line-height:1.7;color:#334;margin:0;}
.faq-item h3 {
    font-size:1rem;font-weight:800;color:var(--ink);
    margin-bottom:8px;display:flex;gap:10px;align-items:flex-start;
  }
.faq-item h3 i {color:var(--accent);margin-top:3px;}
.faq-item p {font-size:.92rem;line-height:1.75;color:#334;margin:0;}
.tip-box {
    background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(6,182,212,.10));
    border:3px dashed var(--main);
    border-radius:14px;
    padding:20px 24px;
    margin-top:26px;
  }
.tip-box h3 {font-size:1.02rem;font-weight:800;color:var(--main);margin-bottom:8px;}
.tip-box p {font-size:.92rem;line-height:1.75;color:#22304d;margin:0;}
.guide-list {list-style:none;padding:0;margin:0;}
.guide-list li {
    display:flex;gap:12px;align-items:flex-start;
    font-size:.94rem;line-height:1.75;color:#2a3550;
    padding:10px 0;border-bottom:1px dashed rgba(15,30,61,.18);
  }
.guide-list li:last-child {border-bottom:none;}
.guide-list li i {color:var(--accent);margin-top:5px;flex-shrink:0;}
.side-card {
    background:var(--paper);
    border:3px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:20px 22px;
    margin-bottom:24px;
  }
.side-card h3 {
    font-size:1rem;font-weight:800;color:var(--ink);
    margin-bottom:14px;padding-bottom:10px;
    border-bottom:3px solid var(--line);
  }
.side-card a {
    color:var(--ink);text-decoration:none;font-weight:600;
    font-size:.93rem;display:block;padding:7px 0;
    transition:.2s;
  }
.side-card a:hover {color:var(--main);transform:translateX(4px);}
.side-card a i {color:var(--accent);margin-right:8px;}
.guide-hero-title {
    font-size:clamp(1.7rem,4vw,2.7rem);
    font-weight:900;line-height:1.25;color:var(--ink);
    margin-bottom:14px;
  }
.guide-hero-lead {
    font-size:1.02rem;line-height:1.8;color:#25324d;max-width:760px;
  }

/* --- 子页面追加 --- */
/* 本页专属微调，站点样式表已定义大部分类 */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin: 1.5rem 0 2.5rem;
      padding: 1.25rem 1.5rem;
      background: var(--paper);
      border: 2px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: 16px;
    }
.filter-bar .filter-label {
      font-weight: 700;
      color: var(--ink);
      margin-right: 8px;
      font-size: 0.95rem;
      letter-spacing: 0.5px;
    }
.filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      border-radius: 100px;
      border: 1.5px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      user-select: none;
    }
.filter-pill:hover,
    .filter-pill.active {
      background: var(--main);
      color: #fff;
      border-color: var(--main);
      transform: translateY(-2px);
      box-shadow: 3px 3px 0 var(--ink);
    }
.movie-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 24px;
    }
.movie-grid .card-film {
      transition: transform 0.15s ease;
    }
.movie-grid .card-film:hover {
      transform: translateY(-4px);
    }
.section-note {
      background: var(--paper);
      border: 2px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: 20px;
      padding: 2rem 2.2rem;
      margin: 3rem 0 1rem;
    }
.section-note h3 {
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 0.75rem;
      font-size: 1.35rem;
    }
.section-note p {
      color: var(--ink);
      opacity: 0.85;
      line-height: 1.75;
      margin-bottom: 0.6rem;
    }
.section-note ul {
      padding-left: 1.2rem;
      color: var(--ink);
      opacity: 0.85;
      line-height: 1.8;
    }
.page-hero {
      padding: 3.5rem 0 1.5rem;
    }
.page-hero h1 {
      font-weight: 900;
      color: var(--ink);
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      letter-spacing: -0.5px;
      margin-bottom: 0.8rem;
    }
.page-hero p {
      color: var(--ink);
      opacity: 0.8;
      font-size: 1.05rem;
      max-width: 720px;
      line-height: 1.7;
    }
.filter-bar { padding: 1rem; gap: 8px; }
.movie-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.section-note { padding: 1.4rem; }

/* --- 子页面追加 --- */
/* 本页专属少量补充，复用站点变量与类名 */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      align-items: center;
      margin: 1.6rem 0 2rem;
    }
.filter-pill i {
      margin-right: 6px;
      font-size: 0.8rem;
    }
.pager {
      display: flex;
      justify-content: center;
      gap: 0.6rem;
      margin: 2.8rem 0 1rem;
      flex-wrap: wrap;
    }
.pager a,
    .pager span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 40px;
      padding: 0 10px;
      border: 2px solid var(--line);
      border-radius: 10px;
      background: var(--paper);
      color: var(--ink);
      font-weight: 700;
      text-decoration: none;
      box-shadow: 3px 3px 0 var(--ink);
      transition: 0.12s;
    }
.pager a:hover,
    .pager .current {
      background: var(--main);
      color: #fff;
      border-color: var(--main);
    }
.pager .current {
      pointer-events: none;
    }
.note-card {
      background: var(--paper);
      border: 2px solid var(--line);
      border-radius: 16px;
      padding: 1.6rem 1.8rem;
      box-shadow: var(--shadow);
      margin-top: 2.4rem;
    }
.note-card h3 {
      font-weight: 800;
      font-size: 1.25rem;
      margin-bottom: 0.8rem;
      color: var(--ink);
    }
.note-card p {
      color: #2d3f5e;
      line-height: 1.7;
      margin-bottom: 0.5rem;
    }
.note-card ul {
      padding-left: 1.2rem;
      color: #2d3f5e;
      line-height: 1.8;
    }
.note-card {
        padding: 1.2rem;
      }

/* --- 子页面追加 --- */
/* 本页专属微调，尽量复用站点类名 */
  .page-hero {padding:56px 0 36px;}
.crumb {font-size:13px;font-weight:600;color:var(--main);margin-bottom:14px;letter-spacing:.4px;}
.crumb a {color:var(--main);text-decoration:none;}
.crumb a:hover {text-decoration:underline;}
.filter-bar .tag {border:2px solid var(--ink);background:var(--paper);color:var(--ink);
    font-size:13px;font-weight:700;padding:7px 16px;border-radius:999px;cursor:pointer;
    box-shadow:3px 3px 0 var(--ink);transition:.15s;text-decoration:none;display:inline-block;}
.filter-bar .tag:hover {transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.filter-bar .tag.on {background:var(--main);color:#fff;}
.variety-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px;margin-top:30px;}
.v-card {background:var(--paper);border:2px solid var(--ink);border-radius:16px;overflow:hidden;
    box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.18s;}
.v-card:hover {transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);}
.v-thumb {position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg);}
.v-thumb img {width:100%;height:100%;object-fit:cover;display:block;}
.v-tag {position:absolute;top:10px;left:10px;background:var(--accent);color:#04222b;
    font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;border:2px solid var(--ink);}
.v-ep {position:absolute;bottom:10px;right:10px;background:rgba(15,30,61,.86);color:#fff;
    font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px;}
.v-body {padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.v-title {font-size:16px;font-weight:800;color:var(--ink);margin:0;line-height:1.35;}
.v-meta {font-size:12.5px;color:#4a5a7a;font-weight:600;letter-spacing:.2px;}
.v-desc {font-size:13px;color:#3c4a68;line-height:1.6;margin:0;flex:1;}
.v-foot {display:flex;justify-content:space-between;align-items:center;margin-top:4px;}
.v-score {font-size:13px;font-weight:800;color:var(--main);}
.v-score i {color:#f59e0b;margin-right:3px;}
.v-link {font-size:13px;font-weight:800;color:var(--ink);text-decoration:none;
    border-bottom:2px solid var(--accent);padding-bottom:1px;}
.v-link:hover {color:var(--main);}
.guide-block {background:var(--paper);border:2px solid var(--ink);border-radius:18px;
    box-shadow:var(--shadow);padding:26px 26px 22px;margin-top:18px;}
.guide-block h3 {font-size:18px;font-weight:800;color:var(--ink);margin:0 0 10px;}
.guide-block p {font-size:14px;line-height:1.75;color:#37456a;margin:0 0 10px;}
.guide-block p:last-child {margin-bottom:0;}
.step-list {list-style:none;padding:0;margin:8px 0 0;counter-reset:step;}
.step-list li {position:relative;padding-left:38px;margin-bottom:14px;font-size:14px;
    line-height:1.7;color:#37456a;counter-increment:step;}
.step-list li::before {content:counter(step);position:absolute;left:0;top:0;width:26px;height:26px;
    background:var(--main);color:#fff;border:2px solid var(--ink);border-radius:8px;
    font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;}
.step-list li strong {color:var(--ink);}
.note {margin-top:26px;font-size:13px;color:#6b7896;line-height:1.7;}
.variety-grid {grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}
.v-body {padding:12px 12px 14px;}
.v-title {font-size:14.5px;}
.v-desc {display:none;}
.guide-block {padding:20px 18px;}

/* --- 子页面追加 --- */
/* 本页专属少量样式，配色沿用站点变量 */
.anime-filter {display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.anime-filter button {
  font-family:inherit;font-weight:600;font-size:.9rem;cursor:pointer;
  padding:.5rem 1.1rem;border-radius:999px;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  transition:.15s ease;
}
.anime-filter button:hover {transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.anime-filter button.is-on {background:var(--main);color:#fff;border-color:var(--ink)}
.anime-filter button.is-on .cnt {color:#dbeafe}
.anime-filter .cnt {font-weight:500;opacity:.7;margin-left:.35rem;font-size:.8rem}
.season-tag {
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  padding:.18rem .55rem;border-radius:6px;background:var(--accent);color:#04283a;
  border:1.5px solid var(--ink);
}
.card-film .season-tag {margin-top:.5rem}
.anime-note {
  background:var(--paper);border:2px solid var(--ink);border-radius:14px;
  box-shadow:var(--shadow);padding:1.4rem 1.5rem;
}
.anime-note h3 {font-size:1.05rem;font-weight:800;margin:0 0 .55rem;color:var(--ink)}
.anime-note p {margin:0 0 .9rem;font-size:.94rem;line-height:1.75;color:#33415c}
.anime-note p:last-child {margin-bottom:0}
.note-list {list-style:none;padding:0;margin:0}
.note-list li {
  position:relative;padding-left:1.5rem;margin-bottom:.7rem;
  font-size:.94rem;line-height:1.7;color:#33415c;
}
.note-list li:last-child {margin-bottom:0}
.note-list li::before {
  content:"\f111";font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:.4rem;color:var(--main);position:absolute;left:.15rem;top:.62rem;
}
.anime-filter {gap:.45rem}
.anime-filter button {font-size:.82rem;padding:.42rem .85rem}

/* --- 子页面追加 --- */
.filter-row {display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.filter-row .pill {cursor:pointer;border:2px solid var(--line);background:var(--paper);box-shadow:3px 3px 0 var(--ink);font-weight:700;font-size:.86rem;padding:7px 15px;}
.filter-row .pill.on {background:var(--main);color:#fff;}
.doc-section {padding:52px 0;border-bottom:2px dashed rgba(15,30,61,.18);}
.doc-section:last-of-type {border-bottom:none;}
.doc-h2 {font-weight:900;font-size:clamp(1.35rem,2.6vw,1.9rem);margin-bottom:6px;letter-spacing:-.01em;}
.doc-h2 i {color:var(--main);margin-right:10px;}
.doc-lead {color:#40527a;font-size:.97rem;line-height:1.8;margin-bottom:26px;max-width:820px;}
.doc-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;}
.doc-card {background:var(--paper);border:2px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .18s ease;}
.doc-card:hover {transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink);}
.doc-thumb {position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:2px solid var(--line);background:#dfe8f6;}
.doc-thumb img {width:100%;height:100%;object-fit:cover;display:block;}
.doc-score {position:absolute;right:10px;top:10px;background:var(--ink);color:#fff;font-weight:800;font-size:.8rem;padding:3px 9px;letter-spacing:.02em;}
.doc-body {padding:14px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.doc-body h3 {font-size:1.02rem;font-weight:800;margin:0;line-height:1.4;}
.doc-tags {display:flex;flex-wrap:wrap;gap:6px;}
.doc-tags span {font-size:.72rem;font-weight:700;padding:2px 8px;border:1.5px solid var(--line);background:#eef4ff;color:#1e3a8a;}
.doc-body p {font-size:.85rem;line-height:1.7;color:#4a5b80;margin:0;flex:1;}
.doc-meta {display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:700;color:#5b6b90;border-top:1.5px solid rgba(15,30,61,.14);padding-top:9px;}
.doc-meta .ep {color:var(--accent);}
.note-box {background:var(--paper);border:2px solid var(--line);box-shadow:var(--shadow);padding:24px 26px;margin-top:8px;}
.note-box h3 {font-weight:900;font-size:1.12rem;margin-bottom:10px;}
.note-box ul {margin:0;padding-left:20px;line-height:1.9;font-size:.92rem;color:#3d4f75;}
.note-box li::marker {color:var(--main);}
.side-box {background:var(--paper);border:2px solid var(--line);box-shadow:var(--shadow);padding:20px 20px 22px;margin-bottom:24px;}
.side-box h3 {font-size:1.02rem;font-weight:900;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--line);}
.side-box ol,.side-box ul {margin:0;padding-left:18px;font-size:.88rem;line-height:1.95;color:#3d4f75;}
.side-box li::marker {color:var(--accent);font-weight:800;}
.side-quote {font-size:.86rem;line-height:1.8;color:#3d4f75;}
.doc-section {padding:38px 0;}

/* --- 子页面追加 --- */
.up-tabs {display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.up-tab {padding:.5rem 1.1rem;border:2px solid var(--line);background:var(--paper);color:var(--ink);
    font-weight:700;font-size:.85rem;border-radius:999px;text-decoration:none;transition:.18s}
.up-tab:hover {background:var(--accent);color:#fff;border-color:var(--accent)}
.up-tab.on {background:var(--main);color:#fff;border-color:var(--main);box-shadow:3px 3px 0 var(--ink)}
.date-block {margin-bottom:2.4rem}
.date-head {display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.date-day {background:var(--main);color:#fff;font-weight:900;padding:.35rem .9rem;border:2px solid var(--line);
    box-shadow:3px 3px 0 var(--ink);border-radius:8px;font-size:1rem;white-space:nowrap}
.date-week {font-weight:800;color:var(--ink);font-size:.95rem}
.date-line {flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 14px);opacity:.25}
.up-list {display:flex;flex-direction:column;gap:.9rem}
.up-item {display:flex;gap:1rem;align-items:flex-start;background:var(--paper);border:2px solid var(--line);
    border-radius:12px;padding:1rem 1.2rem;box-shadow:4px 4px 0 rgba(15,30,61,.14);transition:.18s}
.up-item:hover {transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.up-time {font-weight:800;color:var(--main);font-size:.85rem;min-width:64px;padding-top:.15rem}
.up-body {flex:1;min-width:0}
.up-title {font-weight:800;color:var(--ink);font-size:1.02rem;margin-bottom:.25rem;line-height:1.4}
.up-title .tag {display:inline-block;font-size:.68rem;font-weight:800;padding:.1rem .45rem;border-radius:5px;
    background:var(--accent);color:#fff;margin-left:.4rem;vertical-align:middle;letter-spacing:.02em}
.up-title .tag.mv {background:var(--main)}
.up-title .tag.sr {background:#7c3aed}
.up-title .tag.an {background:#db2777}
.up-desc {font-size:.86rem;color:#42506e;line-height:1.65}
.up-note {font-size:.78rem;color:var(--main);font-weight:700;margin-top:.35rem}
.up-note i {margin-right:.25rem}
.legend {display:flex;flex-wrap:wrap;gap:1rem;font-size:.8rem;font-weight:700;color:#42506e;
    background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:.9rem 1.2rem;margin-bottom:2rem;box-shadow:4px 4px 0 rgba(15,30,61,.12)}
.legend span {display:inline-flex;align-items:center;gap:.4rem}
.dot {width:12px;height:12px;border-radius:3px;display:inline-block}
.dot.mv {background:var(--main)}
.dot.sr {background:#7c3aed}
.dot.va {background:var(--accent)}
.dot.an {background:#db2777}
.dot.do {background:#059669}
.side-card ul {list-style:none;padding:0;margin:0}
.side-card li {font-size:.85rem;color:#42506e;line-height:1.6;padding:.4rem 0;border-bottom:1px solid rgba(15,30,61,.08)}
.side-card li:last-child {border-bottom:0}
.side-card li strong {color:var(--ink)}
.up-item {flex-direction:column;gap:.4rem}
.up-time {padding-top:0}
.date-day {font-size:.9rem;padding:.3rem .7rem}

/* --- 子页面追加 --- */
/* ---------- 页面专属补充样式 ---------- */
  .about-hero {
    background:var(--paper);
    border:3px solid var(--line);
    box-shadow:var(--shadow);
    border-radius:18px;
    padding:34px 30px;
    margin-top:28px;
  }
.about-hero h1 {
    font-weight:900;
    font-size:clamp(1.55rem,3.4vw,2.5rem);
    line-height:1.25;
    letter-spacing:-.5px;
    margin-bottom:14px;
  }
.about-hero h1 em {
    font-style:normal;
    color:var(--main);
  }
.about-lead {
    font-size:1.02rem;
    line-height:1.9;
    color:#2b3a5b;
    margin-bottom:0;
  }
.fact-row {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-top:22px;
  }
.fact-item {
    background:var(--bg);
    border:2px solid var(--line);
    border-radius:12px;
    padding:14px 12px;
    text-align:center;
  }
.fact-item b {
    display:block;
    font-size:1.35rem;
    font-weight:900;
    color:var(--main);
    line-height:1.2;
  }
.fact-item span {
    font-size:.78rem;
    letter-spacing:.5px;
    color:#4b5b7a;
  }
.blk {
    background:var(--paper);
    border:3px solid var(--line);
    box-shadow:var(--shadow);
    border-radius:18px;
    padding:28px 26px;
    margin-top:26px;
  }
.blk h2 {
    font-size:clamp(1.2rem,2.3vw,1.6rem);
    font-weight:900;
    letter-spacing:-.3px;
    margin-bottom:16px;
    line-height:1.35;
  }
.blk h2 .tag-dot {
    display:inline-block;
    width:12px;height:12px;
    background:var(--accent);
    border:2px solid var(--line);
    border-radius:3px;
    margin-right:10px;
    transform:translateY(-2px);
  }
.blk p {
    line-height:1.95;
    color:#2b3a5b;
    margin-bottom:14px;
  }
.blk p:last-child {margin-bottom:0;}
.blk h3 {
    font-size:1.02rem;
    font-weight:800;
    margin:20px 0 8px;
    color:var(--ink);
  }
.rule-list {
    list-style:none;
    padding:0;
    margin:6px 0 0;
  }
.rule-list li {
    position:relative;
    padding:10px 0 10px 30px;
    border-bottom:1px dashed #cfd9ee;
    line-height:1.8;
    color:#2b3a5b;
  }
.rule-list li:last-child {border-bottom:0;}
.rule-list li i {
    position:absolute;
    left:0;top:13px;
    color:var(--main);
    font-size:.9rem;
  }
.rule-list li b {color:var(--ink);}
.nav-chip-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:6px;
  }
.nav-chip {
    display:block;
    background:var(--bg);
    border:2px solid var(--line);
    border-radius:12px;
    padding:14px 16px;
    text-decoration:none;
    color:var(--ink);
    transition:transform .15s ease, box-shadow .15s ease;
  }
.nav-chip:hover {
    transform:translate(-2px,-2px);
    box-shadow:4px 4px 0 var(--ink);
    color:var(--main);
  }
.nav-chip b {display:block;font-size:.95rem;font-weight:800;}
.nav-chip span {display:block;font-size:.78rem;color:#54648a;margin-top:4px;line-height:1.5;}
.tl-item {position:relative;padding-bottom:20px;}
.tl-item:last-child {padding-bottom:0;}
.tl-item::before {
    content:"";
    position:absolute;
    left:-31px;top:5px;
    width:14px;height:14px;
    background:var(--accent);
    border:3px solid var(--line);
    border-radius:50%;
  }
.tl-item b {display:block;font-size:.95rem;font-weight:800;margin-bottom:4px;}
.tl-item span {font-size:.9rem;line-height:1.8;color:#2b3a5b;display:block;}
.note-strip {
    background:linear-gradient(90deg,rgba(37,99,235,.10),rgba(6,182,212,.10));
    border:2px dashed var(--line);
    border-radius:14px;
    padding:18px 20px;
    margin-top:26px;
    line-height:1.9;
    color:#22314f;
    font-size:.95rem;
  }
.note-strip b {color:var(--main);}
.fact-row {grid-template-columns:repeat(2,1fr);}
.nav-chip-grid {grid-template-columns:1fr 1fr;}
.about-hero {padding:24px 18px;border-width:2px;box-shadow:4px 4px 0 var(--ink);}
.blk {padding:22px 18px;border-width:2px;box-shadow:4px 4px 0 var(--ink);}
.nav-chip-grid {grid-template-columns:1fr;}