:root{
  --main:#22d3ee;
  --accent:#fb923c;
  --bg:#0f172a;
  --text:#e2e8f0;
  --line:rgba(226,232,240,0.12);
  --panel:rgba(255,255,255,0.03);
  --panel-2:rgba(255,255,255,0.055);
  --radius:8px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.85;
  font-weight:400;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:800;line-height:1.35;letter-spacing:.2px;}
a{text-decoration:none;color:var(--main);}
a:hover{color:var(--accent);}
.container-x{max-width:1140px;margin:0 auto;padding:0 20px;}
.section{padding:64px 0;position:relative;}
.divider{border-top:1px solid var(--line);}

/* ===== 光晕装饰 ===== */
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;pointer-events:none;z-index:0;}
.glow-1{width:340px;height:340px;background:var(--main);top:-80px;left:-100px;}
.glow-2{width:300px;height:300px;background:var(--accent);top:120px;right:-90px;opacity:.22;}
.glow-3{width:260px;height:260px;background:var(--main);bottom:-60px;left:35%;opacity:.16;}

/* ===== 导航 ===== */
.navbar-custom{
  background:rgba(15,23,42,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:1000;
}
.navbar-brand{
  font-weight:900;font-size:1.35rem;color:var(--text)!important;
  letter-spacing:.5px;display:flex;align-items:center;gap:8px;
}
.navbar-brand .brand-dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--main),var(--accent));
  display:inline-block;
}
.nav-link{color:rgba(226,232,240,0.78)!important;font-weight:500;font-size:.95rem;padding:.5rem .9rem!important;position:relative;}
.nav-link::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.2rem;height:2px;
  background:linear-gradient(90deg,var(--main),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.nav-link:hover{color:var(--text)!important;}
.nav-link:hover::after{transform:scaleX(1);}
.navbar-toggler{border:1px solid var(--line);color:var(--text);}
.navbar-toggler:focus{box-shadow:none;}

/* ===== Hero ===== */
.hero{
  padding:72px 0 64px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--main);border:1px solid rgba(34,211,238,.35);
  background:rgba(34,211,238,.07);
  padding:6px 14px;border-radius:99px;margin-bottom:22px;
}
.hero h1{
  font-size:clamp(1.9rem,4.4vw,3rem);
  font-weight:900;margin-bottom:18px;letter-spacing:-.5px;
}
.hero h1 .hl{
  background:linear-gradient(100deg,var(--main),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{
  color:rgba(226,232,240,0.75);font-size:1.05rem;max-width:660px;margin-bottom:30px;
}
.btn-main{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--main),var(--accent));
  background-size:200% 200%;
  color:#08111f;font-weight:700;border:none;
  padding:13px 30px;border-radius:var(--radius);font-size:.98rem;
  transition:background-position .5s ease,transform .2s ease;
}
.btn-main:hover{background-position:100% 50%;color:#08111f;transform:translateY(-2px);}
.btn-ghost{
  border:1px solid rgba(226,232,240,.28);color:var(--text)!important;
  padding:13px 28px;border-radius:var(--radius);font-weight:600;font-size:.98rem;
  background:transparent;transition:all .25s ease;
}
.btn-ghost:hover{border-color:var(--main);background:rgba(34,211,238,.08);}

/* 关键词标签云 */
.tag-cloud{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;position:relative;z-index:2;
}
.tag-item{
  font-size:.85rem;font-weight:500;padding:7px 15px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);
  color:rgba(226,232,240,.82);white-space:nowrap;
  animation:floaty 6s ease-in-out infinite;
  transition:all .25s ease;
}
.tag-item:nth-child(3n){animation-delay:-2s;}
.tag-item:nth-child(3n+1){animation-delay:-4s;}
.tag-item:nth-child(5n){border-color:rgba(251,146,60,.4);color:var(--accent);}
.tag-item:nth-child(4n){border-color:rgba(34,211,238,.4);color:var(--main);}
.tag-item:hover{transform:translateY(-3px) scale(1.04);background:var(--panel-2);}
@keyframes floaty{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
@media (prefers-reduced-motion: reduce){
  .tag-item{animation:none;}
}

/* ===== 特色区块 ===== */
.sec-head{margin-bottom:40px;}
.sec-head .kicker{
  font-size:.78rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;display:block;
}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.05rem);margin-bottom:12px;}
.sec-head p{color:rgba(226,232,240,.66);max-width:640px;margin:0;}

