.dp-input{ width: 220px; padding: 8px 10px; font: 14px/1.4 system-ui,sans-serif; }
.d-none{ display:none; }

.dp-popup{
    position: absolute; z-index: 9999;
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    padding: 8px; width: 260px;
}
.dp-hidden{ display:none; }

.dp-header{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 8px; }
.dp-navbtn{ background:#f4f4f4; border:1px solid #e5e5e5; border-radius:6px; padding:4px 8px; cursor:pointer; }
.dp-title{ font-weight:600; font-size:14px; }

.dp-grid{ display:grid; gap:4px; }
.dp-grid.day { grid-template-columns: repeat(7, 1fr); }
.dp-grid.month { grid-template-columns: repeat(3, 1fr); }
.dp-grid.year { grid-template-columns: repeat(4, 1fr); }

.dp-cell{
    text-align:center; padding:6px 0; border-radius:6px; cursor:pointer; user-select:none;
}
.dp-cell:hover{ background:#f2f6ff; }
.dp-cell.muted{ color:#bbb; }
.dp-cell.active{ background:#2f6aff; color:#fff; }

.dp-weekrow{ display: contents; }
.dp-wknum{ font-size: 10px; opacity: .7; align-self:center; }

.dp-dow{ font-size:11px; opacity:.7; }
.dp-footer{ margin-top:8px; display:flex; justify-content:space-between; }
.dp-quick{ font-size:12px; color:#2f6aff; cursor:pointer; }

.dp-time{
    display:flex; align-items:center; gap:.4rem; padding:.5rem .6rem .6rem;
    border-top:1px solid #eee; margin-top:.2rem;
}
.dp-time-ctrl{
    width:3.2rem; text-align:center; padding:.25rem .4rem;
}
.dp-time-sep{ opacity:.6; }

.pickers{
    max-width: 10rem;
}