html:root .crm-date-picker {
  position:fixed;inset:auto;margin:0;box-sizing:border-box;width:320px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);
  overflow:auto;overscroll-behavior:contain;padding:14px;border:1px solid var(--border-strong);border-radius:20px;
  color:var(--text-primary);background:var(--surface);box-shadow:0 18px 56px #14203824,0 2px 8px #1420380d;font-size:13px;line-height:1.4;
}
html:root .crm-date-picker button {display:grid;place-items:center;min-width:0;min-height:36px;padding:0 6px;margin:0;border:1px solid transparent;border-radius:10px;box-shadow:none;background:transparent;color:var(--text-primary);font:inherit;line-height:1.3;transition:background-color 140ms ease,color 140ms ease,border-color 140ms ease;}
html:root .crm-date-picker button:hover:not(:disabled) {background:var(--theme-soft);color:var(--accent);}
html:root .crm-date-picker button:focus-visible {outline:2px solid var(--accent);outline-offset:1px;}
html:root .crm-date-picker button:disabled {opacity:.3;cursor:default;}
.crm-date-toolbar {display:flex;align-items:center;justify-content:center;gap:4px;padding:2px 0 8px;}
html:root .crm-date-picker .crm-date-arrow {flex:0 0 30px;width:30px;font-size:22px;color:var(--text-secondary);}
html:root .crm-date-picker .crm-date-month-title {flex:0 1 auto;margin-left:auto;text-transform:capitalize;font-size:15px;font-weight:600;}
html:root .crm-date-picker select.crm-date-year {flex:0 0 78px;width:78px;min-width:0;min-height:36px;height:36px;padding:6px 4px;margin:0 auto 0 0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-primary);font:inherit;font-size:15px;font-weight:600;text-align:center;text-align-last:center;}
html:root .crm-date-toolbar:has(.crm-date-month-title[hidden]) select.crm-date-year {flex:1;text-align:center;}
@supports (appearance:base-select) {
  html:root .crm-date-picker select.crm-date-year {position:relative;justify-content:center;gap:0;padding-inline:20px;}
  html:root .crm-date-picker select.crm-date-year::picker-icon {position:absolute;right:6px;}
}
.crm-date-content {padding-top:10px;}
.crm-date-months {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
html:root .crm-date-months button {min-height:38px;font-size:13px;text-transform:capitalize;}
.crm-date-weekdays,.crm-date-days {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}
.crm-date-weekdays {padding:2px 0 7px;text-align:center;font-size:11px;font-weight:550;color:var(--text-secondary);}
html:root .crm-date-days button {padding:0;width:100%;min-height:36px;aspect-ratio:1;border-radius:50%;font-size:14px;font-variant-numeric:tabular-nums;}
html:root .crm-date-days button:nth-child(7n):not(.is-outside):not([aria-selected="true"]) {color:var(--theme-danger);}
html:root .crm-date-days button.is-outside {color:var(--text-secondary);opacity:.55;}
html:root .crm-date-picker button[aria-current="date"] {border-color:var(--accent);color:var(--accent);font-weight:650;}
html:root .crm-date-picker button:is([aria-selected="true"],[aria-pressed="true"]) {background:var(--accent);color:var(--theme-on-accent,#fff);border-color:var(--accent);font-weight:650;opacity:1;}
.crm-date-footer {display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
html:root .crm-date-picker .crm-date-today {color:var(--accent);font-weight:600;}
html:root .crm-date-picker .crm-date-clear {color:var(--text-secondary);margin-left:auto;}
html:root .crm-date-picker .crm-date-time-row {display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border);font-size:12px;font-weight:550;color:var(--text-secondary);}
html:root .crm-date-picker input.crm-date-time {width:112px;min-height:36px;height:36px;margin:0;padding:5px 9px;border-radius:10px;background:var(--theme-input);color:var(--text-primary);font:inherit;}
.crm-date-error {margin:10px 0 0;font-size:12px;color:var(--theme-danger,var(--text-primary));}
input[data-crm-date] {cursor:pointer;}
@media(pointer:coarse){html:root .crm-date-picker {width:328px;}html:root .crm-date-days button,html:root .crm-date-months button {min-height:40px;}}
@media(prefers-reduced-motion:reduce){html:root .crm-date-picker button {transition:none;}}