.tabs-nav{
  display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);
  padding-bottom:0;margin-bottom:28px;
}
.tab-btn{
  background:transparent;border:none;color:rgba(226,232,240,.6);
  font-weight:600;font-size:.94rem;padding:11px 18px;border-radius:var(--radius) var(--radius) 0 0;
  position:relative;transition:color .2s ease;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--main);}
.tab-btn.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--main),var(--accent));
}
.tab-panel{display:none;}
.tab-panel.active{display:block;animation:fadeUp .38s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.feature-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;
}
.feature-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;transition:all .28s ease;position:relative;overflow:hidden;
}
.feature-card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--main),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .32s ease;
}
.feature-card:hover{background:var(--panel-2);transform:translateY(-4px);box-shadow:0 12px 30px -18px rgba(0,0,0,.9);}
.feature-card:hover::before{transform:scaleX(1);}
.feature-card .ficon{
  width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  background:rgba(34,211,238,.1);color:var(--main);font-size:1.1rem;margin-bottom:14px;
}
.feature-card.orange .ficon{background:rgba(251,146,60,.12);color:var(--accent);}
.feature-card h3{font-size:1.05rem;margin-bottom:8px;font-weight:700;}
.feature-card p{font-size:.9rem;color:rgba(226,232,240,.66);margin:0;line-height:1.75;}

/* ===== 对比表格 ===== */
.compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);}
table.compare{
  width:100%;border-collapse:collapse;min-width:620px;font-size:.92rem;
}
table.compare thead th{
  background:rgba(34,211,238,.07);color:var(--text);font-weight:700;
  text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.compare tbody td{
  padding:14px 18px;border-bottom:1px solid var(--line);color:rgba(226,232,240,.76);
  vertical-align:top;
}
table.compare tbody tr:last-child td{border-bottom:none;}
table.compare tbody tr:hover{background:rgba(251,146,60,.05);}
table.compare tbody td:first-child{font-weight:700;color:var(--text);}
.pill{
  display:inline-block;font-size:.75rem;font-weight:600;padding:2px 10px;border-radius:99px;
  background:rgba(34,211,238,.12);color:var(--main);white-space:nowrap;
}
.pill.orange{background:rgba(251,146,60,.13);color:var(--accent);}

/* ===== FAQ 手风琴 ===== */
.faq-item{
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;
  background:var(--panel);overflow:hidden;transition:border-color .25s ease;
}
.faq-item:hover{border-color:rgba(34,211,238,.35);}
.faq-q{
  width:100%;background:transparent;border:none;text-align:left;
  color:var(--text);font-weight:600;font-size:.98rem;padding:17px 50px 17px 20px;
  position:relative;cursor:pointer;line-height:1.6;
}
.faq-q .chev{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  color:var(--main);font-size:.85rem;transition:transform .3s ease;
}
.faq-item.open .faq-q .chev{transform:translateY(-50%) rotate(180deg);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .35s ease;
}
.faq-a-inner{
  padding:0 20px 18px;color:rgba(226,232,240,.7);font-size:.93rem;line-height:1.85;
}

/* ===== 时间线（介绍） ===== */
.timeline{position:relative;padding-left:30px;margin-top:10px;}
.timeline::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--main),var(--accent),transparent);
}
.tl-item{position:relative;padding-bottom:32px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";position:absolute;left:-30px;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:2px solid var(--main);
  box-shadow:0 0 0 4px rgba(34,211,238,.12);
}
.tl-item:nth-child(even)::before{border-color:var(--accent);box-shadow:0 0 0 4px rgba(251,146,60,.12);}
.tl-year{
  font-size:.78rem;font-weight:800;letter-spacing:1.5px;color:var(--accent);
  text-transform:uppercase;margin-bottom:4px;display:block;
}
.tl-item h4{font-size:1.02rem;margin-bottom:6px;font-weight:700;}
.tl-item p{font-size:.92rem;color:rgba(226,232,240,.66);margin:0;line-height:1.8;}

/* ===== CTA ===== */
.cta-box{
  position:relative;overflow:hidden;
  border:1px solid rgba(34,211,238,.25);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(251,146,60,.07));
  padding:52px 34px;text-align:center;
}
.cta-box h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px;}
.cta-box p{color:rgba(226,232,240,.72);max-width:600px;margin:0 auto 28px;}
.cta-box .glow{opacity:.22;}

