/* 温柔浅色：两侧纯白，中间米色卡片。
   语义色一律降饱和（灰玫瑰 / 暖琥珀 / 灰紫 / 雾蓝），避免刺眼的正红正蓝。 */
:root {
  --page:     #ffffff;
  --card:     #f6efe0;              /* 米色主卡 */
  --cell:     #fffdf8;              /* 格子比卡片更浅 → 从米色里浮起来 */
  --panel:    rgba(255, 255, 255, .55);
  --line:     #e7dbc2;
  --hairline: rgba(122, 102, 62, .13);

  --text:     #3f3830;
  --text2:    #6d6458;
  --muted:    #a3987f;

  --accent:   #6f9c7d;              /* 鼠尾草绿：最划算 / 连休天数 */
  --accent-d: #5a8567;
  --today:    #7b8fb5;              /* 雾蓝：今天 */

  --holiday:      #c4645f;          /* 灰玫瑰红 */
  --holiday-bg:   #fbeeeb;
  --holiday-line: #eed3cc;
  --workday:      #b8883a;          /* 暖琥珀 */
  --workday-bg:   #fbf2e0;
  --workday-line: #ecdcba;
  --festival:     #8a7aa3;          /* 灰紫 */
  --festival-bg:  #f4f1f8;
  --festival-line:#e0d9ea;
  --weekend:      #a2957c;          /* 暖灰 */
  --weekend-bg:   #faf6ec;

  --radius: 14px;
  --tab-h: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px 16px calc(var(--tab-h) + var(--safe-bottom) + 20px);
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

.app {
  max-width: 760px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 1px 2px rgba(122, 102, 62, .05);
}

/* ---------- 头部 ---------- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.title { text-align: center; }
.title.wide { flex: 1; text-align: left; }
.title h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .5px; }
.today { margin: 5px 0 0; font-size: 12px; color: var(--muted); }

.nav {
  border: 1px solid var(--line);
  background: var(--cell);
  color: var(--text2);
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.nav:hover { background: #fff; border-color: #dccfae; color: var(--text); }
.nav:active { background: #f3ecdd; }
.nav:disabled { opacity: .35; cursor: default; background: var(--cell); }

/* ---------- 日历网格 ---------- */
.weekdays, .grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.weekdays {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.weekdays span { padding: 6px 0; }
.weekdays .wk { color: var(--weekend); }

.cell {
  position: relative;
  min-height: 76px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px;
  background: var(--cell);
}
.cell.out { opacity: .38; }
.cell .num { font-size: 17px; font-weight: 500; line-height: 1; }
.cell .tag {
  position: absolute;
  left: 7px; right: 7px; bottom: 7px;
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text2);
}
.cell .badge {
  position: absolute;
  top: 6px; right: 7px;
  font-size: 11px;
  font-weight: 700;
}

.cell.weekend { background: var(--weekend-bg); }
.cell.weekend .num { color: var(--weekend); }

.cell.holiday { background: var(--holiday-bg); border-color: var(--holiday-line); }
.cell.holiday .num, .cell.holiday .tag, .cell.holiday .badge { color: var(--holiday); }

.cell.workday { background: var(--workday-bg); border-color: var(--workday-line); }
.cell.workday .num, .cell.workday .tag, .cell.workday .badge { color: var(--workday); }

.cell.has-fest:not(.holiday):not(.workday) {
  background: var(--festival-bg);
  border-color: var(--festival-line);
}
.cell.has-fest:not(.holiday):not(.workday) .tag { color: var(--festival); font-weight: 500; }
.cell.has-fest.major:not(.holiday):not(.workday) .num { color: var(--festival); }

/* 今天：描边 + 缓慢呼吸的边缘辉光 */
.cell.today {
  outline: 2px solid var(--today);
  outline-offset: -2px;
  z-index: 1;                       /* 辉光压在相邻格子之上，不被边框切掉 */
  animation: today-glow 2.8s ease-in-out infinite;
}
.cell.today .num { color: var(--today); font-weight: 700; }

@keyframes today-glow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(123, 143, 181, .13),
                0 0 9px 1px rgba(123, 143, 181, .30);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(123, 143, 181, .20),
                0 0 18px 4px rgba(123, 143, 181, .55);
  }
}

/* 系统开了「减少动态效果」就只留静态辉光 */
@media (prefers-reduced-motion: reduce) {
  .cell.today {
    animation: none;
    box-shadow: 0 0 0 3px rgba(123, 143, 181, .16),
                0 0 12px 2px rgba(123, 143, 181, .40);
  }
}

/* ---------- 面板 ---------- */
.panel {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.panel h2 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .5px;
}
.panel .empty { font-size: 13px; color: var(--muted); margin: 0; }

