@charset "utf-8";

/* ==================================================================
 * 长尾页专用外观（日页 / 月页 / 年页 / 小时页）
 *
 * 这套样式只服务于「路由层动态生成」的长尾页，解决三个问题：
 *   1. 内容不居中 —— 原来靠 .time_max（max-width:100%），
 *      在宽屏上被拉成一条长线，读起来很累；
 *   2. 区块没有层次 —— 标题、表格、说明文字糊在一起；
 *   3. 手机上表格挤成一团 —— 列宽写死 150px，窄屏会溢出。
 *
 * 设计约束：
 *   · 只复用主题 default.css 的 CSS 变量，配色随主题走，不另起一套；
 *   · 全部挂在 .tklm-lt 命名空间下，绝不污染正常文章页；
 *   · 移动优先：先写窄屏，再用 min-width 逐级增强；
 *   · 支持系统深色模式。
 * ================================================================== */

/* ---------- 1. 居中容器：移动优先 ---------- */
.tklm-lt{
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:16px 14px 40px;
  box-sizing:border-box;
}
@media (min-width:640px){
  .tklm-lt{ padding:22px 20px 48px; }
}
@media (min-width:1024px){
  .tklm-lt{ padding:28px 24px 56px; }
}

/* 内部所有区块统一上下间距 */
.tklm-lt > * { margin-top:0; }
.tklm-lt .time_max{ padding-left:0; padding-right:0; }