/* ===== 友链 + 页脚 ===== */
.friend-links{padding:44px 0;border-top:1px solid var(--line);}
.friend-links h3{font-size:.95rem;font-weight:700;margin-bottom:14px;color:rgba(226,232,240,.8);}
.fline{font-size:.88rem;color:rgba(226,232,240,.55);line-height:2;}
footer.site-footer{
  border-top:1px solid var(--line);padding:36px 0 44px;font-size:.88rem;
  color:rgba(226,232,240,.55);
}
footer.site-footer .fbrand{font-weight:800;color:var(--text);font-size:1.05rem;margin-bottom:10px;display:inline-flex;align-items:center;gap:8px;}
footer.site-footer a{color:rgba(226,232,240,.7);margin-right:18px;font-size:.86rem;}
footer.site-footer a:hover{color:var(--main);}

/* 回到顶部 */
.to-top{
  position:fixed;right:22px;bottom:26px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(34,211,238,.4);background:rgba(15,23,42,.9);
  color:var(--main);display:flex;align-items:center;justify-content:center;
  font-size:1rem;cursor:pointer;z-index:1200;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:all .3s ease;backdrop-filter:blur(8px);
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{background:linear-gradient(120deg,var(--main),var(--accent));color:#08111f;border-color:transparent;}

/* 懒加载渐显 */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

@media (max-width:768px){
  .section{padding:48px 0;}
  .hero{padding:52px 0 46px;}
  .cta-box{padding:38px 20px;}
  .to-top{right:14px;bottom:18px;width:42px;height:42px;}
}

/* --- 子页面追加 --- */
/* 本页专属少量样式，沿用首页变量与类名 */
  .guide-hero { position: relative; padding: 76px 0 44px; overflow: hidden; }
.guide-hero h1 { font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.25; font-weight: 800; letter-spacing: -.5px; }
.guide-hero p.lead { color: var(--text); opacity: .82; max-width: 720px; font-size: 1.02rem; line-height: 1.85; }
.guide-step { position: relative; padding: 26px 24px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); height: 100%; transition: .25s; }
.guide-step:hover { background: var(--panel-2); border-color: rgba(34,211,238,.4); transform: translateY(-3px); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(34,211,238,.14); color: var(--main); font-weight: 800; font-size: 1rem; border: 1px solid rgba(34,211,238,.35); margin-bottom: 14px; }
.guide-step h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.guide-step p { font-size: .93rem; line-height: 1.8; color: var(--text); opacity: .75; margin: 0; }
.guide-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; height: 100%; }
.guide-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; }
.guide-card h3 i { color: var(--accent); margin-right: 8px; }
.guide-card p, .guide-card li { font-size: .93rem; line-height: 1.85; color: var(--text); opacity: .78; }
.guide-card ul { padding-left: 1.1rem; margin: 0; }
.guide-card ul li { margin-bottom: 6px; }
.guide-tip { border-left: 3px solid var(--accent); background: rgba(251,146,60,.08); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 20px; font-size: .93rem; line-height: 1.85; color: var(--text); opacity: .9; }
.guide-tip strong { color: var(--accent); }
.guide-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.guide-table th, .guide-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.guide-table th { color: var(--main); font-weight: 600; background: rgba(34,211,238,.06); white-space: nowrap; }
.guide-table td { color: var(--text); opacity: .82; }
.guide-table tr:last-child td { border-bottom: none; }
.guide-table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.faq-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: 9px; color: var(--text); }
.faq-item h3 i { color: var(--main); margin-right: 8px; font-size: .9rem; }
.faq-item p { font-size: .92rem; line-height: 1.8; color: var(--text); opacity: .76; margin: 0; }
.guide-hero { padding: 52px 0 30px; }
.guide-step, .guide-card { padding: 20px 18px; }

/* --- 子页面追加 --- */
/* 本页专属少量样式，配色沿用站点变量 */
  body {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
.about-hero {
    padding: 72px 0 40px;
    position: relative;
    overflow: hidden;
  }
.about-hero h1 {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--text);
    margin-bottom: 18px;
  }
.about-hero h1 .hl {color: var(--main);}
.about-hero p.lead {
    color: var(--text);
    opacity: .78;
    font-size: 1.02rem;
    line-height: 1.9;
    max-width: 760px;
  }
.stat-row {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-top:34px;
  }
.stat-box {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px 16px;
    text-align:center;
  }
.stat-box .num {
    font-size:1.6rem;
    font-weight:800;
    color:var(--main);
    line-height:1.1;
  }
.stat-box .lbl {
    font-size:.82rem;
    opacity:.65;
    margin-top:8px;
    letter-spacing:.3px;
  }
