.date-picker { position: fixed; inset: auto; margin: 0; box-sizing: border-box; z-index: 10000; max-height: calc(100dvh - 16px); overflow-y: auto; width: 340px; padding: 12px; border: 1px solid #cbd5e2; border-radius: 12px; background: #fff; color: #243247; box-shadow: 0 8px 30px #24324730; }
.date-picker-header { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 6px; align-items: center; margin-bottom: 10px; }
.date-picker .date-picker-header input, .date-picker .date-picker-header select { width: 100%; min-width: 0; padding: 4px; font-size: 16px; font-weight: 700; height: 42px; }
.date-picker button { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0; font-size: 16px; font-weight: 400; }
.date-picker-header button { min-width: 40px; font-size: 24px; }
.date-picker-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; }
.date-picker-grid button { height: 42px; border: 1px solid transparent; background: transparent; color: #243247; border-radius: 7px; }
.date-picker-weekday { text-align: center; font-size: 14px; padding: 4px 0 8px; color: #526176; }
.date-picker-grid .outside-month { color: #738096; }
.date-picker-grid button:hover { background: #e8effa; }
.date-picker-grid .today { border-color: #315a9b; }
.date-picker-grid button[aria-pressed=true] { background: #315a9b; color: #fff; }
.date-picker-grid button:disabled { opacity: .4; cursor: default; }
.date-picker-footer { display: flex; gap: 8px; margin-top: 12px; }
.date-picker-footer button { flex: 1; }