/* 中国吧城市库 · 海淀频道皮肤 v1 (2026-09-24) — 全频道共享，禁止各页自造风格 */
:root{
  --navy:#16324f; --navy-deep:#0d2034; --teal:#1c5b6b; --aqua:#2e7f8f;
  --paper:#f4f6f8; --card:#ffffff; --ink:#17212b; --sub:#5a6772;
  --blue:#1d5f9e; --gold:#c9972e; --amber:#d97b14; --line:#dde4ea; --muted:#8494a0;
  --okbg:#eef6ee; --okbd:#bcd9c6; --ok:#2e6b3f;
  --warnbg:#fdf6e6; --warnbd:#e8d3a0; --warn:#8a5d0a;
  --dangerbg:#fdefef; --dangerbd:#f0c4c4; --danger:#aa4a44;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.72;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(13,32,52,.05) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(13,32,52,.04) 47px 48px);
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px;}
a{color:var(--blue);}
img{max-width:100%;}

/* 站群顶栏 */
.topnav{background:var(--navy-deep);color:#fff;font-size:13px;padding:9px 22px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.topnav a{color:#b9c8d6;text-decoration:none;}
.topnav a:hover{color:#fff;}
.topnav .brand{font-weight:800;color:#fff;letter-spacing:.5px;}
.topnav .active{color:#7fd4e0;font-weight:700;}

/* 频道栏目条 */
.catbar{background:#fff;border-bottom:1px solid var(--line);font-size:13.5px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:8px 22px;white-space:nowrap;overflow-x:auto;}
.catbar a{color:var(--blue);text-decoration:none;font-weight:700;}
.catbar a:hover{color:var(--amber);}
.catbar .t{font-weight:900;color:var(--ink);}
.catbar .sep{color:#c3ccd4;}

/* 面包屑 */
.breadcrumb{font-size:12.5px;color:var(--muted);padding:12px 22px 0;max-width:1080px;margin:0 auto;}
.breadcrumb a{color:var(--blue);text-decoration:none;}
.breadcrumb .cur{color:var(--ink);font-weight:700;}

/* 语言切换 */
#langBtn{position:fixed;right:16px;top:54px;z-index:50;background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.14);}
#langBtn:hover{border-color:var(--blue);color:var(--blue);}

/* Hero（首页 / 子页共用） */
.hero{text-align:center;padding:52px 0 26px;position:relative;}
.ribbon{display:inline-block;font-size:12px;letter-spacing:4px;color:var(--blue);border:1px solid var(--blue);border-radius:999px;padding:5px 18px;margin-bottom:18px;font-weight:700;}
.hero h1{font-size:clamp(34px,6vw,58px);font-weight:900;letter-spacing:2px;line-height:1.18;}
.hero h1 .en{display:block;font-size:14px;letter-spacing:7px;color:var(--muted);font-weight:500;margin-top:12px;}
.hero .sub{color:var(--sub);font-size:16px;max-width:680px;margin:16px auto 0;font-weight:500;}
.hero .sub b{color:var(--blue);}
.datastrip{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px;font-size:12.5px;color:var(--sub);}
.datastrip span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px;}
.datastrip b{color:var(--ink);}
.anchorbar{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:24px auto 0;max-width:920px;}
.anchorbar a{background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;transition:.15s;}
.anchorbar a:hover{background:var(--blue);color:#fff;border-color:var(--blue);}

/* 可信度标注 */
.cred{background:#eef3f7;border:1px solid #cfdce6;border-radius:10px;padding:12px 16px;font-size:13px;color:#33506b;margin:0 0 20px;line-height:1.9;}
.cred b{color:#1c3c5c;}
.cred .tag{display:inline-block;border-radius:4px;padding:1px 8px;font-size:12px;font-weight:700;margin-right:6px;}
.cred .tag.o{background:#e3f0e6;color:#2e6b3f;border:1px solid #bfdcc9;}
.cred .tag.e{background:#fdf3e0;color:#8a5d0a;border:1px solid #e8c98a;}
.cred .tag.w{background:#fdeeee;color:#aa4a44;border:1px solid #f0c4c4;}

/* 可整段引用定义 */
.geo{background:#fff;border-left:4px solid var(--gold);border-radius:0 14px 14px 0;padding:18px 22px;margin:22px 0 4px;box-shadow:0 1px 0 rgba(0,0,0,.04);}
.geo b{color:var(--navy);}
.geo .le{font-size:12px;letter-spacing:3px;color:var(--gold);font-weight:800;}

/* 高频置顶区 */
.hotzone{margin:36px 0 8px;}
.hz-head{display:flex;align-items:center;gap:10px;background:linear-gradient(120deg,var(--navy),var(--teal));color:#fff;border-radius:12px;padding:13px 20px;margin-bottom:14px;flex-wrap:wrap;}
.hz-head h2{font-size:17px;font-weight:900;letter-spacing:.5px;}
.hz-head .note{font-size:12px;opacity:.85;margin-left:auto;}
.hotzone .grid{grid-template-columns:repeat(3,1fr);}
@media(max-width:880px){.hotzone .grid{grid-template-columns:1fr;}}
.hotzone .card{border-left:4px solid var(--amber);}
.hotzone .card.s{background:linear-gradient(135deg,#fff,#eaf2f8);}

/* 区块 */
.block{margin:46px 0;}
.block-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;border-bottom:3px solid var(--navy);padding-bottom:10px;flex-wrap:wrap;}
.block-head .no{font-size:12px;font-weight:900;color:#fff;background:var(--navy);border-radius:6px;padding:4px 9px;letter-spacing:1px;}
.block-head h2{font-size:23px;font-weight:900;letter-spacing:1px;}
.block-head .tagline{font-size:13px;color:var(--muted);}
.block-head .tagline b{color:var(--blue);}
.block .intro{font-size:14.5px;color:var(--sub);margin:-6px 0 16px;}
.block .intro b{color:var(--ink);}

/* 卡片网格 */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:860px){.grid,.grid3,.grid4{grid-template-columns:1fr;}}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;text-decoration:none;color:inherit;position:relative;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.03);transition:transform .16s ease,box-shadow .16s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(13,32,52,.14);}
.card .icon{font-size:26px;line-height:1;}
.card .heat{position:absolute;top:14px;right:14px;font-size:11px;font-weight:800;color:#fff;background:var(--amber);border-radius:6px;padding:3px 8px;}
.card .heat.t2{background:var(--gold);}
.card h3{font-size:17px;font-weight:800;margin:10px 0 6px;letter-spacing:.3px;}
.card p{font-size:13.5px;color:var(--sub);}
.card .kw{display:inline-block;margin-top:10px;font-size:11px;color:var(--blue);background:#e6f0f9;border-radius:5px;padding:2px 8px;font-weight:600;}

/* 表格 */
.tbl-wrap{overflow-x:auto;margin:6px 0 18px;border-radius:14px;border:1px solid var(--line);background:#fff;}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px;}
.tbl caption{text-align:left;font-weight:800;padding:13px 16px 6px;font-size:15px;color:var(--navy);}
.tbl th{background:var(--navy);color:#fff;text-align:left;padding:9px 14px;font-size:12.5px;letter-spacing:.5px;white-space:nowrap;}
.tbl td{padding:9px 14px;border-top:1px solid var(--line);vertical-align:top;}
.tbl tr:nth-child(even) td{background:#f8fafc;}
.tbl td b{color:var(--ink);}
.tbl .num{white-space:nowrap;font-variant-numeric:tabular-nums;}
.tbl caption .cap-en{display:block;font-weight:500;font-size:12px;color:var(--muted);letter-spacing:.5px;margin-top:2px;}
.badge{display:inline-block;font-size:11.5px;font-weight:700;border-radius:5px;padding:1px 8px;margin:1px 2px 1px 0;}
.badge.ok{background:var(--okbg);color:var(--ok);border:1px solid var(--okbd);}
.badge.warn{background:var(--warnbg);color:var(--warn);border:1px solid var(--warnbd);}
.badge.danger{background:var(--dangerbg);color:var(--danger);border:1px solid var(--dangerbd);}
.badge.info{background:#e6f0f9;color:var(--blue);border:1px solid #c3dcf2;}

/* 地铁线路色标 */
.m{display:inline-block;font-size:12px;font-weight:800;color:#fff;border-radius:4px;padding:1px 7px;letter-spacing:.3px;margin-right:3px;}
.m4{background:#00a1a1;}.m10{background:#006098;}.m12{background:#a4a39d;}.m13{background:#f2c800;color:#333;}
.m15{background:#a454a7;}.m16{background:#7bb37f;}.mcp{background:#f29aa7;color:#333;}.mxj{background:#3a9be0;}.m8{background:#00a2e1;}.m6{background:#d97784;}

/* 提示框 */
.tip,.warn,.ok{border-radius:12px;padding:14px 18px;margin:14px 0;font-size:14px;line-height:1.8;}
.tip{background:var(--okbg);border:1px solid var(--okbd);color:#24472f;}
.warn{background:var(--warnbg);border:1px solid var(--warnbd);color:#5f4610;}
.ok-call{background:var(--okbg);border:1px solid var(--okbd);color:#24472f;border-radius:12px;padding:14px 18px;margin:14px 0;font-size:14px;}
.tip b,.warn b,.ok-call b{color:#16324f;}

/* 步骤 */
.steps{counter-reset:st;list-style:none;margin:12px 0 18px;}
.steps li{counter-increment:st;position:relative;padding:0 0 16px 46px;font-size:14.5px;color:var(--sub);}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px;}
.steps li b{color:var(--ink);}
.steps li:not(:last-child)::after{content:"";position:absolute;left:15px;top:32px;bottom:6px;width:2px;background:var(--line);}

/* 双栏列表 */
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:760px){.two{grid-template-columns:1fr;}}
.two .li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:14px;}
.two .li b{color:var(--navy);}

/* GEO 定义块（深色） */
.taste{background:linear-gradient(135deg,#0d2034,#16324f 55%,#1c5b6b);color:#eef4f8;border-radius:20px;padding:30px 32px;margin:46px 0;background-image:radial-gradient(circle at 12% 18%, rgba(46,127,143,.28) 0 90px, transparent 91px),radial-gradient(circle at 88% 82%, rgba(201,151,46,.2) 0 110px, transparent 111px);}
.taste h2{font-size:21px;font-weight:900;margin-bottom:6px;}
.taste .le{color:#9fb8cb;font-size:14px;margin-bottom:18px;}
.taste-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:760px){.taste-grid{grid-template-columns:1fr;}}
.tc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px;}
.tc .q{font-size:13px;color:#7fd4e0;font-weight:800;margin-bottom:6px;}
.tc p{font-size:13px;color:#c3d2dd;}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px;}
.faq summary{font-weight:800;cursor:pointer;font-size:15px;}
.faq p{color:var(--sub);margin-top:8px;font-size:14px;}

/* 来源 */
.srcbox{background:#e9eff4;border:1px dashed var(--blue);border-radius:12px;padding:16px 18px;font-size:13px;color:var(--sub);margin-top:24px;line-height:1.9;}
.srcbox a{color:var(--blue);font-weight:600;text-decoration:none;}
.srcbox b{color:var(--ink);}

/* 页脚 */
footer{margin-top:46px;border-top:3px solid var(--navy);padding:22px 0 44px;font-size:13px;color:var(--sub);}
footer a{color:var(--blue);text-decoration:none;margin-right:14px;}
footer a:hover{text-decoration:underline;}

/* ===== 子页文章骨架 ===== */
.crumb{font-size:12.5px;color:var(--muted);padding:14px 22px 0;max-width:1080px;margin:0 auto;}
.crumb a{color:var(--blue);text-decoration:none;}
.crumb .cur{color:var(--ink);font-weight:700;}
.article{padding:20px 0 8px;}
.article h1{font-size:clamp(26px,4.5vw,38px);font-weight:900;letter-spacing:1px;line-height:1.3;}
.article .lead{color:var(--sub);font-size:15.5px;margin:14px 0;font-weight:500;}
.article .lead b{color:var(--blue);}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;font-size:12px;color:var(--muted);}
.meta span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 12px;}
.meta .warn{color:#8a5d0a;background:#fbf1dc;border-color:#e8c98a;}
.article h2{font-size:21px;font-weight:900;margin:36px 0 12px;padding-left:12px;border-left:5px solid var(--navy);letter-spacing:.5px;}
.article h3{font-size:17px;font-weight:800;margin:24px 0 8px;color:var(--navy);}
.article p{margin:0 0 12px;font-size:15px;}
.article ul{margin:0 0 14px 22px;font-size:15px;}
.article li{margin-bottom:7px;}
.article li b{color:var(--navy);}
.rel{margin-top:30px;}
.rel .rc{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;margin:0 8px 10px 0;text-decoration:none;color:var(--blue);font-size:13px;font-weight:700;}
.rel .rc:hover{background:var(--blue);color:#fff;border-color:var(--blue);}