/* ============================================================================
   带班表 v2 · 样式（珊瑚橙品牌 hero + 三态日期框 + 统计卡 + 总览卡）
   ----------------------------------------------------------------------------
   设计：珊瑚橙品牌 hero + 三态日期框（带班深琥珀/休息翠绿/站内调度中性灰）
        + 组长视图 4 张统计卡 + 管理员总览卡（7 天迷你摘要）
   布局：移动端 .lead-page 加 12/14px 内边距；周切换始终双列左右排列；
         内容区底部由 .app-content 留白避开浮动 tabbar
   ============================================================================ */

/* ==================== 1. 页面布局 ==================== */
.lead-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 14px 0;        /* 移动端：顶部、左右留白；底部由 .app-content 留白避开 tabbar */
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .lead-page { gap: 18px; padding: 0; }   /* 平板起由 .app-content 控制留白 */
}
@media (min-width: 1024px) {
  .lead-page { gap: 20px; max-width: 1120px; margin: 0 auto; }
}

/* ==================== 2. Hero 头部（珊瑚橙渐变） ==================== */
.lead-hero { margin-bottom: 0; }

.vac-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--brand, #f97316);
  border-radius: 24px;
  padding: 20px 20px;
  box-shadow: 0 16px 36px -16px rgba(249, 115, 22, 0.5);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.vac-hero::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: none;
  pointer-events: none;
}

/* 标签行 */
.vac-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* 部门/组只读胶囊 */
.vac-dept-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  box-sizing: border-box;
  white-space: nowrap;
}
.vac-dept-tag b { color: #fde68a; font-weight: 800; }
.vac-dept-tag .dept-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}

/* 管理员下拉胶囊（部门/小组视图） */
.vac-dept-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.30);
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s, transform 0.18s;
}
.vac-dept-select:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.50);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.vac-dept-select:active { transform: scale(0.98); }
.vac-dept-select:focus-within {
  border-color: rgba(255, 255, 255, 0.70);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20);
}
.vac-dept-select .dept-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  white-space: nowrap;
}
.vac-dept-select .dept-label svg { width: 13px; height: 13px; flex-shrink: 0; }
.dept-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #fff;
}
/* 自定义下拉箭头 */
.dept-picker-wrap::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  opacity: 0.75;
}
.vac-dept-select .dept-picker-wrap select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: 30px !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #fff !important;
  padding: 0 16px 0 2px !important;
  max-width: 150px !important;
  min-width: 0 !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
.vac-dept-select .dept-picker-wrap select:focus,
.vac-dept-select .dept-picker-wrap select:hover,
.vac-dept-select .dept-picker-wrap select:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.vac-dept-select .dept-picker-wrap select option {
  color: #0f172a;
  background: #fff;
}

