/* 万年历 v4.0 - css/2-layout.css (从 style.css 拆分) */

/* ═══ style.css lines 190-217 ═══ */
/* ===== 红色顶栏 ===== */
.header{position:sticky;top:0;z-index:100;background:var(--color-primary);height:50px;display:flex;align-items:center;padding:0 var(--sp-14);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.header .logo{font-size:var(--fs-h1);font-weight:700;color:var(--color-text-white);letter-spacing:.5px}
.header .h-r{margin-left:auto;display:flex;align-items:center;gap:var(--sp-10)}
.header .hi{width:32px;height:32px;border-radius:var(--radius-xl);background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:var(--fs-body);color:var(--color-text-white);cursor:pointer}
.header .hi:active{background:var(--color-primary-light)}

/* ===== 页面容器 ===== */
.pg{display:none;padding-bottom:var(--sp-4)}
.pg.on{display:block}

/* ===== 月导航 ===== */
.mn{display:flex;align-items:center;justify-content:space-between;padding: var(--sp-6) var(--sp-8) 0;background:var(--bg-card);border:1px solid var(--color-border);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;touch-action:pan-y}
.ma{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--color-primary);cursor:pointer;border-radius:var(--radius-md);user-select:none;flex-shrink:0;transition:background .12s}
.ma:active{background:var(--color-primary-light)}
.mn-l,.mn-r{display:flex;align-items:center}
.mlogo{font-size:var(--fs-xs);font-weight:600;color:var(--color-primary);padding:0 var(--sp-6);white-space:nowrap;user-select:none;opacity:.85}
.mc{flex:1;text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--sp-8)}
.mc .mt{font-size:var(--fs-h1);font-weight:600;color:var(--color-text-primary);cursor:pointer;user-select:none}
.mc .mb2{display:inline-block;padding: 3px var(--sp-12);font-size:var(--fs-small);color:var(--bg-card);background:var(--color-primary);border:none;border-radius:var(--radius-lg);cursor:pointer;line-height:1.4;font-weight:600;transition:background .12s}
.mc .mb2:active{background:var(--color-primary-dark)}

/* 放假·节气·节日信息条 */
.ci-bar{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding: var(--sp-4) var(--sp-8);background:var(--bg-card);font-size:var(--fs-small);color:var(--color-text-muted);border-top:1px solid var(--color-border-light);font-weight:500}
.ci-bar .ci-b{cursor:pointer;padding: 3px var(--sp-6);border-radius:var(--radius-sm);transition:background .12s;white-space:nowrap}
.ci-bar .ci-b:active{background:var(--color-primary-light)}
.ci-bar .ci-s{color:var(--color-text-light);font-size:10px;padding:0 var(--sp-2)}
.ci-bar .ci-d{color:var(--color-primary);margin-left:var(--sp-2)}

/* ═══ style.css lines 260-282 ═══ */
/* ===== 日期卡片 ===== */
.dc{margin:var(--sp-8) 12px;background:var(--bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--sp-14)}
.dc-top{display:flex;gap:var(--sp-14);align-items:flex-start}
.dc .dd{font-size:var(--fs-hero);font-weight:700;color:var(--color-primary);line-height:1.1;min-width:56px;text-align:center;padding: var(--sp-6) var(--sp-4);background:var(--color-primary-light);border-radius:var(--radius-md)}
.dc-side{flex:1;min-width:0}
.dc .dl{font-size:var(--fs-body);color:var(--color-text-secondary);margin-top:0;letter-spacing:.3px}
.dc .dzodiac{font-size:var(--fs-small);color:var(--color-primary);margin-top:var(--sp-2)}
.dc .dg2{font-size:var(--fs-small);color:var(--color-text-muted);margin-top:var(--sp-2)}
.dc .dm{font-size:var(--fs-small);color:var(--color-primary);margin-top:var(--sp-2);font-weight:500}
.dc .dt{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-10);padding-top:var(--sp-10);border-top:1px solid var(--color-border-light)}
.dc .dt .dt-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) 4px}
.dc .dt .t{font-size:var(--fs-small);line-height:1.7}
.dc .dt .t.iy{color:var(--color-primary);font-weight:500}
.dc .dt .t.ij{color:var(--color-ji)}
.dc .db{display:inline-block;padding: 1px var(--sp-8);border-radius:var(--radius-sm);font-size:var(--fs-tiny);font-weight:700;margin-right:var(--sp-4);vertical-align:middle}
.dc .db.ok{background:var(--color-primary-light);color:var(--color-primary)}
.dc .db.no{background:var(--gray-50);color:var(--gray-500)}
.dc .ib{margin:var(--sp-8) -14px 4px;padding: var(--sp-6) var(--sp-14);background:var(--gray-50);display:flex;justify-content:space-around;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.dc .ib .bx{text-align:center}
.dc .ib .bx .bl{font-size:11px;color:var(--color-text-muted)}
.dc .ib .bx .bv{font-size:var(--fs-body);font-weight:500;color:var(--color-text-primary)}
.dc .ts{font-size:var(--fs-small);color:var(--color-text-muted);text-align:center;padding:var(--sp-4) 0}


/* ═══ style.css lines 358-361 ═══ */
/* ===== 信息卡片 ===== */
.fd{padding:0 var(--sp-12)}
.sc{background:var(--bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--sp-8);padding:var(--sp-14)}
/* 色块分区 */

/* ═══ style.css lines 362-367 ═══ */
.sc.block-weather{background:var(--bg-card)}
.sc.block-ai{background:var(--bg-card)}
.sc.block-life{background:var(--bg-card)}
.sc.block-fun{background:var(--bg-card)}
.sh{font-size:16px;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--sp-8);display:flex;justify-content:space-between;align-items:center}


