.my-datepicker { display:flex; position:relative; width:100%; min-width:0; align-items:center; }
.my-datepicker input.my-datepicker-text { width:100%; min-width:0; padding-right:42px; }
.my-datepicker .my-datepicker-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:32px; height:32px; padding:0; border:0; border-radius:6px; background:transparent; color:#78716c; font-size:14px; cursor:pointer; }
.my-datepicker .my-datepicker-toggle:disabled { color:#9ca3af; cursor:not-allowed; }
body dialog.my-date-dialog { width:min(360px,calc(100% - 32px)); padding:20px; margin:auto; border:1px solid #e7e5e4; border-radius:14px; box-shadow:0 12px 40px #0003; background:#fff; color:#1c1917; font:14px/1.5 'Geologica',system-ui,sans-serif; }
.my-date-dialog::backdrop { background:#1c191755; }
.my-date-dialog * { box-sizing:border-box; }
.my-date-dialog button, .my-date-dialog input, .my-date-dialog select { font:inherit; }
.my-date-dialog button { min-height:36px; border:1px solid #e7e5e4; border-radius:6px; background:#fff; color:inherit; cursor:pointer; padding:4px 8px; }
.my-date-dialog button:disabled { opacity:.35; cursor:not-allowed; }
.my-date-dialog button:hover:not(:disabled) { background:#eef2ff; }
.my-date-dialog :focus-visible, .my-datepicker :focus-visible { outline:3px solid #635bff; outline-offset:2px; }
.my-date-header { display:grid; grid-template-columns:32px minmax(0,1fr) 76px 32px; gap:6px; margin-bottom:16px; }
.my-date-header select, .my-date-header input { width:100%; min-width:0; border:1px solid #e7e5e4; border-radius:6px; padding:4px; background:#fff; }
.my-date-weekdays, .my-date-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.my-date-weekdays { text-align:center; color:#78716c; font-size:12px; margin-bottom:8px; }
.my-date-grid button { padding:4px 0; }
.my-date-grid button.selected { background:#635bff; color:#fff; border-color:#635bff; }
.my-date-grid button[aria-current="date"] { border-color:#635bff; }
.my-date-footer { display:flex; justify-content:space-between; gap:8px; margin-top:16px; }
@media (max-width:360px) { body dialog.my-date-dialog { padding:12px; } .my-date-header { grid-template-columns:28px minmax(0,1fr) 66px 28px; } }