/* ==================== 3. 周切换按钮 ==================== */
.vac-week-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ws-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 14px;
  cursor: pointer;
  color: var(--text, #0f172a);
  box-shadow: var(--elev-1, 0 2px 6px rgba(15, 23, 42, 0.04));
  transition: all 0.2s;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.ws-btn:hover {
  transform: translateY(-1px);
  border-color: #fdba74;
  box-shadow: 0 6px 14px -8px rgba(249, 115, 22, 0.3);
}
.ws-btn .ws-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-600, #475569);
  flex-shrink: 0;
}
.ws-btn .ws-ico svg { width: 16px; height: 16px; }
.ws-btn .ws-ico .iconfont {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
}
.ws-btn .ws-ico .iconfont.icon-bxs-hot { font-size: 19px; }
.ws-btn .ws-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ws-btn .ws-txt em {
  font-size: 10px;
  font-style: normal;
  color: var(--slate-400, #94a3b8);
  font-weight: 700;
}
.ws-btn .ws-txt b {
  font-size: 13px;
  color: var(--slate-900, #0f172a);
  font-weight: 800;
}
.ws-btn.active {
  background: var(--brand, #f97316);
  border-color: #f97316;
  box-shadow: 0 8px 20px -10px rgba(249, 115, 22, 0.5);
  color: #fff;
}
.ws-btn.active .ws-ico {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.ws-btn.active .ws-txt em { color: rgba(255, 255, 255, 0.8); }
.ws-btn.active .ws-txt b { color: #fff; }

/* ==================== 4. 日历容器 + 日期框基础结构 ==================== */
.vac-calendar {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 4px 20px -12px rgba(15, 23, 42, 0.1);
}

/* 日期列表：纵向排列，每行一天全宽卡片 */
.date-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 日期框（列表式横向卡片） */
.date-box {
  border-radius: 14px;
  background: var(--slate-50, #f8fafc);
  border: 1.5px solid #eef2f7;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease;
  padding: 10px 12px 10px 12px;
  padding-right: 78px;
  box-sizing: border-box;
  gap: 12px;
  min-height: 64px;
  width: 100%;
  overflow: hidden;
}
/* 今天高亮：左侧主题色竖条 + 强化阴影（不覆盖三态背景/边框） */
.date-box.today {
  box-shadow: 0 8px 22px -10px rgba(249, 115, 22, 0.35), 0 4px 14px -8px rgba(15, 23, 42, 0.08) !important;
}
.date-box.today::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--brand, #f97316);
  z-index: 3;
}

/* 已过去的天：淡化（opacity + 去饱和）让带班人员聚焦未来行程 */
.date-box.past {
  opacity: 0.5;
  filter: saturate(0.55);
}

/* 左侧：日期数字 + 星期 */
.date-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  width: 44px;
  gap: 2px;
  border-right: 1.5px dashed rgba(148, 163, 184, 0.35);
  padding-right: 4px;
}
.date-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--slate-900, #0f172a);
  letter-spacing: -0.5px;
  text-align: center;
}
/* "今天"/"明天" 文字替代数字时缩小字号适配两字宽度 */
.date-num.is-label {
  font-size: 15px;
  letter-spacing: 0;
}
.date-weekday {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--slate-500, #64748b);
  letter-spacing: 0.2px;
  line-height: 1;
}
.date-weekday.weekend { color: #fb7185; }

/* 中间：状态文字 / 标签 */
.date-lunar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--slate-500, #64748b);
  font-weight: 600;
  line-height: 1.35;
  padding: 0 4px;
  box-sizing: border-box;
}

/* 右侧状态徽章（角标贴右上角） */
.date-status-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 12px 5px 14px;
  border-radius: 0 0 0 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  line-height: 1.3;
  border: none;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.18);
  z-index: 2;
}

/* 底部图例已移除（带班表本身三态色块即直观说明，无需文字图例） */

/* ==================== 5. 三态：带班(深琥珀) / 休息(翠绿) / 站内调度(中性灰) ==================== */

/* —— 带班：深琥珀渐变 —— */
.date-box.lead-cover {
  background: #fef3c7 !important;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 0 4px 14px -8px rgba(245, 158, 11, 0.3) !important;
}
.date-box.lead-cover .date-num { color: #92400e; }
.date-box.lead-cover .date-lunar { color: #b45309; font-weight: 700; }
.date-box.lead-cover .date-status-badge.lead-cover {
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.5);
}
.tag-lead-cover {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.tag-lead-cover::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #f59e0b;
}

/* —— 休息：翠绿渐变 —— */
.date-box.lead-rest {
  background: #d1fae5 !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 4px 14px -8px rgba(16, 185, 129, 0.3) !important;
}
.date-box.lead-rest .date-num { color: #065f46; }
.date-box.lead-rest .date-lunar { color: #047857; font-weight: 700; }
.date-box.lead-rest .date-status-badge.lead-rest {
  background: #10b981;
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.5);
}
.tag-lead-rest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
  font-size: 11px;
  font-weight: 700;
}
.tag-lead-rest::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10b981;
}

/* —— 站内调度：中性灰 —— */
.date-box.lead-normal {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px -8px rgba(148, 163, 184, 0.25) !important;
}
.date-box.lead-normal .date-num { color: #475569; }
.date-box.lead-normal .date-lunar { color: #64748b; font-weight: 600; }
.date-box.lead-normal .date-status-badge.lead-normal {
  background: #94a3b8;
  color: #fff;
}
.tag-lead-normal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}
.tag-lead-normal::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #94a3b8;
}

/* —— 轮休管控（admin_locks 命中）：扁平珊瑚橙，盖过三态业务色 —— */
.date-box.lead-locked {
  background: #fff7ed !important;
  border: 1.5px solid #f97316 !important;
}
.date-box.lead-locked::after {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #f97316;
  z-index: 4;
}
.date-box.lead-locked .date-num { color: #9a3412; }
.date-box.lead-locked .date-lunar { color: #c2410c; }
.date-box.lead-locked .date-status-badge.lead-locked {
  background: #ea580c;
  color: #fff;
}
.tag-lead-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #ffedd5;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
}

/* 带班表 date-box 纯展示，去掉点击态 */
#leadDateGrid .date-box { cursor: default; }
#leadDateGrid .date-box:active { transform: none; }

/* ==================== 6. 管理员总览卡 ==================== */
.lead-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lead-overview-card {
  background: var(--card, #fff);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 20px -12px rgba(15, 23, 42, 0.1);
  animation: leadCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lov-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lov-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--slate-900, #0f172a);
}
.lov-leader {
  font-size: 12px;
  color: var(--slate-500, #64748b);
  font-weight: 600;
}
.lov-leader b { color: #ea580c; }
.lov-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.lov-day {
  padding: 6px 2px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s;
  font-size: 10px;
}
.lov-day:hover { transform: translateY(-2px); }
.lov-day .lov-d { font-size: 13px; font-weight: 800; }
.lov-day .lov-s { font-size: 9px; font-weight: 700; margin-top: 2px; }
.lov-day.lead-cover { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.lov-day.lead-rest   { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.lov-day.lead-normal { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.lov-day.lead-locked { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; font-weight: 800; }
.lov-day[data-weekend="1"] .lov-d { color: #fb7185; }

/* 总览卡内紧凑统计条 */
.lov-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.10);
}
.lov-st {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.045);
  font-size: 10px;
  line-height: 1;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.lov-st:hover { transform: translateY(-1px); }
.lov-st i {
  font-style: normal;
  font-weight: 600;
  color: var(--slate-400, #94a3b8);
  font-size: 9.5px;
}
.lov-st b {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: -0.3px;
}
/* 四色变体（左侧色点 + 主色文字） */
.lov-st.rate    b { color: #b45309; }
.lov-st.rate::before    { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
.lov-st.rotated b { color: #047857; }
.lov-st.rotated::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10b981; flex-shrink: 0; }
.lov-st.notrot  b { color: #475569; }
.lov-st.notrot::before  { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; flex-shrink: 0; }
.lov-st.zero    b { color: #be123c; }
.lov-st.zero::before    { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fb7185; flex-shrink: 0; }

/* ==================== 7. 组长视图统计卡（带班率/轮休人数/未休人数/月零休） ==================== */
.lead-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  position: relative;
  z-index: 1;
}
@media (min-width: 640px) {
  .lead-stats { grid-template-columns: repeat(4, 1fr); }
}
.lead-stat-card {
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;
  animation: leadCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lead-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.22);
}
.lead-stat-card .ls-ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.lead-stat-card svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.1; fill: none; }
.lead-stat-card .ls-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.lead-stat-card .ls-num {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 11px;
  font-weight: 800;
  color: var(--slate-900, #0f172a);
  line-height: 1;
}
.lead-stat-card .ls-num b {
  font-size: 19px;
  color: var(--ls-num, #0f172a);
  letter-spacing: -0.5px;
}
.lead-stat-card .ls-num em {
  font-style: normal;
  font-weight: 600;
  color: var(--slate-400, #94a3b8);
  font-size: 10px;
}
.lead-stat-card .ls-label {
  font-size: 9.5px;
  color: var(--slate-500, #64748b);
  font-weight: 700;
  line-height: 1.3;
}
.lead-stat-card .ls-sub {
  display: block;
  font-size: 8.5px;
  color: var(--slate-400, #94a3b8);
  font-weight: 600;
  margin-top: 1px;
}

/* 四色变体：带班率(琥珀) / 轮休(翠绿) / 未休(石板灰) / 月零休(玫红) */
.lead-stat-card.rate    { --ls-num: #b45309; }
.lead-stat-card.rate .ls-ico    { background: #f59e0b; }
.lead-stat-card.rotated { --ls-num: #047857; }
.lead-stat-card.rotated .ls-ico { background: #10b981; }
.lead-stat-card.notrot  { --ls-num: #475569; }
.lead-stat-card.notrot .ls-ico  { background: #94a3b8; }
.lead-stat-card.zero   { --ls-num: #be123c; }
.lead-stat-card.zero .ls-ico   { background: #fb7185; }

/* 窄屏：统计卡更紧凑 */
@media (max-width: 380px) {
  .lead-stat-card { padding: 8px 8px; gap: 6px; }
  .lead-stat-card .ls-ico { width: 28px; height: 28px; border-radius: 9px; }
  .lead-stat-card .ls-num b { font-size: 17px; }
  .lead-stat-card .ls-label { font-size: 9px; }
  .lov-st { padding: 3px 6px; font-size: 9.5px; }
  .lov-st b { font-size: 10.5px; }
  .lov-st i { font-size: 9px; }
}

/* ==================== 8. 空状态 ==================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  color: var(--slate-400, #94a3b8);
}
.empty-state svg { width: 64px; height: 64px; opacity: 0.4; margin-bottom: 14px; }
.empty-state p { font-size: 13px; margin: 0; }

/* ==================== 9. 入场动画 ==================== */
@keyframes leadCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==================== 10. 响应式（日期框基础元素） ==================== */
@media (max-width: 1024px) {
  .vac-week-switch { gap: 14px; }
  .ws-btn { padding: 14px 16px; border-radius: 16px; }
  .ws-btn .ws-ico { width: 40px; height: 40px; border-radius: 12px; }
  .ws-btn .ws-ico svg { width: 18px; height: 18px; }
  .ws-btn .ws-ico .iconfont { font-size: 20px; }
  .ws-btn .ws-ico .iconfont.icon-bxs-hot { font-size: 21px; }
  .ws-btn .ws-txt b { font-size: 15px; }
  .ws-btn .ws-txt em { font-size: 11px; }
  .vac-calendar { padding: 20px; border-radius: 20px; }
  .date-grid { gap: 10px; }
  .date-box { border-radius: 16px; padding: 14px 18px; min-height: 72px; padding-right: 88px; }
  .date-left { min-width: 52px; width: 52px; }
  .date-num { font-size: 26px; }
  .date-num.is-label { font-size: 17px; }
  .date-weekday { font-size: 12px; }
  .date-lunar { font-size: 12px; gap: 6px; }
  .date-status-badge { font-size: 11.5px; padding: 6px 14px 6px 16px; }
}

@media (max-width: 768px) {
  .vac-hero { padding: 16px 16px; gap: 12px; border-radius: 20px; }
}

@media (max-width: 480px) {
  /* 周切换保持双列左右布局（本周/下周并排），不退化为单列上下 */
  .vac-hero { padding: 14px 14px; border-radius: 18px; }
  .vac-calendar { padding: 12px; border-radius: 16px; }
}

@media (max-width: 380px) {
  .date-grid { gap: 6px; }
  .date-box { border-radius: 12px; padding: 8px 10px; min-height: 58px; gap: 9px; padding-right: 70px; }
  .date-left { min-width: 38px; width: 38px; }
  .date-num { font-size: 18px; }
  .date-num.is-label { font-size: 12px; }
  .date-weekday { font-size: 9.5px; }
  .date-lunar { font-size: 10.5px; gap: 4px; }
  .date-status-badge { font-size: 9.5px; padding: 3px 9px 3px 11px; }
  .ws-btn .ws-ico .iconfont { font-size: 16px; }
  .ws-btn .ws-ico .iconfont.icon-bxs-hot { font-size: 17px; }
}

@media (max-width: 340px) {
  .date-grid { gap: 5px; }
  .date-box { padding: 7px 9px; min-height: 54px; gap: 8px; border-radius: 11px; padding-right: 64px; }
  .date-left { min-width: 34px; width: 34px; padding-right: 3px; }
  .date-num { font-size: 16px; }
  .date-num.is-label { font-size: 11px; }
  .date-status-badge { top: 0; right: 0; font-size: 8.5px; padding: 2px 7px; }
  .date-weekday { font-size: 8.5px; }
  .date-lunar { font-size: 9.5px; gap: 3px; }
  .ws-btn .ws-ico .iconfont { font-size: 15px; }
  .ws-btn .ws-ico .iconfont.icon-bxs-hot { font-size: 16px; }
}