:root{
 /*背景图片背景色*/
  --bg-overlay-alpha: 0.89;
  --bg:#071427;
  --bg-img-url: none; /* ✅ 新增：默认不加载图片时也不会异常 */
  --panel:rgba(255,255,255,0.04);
  --card:rgba(255,255,255,0.02);
  --text:#EAF6FF;
  --muted:rgba(234, 255, 255, 0.75);
  --accent:#7EF9FF;
  --btn-bg:rgba(255,255,255,0.06);
  --btn-border:rgba(255,255,255,0.10);
  --btn-hover:rgba(255,255,255,0.12);
  --sat-bg: rgba(94,203,255,0.18);
  --sun-bg: rgba(255,123,123,0.18);
  --today-bg: rgba(255, 223, 128, 0.28); /* 今天底色 */
  --today-outline: rgba(255, 210, 80, 0.95); /* 今天描边 */
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:"Microsoft YaHei","微软雅黑";
  background-color: var(--bg);   /* ✅ 新增：防止刷新闪白 */
  background:
    linear-gradient(rgba(7,20,39,var(--bg-overlay-alpha)), rgba(7,31,58,var(--bg-overlay-alpha))),
    url("./bg.webp"),
    linear-gradient(135deg,var(--bg),#071f3a);
  color:var(--text);
  -webkit-font-smoothing:antialiased
}

.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.container{width:1100px;max-width:96vw;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border-radius:14px;padding:18px;display:flex;gap:18px;position:relative;box-shadow:0 8px 40px rgba(3,10,20,0.6)}
.left{flex:1;display:flex;flex-direction:column;gap:12px;min-height:520px}
.left-top{background:var(--card);border-radius:10px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px;border:1px solid rgba(255,255,255,0.02)}
.left-bottom{background:var(--card);border-radius:10px;padding:16px;min-height:320px;border:1px solid rgba(255,255,255,0.02);display:flex;flex-direction:column}
/* left-top countdown */
.left .title{font-size:1.05rem;margin:0;color:var(--muted);height:22px}
.left .count{font-weight:800;font-size:5rem;color:var(--accent);margin:0;line-height:1;min-height:1em;transition: font-size .18s ease}
.left .sub{font-size:1rem;margin-top:6px;color:var(--muted)}
.left .lunar{margin-top:6px;font-size:0.95rem;color:var(--muted)}
/* calendar styles */
.cal-controls{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.cal-controls .btn{background:transparent;border:1px solid rgba(255,255,255,0.12);padding:6px 10px;border-radius:8px;color:var(--text);cursor:pointer;transition: background .16s ease, transform .16s ease}
.cal-controls .btn:hover{background:var(--btn-hover);transform:translateY(-2px)}
.cal-month{font-weight:700;margin:0 4px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-day{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));padding:6px 8px;border-radius:10px;min-height:64px;position:relative;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, outline-color .18s ease}
.cal-day .solar{font-weight:700;white-space:nowrap}
.cal-day .lunar{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:12px;color:var(--text-muted);white-space:nowrap}
.cal-day .term{position:absolute;right:6px;top:6px;color:var(--accent);font-size:12px;white-space:nowrap}
.cal-day .holiday{position:absolute;left:50%;top:26px;transform:translateX(-50%);font-size:12px;color:var(--accent);white-space:nowrap;max-width:90%;text-align:center}
.cal-day:hover{transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08)}
.cal-day.sat{background:var(--sat-bg)}
.cal-day.sun{background:var(--sun-bg)}
/* 今天：更显眼但不刺眼的底色 + 描边 + 轻呼吸 */
@keyframes todayBreath{0%{outline-width:2px;outline-color:var(--today-outline)}50%{outline-width:3px;outline-color:rgba(255,210,80,.65)}100%{outline-width:2px;outline-color:var(--today-outline)}}
.cal-day.today{background: linear-gradient(180deg, var(--today-bg), rgba(255,255,255,0.08)); outline: 2px solid var(--today-outline); outline-offset: 0; border: 1px solid rgba(255,255,255,.25); position: relative; z-index: 2; animation: todayBreath 3.2s ease-in-out infinite}
/* 闪烁提示：短促 1.2s，2 轮，视觉焦点引导 */
@keyframes todayFlash{0%{box-shadow:0 0 0 0 rgba(255,210,80,.85)}60%{box-shadow:0 0 0 14px rgba(255,210,80,0)}100%{box-shadow:0 0 0 0 rgba(255,210,80,0)}}
.cal-day.today.flash{animation: todayFlash 1.2s ease-out 0s 2, todayBreath 3.2s ease-in-out 2.4s infinite}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:6px; padding: 6px 4px; border-radius: 8px; background: linear-gradient(180deg, rgba(126, 249, 255, 0.10), rgba(126, 249, 255, 0.03)); box-shadow: inset 0 0 0 1px rgba(126, 249, 255, 0.12)}
.cal-weekdays div{text-align:center;color:var(--muted);font-size:0.95rem; font-weight:600; color: rgba(234, 246, 255, 0.95); letter-spacing:.08em}
.cal-weekdays div:nth-child(1){ color: rgba(255,150,150,.95)}
.cal-weekdays div:nth-child(7){ color: rgba(160,210,255,.95)}
/* right */
.right{width:420px;display:flex;flex-direction:column;gap:12px}
.panel{background:var(--panel);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.toolbar{display:flex;gap:8px;align-items:center;overflow:hidden}
.btn{ background:var(--btn-bg); border:1px solid var(--btn-border); padding:8px 12px; border-radius:8px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--text); transition:transform .12s ease, background .12s ease; white-space:nowrap}
.btn:hover{background:var(--btn-hover);transform:translateY(-2px)}
.btn .icon{font-size:16px;line-height:1;color:var(--text)}
.select{ font-family:"Microsoft YaHei","微软雅黑"; color:var(--text); background: var(--bg); border:1px solid rgba(255,255,255,0.06); padding:6px 8px; border-radius:6px; appearance:none; width: 60px}
.select option { background: var(--bg); color: var(--text)}
.list{max-height:420px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:6px}
.item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,0.02);cursor:pointer;background:linear-gradient(180deg, rgba(255,255,255,0.003), transparent)}
.item strong{font-size:1rem}
.item.active{ box-shadow: inset 0 0 0 1px rgba(126,249,255,0.12); border:1px solid rgba(126,249,255,0.12); background: linear-gradient(180deg, rgba(126,249,255,0.02), rgba(126,249,255,0.01)) }
.item .meta{font-size:0.86rem;color:var(--muted)}
.small{font-size:0.9rem;color:var(--muted)}
.footer{font-size:0.82rem;color:rgba(255,255,255,0.6);text-align:center;padding-top:6px}
/* responsive */
@media (max-width:1000px){ .container{flex-direction:column;padding:12px} .right{width:100%} .left-top{min-height:140px} .left-bottom{min-height:220px} }
#topWrapper {position: absolute; top: 30px; left: 0; width: 100%}
/* 面板立体 */
#calendarCard { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.08) }
/* === Toolbar single row without visible scrollbar (typography preserved) === */
:root{ --toolbar-gap: 8px; --btn-pad-x: 12px; }
/* No scrollbar visible */
.panel.toolbar{ overflow: hidden; }
.toolbar{ flex-wrap: nowrap !important; gap: var(--toolbar-gap); justify-content: flex-start; }
.toolbar .btn{ flex: 0 0 auto; white-space: nowrap; padding-left: var(--btn-pad-x); padding-right: var(--btn-pad-x); }
.btn{ min-height: 44px; }
/* Tighten only horizontal paddings and inter-button gap on narrow screens so three buttons fit in one row without scrolling; do NOT change fonts/letter-spacing */
@media (max-width: 480px){
  :root{ --toolbar-gap: 6px; --btn-pad-x: 10px; }
}
@media (max-width: 412px){ /* common Android width */
  :root{ --toolbar-gap: 6px; --btn-pad-x: 8px; }
}
@media (max-width: 390px){ /* iPhone 12/13/14 widths */
  :root{ --toolbar-gap: 6px; --btn-pad-x: 7px; }
}
@media (max-width: 375px){ /* iPhone 8/SE(2/3) */
  :root{ --toolbar-gap: 5px; --btn-pad-x: 6px; }
}
@media (max-width: 360px){ /* many Android minis */
  :root{ --toolbar-gap: 4px; --btn-pad-x: 6px; }
}
/* Keep other mobile layout fixes (no typography changes) */
@media (max-width: 640px){
  #topWrapper{ position: static; padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
  .app{ align-items: stretch; padding: 12px; }
}
@media (max-width: 1000px){
  .container{ flex-direction: column; padding: 12px; }
  .right{ width: 100%; }
}
/* Calendar spacing only */
@media (max-width: 768px){ .cal-grid{ gap: 6px;} .cal-day{ min-height:58px; padding:6px; } }
@media (max-width: 480px){ .cal-grid{ gap: 4px;} .cal-day{ min-height:52px; padding:4px; } }
@media (max-width: 360px){ .cal-day{ min-height:48px; } }
@media (prefers-reduced-motion: reduce){
  .cal-day.today, .cal-day.today.flash{ animation: none !important; }
  .btn, .item, .cal-day{ transition: none !important; }
}

    /* ===== 节假日状态提示 ===== */
    .holiday-indicator{
      margin-left:auto;
      font-size:12px;
      opacity:.92;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.06);
      user-select:none;
      white-space:nowrap;
    }

    /* ===== Toast 提示 ===== */
    .toast{
      position:fixed;
      left:50%;
      top:90px;
      transform:translateX(-50%);
      padding:10px 14px;
      border-radius:14px;
      background: rgba(99, 9, 102, 0.952);
      color:#fff;
      font-size:16px;
      z-index:9999;
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 10px 25px rgba(0,0,0,.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity:0;
      pointer-events:none;
      transition: opacity .25s ease, transform .25s ease;
    }
    .toast.show{ opacity:1; transform:translateX(-50%) translateY(6px); }

    /* ====== 休/班（放假/调休）顶层标记（格子最上层中间） ====== */
      /* ====== 休/班（放假/调休）标记：与节气同风格（右上角小字） ====== */
      /* ====== 休/班（放假/调休）标记：上层中间位置（避免和节气重叠） ====== */
    .day-status{
      position:absolute;
      left:50%;
      top:8px;
      transform:translateX(-50%);
      min-width:0;
      height:auto;
      padding:0;
      display:block;
      border-radius:0;
      font-weight:800;
      font-size:11px;
      letter-spacing:0;
      z-index:8; /* 比 term 更高 */
      box-shadow:none;
      border:none;
      background: transparent;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      user-select:none;
      pointer-events:none;
      white-space:nowrap;
    }
    .day-status.rest{ color: rgba(255,77,79,.95); }
    .day-status.work{ color: rgba(24,144,255,.95); }