.about-block {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 26px;
    height:100%;
    transition:.25s ease;
  }
.about-block:hover {
    background:var(--panel-2);
    border-color:rgba(34,211,238,.35);
    transform:translateY(-2px);
  }
.about-block .ico {
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;
    background:rgba(34,211,238,.12);
    color:var(--main);
    font-size:1.05rem;
    margin-bottom:16px;
  }
.about-block h3 {
    font-size:1.08rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:10px;
    line-height:1.5;
  }
.about-block p {
    font-size:.9rem;
    line-height:1.85;
    opacity:.72;
    margin:0;
    color:var(--text);
  }
.rule-list {
    list-style:none;
    padding:0;
    margin:0;
  }
.rule-list li {
    display:flex;
    gap:14px;
    padding:16px 0;
    border-bottom:1px dashed var(--line);
    font-size:.92rem;
    line-height:1.8;
    color:var(--text);
  }
.rule-list li:last-child {border-bottom:none;}
.rule-list .n {
    flex:none;
    width:26px;height:26px;
    border-radius:50%;
    background:rgba(251,146,60,.14);
    color:var(--accent);
    font-size:.78rem;
    font-weight:700;
    display:flex;align-items:center;justify-content:center;
    margin-top:2px;
  }
.rule-list strong {color:var(--main);font-weight:600;}
.tl-item .yr {
    font-size:.8rem;
    font-weight:700;
    color:var(--accent);
    letter-spacing:1px;
    margin-bottom:6px;
  }
.note-box {
    background:rgba(34,211,238,.06);
    border:1px solid rgba(34,211,238,.22);
    border-left:3px solid var(--main);
    border-radius:var(--radius);
    padding:20px 22px;
    font-size:.9rem;
    line-height:1.9;
    color:var(--text);
  }
.note-box i {color:var(--main);margin-right:8px;}
.cta-strip {
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:36px 30px;
    text-align:center;
  }
.cta-strip h3 {
    font-size:1.25rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:12px;
  }
.cta-strip p {
    font-size:.9rem;
    opacity:.68;
    margin-bottom:22px;
    color:var(--text);
  }