/* ═══ style.css lines 476-512 ═══ */
/* ===== 择吉页 ===== */
.ev-sc{overflow-x:auto;white-space:nowrap;padding:var(--sp-2) 0;-webkit-overflow-scrolling:touch;max-width:100%}
.ev-r{display:inline-flex;gap:var(--sp-6)}
.ev-t{display:inline-block;padding: 5px var(--sp-14);border-radius:var(--radius-xl);font-size:var(--fs-body);color:var(--color-text-secondary);background:var(--bg-page);cursor:pointer;white-space:nowrap;transition:all .12s}
.ev-t:active{background:var(--gray-50)}
.ev-t.on{color:var(--color-text-white);background:var(--color-primary)}
/* pill-s/pill-m 替换 ev-t/zf-opt/zs-btn/nm-ot */
.pill-s{cursor:pointer;color:var(--color-text-secondary);background:var(--bg-card);border:1px solid var(--color-border);transition:all .12s;font-size:11px;padding:2px 6px;border-radius:var(--radius-md);display:inline-block;line-height:1.4}
.pill-s:active{background:var(--gray-100)}
.pill-s.on{background:var(--color-primary);color:var(--color-text-white);border-color:var(--color-primary);font-weight:600}
.zj-bg{display:inline-block;background:var(--color-primary);color:var(--color-text-white);font-size:var(--fs-micro);padding:0 var(--sp-4);border-radius:var(--radius-md);font-weight:600;line-height:14px;margin-top:0}
.zj-score-line{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;margin-top:1px}
.zj-sc{display:inline-block;font-size:9px;padding:0 4px;border-radius:var(--radius-sm);line-height:14px;font-weight:600}
.zj-sc-ji{background:var(--color-primary);color:var(--color-text-white)}
.zj-chong{opacity:.45;pointer-events:none}
.zf-row{display:flex;align-items:center;gap:2px;font-size:11px;padding:1px 0;margin-top:8px}
.zf-label{font-weight:600;color:var(--color-primary);white-space:nowrap;margin-right:2px;flex-shrink:0}
.zf-clear{color:var(--gray-500);cursor:pointer;font-size:12px;padding:0 2px;flex-shrink:0}
.zf-clear.zf-hidden{display:none}
.zf-options{display:flex;gap:0;flex-wrap:nowrap;flex:1}
.zf-item{cursor:pointer;color:var(--color-text-secondary);font-size:11px;line-height:1.4;text-align:center;flex:1}
.zf-item.on{color:var(--color-primary);font-weight:700}
.zf-item:active{opacity:.6}
/* .zf-opt → pill-s，样式由 .pill-s.on 覆盖 */
/* .zf-opt.on{background:var(--color-primary);color:var(--color-text-white)} */
/* .zf-opt:active{opacity:.7} */
.zf-hint{font-size:10px;color:var(--gray-400);margin-top:2px;padding-left:2px}
.zj-c{text-align:center;padding:4px 0;font-size:var(--fs-body);color:var(--gray-700)}
.zj-c .n{font-size:18px;font-weight:700;color:var(--color-primary)}
#zj2Info{font-size:var(--fs-small);line-height:1.7;color:var(--gray-700);border-top:1px solid var(--color-border);animation:fadeIn .2s ease}
#zj2Info .zj2-i-t{font-size:15px;font-weight:700;color:var(--color-primary);margin-bottom:var(--sp-4)}
#zj2Info .zj2-i-l{color:var(--color-text-muted);font-size:var(--fs-xs)}
.dark #zj2Info{color:var(--gray-400);border-color:var(--gray-800)}
.dark #zj2Info .zj2-i-l{color:var(--gray-600)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}


