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

/* ═══ style.css lines 1-188 ═══ */
/* 万年历 v4.0 - 模块化重构版 */
/* ─── CSS类名速查（缩写说明）───
   pg = page(页面)  dc = date-card(日期卡片)  dg = day-grid(日期网格)
   tb = tab-bar(底部Tab)  sc = section-card(区域卡片)  oc = off-screen(滚动优化)
   sg = shi-chen(时辰)  cs = Chinese-zodiac(生肖)  lr = liu-yao(六曜)
   ww = weather-week(天气周)  wr = weather-row(天气行)  tl = tag-list(标签列表)
   hl = holiday(节日)  st = season-term(节气)  nm = naming(姓名)
   zj = ze-ji(择日)  ci = Chinese-zodiac-item(生肖项)
─── */
/* ===== 设计系统 (CSS变量) ===== */
:root {
  /* ── 品牌色 ── */
  --color-primary: #C62828;
  --color-primary-dark: #8E0000;
  --color-primary-light: #FFE0E0;
  --color-gold: #D4A017;
  --color-gold-bg: #FFF5E6;
  --color-card-bg: #FFF8F0;

  /* ── 灰度系统（5+2级）── */
  --gray-50: #f5f5f5;
  --gray-100: #f0f0f0;
  --gray-150: #ddd;
  --gray-200: #e0e0e0;
  --gray-300: #ccc;
  --gray-400: #bbb;
  --gray-450: #888;
  --gray-500: #999;
  --gray-600: #666;
  --gray-700: #555;
  --gray-800: #333;
  --gray-900: #111;

  /* 文字（灰度别称） */
  --color-text-primary: var(--gray-900);
  --color-text-body: var(--gray-800);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-text-light: var(--gray-400);
  --color-text-white: #fff;

  /* 背景 */
  --bg-page: #f8f8f8;
  --bg-card: #ffffff;
  --bg-card-elevated: #ffffff;
  --bg-input: #f0f0f0;

  /* 骨架屏加载动画 */
  --skeleton-color: #eee;
}

