/* ───────── 自定义日期选择器 ───────── */
.dp-wrap{position:relative;display:block}
.dp-wrap input{padding-right:36px}
.dp-trigger{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;
  color:#a99ed0;cursor:pointer;transition:.15s;padding:0;
}
.dp-trigger:hover{background:rgba(123,77,255,.22);border-color:rgba(150,120,255,.45);color:#e0d4ff}

/* ── 层级：必须高于 modal-root（200）──
   原来 z-index:180，而排盘弹窗 .modal-root 是 200。
   日期框就在排盘弹窗里面，日历面板被弹窗自己盖住了 ——
   用户点日期「选择不了」，实际是面板弹了但看不见（elementFromPoint 打到 .modal-scroll）。
   提到 300 让它压在弹窗之上。 */
.dp-root{position:fixed;inset:0;z-index:300;display:none}
.dp-root.open{display:block}
.dp-mask{position:absolute;inset:0;background:rgba(4,2,12,.5);backdrop-filter:blur(3px)}
.dp-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(340px,calc(100vw - 32px));
  /* 面板本体也必须实色：.98/.99 仍是带 alpha，
     加上弹窗后面还有星空背景，会透出底色让数字发虚。
     改成纯 hex 实色。 */
  background:linear-gradient(165deg,#1c113a,#100924);
  background-color:#180d34;
  border:1px solid rgba(150,120,255,.42);
  border-radius:16px;padding:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.85),0 0 0 1px rgba(123,77,255,.14) inset;
}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dp-title{font-size:15px;font-weight:700;color:#f0e9ff;font-variant-numeric:tabular-nums}
.dp-nav{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:rgba(123,77,255,.14);border:1px solid rgba(150,120,255,.28);
  color:#c9b6ff;font-size:17px;line-height:1;cursor:pointer;transition:.15s;padding:0;
}
.dp-nav:hover{background:rgba(123,77,255,.32);color:#fff}
.dp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.dp-week span{text-align:center;font-size:11px;color:#8b81ad;font-weight:600;padding:4px 0}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-blank{height:34px}
.dp-day{
  height:34px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:#d8ccff;font-size:13px;
  font-family:inherit;font-variant-numeric:tabular-nums;
  cursor:pointer;transition:.13s;padding:0;
}
.dp-day:hover{background:rgba(123,77,255,.28);border-color:rgba(169,125,255,.55);color:#fff}
.dp-day.wk{color:#9b90bf}
.dp-day.today{border-color:rgba(94,234,212,.5);color:#5eead4;font-weight:700}
.dp-day.sel{
  background:linear-gradient(135deg,#7b4dff,#a855f7);color:#fff;font-weight:700;
  box-shadow:0 4px 14px rgba(123,77,255,.5);
}
.dp-foot{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(150,120,255,.18)}
.dp-quick{
  flex:1;padding:7px 0;border-radius:9px;font-size:12px;
  background:rgba(123,77,255,.13);border:1px solid rgba(150,120,255,.26);
  color:#c9b6ff;cursor:pointer;font-family:inherit;transition:.15s;
}
.dp-quick:hover{background:rgba(123,77,255,.3);color:#fff}
.dp-ok{
  flex:1.2;padding:7px 0;border-radius:9px;font-size:12px;font-weight:700;
  background:linear-gradient(135deg,#7b4dff,#a855f7);border:0;color:#fff;
  cursor:pointer;font-family:inherit;
}
body.dp-open{overflow:hidden}
@media (max-width:520px){
  .dp-panel{width:calc(100vw - 24px);padding:13px}
  .dp-day,.dp-blank{height:38px}
}


/* ═══════════════════════════════════════════════════════
   年 / 月 快速选择器（解决「日历选择很不方便」）
   ───────────────────────────────────────────────────────
   原来只有 ‹ › 逐月翻，1990 → 2024 要点 400 多次。
   现在点标题的年/月，直接弹网格一次跳到位。
   ═══════════════════════════════════════════════════════ */
.dp-title{
  display:flex;align-items:center;justify-content:center;gap:6px;flex:1;
}
.dp-yearbtn,.dp-monthbtn{
  display:inline-flex;align-items:baseline;gap:2px;
  padding:5px 11px;border-radius:9px;
  background:rgba(123,77,255,.14);
  border:1px solid rgba(150,120,255,.32);
  color:#f0e9ff;font-family:inherit;font-size:15px;font-weight:800;
  cursor:pointer;transition:.15s;
}
.dp-yearbtn:hover,.dp-monthbtn:hover{
  background:rgba(123,77,255,.3);
  border-color:rgba(169,125,255,.6);
  transform:translateY(-1px);
}
.dp-yearbtn i,.dp-monthbtn i{
  font-style:normal;font-size:11px;font-weight:600;
  color:#a99ed0;
}

/* 选择面板：盖在日历主体上 */
.dp-picker{
  position:absolute;left:50%;top:56px;transform:translateX(-50%);
  width:calc(100% - 28px);
  /* ── 必须完全不透明 ──
     原来写 rgba(30,18,62,.99)，看着接近不透明，
     但 .99 仍是带 alpha 的，且日历格子的文字/边框会透过来，
     用户看到「数字都堆在一起」（底下 1~30 的日历数字 + 上面 12 个年份）。
     现在用实色 + 双层保险：
       · background 用 #hex 纯色（无 alpha）
       · 再加一层不透明兜底 background-color
       · isolation 建立独立层叠上下文，防止下层元素穿插 */
  /* 双重实色：渐变两端都用 hex，background-color 再兜一层，
     保证任何像素都有实底，不会让下层透上来 */
  background-color:#1a0f38;
  background-image:linear-gradient(165deg,#1e123e,#100924);
  isolation:isolate;
  border:1px solid rgba(150,120,255,.5);
  border-radius:12px;padding:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.85), 0 0 0 1px rgba(169,125,255,.14) inset;
  z-index:20;
}
/* 面板整体压住下层：插一个不透明背板，连 1px 缝隙都不透 */
.dp-picker::before{
  content:"";
  position:absolute;
  inset:-2px;                       /* 扩到边框外侧，连 1px 边缝都不留 */
  border-radius:14px;
  background:#170c30;               /* 比面板略深一档，形成实心底板 */
  z-index:-1;
  box-shadow:0 0 0 2px #170c30;     /* 再向外兜 2px 实色，防亚像素漏光 */
}
.dp-picker[hidden]{display:none;}
.dp-picker-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;font-size:12.5px;font-weight:700;color:#c9b6ff;
}
.dp-picker-x{
  width:24px;height:24px;border-radius:7px;
  background:rgba(123,77,255,.16);border:1px solid rgba(150,120,255,.28);
  color:#c9b6ff;font-size:15px;line-height:1;cursor:pointer;padding:0;
}
.dp-picker-x:hover{background:rgba(255,90,90,.28);color:#fff;}

.dp-pgrid{display:grid;gap:5px;}
.dp-pgrid-3{grid-template-columns:repeat(3,1fr);}
.dp-pgrid-4{grid-template-columns:repeat(4,1fr);}
.dp-pcell{
  padding:9px 0;border-radius:8px;
  /* 底色改成实色不透明：原来 .10 太透，面板底下日历数字会透上来 */
  background:#241548;
  border:1px solid rgba(150,120,255,.28);
  color:#e2d8ff;font-family:inherit;font-size:13px;font-weight:800;
  cursor:pointer;transition:.13s;
  font-variant-numeric:tabular-nums;
}
.dp-pcell:hover{
  background:#33205f;
  border-color:rgba(169,125,255,.75);
  color:#fff;
}
.dp-pcell.on{
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(123,77,255,.5);
}
.dp-pnav-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:9px;font-size:11.5px;color:#9b90bf;
}
.dp-pnav{
  padding:5px 10px;border-radius:7px;
  background:#26174c;border:1px solid rgba(150,120,255,.32);
  color:#cfbfff;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;
}
.dp-pnav:hover{background:rgba(123,77,255,.3);color:#fff;}


/* ── 年/月面板展开时：日历主体压暗 ──
   即使面板已经不透明，边缘和缝隙处仍可能透出下层数字，
   用户反馈「数字都堆在一起」。这里再加一层遮罩彻底隔断。 */
/* ── 面板展开时：直接把日历主体隐藏 ──
   压暗（opacity .18）还会留残影，视觉复核仍能看到「鬼影数字」。
   这里改成 display:none —— 彻底不渲染，物理上不可能透光。
   面板关掉时恢复，因为 closePicker 会移除 picker-open 类。 */
.dp-root.picker-open .dp-week,
.dp-root.picker-open .dp-grid{
  display:none;
}
/* 底部按钮保留（今天/1990/2000/关闭 仍可用），但压暗一点不抢焦点 */
.dp-root.picker-open .dp-foot{
  opacity:.55;
  pointer-events:none;
}
/* 面板本身要保持清晰 */
.dp-root.picker-open .dp-picker{
  opacity:1;
  filter:none;
  pointer-events:auto;
}