:root{
  --bg:#F0F1EC; --card:#FFFFFF; --card2:#F7F7F3; --ink:#0E0E10;
  --blue:#002FA7; --blue-deep:#001F73; --cta2:#F97316;
  --muted:#6E6E6A; --line:#E2E2DC; --line2:#111; --night:#111832;
  --num:'Archivo','PingFang SC','Microsoft YaHei',sans-serif;
  --sans:'PingFang SC','Microsoft YaHei','Source Han Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
a:hover{color:var(--blue)}
img,svg{vertical-align:middle}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--blue);color:#fff}
/* ==========================================================================
   NOW 此刻 — 全站样式 v2（流量站2 专用）
   合并自：方案二首页 + 版面2 仪表盘 + 版面5 对照器 + 版面3 时间轴
   ========================================================================== */



body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.65}
a{color:inherit;text-decoration:none;cursor:pointer;transition:color .15s}
a:hover{color:var(--blue)}
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}

/* ── 顶栏 ── */
.top{border-bottom:2px solid var(--line2)}
.top .wrap{display:flex;align-items:center;gap:38px;height:60px}
.logo{font-family:var(--num);font-weight:800;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.logo i{width:14px;height:14px;background:var(--blue);border-radius:3px;transform:rotate(45deg)}
.logo small{font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.28em}
nav{display:flex;gap:28px;font-size:14px;margin-left:auto}
nav a{font-weight:500}
nav a:hover{color:var(--blue)}
nav a.on{color:var(--blue);border-bottom:2px solid var(--blue)}

/* ── 首屏即工具 ── */
.hero{padding:64px 0 40px;border-bottom:2px solid var(--line2)}
.hero .grid{display:grid;grid-template-columns:1.35fr 1fr;gap:60px;align-items:start}
.bignum{font-family:var(--num);font-weight:700;font-size:clamp(74px,10.5vw,148px);line-height:.98;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.bignum .cs{font-size:.38em;color:var(--blue);font-weight:600;letter-spacing:0}
.bignote{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.bignote span{font-size:12.5px;border:1.5px solid var(--ink);padding:5px 14px;border-radius:99px;font-weight:500}
.bignote span.b{background:var(--blue);border-color:var(--blue);color:#fff}
.hero h1{font-family:var(--num);font-weight:700;font-size:24px;letter-spacing:-.01em;margin-bottom:6px}
.hero .sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.bigsearch{display:flex;border:2.5px solid var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.bigsearch:focus-within{border-color:var(--blue);box-shadow:6px 6px 0 var(--blue)}
.bigsearch input{flex:1;border:0;outline:none;padding:17px 20px;font-size:17px;font-family:var(--sans)}
.bigsearch button{border:0;background:var(--ink);color:#fff;padding:0 30px;font-size:15.5px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:background .15s}
.bigsearch button:hover{background:var(--blue)}
.quick{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.quick a{font-size:12.5px;color:var(--muted);border-bottom:1px dashed var(--muted);padding-bottom:1px}
.quick a:hover{color:var(--blue);border-color:var(--blue)}

/* ── 今日进度 + 迷你城市 ── */
.todaybar{margin-top:28px;border-top:2px solid var(--line2);padding-top:16px}
.prog{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--muted);margin-bottom:11px}
.prog b{color:var(--ink);font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums}
.prog i{flex:1;height:8px;background:var(--line);border-radius:99px;overflow:hidden;font-style:normal}
.prog em{display:block;height:100%;width:0;background:var(--blue);border-radius:99px;font-style:normal}
.minicities{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink);background:#fff}
.minicities a{padding:12px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s,color .15s}
.minicities a:nth-child(3n){border-right:0}
.minicities a:nth-child(n+4){border-bottom:0}
.minicities a:hover{background:var(--blue);color:#fff}
.minicities a:hover span{color:#fff}
.minicities b{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}
.minicities a:hover b{color:rgba(255,255,255,.75)}
.minicities span{font-family:var(--num);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}

/* ── 即时预览卡（搜索联想效果示意） ── */
.preview{margin-top:26px;border:2px solid var(--ink);background:#fff}
.preview .phead{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:2px solid var(--ink);background:var(--blue);color:#fff}
.preview .phead b{font-family:var(--num);font-size:15px}
.preview .phead span{font-size:12px;opacity:.85}
.preview .pbody{padding:16px 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.preview .pitem b{display:block;font-family:var(--num);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.preview .pitem b small{font-size:13px;color:var(--muted);font-weight:500}
/* 时差值是「慢 7 小时」这种中文短语，不是纯数字——26px 会在半栏宽里折行 */
.preview .pitem.pdiff b{font-size:18px;color:var(--blue);white-space:nowrap}
.preview .pitem span{font-size:11.5px;color:var(--muted);letter-spacing:.1em}
.preview .pfoot{border-top:1px dashed var(--line);padding:10px 18px;font-size:12.5px;color:var(--muted)}
.preview .pfoot b{color:var(--blue)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ── 三大工具入口 ── */
.tools{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:2px solid var(--line2)}
.tools a{padding:26px 30px;border-right:2px solid var(--line2);transition:background .15s}
.tools a:last-child{border-right:0}
.tools a:hover{background:#fff}
.tools b{display:flex;align-items:center;gap:12px;font-family:var(--num);font-size:18px;font-weight:700}
.tools b i{width:34px;height:34px;border:2px solid var(--ink);border-radius:6px;display:grid;place-items:center;color:var(--blue);flex:none}
.tools span{display:block;font-size:13px;color:var(--muted);margin-top:8px}

/* ── 双城对照（交互示意） ── */
.section{padding:46px 0}
.sec{display:flex;align-items:baseline;margin-bottom:20px}
.sec h2{font-family:var(--num);font-weight:800;font-size:22px;letter-spacing:-.01em}
.sec .en{font-size:11px;color:var(--muted);letter-spacing:.3em;margin-left:14px;font-weight:600}
.sec a{margin-left:auto;font-size:13px;font-weight:600;color:var(--blue)}
.dual{border:2px solid var(--ink);background:#fff;display:grid;grid-template-columns:1fr auto 1fr}
.dcity{padding:26px 30px}
.dcity .cn{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.dcity .cn select{border:0;border-bottom:2px solid var(--ink);font-size:15px;font-weight:600;background:none;outline:none;cursor:pointer;font-family:var(--sans);padding:2px 0}
.dcity .t{font-family:var(--num);font-weight:700;font-size:44px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:8px}
.dcity .t small{font-size:20px;color:var(--muted);font-weight:600}
.dcity .d{font-size:12.5px;color:var(--muted);margin-top:6px}
.dmid{border-left:2px solid var(--ink);border-right:2px solid var(--ink);display:grid;place-items:center;padding:0 22px;background:var(--blue);color:#fff}
.dmid b{font-family:var(--num);font-size:21px;font-weight:700}
.dmid span{font-size:10.5px;letter-spacing:.2em;opacity:.85}

/* ── 时区网格 ── */
/* 缝线画在格子自己身上（box-shadow 1px 描边），条目数不满一行时空位露页面底色，
   而不是露 gap 的黑底——之前国家页 10 城、相关查询 3 块都出现过黑洞 */
.zgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--line2)}
.zcell,.zbox{box-shadow:0 0 0 1px var(--line2)}
.zcell{background:var(--bg);padding:16px 20px;transition:background .15s}
.zcell:hover{background:#fff}
.zcell .z{font-size:13px;font-weight:600;display:flex;justify-content:space-between}
.zcell .z i{font-style:normal;font-family:var(--num);font-size:11.5px;color:var(--muted)}
.zcell .t{font-family:var(--num);font-weight:700;font-size:27px;font-variant-numeric:tabular-nums;margin-top:4px}
.zcell .t small{font-size:13px;color:var(--muted);font-weight:500}

/* ── 说明区 ── */
.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0 8px}
.about h3{font-family:var(--num);font-weight:700;font-size:17px;margin-bottom:10px}
.about p{font-size:14px;color:#3A3A38;line-height:2;text-align:justify}
.about p b{color:var(--blue)}

/* ── 页脚 ── */
footer{border-top:2px solid var(--line2);margin-top:44px}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding:36px 26px 26px}
/* 没配友情链接时收成两列，避免右侧留一块空白（第三列是空的） */
footer .wrap.two-col{grid-template-columns:1.6fr 1fr}
footer h4{font-family:var(--num);font-weight:800;font-size:14px;margin-bottom:12px}
footer p,footer li{font-size:13px;color:var(--muted);line-height:2.1}
footer ul{list-style:none}
footer li:hover{color:var(--blue)}
.copy{border-top:1px solid var(--line);padding:15px 0 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;font-family:var(--num);font-size:11.5px;color:var(--muted)}
/* 版权行与备案号都不许折行：「粤ICP备12345678号」「© 2026 NOW 此刻」断成两行很难看，
   备案信息断行也可能被判成无效展示。flex 项默认会被压缩，这里给 min-width 兜底 */
.copy > span{white-space:nowrap}
.copy .beian{white-space:nowrap}
.copy .beian + .beian{margin-left:18px}

@media (max-width:960px){
  .hero .grid{grid-template-columns:1fr;gap:34px}
  .tools{grid-template-columns:1fr}
  .tools a{border-right:0;border-bottom:2px solid var(--line2)}
  .dual{grid-template-columns:1fr}
  .dmid{border-left:0;border-right:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:10px}
  .zgrid{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
  .preview .pbody{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .zgrid{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  nav{display:none}
  .bignum{font-size:64px}
  .dcity .t{font-size:34px}
  .preview .pbody{grid-template-columns:1fr}
  .minicities{grid-template-columns:repeat(2,1fr)}
  .minicities a:nth-child(3n){border-right:1px solid var(--line)}
  .minicities a:nth-child(2n){border-right:0}
  .minicities a:nth-child(n+4){border-bottom:1px solid var(--line)}
  .minicities a:nth-child(n+5){border-bottom:0}
  .minicities span{font-size:19px}
}




body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none;cursor:pointer;transition:color .15s}
a:hover{color:var(--blue)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.top{border-bottom:2px solid var(--line2)}
.top .wrap{display:flex;align-items:center;height:56px;gap:30px}
.logo{font-family:var(--num);font-weight:800;font-size:19px;display:flex;align-items:center;gap:9px}
.logo i{width:13px;height:13px;background:var(--blue);border-radius:3px;transform:rotate(45deg)}
.crumbs{padding:14px 0 14px;font-size:12.5px;color:var(--muted);display:flex;align-items:center}
.crumbs b{color:var(--ink)}
.crumbs i{font-style:normal;margin:0 7px;color:#C6C6C0}

/* ── Bento 网格 ── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cell{background:var(--card);border:2px solid var(--line2);border-radius:10px;padding:20px 22px;position:relative;overflow:hidden}
.cell .lab{font-size:11px;letter-spacing:.24em;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.cell .lab i{font-style:normal;width:8px;height:8px;border-radius:50%;background:var(--cta2);box-shadow:0 0 0 3px rgba(249,115,22,.18)}
/* 时钟大格 */
.cell.clock{grid-column:span 2;grid-row:span 2;background:var(--blue);color:#fff;border-color:var(--blue)}
.cell.clock .lab{color:rgba(255,255,255,.8)}
.cell.clock .lab i{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.cell.clock .t{font-family:var(--num);font-weight:700;font-size:clamp(54px,6vw,84px);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cell.clock .t small{font-size:.42em;font-weight:500;opacity:.8}
.cell.clock .d{margin-top:10px;font-size:13.5px;opacity:.88}
.cell.clock .tags{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.cell.clock .tags span{font-size:11.5px;background:rgba(255,255,255,.16);padding:4px 12px;border-radius:99px}
/* 普通格 */
.cell h4{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.14em;margin-bottom:10px}
.cell .big{font-family:var(--num);font-weight:700;font-size:34px;font-variant-numeric:tabular-nums;line-height:1.2}
.cell .big small{font-size:15px;color:var(--muted);font-weight:500}
.cell .sub{font-size:12.5px;color:var(--muted);margin-top:6px}
/* 24h 迷你条格 */
.cell.strip{grid-column:span 2}
/* 会议热力格：桌面占 3 列。原来写死内联 style="grid-column:span 3"，
   手机上 .bento 变单列后它仍 span 3，把网格撑成隐式 3 列（截图验收发现） */
.cell.wide{grid-column:span 3}
.strip24{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:6px}
.strip24 i{height:38px;border-radius:4px;background:var(--line);font-style:normal;display:grid;place-items:end center;font-size:8.5px;color:var(--muted);font-family:var(--num);padding-bottom:3px}
.strip24 i.tk{background:#DCE4F5;color:var(--blue);font-weight:600}
.strip24 i.now{outline:2.5px solid var(--cta2);outline-offset:1px;font-size:9px}
.strip24 .cap{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);grid-column:1/-1;margin-top:5px}
/* 会议格 */
.heatmini{display:grid;grid-template-columns:repeat(24,1fr);gap:2.5px;margin-top:6px}
.heatmini i{height:26px;border-radius:3px;background:var(--line);font-style:normal}
.heatmini i.bj{background:#DCE4F5}
.heatmini i.tk{background:#E9E2D4}
.heatmini i.both{background:var(--blue)}
.heatmini i.now{outline:2px solid var(--cta2)}
.cell .hint2{font-size:11.5px;color:var(--muted);margin-top:8px}
/* 换算格 */
.cell.conv input{border:2px solid var(--ink);padding:9px 12px;font-size:16px;font-family:var(--num);width:100px;outline:none;border-radius:6px;margin-top:4px}
.cell.conv input:focus{border-color:var(--blue)}
.cell.conv .out{font-family:var(--num);font-size:30px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;margin-top:4px}
.cell.conv .eq{font-size:12px;color:var(--muted);margin:4px 0}

/* ── FAQ + 相关 ── */
.faq{padding:30px 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:8px 40px}
.faq h3{font-family:var(--num);font-weight:700;font-size:15px;margin:10px 0 6px}
.faq h3:first-child{margin-top:0}
.faq p{font-size:13.5px;color:#3A3A38;line-height:2}
.faq p b{color:var(--blue)}
.rel{display:flex;gap:10px;flex-wrap:wrap;padding:22px 0 28px;border-top:2px solid var(--line2);margin-top:28px}
.rel a{font-size:13px;border:1.5px solid var(--ink);padding:7px 16px;border-radius:99px}
.rel a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
footer{border-top:2px solid var(--line2);padding:16px 0 24px;font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;font-family:var(--num)}
@media (max-width:960px){
  .bento{grid-template-columns:1fr 1fr}
  .cell.clock{grid-column:span 2}
  .cell.wide{grid-column:span 2}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr}
  .cell.clock{grid-column:span 1}
  .cell.strip{grid-column:span 1}
  .cell.wide{grid-column:span 1}
  .strip24 i{font-size:0;height:28px}
  .faq{grid-template-columns:1fr}
}




body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none;cursor:pointer;transition:color .15s}
a:hover{color:var(--blue)}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.top{border-bottom:2px solid var(--line2)}
.top .wrap{display:flex;align-items:center;height:56px;gap:30px}
.logo{font-family:var(--num);font-weight:800;font-size:19px;display:flex;align-items:center;gap:9px}
.logo i{width:13px;height:13px;background:var(--blue);border-radius:3px;transform:rotate(45deg)}
.crumbs{padding:14px 0 0;font-size:12.5px;color:var(--muted);display:flex;align-items:center}
.crumbs b{color:var(--ink)}
.crumbs i{font-style:normal;margin:0 7px;color:#C6C6C0}
h1{font-family:var(--num);font-weight:800;font-size:26px;padding:24px 0 4px}
/* 城市页把 .lab 标签换成 h1 用（主题词进 H1），清掉 h1 的 padding 与浏览器默认 margin，
   视觉不变：.cell .lab 的 margin-bottom:10px 特异性更高，仍然生效 */
h1.lab{padding:0;margin:0 0 10px}
h1 em{font-style:normal;color:var(--blue)}
.lede{color:var(--muted);font-size:13.5px;margin-bottom:22px}
/* 时差页首屏结论段（pair.verdict_para）——此前 build.py 产出但模板未渲染 */
.verdict{border-left:3px solid var(--blue);background:var(--card);
  padding:12px 18px;margin:-8px 0 22px;font-size:14.5px;line-height:1.7}
.tcard{border:2px solid var(--line2);background:var(--card);padding:18px 26px 12px}
.tcard h3{font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:10px}
.tpara{font-size:13.5px;line-height:1.7;color:var(--ink);margin:0 0 14px}

/* ── 双城对照器 ── */
/* 中轴 64px 放不下「+5.5H」5 个字符（截图验收发现被裁），加宽到 76px */
.cmp{border:2px solid var(--line2);background:var(--card);display:grid;grid-template-columns:1fr 76px 1fr}
.cside{padding:22px 28px}
.cside .head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:2px solid var(--line2);margin-bottom:4px}
.cside .head b{font-family:var(--num);font-size:17px}
.cside .head i{font-style:normal;font-size:11.5px;color:var(--muted)}
.cside .live{font-family:var(--num);font-weight:700;font-size:44px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:12px 0 16px}
.cside .live small{font-size:19px;color:var(--muted);font-weight:600}
.cmid{border-left:2px solid var(--line2);border-right:2px solid var(--line2);background:var(--blue);color:#fff;display:grid;place-items:center}
.cmid b{font-family:var(--num);font-size:22px;font-weight:800}
.cmid span{font-size:10px;letter-spacing:.18em;opacity:.85}
.crow{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.crow:last-child{border-bottom:0}
.crow span{color:var(--muted)}
.crow b{font-family:var(--num);font-variant-numeric:tabular-nums}

/* ── 滑块（核心交互） ── */
.sliderzone{border:2px solid var(--line2);border-top:0;background:var(--card);padding:22px 28px}
.sliderzone h3{font-family:var(--num);font-weight:700;font-size:15px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline}
.sliderzone h3 span{font-size:11.5px;color:var(--muted);font-weight:500}
.track{position:relative;height:56px}
.track .bar{position:absolute;left:0;right:0;top:22px;height:10px;background:var(--line);border-radius:6px;overflow:hidden;display:flex}
.track .bar i{flex:1;font-style:normal;border-right:1px solid var(--bg)}
.track .bar i:nth-child(odd){background:#EDEDE8}
.sliderval{position:absolute;top:-6px;transform:translateX(-50%);text-align:center;transition:left .05s linear}
.sliderval b{display:block;font-family:var(--num);font-size:19px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums}
.sliderval span{font-size:10.5px;color:var(--muted)}
input[type=range]{position:absolute;left:0;right:0;top:16px;width:100%;height:22px;-webkit-appearance:none;background:none;cursor:ew-resize;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,47,167,.4);cursor:ew-resize}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--blue);border:3px solid #fff;cursor:ew-resize}
.slout{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line2);border:2px solid var(--line2);margin-top:18px}
.slout div{background:var(--card);padding:13px 20px;text-align:center}
.slout b{display:block;font-family:var(--num);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.slout b small{font-size:12px;color:var(--muted);font-weight:500}
.slout span{font-size:11.5px;color:var(--muted)}
.slout .r b{color:var(--blue)}

/* ── 下部 ── */
.article{border:2px solid var(--line2);background:var(--card);padding:24px 32px;margin-top:22px}
.article p{font-size:13.5px;color:#3A3A38;line-height:2.05}
.article p b{color:var(--blue)}
.rel{display:flex;gap:10px;flex-wrap:wrap;padding:20px 0 28px}
.rel a{font-size:13px;border:1.5px solid var(--ink);padding:7px 16px;border-radius:99px}
.rel a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
footer{border-top:2px solid var(--line2);padding:16px 0 24px;font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;font-family:var(--num)}
@media (max-width:760px){
  .cmp{grid-template-columns:1fr}
  .cmid{border-left:0;border-right:0;border-top:2px solid var(--line2);border-bottom:2px solid var(--line2);padding:8px}
  .slout{grid-template-columns:1fr}
}




body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none;cursor:pointer;transition:color .15s}
a:hover{color:var(--blue)}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
.top{border-bottom:2px solid var(--line2)}
.top .wrap{display:flex;align-items:center;height:56px;gap:30px}
.logo{font-family:var(--num);font-weight:800;font-size:19px;display:flex;align-items:center;gap:9px}
.logo i{width:13px;height:13px;background:var(--blue);border-radius:3px;transform:rotate(45deg)}
.crumbs{padding:14px 0 0;font-size:12.5px;color:var(--muted);display:flex;align-items:center}
.crumbs b{color:var(--ink)}
.crumbs i{font-style:normal;margin:0 7px;color:#C6C6C0}

/* ── 顶部时钟 ── */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:30px 0 24px;border-bottom:2px solid var(--line2)}
.head .t{font-family:var(--num);font-weight:700;font-size:clamp(52px,7vw,84px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.head .t small{font-size:.38em;color:var(--blue);font-weight:600}
.head .lab{font-size:12px;letter-spacing:.3em;color:var(--muted);margin-bottom:10px}
.head .lab i{font-style:normal;color:var(--cta2)}
.head .side{font-family:var(--num);font-size:13px;color:var(--muted);line-height:2;text-align:right}
.head .side b{color:var(--ink)}

/* ── 纵向时间轴 ── */
.tl{position:relative;margin:34px 0 10px;padding-left:74px}
.tl::before{content:'';position:absolute;left:28px;top:0;bottom:0;width:3px;background:var(--line2);border-radius:2px}
.tseg{position:relative;padding:14px 0 22px}
.tseg::before{content:'';position:absolute;left:-52px;top:20px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:3px solid var(--ink)}
.tseg.night::before{background:var(--night)}
.tseg.day::before{background:var(--blue)}
.tseg .range{font-family:var(--num);font-size:11.5px;letter-spacing:.2em;color:var(--muted);margin-bottom:6px}
.tseg h3{font-family:var(--num);font-weight:800;font-size:18px;margin-bottom:10px}
.tseg h3 span{color:var(--blue)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pcity{border:2px solid var(--line);border-radius:8px;padding:12px 16px;background:var(--card)}
.pcity .n{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
.pcity .n b{color:var(--ink)}
.pcity .clock{font-family:var(--num);font-weight:700;font-size:24px;font-variant-numeric:tabular-nums;margin-top:2px}
.pcity .st{font-size:11.5px;margin-top:2px}
.pcity .st.awake{color:var(--blue)}
.pcity .st.sleep{color:var(--muted)}
.event{margin-top:10px;font-size:13px;border-left:3px solid var(--cta2);padding:4px 0 4px 14px}
.event b{color:var(--cta2)}
.nowdot{position:absolute;left:-63px;width:35px;height:35px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--num);font-size:10px;font-weight:700;box-shadow:0 0 0 5px var(--bg);z-index:2}
.nowline-label{position:absolute;left:-74px;width:47px;text-align:right;font-family:var(--num);font-size:9.5px;color:var(--blue);letter-spacing:.1em}

/* ── FAQ ── */
.faq{padding:30px 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:8px 40px}
.faq h3{font-family:var(--num);font-weight:700;font-size:15px;margin:10px 0 6px}
.faq p{font-size:13.5px;color:#3A3A38;line-height:2}
.faq p b{color:var(--blue)}
.rel{display:flex;gap:10px;flex-wrap:wrap;padding:22px 0 28px;border-top:2px solid var(--line2);margin-top:28px}
.rel a{font-size:13px;border:1.5px solid var(--ink);padding:7px 16px;border-radius:99px}
.rel a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
footer{border-top:2px solid var(--line2);padding:16px 0 24px;font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;font-family:var(--num)}
@media (max-width:700px){
  .duo{grid-template-columns:1fr}
  .tl{padding-left:52px}
  .tl::before{left:18px}
  .tseg::before{left:-42px}
  .nowdot{left:-53px}
  .nowline-label{left:-64px}
  .faq{grid-template-columns:1fr}
}


/* ==========================================================================
   补充组件（内链网格/索引列表/时差热榜/锚点）— 合并时缺失，2026-09-29 补
   ========================================================================== */
.zbox{background:var(--card);padding:18px 24px}
.zbox h3{font-size:14.5px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:9px}
.zbox h3 i{width:9px;height:9px;background:var(--blue);border-radius:2px;flex:none}
.zbox ul{list-style:none;columns:2;column-gap:20px}
.zbox li{font-size:13px;padding:5px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.zbox li:hover{color:var(--blue)}
.zbox li b{color:var(--muted);font-weight:400;font-family:var(--num);font-size:11.5px}
.dir-more{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--blue)}
.dir-more:hover{color:var(--cta2)}
.dirbox{background:var(--card);padding:18px 24px}
.dirbox h3{font-size:14.5px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:9px}
.dirbox h3 i{width:9px;height:9px;background:var(--blue);border-radius:2px;flex:none}
.dirbox ul{list-style:none;columns:2;column-gap:20px}
.dirbox li{font-size:13px;padding:5px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.dirbox li:hover{color:var(--blue)}
.dirbox li b{color:var(--muted);font-weight:400;font-family:var(--num);font-size:11.5px}
.idxlist{border:2px solid var(--line2);background:var(--card)}
.idxlist a{display:flex;align-items:baseline;gap:16px;padding:12px 22px;border-bottom:1px solid var(--line)}
.idxlist a:last-child{border-bottom:0}
.idxlist a:hover{background:var(--blue);color:#fff}
.idxlist .cn{font-size:14.5px;font-weight:600;width:150px;flex:none}
.idxlist .slug{font-family:var(--num);font-size:11.5px;color:var(--muted);letter-spacing:.08em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idxlist a:hover .slug{color:rgba(255,255,255,.75)}
.idxlist .st{font-size:12.5px;color:var(--muted);text-align:right}
.idxlist a:hover .st{color:rgba(255,255,255,.85)}
.diffgrid-flat{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;border:2px solid var(--line2);background:var(--card);padding:10px 28px}
.diffgrid-flat a{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);font-size:14px}
.diffgrid-flat a:hover{color:var(--blue)}
.diffgrid-flat a em{font-style:normal;font-family:var(--num);font-size:12.5px;color:var(--muted)}
.anchor{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.anchor a{font-size:13px;font-weight:600;border:1.5px solid var(--ink);padding:6px 18px;border-radius:99px}
.anchor a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.logo small{display:block;font-weight:500;color:var(--muted);font-size:10px;letter-spacing:.28em;line-height:1.2}
.note{margin-top:12px;font-size:13px;color:var(--muted)}

/* ==========================================================================
   移动端顶栏导航（2026-09-29 截图验收补）
   原来 ≤600px 是 nav{display:none} 且没有汉堡菜单——手机上整站没有导航入口，
   内链权重全靠底部 footer。改成 logo 一行 + 导航独占一行横向滑动。
   注意：必须放在文件末尾，才能盖过 177/252/321 行的同权重 .top .wrap 规则。
   ========================================================================== */
@media (max-width:600px){
  .top .wrap{flex-wrap:wrap;height:auto;gap:0;padding-top:10px;align-items:center}
  .top .wrap nav{display:flex;width:100%;order:3;margin-left:0;gap:20px;
    font-size:13.5px;overflow-x:auto;padding:9px 0 0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .top .wrap nav::-webkit-scrollbar{display:none}
  .top .wrap nav a{white-space:nowrap;padding-bottom:8px}
  /* 面包屑：中文两字词（首页/亚洲）被折成上下两行，全部禁折 */
  .crumbs{overflow-x:auto;scrollbar-width:none}
  .crumbs::-webkit-scrollbar{display:none}
  .crumbs a,.crumbs b,.crumbs i{white-space:nowrap;flex:none}
}

/* ==========================================================================
   验收补缺（2026-09-29 截图验收发现的裸类：合并原型 CSS 时整段丢失）
   ========================================================================== */

/* ── 区块头（索引页 / 首页 / 404 / dst / search 共用，结构同 .sec） ── */
.sec-head{display:flex;align-items:baseline;margin-bottom:20px;flex-wrap:wrap}
.sec-head h2{font-family:var(--num);font-weight:800;font-size:22px;letter-spacing:-.01em}
.sec-head .en{font-size:11px;color:var(--muted);letter-spacing:.3em;margin-left:14px;font-weight:600}
.sec-head a{margin-left:auto;font-size:13px;font-weight:600;color:var(--blue)}
.sec-head a:hover{color:var(--cta2)}

/* ── 索引页 hero：大钟 + 信息卡两栏（hgrid 裸了，大钟下面直接堆裸 dl） ── */
.hgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:start;margin-top:26px}
.info-card{background:var(--card);border:2px solid var(--line2)}
.info-card dl{display:grid;grid-template-columns:auto 1fr;gap:0 18px;padding:4px 26px}
.info-card dt{padding:12.5px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:13.5px}
.info-card dd{padding:12.5px 0;border-bottom:1px solid var(--line);text-align:right;font-size:13.5px}
.info-card dt:last-of-type,.info-card dd:last-of-type{border-bottom:0}
.info-card dd b{color:var(--blue);font-family:var(--num);font-weight:700}

/* ── 索引页搜索框（第一站有、二站合并时丢了，只剩裸 input+button） ── */
.searchbar{display:flex;border:2.5px solid var(--ink);background:var(--card);margin-top:26px;transition:border-color .15s,box-shadow .15s}
.searchbar:focus-within{border-color:var(--blue);box-shadow:6px 6px 0 var(--blue)}
.searchbar input{flex:1;border:0;outline:none;padding:14px 20px;font-size:16px;font-family:var(--sans);background:transparent;min-width:0}
.searchbar button{border:0;background:var(--ink);color:#fff;padding:0 32px;font-size:15.5px;font-weight:600;cursor:pointer;font-family:var(--sans);white-space:nowrap;transition:background .15s}
.searchbar button:hover{background:var(--blue)}

/* ── 首页专属（home-hero 两栏 / 三入口工具行 / 热词 / SEO 文字块） ── */
.home-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}
.toolrow{border-top:2px solid var(--line2);border-bottom:2px solid var(--line2);background:var(--card)}
.toolrow-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.tool{display:flex;align-items:center;gap:16px;padding:22px 26px;border-right:2px solid var(--line2);transition:background .15s}
.tool:last-child{border-right:0}
.tool:hover{background:var(--bg)}
.tool .ico{width:42px;height:42px;border:2px solid var(--ink);border-radius:8px;display:grid;place-items:center;color:var(--blue);flex:none}
.tool b{display:block;font-family:var(--num);font-size:16.5px;font-weight:700}
.tool .sub{font-size:12.5px;color:var(--muted)}
.hotwords{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.hotwords a{font-size:12.5px;color:var(--muted);border:1.5px solid var(--line);padding:4.5px 13px;border-radius:99px;background:var(--card)}
.hotwords a:hover{color:var(--blue);border-color:var(--blue)}
.seo{margin-top:36px;background:var(--card);border:2px solid var(--line2);padding:26px 30px}
.seo h3{font-size:15.5px;font-weight:700;margin:20px 0 6px}
.seo h3:first-child{margin-top:0}
.seo p{font-size:13.5px;color:var(--muted);line-height:2}
.seo b{color:var(--ink)}

/* ── 大洲目录（首页 / 关于 / 404 / dst / search，裸了以后全宽单列堆叠） ── */
.dir{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ── 搜索结果容器（sr-count/sr-list 是 search.js 动态注入的，HTML 扫描抓不到） ── */
.sr-box{background:var(--card);border:2px solid var(--line2);padding:20px 28px;min-height:120px}
.sr-empty{font-size:14px;color:var(--muted);padding:20px 0;line-height:2}
.sr-count{font-size:13px;color:var(--muted);padding-bottom:10px;border-bottom:2px solid var(--line2)}
.sr-list{list-style:none;margin-top:4px}
.sr-list li{border-bottom:1px solid var(--line)}
.sr-list li:last-child{border-bottom:0}
.sr-list a{display:flex;align-items:baseline;gap:16px;padding:11px 4px}
.sr-list a:hover{background:var(--blue);color:#fff}
.sr-list b{font-size:15px;font-weight:600;flex:none}
.sr-list i{font-style:normal;font-family:var(--num);font-size:11.5px;color:var(--muted);letter-spacing:.06em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-list em{font-style:normal;font-family:var(--num);font-size:13px;color:var(--blue);font-weight:600}
.sr-list span{font-size:12px;color:var(--muted)}
.sr-list a:hover i,.sr-list a:hover span{color:rgba(255,255,255,.8)}
.sr-list a:hover em{color:#fff}

/* ── 时差页：24h 对照表（之前裸成纯文本行，NOW-时差页设计稿原文） ── */
.tcard{border:2px solid var(--line2);background:var(--card);padding:18px 26px 12px}
.tcard h3{font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:10px}
.tcols{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.tcols table{width:100%;border-collapse:collapse;font-size:13.5px}
.tcols td{padding:7px 6px;border-bottom:1px solid var(--line)}
.tcols td:first-child{color:var(--muted)}
.tcols td:last-child{text-align:right;font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums}
.tcols td:last-child span{color:var(--cta2);font-size:11.5px;margin-left:4px}
.tcols tr.now td{background:var(--blue);color:#fff;font-weight:700}
.tcols tr.now td:first-child{color:#DCE4F5}
.tcols tr.now td:last-child span{color:#F9C6A0}

/* ── 时差页：夏令时规则双卡（406 个时差页缺样式，NOW-时差页设计稿原文） ── */
.dstgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line2);border:2px solid var(--line2)}
.dstbox{background:var(--card);padding:22px 28px}
.dstbox h3{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dstbox h3 i{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:none}
.dstbox h3 i.sum{background:#FFF1E6;color:var(--cta2)}
.dstbox h3 i.win{background:#E4EDFF;color:var(--blue)}
.dstbox p{font-size:13.5px;color:var(--muted);line-height:1.9}
.dstbox p b{color:var(--ink)}
.dstbox .now{display:inline-block;margin-top:12px;font-size:12px;padding:4px 14px;border-radius:99px}
.dstbox .now.on{background:#FFF1E6;color:#9A3412;border:1px solid #FED7AA}
.dstbox .now.off{background:#EEF2FF;color:#3730A3;border:1px solid #C7D2FE}

/* ── 时差页：联系建议行（容器有内联边框，行本身裸着挤成一堆） ── */
.contact .rec{font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.contact .rec:last-of-type{border-bottom:0}
.contact .rec span{color:var(--muted)}
.contact .rec b{color:var(--cta2);font-family:var(--num);white-space:nowrap}

/* ── 城市页 24h 条：本城小时与北京相同的格子（时差 0 城市整条同色，语义=全天同步） ── */
.strip24 i.tk.same{background:#C8D6F2}

/* ── 对照器中轴：+5.5h 这种 5 字符会溢出 64px 列宽，被右侧白卡盖掉显示成裁切 ── */
.cmid{position:relative;z-index:1;overflow:hidden;padding:0 6px;text-align:center}
.cmid b{font-size:19px;letter-spacing:-.03em;white-space:nowrap}
.cmid span{letter-spacing:.1em;white-space:nowrap}

/* ── 响应式补齐 ── */
@media (max-width:960px){
  .home-hero,.hgrid{grid-template-columns:1fr;gap:32px}
  .dir{grid-template-columns:1fr 1fr}
  .toolrow-grid{grid-template-columns:1fr}
  .tool{border-right:0;border-bottom:2px solid var(--line2)}
  .tool:last-child{border-bottom:0}
  .dstgrid{grid-template-columns:1fr}
  .tcols{gap:0 18px}
}
@media (max-width:700px){
  .dir{grid-template-columns:1fr}
  .tcols{grid-template-columns:1fr}
  .searchbar button{padding:0 20px}
  .cmid b{font-size:17px}
}

/* ==========================================================================
   /country/ 紧凑排版（2026-09-30）
   原来 .idxlist 是单列 flex 行，191 条国家每行 45px，整页 8,695px（约 8 屏）。
   改成 3 列网格后 4,283px（3 屏），链接一条没少。
   只在带 .idx3 的容器生效 —— 别的索引页（/time/ /chazhi/ /zhongguo/）
   条数少、slug 有用，仍走原单列样式。
   ========================================================================== */
/* 网格线用 gap + 容器背景画，不用 border-right + :nth-child(3n)。
   原因（踩过）：:nth-child(3n) 的权重是 0-3-1，@media 里的 .idxlist.idx3 a
   只有 0-2-1，媒体查询压不住它 —— 切到 2 列/1 列后，每第 3 条链接右边
   会留一条悬空的竖线。现在列数随便改都不会出这种错。 */
.idxlist.idx3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border:2px solid var(--line2);background:var(--line)}
.idxlist.idx3 a{display:flex;align-items:baseline;gap:10px;padding:7px 14px;
  min-width:0;background:var(--card);border:0}
/* 单列时 .cn 固定 150px，三列每格只剩 ~400px，必须放开让 .st 靠右 */
.idxlist.idx3 .cn{width:auto;flex:0 1 auto;font-size:13.5px;max-width:8.5em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 国家页的 slug 就是 URL 路径（/country/japan/），对读者零信息量 */
.idxlist.idx3 .slug{display:none}
.idxlist.idx3 .st{margin-left:auto;font-size:12px;white-space:nowrap}
/* 大洲跳转导航 */
.cnav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 2px}
.cnav a{font-size:12.5px;font-weight:600;border:1.5px solid var(--line2);
  padding:5px 15px;border-radius:99px;background:var(--card);color:var(--ink)}
.cnav a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
/* 锚点跳转时标题别被顶栏遮住（顶栏 sticky） */
.sec-head h2{scroll-margin-top:80px}
@media (max-width:900px){
  .idxlist.idx3{grid-template-columns:repeat(2,1fr)}
}
/* 手机：两列仍然挤得下（190px/格），但每格改成上下两行 ——
   横排的话「密克罗尼西亚 + 多时区 UTC+5:30」放不进 190px，会被挤掉。
   竖排后整页从 9,641px 降到约 4,300px。 */
@media (max-width:560px){
  .idxlist.idx3 a{flex-direction:column;align-items:flex-start;gap:1px;padding:6px 10px}
  .idxlist.idx3 .cn{max-width:100%;font-size:12.5px}
  .idxlist.idx3 .st{margin-left:0;font-size:11px}
  .cnav a{font-size:12px;padding:4px 12px}
}

/* ==========================================================================
   日出日落页 /sun/（2026-09-30 新增）
   词量依据：日出时间 770/日、日落时间 806/日、另有 8 个泛词合计约 1,500/日。
   表格有两种：今日表（30 行）与月度时刻表（30 城 × 28 天 × 2 行）。
   月度表**必须横向可滚** —— 28 列在手机上放不下，挤扁会看不清时刻。
   ========================================================================== */
.todaytbl{width:100%;border-collapse:collapse;font-size:13.5px;
  border:2px solid var(--line2);background:var(--card);table-layout:fixed}
.todaytbl th,.todaytbl td{padding:8px 12px;border-bottom:1px solid var(--line);
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 城市名列必须给够宽，否则「秦皇岛」「乌鲁木齐」会被挤成竖排单字。
   table-layout:fixed + 显式 col 宽是唯一可靠办法（自动布局下
   内容长度决定列宽，nowrap 的表头反而把首列压到最窄）。*/
.todaytbl col.c-city{width:78px}
.todaytbl col.c-num{width:58px}
.todaytbl col.c-len{width:96px}
.todaytbl col.c-tz{width:auto}
.todaytbl tbody th{width:78px}
/* 时间列必须装得下「06:10」+ 内边距：58px 里 padding 占 24px，
   只剩 34px 给 5 个字符，字体 13.5px 下正好 32px —— 卡在临界，
   窄栏一点就变「06:...」。给 64px 留余量。 */
.todaytbl col.c-num{width:64px}
/* table-layout:fixed 下 col 宽度是「建议」，空间不够时浏览器仍会压缩它，
   压到内容宽度以下就出省略号。所以每张表给一个 min-width 兜底：
   空间不足时整张表横向滚，而不是把内容截成「11 小时 5...」。 */
.today3 .todaytbl{min-width:296px}
.todaytbl thead th{font-size:12px;color:var(--muted);font-weight:600;
  letter-spacing:.06em;background:var(--card2)}
.todaytbl tbody th{font-weight:600;font-size:14px}
.todaytbl tbody th a:hover{color:var(--blue)}
.todaytbl .num{font-family:var(--num);font-variant-numeric:tabular-nums;
  text-align:right;width:96px}
/* 昼长「11 小时 51 分」有 3 个空格，必须 nowrap ——
   折行会把 30 行全撑高约 40%，页面凭空长 400px。 */
.todaytbl .num.nowrap{white-space:nowrap;width:130px}
.todaytbl .num.rise{color:var(--blue);font-weight:600}
.todaytbl .num.set{color:var(--cta2);font-weight:600}
.todaytbl .tz{font-size:11.5px;color:var(--muted);font-family:var(--num)}
.todaytbl tbody tr:hover{background:var(--card2)}
/* 今日表分三栏：30 行单列 1,900px -> 三栏（10 城/栏）约 700px，省 1,200px。
   三栏时每栏只有 ~360px，扣掉城市 78 + 日出 58 + 日落 58 + 昼长 96
   只剩 70px 给时区（America/New_York 要 90px）—— 所以**三栏藏时区列**。
   时刻本来就是当地时间，时区对读者不是必要信息；要看时区去城市页。

   ⚠ 用 grid 不用 flex：flex:1 1 300px 在 1130px 容器里只排得下 2 个，
     第 3 个换行后又变成 2+1 的错位布局（截图才发现）。
     grid-template-columns:repeat(3,1fr) 是硬三栏，不会有这个问题。 */
.today3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px;
  align-items:start}
@media (min-width:1100px){
  /* 三栏时只留「城市 / 日出 / 日落」三列。
     理由：每栏 ~360px，昼长「11 小时 51 分」要 104px、时区
     「America/New_York」要 90px，加起来 194px 吃掉半栏，
     剩下的不够放城市名和时刻。截成「11 小时 51...」比不显示更糟。
     昼长与时区在月份页、城市页都有，这里是可选项。 */
  .today3 .todaytbl .tz,
  .today3 .todaytbl .len{display:none}
  .today3 .todaytbl thead th:nth-child(4),
  .today3 .todaytbl thead th:nth-child(5){display:none}
  .today3 col.c-len,
  .today3 col.c-tz{display:none}
  /* 省下的宽度全给城市名和时刻 */
  .today3 col.c-city{width:96px}
  .today3 col.c-num{width:72px}
}
@media (max-width:1099px){
  /* 两栏时每栏 ~440px：城市 78 + 日出 64 + 日落 64 + 昼长 96 = 302px，
     余 138px 给时区，但「America/New_York」要 90px + padding 24px = 114px，
     加上昼长实际占 110px（不是 96），两边都不够 —— 截成「11 小时 5...」
     比不显示更糟。所以**两栏也藏时区**，让昼长完整。 */
  .today3{grid-template-columns:repeat(2,1fr)}
  .today3 .todaytbl .tz{display:none}
  .today3 .todaytbl thead th:nth-child(5){display:none}
  .today3 col.c-tz{display:none}
  .today3 col.c-len{width:112px}
}
@media (max-width:760px){
  .today3{grid-template-columns:1fr}
  .today3 + .todaytbl{margin-top:14px}
  /* 单栏有整幅宽度，昼长能放；但时区（America/New_York）仍放不下 */
  .today3 .todaytbl .tz,
  .today3 .todaytbl thead th:nth-child(5){display:none}
  .today3 col.c-tz{display:none}
}

/* 月份入口 */
.monthnav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
/* 总页的 12 个月用固定 4 列（4×3），不靠 flex-wrap 自动折行 ——
   flex 会排成 7+5，第二行右侧空 2 格，视觉上「右下角缺一块」。
   4 列 = 12÷4 整除，每行都齐。 */
.monthnav.big{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px}
@media (max-width:760px){
  .monthnav.big{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:480px){
  .monthnav.big{grid-template-columns:repeat(2,1fr)}
}
.monthnav a{font-size:12.5px;font-weight:600;border:1.5px solid var(--line2);
  padding:5px 14px;border-radius:99px;background:var(--card);color:var(--ink)}
.monthnav a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.monthnav a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.partnav{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.partnav a{font-size:12.5px;font-weight:600;border:1.5px solid var(--line2);
  padding:6px 16px;background:var(--card);color:var(--ink)}
.partnav a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.partnav a:hover{border-color:var(--blue);color:var(--blue)}
.partnav a.on:hover{color:#fff}
.monthnav.big a{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 20px;border-radius:8px}
.monthnav.big a b{font-size:15px}
.monthnav.big a span{font-size:10.5px;color:var(--muted);font-weight:400;
  font-family:var(--num)}
.monthnav.big a:hover span{color:rgba(255,255,255,.8)}

/* 月度时刻表：每城一个可折叠块 */
.monthtabs{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.mt{border:2px solid var(--line2);background:var(--card)}
.mt summary{list-style:none;cursor:pointer;padding:11px 18px;display:flex;
  align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid transparent}
.mt[open] summary{border-bottom-color:var(--line)}
.mt summary::-webkit-details-marker{display:none}
.mt summary::before{content:"+";font-family:var(--num);font-weight:700;
  color:var(--muted);width:14px;flex:none}
.mt[open] summary::before{content:"−";color:var(--blue)}
.mt summary b{font-size:15px;font-weight:700}
.mt summary .en2{font-size:10.5px;letter-spacing:.2em;color:var(--muted)}
.mt summary .tz{font-size:11px;color:var(--muted);font-family:var(--num);
  margin-left:auto}
.mt summary .today{font-size:12px;font-family:var(--num);color:var(--blue);
  font-weight:600}
.mt summary:hover{background:var(--card2)}

.mtable{width:100%;border-collapse:collapse;font-size:11.5px;
  font-family:var(--num);font-variant-numeric:tabular-nums}
.mtable caption{text-align:left;font-size:12.5px;font-weight:700;
  padding:12px 18px 6px;color:var(--ink);font-family:inherit}
.mtable th,.mtable td{padding:4px 3px;text-align:center;
  border-bottom:1px solid var(--line);white-space:nowrap}
.mtable thead th{background:var(--card2);color:var(--muted);font-weight:600;
  font-size:10.5px}
.mtable thead th:first-child,.mtable tbody th{text-align:left;padding-left:18px;
  position:sticky;left:0;background:var(--card);font-weight:600;
  font-family:inherit;z-index:1}
.mtable tbody th{color:var(--muted);font-size:11px}
.mtable .rr td{color:var(--blue);font-weight:600}
.mtable .rs td{color:var(--cta2)}
.detail-link{padding:10px 18px 14px;margin:0}
.detail-link a{font-size:12.5px;font-weight:600;color:var(--blue)}

/* 时刻表 28 列必须能横向滚，否则手机上挤成一团 */
.monthtabs .mt{overflow-x:auto}

/* 时段分组（几点天亮/天黑/凌晨是几点）
   用固定 2 列而不是 auto-fit：4 个卡片在 1366px 下 auto-fit 算出 3 列，
   于是第 4 个「黄昏」掉到第二行，右边空一大块，页面凭空长 400px。
   2 列 × 2 行正好填满，且四卡等高（align-items:stretch 是 grid 默认）。*/
.bandgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px;
  align-items:start}
.band{border:2px solid var(--line2);background:var(--card);padding:16px 20px}
.band h3{font-size:15px;font-weight:700;display:flex;align-items:baseline;
  gap:10px;margin-bottom:6px;flex-wrap:wrap}
.band h3 b{font-size:19px;letter-spacing:.04em}
.band h3 span{font-size:11.5px;color:var(--muted);font-family:var(--num)}
.band h3 em{font-size:11px;color:var(--muted);font-style:normal;margin-left:auto}
.band .bd{font-size:12.5px;color:var(--muted);margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.band ul{list-style:none}
/* 卡内分 2 列：四个卡的内容量差很多（11/19/13/17 城），
   单列时「凌晨」11 行、「清晨」19 行，高度差 70px，2×2 布局下右下留一大块空。
   分 2 列后最长 19 条 -> 10 行，四卡高度接近，页面短一屏。 */
.band ul{columns:2;column-gap:22px}
.band li{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px;
  break-inside:avoid}
.band li:last-child{border-bottom:0}
.band li a{font-weight:600}
.band li a:hover{color:var(--blue)}
.band li span{font-size:11.5px;color:var(--muted);font-family:var(--num);
  white-space:nowrap}

@media (max-width:760px){
  .todaytbl{font-size:12.5px}
  .todaytbl th,.todaytbl td{padding:6px 8px}
  .todaytbl .num{width:64px}
  .todaytbl .tz{display:none}
  .todaytbl thead th:nth-child(5){display:none}
  .bandgrid{grid-template-columns:1fr;gap:12px}
  .mt summary .tz{display:none}
}
/* 三栏在 1100px 以下每栏不足 300px，城市名会挤掉，退回两栏显示时区 */