/* ═══ style.css lines 807-825 ═══ */
/* ===== 底部Tab ===== */
.tb{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);display:flex;border-top:1px solid var(--color-border);z-index:200;padding:5px 0 env(safe-area-inset-bottom)}
.tb::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:14px;background:var(--bg-card)}
.tb .ti{flex:1;text-align:center;padding:var(--sp-2) 0;font-size:var(--fs-xs);color:var(--color-tab-off);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s}
.tb .ti .ii{font-size:24px;display:block;margin-bottom:3px;line-height:1}
.tb .ti .tab-icon{width:22px;height:22px;display:block;margin:0 auto;transition:transform .15s}
.tb .ti .tab-label{font-size:var(--fs-tiny);line-height:1.2;display:block;letter-spacing:.5px;transition:color .2s}
.tb .ti.on{color:var(--color-tab-on)}
.tb .ti.on .tab-label{font-weight:600}
.tb .ti:active .tab-icon{transform:scale(.9)}

/* ======== 弹窗 ======== */
/* 间距标准：header: sp-10 sp-14 | body: sp-16 sp-16 | AI面板同 */
.mp{display:none;position:fixed;top:0;left:0;right:0;bottom:58px;background:var(--bg-page);z-index:150;overflow-y:auto}
.mh{display:flex;align-items:center;padding: var(--sp-10) var(--sp-14);background:var(--bg-card);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:10}
.mb{font-size:22px;color:var(--color-primary);cursor:pointer;padding:0 var(--sp-4);line-height:1}
.mt{font-size:var(--fs-h1);font-weight:700;margin-left:var(--sp-4);flex:1}
.mbd{padding: var(--sp-16) var(--sp-16)}


/* ═══ style.css lines 878-959 ═══ */
/* ===== v5.3 微动效增强 ===== */
/* Tab切换淡入淡出 */
.pg {
  transition: opacity .2s ease;
}
.pg.on {
  opacity: 1;
}
.pg:not(.on) {
  opacity: 0;
  pointer-events: none;
}

/* 弹窗缩放 */
.mp {
  animation: modalFadeIn .2s ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mh, .mbd {
  animation: modalSlideIn .25s ease;
}
@keyframes modalSlideIn {
  from { transform: scale(.92) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* AI子面板滑入 */
.ai-s {
  animation: aiSlideIn .25s ease;
}
@keyframes aiSlideIn {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 日历格子悬停 */
.dg .c {
  transition: transform .15s ease, box-shadow .15s ease;
}
.dg .c:active {
  transform: scale(.95);
}

/* 底部Tab切换 */
.tb .ti {
  transition: color .2s ease;
}
.tb .ti .tab-icon {
  transition: transform .2s ease;
}
.tb .ti.on .tab-icon {
  transform: scale(1.1);
}

/* 弹窗内容滚动条美化 */
.mbd::-webkit-scrollbar,.ai-sb::-webkit-scrollbar {
  width: 3px;
}
.mbd::-webkit-scrollbar-thumb,.ai-sb::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius:var(--radius-sm);
}

/* 折叠箭头动画 */
.hl-ar {
  transition: transform .2s ease;
}
.hl-ar.op {
  transform: rotate(90deg);
}

/* 卡片点击反馈 */
.hl-card, .ai-c, .st-r, .ma {
  transition: background .15s ease;
}
.hl-card:active, .ai-c:active, .st-r:active, .ma:active {
  background: var(--gray-50) !important;
}


/* ═══ style.css lines 1198-1228 ═══ */
/* ═══════════════════════════════════════════════
   响应式 — 小屏适配
   ═══════════════════════════════════════════════ */
@media (max-width: 374px) {
  /* iPhone SE / 小屏：减少边距 */
  .dc { margin: var(--sp-4) 8px; padding: var(--sp-8); }
  .sc { padding: var(--sp-8); }
  .tb { padding: 3px 0 env(safe-area-inset-bottom); }
  .tb .tb-i { font-size: 10px; }
  .tb .tb-i .tb-ic { font-size: 18px; }
  .dg .c { min-height: 38px; padding: 2px 0; }
  .dc .dd { font-size: 28px; min-width: 44px; padding: var(--sp-4); }
  .cs { gap: var(--sp-8); }
  .lr { gap: var(--sp-6); }
  :root { --sp-14: 10px; --sp-12: 8px; --sp-10: 6px; --sp-8: 6px; }
}

@media (max-width: 414px) {
  /* 普通手机：限制全宽 */
  .dc .dd { font-size: var(--fs-hero); }
  .fd { padding: 0 var(--sp-8); }
}

/* ═══════════════════════════════════════════════
   响应式 — 安全区域（刘海屏）
   ═══════════════════════════════════════════════ */
@supports (padding-top: env(safe-area-inset-top)) {
  .tb { padding-bottom: max(5px, env(safe-area-inset-bottom)); }
  .pg { padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom)); }
}