/* ============================================================================
 * 自研日期选择器样式（v1.9.77 抽成共用文件）
 * ----------------------------------------------------------------------------
 * 起因：用户反馈原生 <input type="date">「有点丑，也不丝滑」——各浏览器/各手机长得都不一样、
 * 又是系统弹层、页面动效带不动。这里统一成苹果风面板。
 * 用法：JS 见 /js/datepick.js（enhanceDateInputs 会把原生 input 换成这套外观，
 *      **原生 input 仍在 DOM 里**，读取 .value / data-f / id / name 的代码一行都不用改）。
 * 这份样式与「离返校登记」学生页用的是同一套（学生页是独立单页，单独 link 本文件）。
 * ========================================================================== */
.dtp-mask{position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:4200;opacity:0;
  transition:opacity .22s var(--ease,cubic-bezier(.22,.61,.36,1));display:flex;align-items:flex-end;justify-content:center}
.dtp-mask.on{opacity:1}
.dtp{width:100%;max-width:400px;background:#fff;color:#1d1d1f;border-radius:20px 20px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  transform:translateY(16px);opacity:.6;
  transition:transform .26s var(--ease,cubic-bezier(.22,.61,.36,1)),opacity .26s var(--ease,cubic-bezier(.22,.61,.36,1));
  box-shadow:0 -12px 40px rgba(0,0,0,.18)}
.dtp-mask.on .dtp{transform:translateY(0);opacity:1}
@media (min-width:560px){.dtp-mask{align-items:center}.dtp{border-radius:20px;max-width:380px;padding-bottom:16px}}
[data-theme="dark"] .dtp{background:var(--surface,#1c1c22);color:var(--text-1,#f2f2f7);
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.dtp-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dtp-hd b{font-size:15px}
.dtp-nav{width:34px;height:34px;border:0;border-radius:10px;background:#f2f2f5;color:#1d1d1f;font-size:16px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .16s var(--ease,cubic-bezier(.22,.61,.36,1)),transform .16s var(--ease,cubic-bezier(.22,.61,.36,1))}
[data-theme="dark"] .dtp-nav{background:#2a2a32;color:#f2f2f7}
.dtp-nav:active{transform:scale(.94)}
.dtp-nav:hover{background:#e8e8ee}
.dtp-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;color:#86868b;font-size:11.5px;text-align:center;margin-bottom:4px}
.dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dtp-d{height:38px;border:0;background:none;border-radius:11px;font-size:14px;color:inherit;cursor:pointer;font-family:inherit;
  display:grid;place-items:center;transition:background .14s var(--ease,cubic-bezier(.22,.61,.36,1)),color .14s var(--ease,cubic-bezier(.22,.61,.36,1)),transform .14s var(--ease,cubic-bezier(.22,.61,.36,1))}
.dtp-d:hover{background:#f2f2f5}
[data-theme="dark"] .dtp-d:hover{background:#2a2a32}
.dtp-d:active{transform:scale(.92)}
.dtp-d.out{color:#c7c7cc}
.dtp-d.today{color:#0071e3;font-weight:700}
.dtp-d.sel{background:#0071e3;color:#fff;font-weight:700}
.dtp-ft{display:flex;align-items:center;gap:10px;margin-top:12px}
.dtp-ft button{border:0;background:none;color:#0071e3;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;padding:6px 2px}
.dtp-ft button.gray{color:#86868b}
.dtp-ft .sp{flex:1}
/* 日期字段外观：看起来像输入框，点哪都能开面板 */
.datefield{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border,#e0e0e5);border-radius:11px;
  padding:11px 13px;font-size:15px;cursor:pointer;background:var(--surface,#fff);
  transition:border-color .16s var(--ease,cubic-bezier(.22,.61,.36,1))}
.datefield:hover{border-color:var(--border-2,#c9c9d1)}
.datefield.on{border-color:#0071e3}
.datefield .ph{color:#b9b9be}
.datefield .ic{margin-left:auto;display:grid;place-items:center;color:#86868b}
/* 场景变体：紧凑一点（弹窗里的小尺寸日期格、假期设置那种一行多列） */
.datefield.sm{padding:7px 10px;font-size:13px;border-radius:9px}