/* ---------- 2. 面包屑 ---------- */
.tklm-lt .breadcrumb,
.tklm-lt nav.breadcrumb{
  margin:0 0 14px;
  font-size:13px;
  color:var(--muted,#6b7688);
}
.tklm-lt .breadcrumb ol{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.tklm-lt .breadcrumb li{ display:inline-flex; align-items:center; }
.tklm-lt .breadcrumb li + li::before{
  content:"/";
  margin-right:6px;
  color:var(--muted-3,#95a0b2);
}
.tklm-lt .breadcrumb a{
  color:var(--muted,#6b7688);
  text-decoration:none;
}
.tklm-lt .breadcrumb a:hover{ color:var(--primary,#1a73e8); }
.tklm-lt .breadcrumb li:last-child{
  color:var(--text,#2c3440);
  font-weight:600;
}

/* ---------- 3. 主标题 ---------- */
.tklm-lt .time_now{ margin:0 0 14px; }
.tklm-lt .time_now h1{
  font-size:22px;
  line-height:1.35;
  margin:0;
  color:var(--title,#1b2430);
  font-weight:700;
  /* 中文标题按词断行，避免长地名整行溢出 */
  word-break:break-word;
}
@media (min-width:640px){
  .tklm-lt .time_now h1{ font-size:26px; }
}
@media (min-width:1024px){
  .tklm-lt .time_now h1{ font-size:30px; }
}

/* 时区页 / 大洲页的标题与副标题（它们不走 .time_now 结构） */
.tklm-lt-h1{
  font-size:22px;
  line-height:1.35;
  margin:0 0 8px;
  font-weight:700;
  color:var(--title,#1b2430);
  word-break:break-word;
}
@media (min-width:640px){ .tklm-lt-h1{ font-size:26px; } }
@media (min-width:1024px){ .tklm-lt-h1{ font-size:30px; } }

.tklm-lt-sub{
  margin:0 0 16px;
  font-size:14px;
  color:var(--muted,#6b7688);
}
.tklm-lt-sub b{ color:var(--primary,#1a73e8); }

/* ---------- 4. 实时时间：做成一张突出的卡片 ---------- */
.tklm-lt .time_get{
  margin:0 0 16px;
  padding:14px 16px;
  background:linear-gradient(135deg,
             var(--primary,#1a73e8),
             var(--grad-b,#00bcd4));
  border-radius:12px;
  color:#fff;
  box-shadow:var(--shadow-hover,0 6px 18px rgba(16,24,40,.10));
}
.tklm-lt .time_get p.bzsj{
  margin:0;
  font-size:14px;
  opacity:.92;
}
.tklm-lt .time_get #realtime_local,
.tklm-lt .time_get .bzsj span{
  display:inline-block;
  margin-left:6px;
  font-size:26px;
  font-weight:700;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:1px;
  font-variant-numeric:tabular-nums;
}
@media (min-width:640px){
  .tklm-lt .time_get #realtime_local{ font-size:32px; }
}

/* ---------- 5. 信息卡（时区 / 日期） ---------- */
.tklm-lt .time_list{ margin:0 0 16px; }
.tklm-lt .sqbt{
  background:var(--card,#fff);
  border:1px solid var(--border,#e6eaf0);
  border-radius:12px;
  padding:13px 16px;
  box-shadow:var(--shadow,0 1px 3px rgba(16,24,40,.04));
}
.tklm-lt .sqbt p{
  margin:0 0 6px;
  font-size:14px;
  color:var(--text,#2c3440);
}
.tklm-lt .sqbt p:last-child{ margin-bottom:0; }
.tklm-lt .sqbt span{ margin-right:8px; }
.tklm-lt .sqbt b{ color:var(--primary,#1a73e8); }

/* 城市快捷链接：圆角胶囊 */
.tklm-lt .time_list ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  padding:12px 0 0;
  list-style:none;
  margin:0;
}
.tklm-lt .time_list li{
  background:var(--card-soft,#f4f7fc);
  border:1px solid var(--border,#e6eaf0);
  border-radius:999px;
  padding:5px 12px;
  transition:all .2s ease;
}
.tklm-lt .time_list li:hover{
  background:var(--primary,#1a73e8);
  border-color:var(--primary,#1a73e8);
}
.tklm-lt .time_list li:hover a{ color:#fff; }
.tklm-lt .time_list li a{ display:block; color:var(--text,#2c3440); }
.tklm-lt .time_list .csmc{ font-weight:700; }
.tklm-lt .time_list .cssj{
  font-size:17px;
  font-family:Georgia,"Times New Roman",serif;
}

/* ---------- 6. 内容区块：统一卡片化 ---------- */
.tklm-lt .time_info,
.tklm-lt .time_box,
.tklm-lt .time_scbox,
.tklm-lt .time_zodiac,
.tklm-lt .time_area,
.tklm-lt .time_tool{
  background:var(--card,#fff);
  border:1px solid var(--border,#e6eaf0);
  border-radius:12px;
  margin:0 0 16px;
  overflow:hidden;
  box-shadow:var(--shadow,0 1px 3px rgba(16,24,40,.04));
}
.tklm-lt .time_info .bt{
  padding:12px 16px;
  background:var(--card-soft,#f4f7fc);
  border-bottom:1px solid var(--border,#e6eaf0);
}
.tklm-lt .time_info .bt strong{
  font-size:15px;
  color:var(--title,#1b2430);
  font-weight:700;
}
.tklm-lt .time_info .nr{ padding:14px 16px; }
.tklm-lt .time_info p{
  margin:0 0 .8em;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text,#2c3440);
}
.tklm-lt .time_info p:last-child{ margin-bottom:0; }

/* ---------- 7. 表格：斑马纹 + hover + 窄屏可横滑 ---------- */
.tklm-lt .time_info table,
.tklm-lt table.tableBorder{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  /* 表格外层可横向滚动，窄屏不会把页面撑破 */
  display:block;
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.tklm-lt .time_info table thead,
.tklm-lt table.tableBorder thead{
  display:table;
  width:100%;
  table-layout:fixed;
}
.tklm-lt .time_info table tbody,
.tklm-lt table.tableBorder tbody{
  display:table;
  width:100%;
}
.tklm-lt .time_info table tr,
.tklm-lt table.tableBorder tr{
  border-bottom:1px solid var(--border,#e6eaf0);
}
.tklm-lt .time_info table tr:last-child,
.tklm-lt table.tableBorder tr:last-child{ border-bottom:0; }
.tklm-lt .time_info table td,
.tklm-lt table.tableBorder td{
  padding:9px 12px;
  border:0;
  color:var(--text,#2c3440);
  vertical-align:middle;
}
.tklm-lt .time_info table tr:nth-child(even) td,
.tklm-lt table.tableBorder tr:nth-child(even) td{
  background:var(--card-soft,#f4f7fc);
}
.tklm-lt .time_info table td:first-child,
.tklm-lt table.tableBorder td:first-child{
  color:var(--muted,#6b7688);
  white-space:normal;
}
.tklm-lt .time_info table td b,
.tklm-lt table.tableBorder td b{
  color:var(--title,#1b2430);
  font-size:15px;
}

/* 宽屏取消横向滚动，恢复常规表格 */
@media (min-width:768px){
  .tklm-lt .time_info table,
  .tklm-lt table.tableBorder{
    display:table;
    overflow-x:visible;
    white-space:normal;
  }
}

/* ---------- 8. 底部日期导航（上一天 / 下一天） ---------- */
.tklm-lt .time_area,
.tklm-lt .tklm-nav{
  padding:14px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.tklm-lt a.tklm-navbtn,
.tklm-lt .time_area a{
  display:inline-block;
  padding:8px 16px;
  background:var(--primary-soft,#eef3fb);
  color:var(--primary,#1a73e8);
  border:1px solid var(--border,#e6eaf0);
  border-radius:8px;
  font-size:14px;
  text-decoration:none;
  transition:all .2s ease;
}
.tklm-lt a.tklm-navbtn:hover,
.tklm-lt .time_area a:hover{
  background:var(--primary,#1a73e8);
  border-color:var(--primary,#1a73e8);
  color:#fff;
}

/* ---------- 9. 天气区块跟着卡片化 ---------- */
.tklm-lt .tklm-weather,
.tklm-lt .time_weather{
  background:var(--card,#fff);
  border:1px solid var(--border,#e6eaf0);
  border-radius:12px;
  margin:0 0 16px;
  overflow:hidden;
  box-shadow:var(--shadow,0 1px 3px rgba(16,24,40,.04));
}

/* ---------- 10. 极简兜底页头页尾（模板没套上时） ---------- */
.tklm-fb-nav{
  background:var(--card,#fff);
  border-bottom:1px solid var(--border,#e6eaf0);
  box-shadow:var(--shadow,0 1px 3px rgba(16,24,40,.04));
}
.tklm-fb-nav .inner{
  max-width:960px;
  margin:0 auto;
  padding:12px 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
}
.tklm-fb-nav .brand{
  font-weight:700;
  font-size:17px;
  color:var(--title,#1b2430);
  margin-right:4px;
}
.tklm-fb-nav a{
  color:var(--muted,#6b7688);
  text-decoration:none;
  font-size:14px;
  padding:4px 8px;
  border-radius:6px;
  transition:all .2s ease;
}
.tklm-fb-nav a:hover{
  color:var(--primary,#1a73e8);
  background:var(--primary-soft,#eef3fb);
}
.tklm-fb-main{
  max-width:960px;
  margin:0 auto;
  padding:0 14px;
}

/* 兜底页头里的搜索框（模板没套上时才有） */
.tklm-fb-so{
  display:flex;
  gap:6px;
  margin-left:auto;
  flex:1 1 180px;
  max-width:280px;
}
.tklm-fb-so input{
  flex:1 1 auto;
  min-width:0;
  padding:7px 10px;
  font-size:14px;
  font-family:inherit;
  color:var(--text,#2c3440);
  background:var(--bg,#f5f7fa);
  border:1px solid var(--border-2,#d8e0ea);
  border-radius:8px;
  outline:none;
}
.tklm-fb-so input:focus{
  border-color:var(--primary,#1a73e8);
  background:var(--card,#fff);
}
.tklm-fb-so button{
  flex:0 0 auto;
  padding:7px 14px;
  font-size:14px;
  font-family:inherit;
  color:#fff;
  background:var(--primary,#1a73e8);
  border:1px solid var(--primary,#1a73e8);
  border-radius:8px;
  cursor:pointer;
  transition:background .2s ease;
}
.tklm-fb-so button:hover{ background:var(--primary-dark,#1557b0); }
/* 窄屏：搜索框独占一行，避免和导航挤在一起 */
@media (max-width:560px){
  .tklm-fb-so{ flex:1 1 100%; margin-left:0; max-width:100%; }
}
.tklm-fb-foot{
  max-width:960px;
  margin:0 auto;
  padding:18px 14px 32px;
  border-top:1px solid var(--border,#e6eaf0);
  font-size:13px;
  color:var(--muted,#6b7688);
  text-align:center;
}
.tklm-fb-foot a{ color:var(--primary,#1a73e8); }

/* ---------- 11. 深色模式 ---------- */
@media (prefers-color-scheme:dark){
  .tklm-lt .time_info,
  .tklm-lt .time_box,
  .tklm-lt .time_scbox,
  .tklm-lt .time_zodiac,
  .tklm-lt .time_area,
  .tklm-lt .time_tool,
  .tklm-lt .sqbt,
  .tklm-lt .tklm-weather,
  .tklm-lt .time_weather,
  .tklm-fb-nav{
    background:#1b2430;
    border-color:#2c3440;
  }
  .tklm-lt .time_info .bt{ background:#222d3d; border-color:#2c3440; }
  .tklm-lt .time_info p,
  .tklm-lt .time_now h1{ color:#e6eaf0; }
  .tklm-lt .time_info table tr:nth-child(even) td,
  .tklm-lt table.tableBorder tr:nth-child(even) td{ background:#222d3d; }
  .tklm-lt .time_list li{
    background:#222d3d;
    border-color:#2c3440;
  }
  .tklm-lt .time_list li a{ color:#e6eaf0; }
  .tklm-fb-nav .brand{ color:#e6eaf0; }
}

/* ---------- 12. 打印：去掉装饰，保证可读 ---------- */
@media print{
  .tklm-lt{ max-width:100%; padding:0; }
  .tklm-lt .time_get{ background:#fff; color:#000; box-shadow:none; }
  .tklm-lt .time_info,
  .tklm-lt .sqbt{ box-shadow:none; border-color:#ccc; }
  .tklm-fb-nav, .tklm-fb-foot{ display:none; }
}