.cta-btns {display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.footer-links {margin-bottom:14px;}
.footer-note {opacity:.45;line-height:1.8;}
.stat-row {grid-template-columns:repeat(2,1fr);}
.about-hero {padding:48px 0 28px;}
.about-block {padding:22px 18px;}
.cta-strip {padding:28px 20px;}

/* --- 子页面追加 --- */
.rank-hero {padding:64px 0 40px;position:relative;overflow:hidden;}
.rank-hero h1 {font-weight:900;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.25;letter-spacing:-.02em;}
.rank-hero h1 em {font-style:normal;color:var(--main);}
.rank-sub {color:rgba(226,232,240,.72);max-width:720px;margin-top:14px;line-height:1.8;}
.rank-board {display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.rank-board .pill {cursor:default;}
.rank-list {display:grid;gap:18px;}
.rank-item {
    display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px 20px;transition:.25s ease;
  }
.rank-item:hover {background:var(--panel-2);border-color:rgba(34,211,238,.35);transform:translateY(-2px);}
.rank-no {
    font-family:Inter,sans-serif;font-weight:900;font-size:1.5rem;
    color:var(--main);line-height:1;text-align:center;
  }
.rank-no small {display:block;font-size:.62rem;color:rgba(226,232,240,.45);font-weight:500;margin-top:4px;letter-spacing:.08em;}
.rank-item.top .rank-no {color:var(--accent);}
.rank-title {font-weight:700;font-size:1.05rem;color:var(--text);margin-bottom:6px;}
.rank-title .badge-genre {
    display:inline-block;font-size:.7rem;font-weight:600;padding:2px 8px;margin-left:8px;
    border-radius:999px;color:var(--main);border:1px solid rgba(34,211,238,.35);
    background:rgba(34,211,238,.08);vertical-align:middle;
  }
.rank-desc {color:rgba(226,232,240,.7);font-size:.9rem;line-height:1.75;margin:0;}
.rank-meta {display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.rank-meta span {font-size:.74rem;color:rgba(226,232,240,.55);border:1px solid var(--line);padding:2px 9px;border-radius:999px;}
.rank-score {text-align:right;font-family:Inter,sans-serif;}
.rank-score b {display:block;font-size:1.35rem;color:var(--accent);font-weight:800;line-height:1;}
.rank-score i {font-style:normal;font-size:.7rem;color:rgba(226,232,240,.45);}
.genre-card {
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;height:100%;transition:.25s ease;
  }
.genre-card:hover {background:var(--panel-2);border-color:rgba(34,211,238,.3);}
.genre-card .gi {
    width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:rgba(34,211,238,.1);color:var(--main);font-size:1.05rem;margin-bottom:14px;
  }
.genre-card h3 {font-size:1.02rem;font-weight:700;margin-bottom:8px;}
.genre-card p {font-size:.88rem;line-height:1.75;color:rgba(226,232,240,.7);margin:0;}
.tip-box {
    background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(251,146,60,.06));
    border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;
  }
.tip-box h3 {font-size:1.05rem;font-weight:700;margin-bottom:10px;}
.tip-box p {font-size:.9rem;line-height:1.8;color:rgba(226,232,240,.75);margin:0;}
.note-list {list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.note-list li {
    display:flex;gap:12px;font-size:.9rem;line-height:1.75;color:rgba(226,232,240,.75);
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  }
.note-list li i {color:var(--main);margin-top:4px;}
.rank-item {grid-template-columns:44px 1fr;gap:14px;}
.rank-score {grid-column:1 / -1;text-align:left;display:flex;align-items:baseline;gap:8px;}
.rank-score b {font-size:1.05rem;}

/* --- 子页面追加 --- */
.legal-hero {
    position:relative;
    padding:64px 0 40px;
    overflow:hidden;
  }
.legal-hero h1 {
    font-weight:800;
    font-size:clamp(1.7rem,4vw,2.6rem);
    line-height:1.25;
    margin:14px 0 16px;
  }
.legal-hero h1 .hl {color:var(--main);}
.legal-hero p.lead {
    color:rgba(226,232,240,.75);
    max-width:760px;
    font-size:1.02rem;
    line-height:1.85;
  }
.legal-card {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px 26px 22px;
    height:100%;
  }
.legal-card h3 {
    font-size:1.08rem;
    font-weight:700;
    margin-bottom:12px;
    display:flex;
    align-items:center;
    gap:10px;
  }
.legal-card h3 i {color:var(--main);font-size:.95rem;}
.legal-card p, .legal-card li {
    color:rgba(226,232,240,.78);
    font-size:.94rem;
    line-height:1.9;
  }
.legal-card ul {padding-left:18px;margin:0;}
.legal-card ul li {margin-bottom:6px;}
.legal-num {
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:50%;
    background:rgba(34,211,238,.14);
    color:var(--main);font-size:.8rem;font-weight:700;
    flex:0 0 26px;
  }
.legal-block {
    background:var(--panel-2);
    border:1px solid var(--line);
    border-left:3px solid var(--accent);
    border-radius:var(--radius);
    padding:20px 22px;
    margin-top:26px;
  }
.legal-block p {
    color:rgba(226,232,240,.82);
    font-size:.94rem;
    line-height:1.9;
    margin:0;
  }
.legal-block strong {color:var(--accent);}
.legal-timeline {
    border-left:2px solid var(--line);
    padding-left:22px;
    margin-top:10px;
  }
.legal-timeline .ti {
    position:relative;
    padding-bottom:22px;
  }
.legal-timeline .ti:last-child {padding-bottom:0;}
.legal-timeline .ti::before {
    content:"";
    position:absolute;left:-30px;top:6px;
    width:12px;height:12px;border-radius:50%;
    background:var(--main);
    box-shadow:0 0 0 4px rgba(34,211,238,.15);
  }
.legal-timeline .ti h4 {
    font-size:.98rem;font-weight:700;margin:0 0 6px;
  }
.legal-timeline .ti span {
    display:inline-block;
    font-size:.78rem;
    color:var(--main);
    background:rgba(34,211,238,.1);
    padding:1px 9px;
    border-radius:999px;
    margin-bottom:8px;
  }
.legal-timeline .ti p {
    color:rgba(226,232,240,.75);
    font-size:.9rem;line-height:1.85;margin:0;
  }
.legal-contact {
    background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(251,146,60,.07));
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px;
  }
.legal-contact h3 {font-size:1.1rem;font-weight:700;margin-bottom:10px;}
.legal-contact p {color:rgba(226,232,240,.78);font-size:.94rem;line-height:1.9;margin-bottom:6px;}
.legal-contact .pill {
    display:inline-block;
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    border-radius:999px;
    padding:3px 12px;
    font-size:.8rem;
    color:var(--main);
    margin:4px 6px 0 0;
  }
section.section {position:relative;}
.sec-head h2 .hl {color:var(--main);}