@keyframes skeleton-loading {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
.skeleton {
  background: var(--skeleton-color);
  border-radius:var(--radius-sm);
  animation: skeleton-loading 1.5s ease-in-out infinite;
}
.skeleton-line { height: 14px; margin-bottom: 8px; width: 100%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-block { height: 80px; margin-bottom: 10px; }

:root {
  --color-success: #2E7D32;
  --color-error: #C62828;

  /* 组件尺寸 */
  --card-radius: 8px;
  --modal-radius: 10px;
  --btn-height: 40px;
  --input-height: 38px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --color-border-light: #f0f0f0;
  --color-border: #e8e8e8;
  --color-warning: #FF9800;

  /* 黄历语义 — 宜浅绿/忌浅灰 */
  --color-yi: #2E7D32;
  --color-ji: var(--gray-500);
  --color-ji-backup: var(--gray-500);
  --color-ping: var(--gray-500);
  --color-weekend: #C62828;
  --color-other-month: #ddd;
  --color-xiu-tag-bg: #C62828;
  --color-festival: #2EA9DF;
  --color-almanac-label: #D78100;
  --color-shichen-ji: #C62828;
  --color-shichen-ping: var(--gray-500);
  --color-shichen-xiong: var(--gray-300);
  --color-shichen-current-bg: #FFF0F0;
  --color-tab-off: #888;
  --color-tab-on: #C62828;

  /* 字体 */
  --font-family: -apple-system, 'PingFang SC', 'Noto Sans SC', 'HarmonyOS Sans', 'Microsoft YaHei', sans-serif;
  --fs-hero: 42px;
  --fs-h1: 18px;
  --fs-h2: 15px;
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-xs: 12px;
  --fs-tiny: 11px;
  --fs-micro: 9px;

  /* 间距 */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;

  /* 圆角 (统一4级体系) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.08);
}

/* ===== 暗色模式 (CSS变量重定义) ===== */
body.dark {
  --color-primary: #B05050;
  --color-primary-dark: #753030;
  --color-primary-light: #3A1515;
  --color-gold-bg: #2A2010;
  --color-card-bg: #1A1510;

  --gray-50: #1a1a1a;
  --gray-100: #222;
  --gray-150: #2a2a2a;
  --gray-200: #333;
  --gray-300: #444;
  --gray-400: #555;
  --gray-450: #666;
  --gray-500: #888;
  --gray-600: #aaa;
  --gray-700: #ccc;
  --gray-800: #ddd;
  --gray-900: #eee;

  --color-text-primary: #e8e8e8;
  --color-text-body: #cccccc;
  --color-text-secondary: #999;
  --color-text-muted: #777;
  --color-text-light: var(--gray-450);

  --bg-page: #121212;
  --bg-card: #1a1a1a;
  --bg-card-elevated: #242424;
  --bg-input: #2a2a2a;

  --color-border: #333;
  --color-border-light: #282828;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.2);
  --shadow-md: 0 2px 8px rgba(0,0,0,.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.4);

  --color-other-month: #444;
  --color-shichen-xiong: #555;
  --color-shichen-current-bg: #2A1515;
  --color-xiu-tag-bg: #8E2020;
  --color-ji-backup: var(--gray-500);
  --color-weekend: #B05050;
  --color-tab-on: #B05050;
  --color-shichen-ji: #B05050;
  --color-festival: #6B8DB5;
}

/* ===== 全局重置 ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-family);background:var(--bg-page);color:var(--color-text-body);padding-bottom:calc(58px + env(safe-area-inset-bottom));overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden;position:relative;width:100%;height:100%}

/* ═══ style.css lines 245-258 ═══ */
/* 大字模式 - 全局放大（zoom保持布局不变，无偏移） */
body.large-text{zoom:1.3}

/* 滚动到视口才渲染（占卜/案忆书/每日指南） */
.oc{content-visibility:auto;contain-intrinsic-size:200px}
.block-fun{content-visibility:auto;contain-intrinsic-size:120px}
.block-life{content-visibility:auto;contain-intrinsic-size:100px}

/* 今天红圈（无动画） */

/* "休"标签 */
.xiu-tag{position:absolute;top:1px;right:2px;font-size:var(--fs-micro);color:var(--color-text-white);background:var(--color-xiu-tag-bg);border-radius:var(--radius-sm);padding:0 3px;line-height:1.4;font-weight:600;z-index:1}
/* 班标签（调休上班日） */
.ban-tag{position:absolute;top:1px;left:2px;font-size:var(--fs-micro);color:var(--gray-600);background:var(--gray-100);border-radius:var(--radius-sm);padding:0 3px;line-height:1.4;font-weight:600;z-index:1}

/* ═══ style.css lines 748-758 ═══ */
/* ─── 骨架屏（加载占位） ─── */
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.sk{display:none;padding:14px;gap:12px}
.sk.on{display:flex;flex-direction:column}
.sk-b{height:16px;border-radius:var(--radius-md);background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:400px 100%;animation:shimmer 1.2s infinite}
.sk-b.w60{width:60%}.sk-b.w40{width:40%}.sk-b.w80{width:80%}.sk-b.h40{height:40px}.sk-b.h80{height:80px}

/* ─── 空状态 ─── */
.empty-state{text-align:center;padding:20px 10px;color:#ccc;font-size:13px;line-height:1.6}
.empty-state .empty-icon{font-size:32px;margin-bottom:6px}
.empty-state .empty-text{color:var(--gray-400)}

/* ═══ style.css lines 789-805 ═══ */
/* 颜色工具类（替代JS内联颜色赋值） */
.clr-primary-bg{background:var(--color-primary)}
.clr-primary-text{color:var(--color-primary)}
.clr-inactive-bg{background:#f5f5f5}
.clr-white-text{color:#fff}
.clr-text-body{color:#333}
.clr-text-secondary{color:#666}
.clr-text-muted{color:#888}
.clr-border-light{border-top-color:#f5f5f5}

/* 统一点击反馈 */
[data-action]:active, .st-r:active, .ci-b:active{cursor:pointer}
[data-action]:active{opacity:.7}
.st-r:active{background:var(--gray-50)}

/* VIP 徽标 */
.vip-badge{display:inline-block;font-size:9px;background:var(--color-gold);color:#fff;padding:1px 5px;border-radius:var(--radius-sm);margin-left:4px;vertical-align:middle;font-weight:600;line-height:1.4}

/* ═══ style.css lines 826-877 ═══ */
/* ===== 深色模式 ===== */
body.dark{background:var(--bg-page);color:var(--color-text-body);transition:background .3s,color .3s}
body.dark .header{background:var(--color-primary-dark)}
body.dark .dg .c .n{color:var(--color-text-body)}
body.dark .dg .c.td .n{color:var(--color-text-white);background:var(--color-primary)}
body.dark .dc .ib{background:var(--bg-card-elevated)}
body.dark .dc .ib .bx .bv{color:var(--color-text-body)}
body.dark .sg .s .sz{color:var(--color-text-secondary)}
body.dark .mn .mt,body.dark .sh{color:var(--color-text-primary)}
body.dark .tb{border-color:var(--color-border)}
body.dark .tb .ti{color:var(--color-text-secondary)}
body.dark .tb .ti.on{color:var(--color-primary)}
body.dark .fi,body.dark .fs{border-color:var(--color-border);background:var(--bg-input);color:var(--color-text-body)}
body.dark .ar{border-color:var(--color-border)}
body.dark .art-c{background:var(--bg-card-elevated)}
body.dark .hg .h,body.dark .tl .t,body.dark .pill-s,body.dark .fc{border-color:var(--color-border)}
body.dark .pill-s{background:var(--bg-card-elevated);color:var(--color-text-secondary)}
body.dark .pill-s.on{background:var(--color-primary);color:var(--color-text-white)}
body.dark .zj-c .zj-c-l{color:var(--color-text-muted)}
body.dark .mn .mb2{color:var(--bg-card);background:var(--color-primary);border:none}
body.dark .ci-bar .ci-b{color:var(--color-text-light)}
body.dark .ci-bar .ci-d{color:var(--color-primary)}
body.dark .qb{color:var(--color-text-secondary)}
body.dark .dc .dd{color:var(--color-text-body)}
body.dark .ww .wt{color:var(--color-text-body)}
body.dark .ww .wi{color:var(--color-text-muted)}
body.dark .fc .fw .fwt{color:var(--color-text-secondary)}
body.dark .lr .l .lv{color:var(--color-text-body)}
body.dark .sm{color:var(--color-text-muted)}
body.dark .cs .ci .cv{color:var(--color-text-body)}
body.dark .hl-tg .hl-lb{color:var(--color-text-body)}
body.dark .hl-in .hl-txt{color:var(--color-text-secondary)}
body.dark .td-i2{background:var(--bg-input);border-color:var(--color-border);color:var(--color-text-body)}
body.dark .st-l{color:var(--color-text-body)}
body.dark .ai-st,body.dark .mt{color:var(--color-text-body)}
body.dark .art{color:var(--color-text-secondary)}
body.dark .ai-c:active{background:var(--bg-card-elevated)}
body.dark .ma{color:var(--color-primary)}
body.dark .ma:active{background:var(--bg-card-elevated)}
body.dark .mlogo{color:var(--color-primary);opacity:.8}
body.dark .dg .c.sl .n{color:var(--color-primary)}
body.dark .dg .c.sl .n:after{background:var(--color-primary)}

/* ===== 标签尺寸体系 v5.4 ===== */
.pill-s{font-size:12px;padding:4px 8px;border-radius:var(--radius-md);display:inline-block;white-space:nowrap;line-height:1.4}
.pill-m{font-size:13px;padding:6px 10px;border-radius:var(--radius-md);display:inline-block;white-space:nowrap;line-height:1.4}
.pill-l{font-size:13px;padding:8px 18px;border-radius:var(--radius-md);display:inline-block;white-space:nowrap;line-height:1.4}
.btn-solo{font-size:15px;height:46px;min-width:130px;width:auto;display:inline-block;padding:0 20px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-weight:600;background:var(--color-primary);color:var(--color-text-white);line-height:46px;text-align:center;transition:background .12s}
.btn-solo:active{background:var(--color-primary-dark)}
.btn-solo.g2{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary)}
.btn-solo.g2:active{background:var(--color-primary-light)}