/* 请假攻略 */
.tips { list-style: none; margin: 0; padding: 0; }
.tips li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  background: #fff;
  border: 1px solid var(--hairline);
  color: var(--text2);
}
.tips li + li { margin-top: 7px; }
.tips li.best { border-color: #c3dbca; background: #f2f8f3; }

.cost {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--workday);
  background: var(--workday-bg);
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.tips li.best .cost { color: #fff; background: var(--accent); }
.gain { flex: 1 1 auto; }
.gain b { color: var(--accent-d); font-size: 15px; font-weight: 700; }
.gain .range { color: var(--muted); font-size: 12px; }
.flag {
  flex: 0 0 auto;
  font-size: 11px;
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
  font-weight: 600;
}

.notice { margin: 12px 0 0; font-size: 12px; color: var(--workday); }

/* ---------- 底部 tab ---------- */
.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 var(--safe-bottom);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 0 0 auto;
  min-width: 104px;
  height: var(--tab-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s, background .15s, transform .1s;
}
.tab:hover { background: #faf6ec; }
.tab:active { transform: scale(.97); }
.tab.active { color: var(--accent-d); background: #f1f7f2; font-weight: 600; }
.tab-ico { font-size: 19px; line-height: 1.1; }

/* ---------- 天气 ---------- */
select.nav { padding: 8px 10px; }
.w-controls { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
#w-locate { white-space: nowrap; }
#w-locate:disabled { opacity: .55; cursor: progress; }

.w-error {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--holiday-bg);
  border: 1px solid var(--holiday-line);
  color: var(--holiday);
  font-size: 13px;
  line-height: 1.6;
}
.w-loading { padding: 40px 0; text-align: center; color: var(--muted); font-size: 13px; }

.now {
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
}
.now-main { display: flex; align-items: center; gap: 18px; }
.now-temp { font-size: 54px; font-weight: 300; line-height: 1; letter-spacing: -2px; }
.now-side { display: flex; flex-direction: column; gap: 4px; }
.now-sky { font-size: 17px; font-weight: 600; }
.now-sub { font-size: 13px; color: var(--muted); }
.now-keypoint { margin: 12px 0 0; font-size: 13px; color: var(--text2); line-height: 1.6; }

.now-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat-k { font-size: 11px; color: var(--muted); }
.stat-v { font-size: 14px; font-weight: 600; color: var(--text); }
.aqi-good { color: var(--accent-d); }
.aqi-fair { color: var(--workday); }
.aqi-poor { color: #c47a45; }
.aqi-bad  { color: var(--holiday); }
.aqi-vbad { color: var(--festival); }

.alerts { list-style: none; margin: 14px 0 0; padding: 0; }
.alert {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 13px; margin-top: 8px;
  border-radius: 10px;
  background: var(--workday-bg);
  border: 1px solid var(--workday-line);
  font-size: 13px; line-height: 1.6;
}
.alert b { color: var(--workday); }
.alert span { color: var(--text2); }

/* 时间轴：图表 + 小时格在同一个横向滚动容器里，天然同步 */
.tl-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.tl { position: relative; }
.chart { display: block; max-width: none; touch-action: pan-x; }

.readout {
  margin-left: 10px;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
}

.c-line { fill: none; stroke: #c48a63; stroke-width: 2; stroke-linejoin: round; }
.c-area { fill: rgba(196, 138, 99, .13); stroke: none; }
.c-dot  { fill: #c48a63; }
.c-precip { fill: rgba(123, 143, 181, .26); }
.c-daysep { stroke: #ded1b6; stroke-width: 1; stroke-dasharray: 3 3; }
.c-temp { fill: #a06a44; font-size: 11px; font-weight: 600; text-anchor: middle; }
.c-guide { stroke: var(--today); stroke-width: 1; stroke-dasharray: 2 3; opacity: .75; }
.c-marker { fill: #fff; stroke: #c48a63; stroke-width: 2.5; }

.hours { display: flex; align-items: stretch; gap: 4px; padding-top: 2px; }
.hour {
  flex: 0 0 56px;
  width: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 3px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #fff;
  transition: background .12s, border-color .12s, transform .12s;
}
.hour.day-start { border-left: 1px dashed #d9caa8; }
.hour.active {
  background: #eef2f8;
  border-color: var(--today);
  transform: translateY(-2px);
}
.h-day  { font-size: 10px; font-weight: 600; color: var(--muted); height: 13px; line-height: 13px; }
.h-time { font-size: 11px; color: var(--muted); }
.h-ico  { font-size: 16px; line-height: 1; }
.h-temp { font-size: 14px; font-weight: 600; }
.h-prob { font-size: 10px; color: #c7bda6; }
.h-prob.on { color: var(--today); font-weight: 600; }

@media (max-width: 560px) {
  body { padding: 8px 10px calc(var(--tab-h) + var(--safe-bottom) + 16px); }
  .app { padding: 14px; }
  .cell { min-height: 60px; padding: 5px; }
  .cell .num { font-size: 15px; }
  .cell .tag { font-size: 9px; left: 4px; right: 4px; bottom: 4px; }
  .cell .badge { font-size: 10px; top: 4px; right: 5px; }
  .now-temp { font-size: 44px; }
  .readout { display: block; margin: 4px 0 0; }
  .tab { flex: 1 1 auto; min-width: 0; }
  .tips li { flex-wrap: wrap; gap: 6px; }
}