.hub-date-range-native-hidden { display: none !important; }
.hub-date-range-field { min-width: 230px; }
.hub-date-range-trigger { min-width: 230px; min-height: 40px; padding: 9px 12px; border: 1px solid var(--input-border, #cbd5e1); border-radius: 10px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; color: inherit; font: inherit; text-align: left; cursor: pointer; background: var(--input-bg, #fff); }
.hub-date-range-trigger-icon { color: #64748b; font-size: 12px; }
.hub-date-range-panel { --range-accent: #2184e9; --range-accent-soft: #e8f3ff; --range-panel: #fff; --range-panel-alt: #f5f8fc; --range-text: #232b38; --range-muted: #64748b; --range-faint: #a8b3c2; --range-border: #d8e0ea; position: fixed; z-index: 2147483000; display: grid; grid-template-columns: 148px 1fr; background: var(--range-panel); color: var(--range-text); border: 1px solid var(--range-border); border-radius: 10px; box-shadow: 0 18px 50px rgba(35, 43, 56, .18); font-family: Inter, sans-serif; font-size: 13px; overflow: hidden; }
html.theme-dark .hub-date-range-panel, html[data-theme="dark"] .hub-date-range-panel { --range-accent: #38bdf8; --range-accent-soft: rgba(56, 189, 248, .16); --range-panel: #182235; --range-panel-alt: #111b2d; --range-text: #e5e7eb; --range-muted: #9fb0c7; --range-faint: #66758b; --range-border: #334155; box-shadow: 0 18px 55px rgba(0, 0, 0, .42); }
.hub-date-range-presets { padding: 12px 14px; border-right: 1px solid var(--range-border); background: var(--range-panel-alt); display: flex; flex-direction: column; gap: 2px; }
.hub-date-range-presets button { width: 100%; border: 0; border-radius: 6px; background: transparent; color: var(--range-text); padding: 7px 8px; text-align: left; font: inherit; font-weight: 600; cursor: pointer; }
.hub-date-range-presets button:hover, .hub-date-range-presets button.is-active { color: var(--range-accent); background: var(--range-accent-soft); }
.hub-date-range-info { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin-left: 2px; border-radius: 50%; background: var(--range-muted); color: var(--range-panel); font-size: 9px; font-style: normal; }
.hub-date-range-divider { height: 1px; margin: 7px 0; background: var(--range-border); }
.hub-date-range-calendars { display: grid; grid-template-columns: 1fr 1fr; }
.hub-date-range-month { min-width: 0; padding: 12px 12px 14px; }
.hub-date-range-month + .hub-date-range-month { border-left: 1px solid var(--range-border); }
.hub-date-range-month-head { display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; min-height: 26px; margin-bottom: 7px; }
.hub-date-range-month-head > div { display: flex; justify-content: space-between; }
.hub-date-range-heading { border: 0; background: transparent; text-align: center; color: var(--range-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.hub-date-range-heading span { margin-left: 5px; }
.hub-date-range-month-head button { border: 0; background: transparent; color: var(--range-muted); padding: 2px 5px; font-size: 17px; line-height: 1; cursor: pointer; }
.hub-date-range-month-head button:hover { color: var(--range-accent); }
.hub-date-range-weekdays, .hub-date-range-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hub-date-range-weekdays span { padding: 6px 0 7px; color: var(--range-muted); text-align: center; font-size: 12px; }
.hub-date-range-day { height: 32px; border: 0; background: var(--range-panel-alt); color: var(--range-faint); font: inherit; cursor: pointer; }
.hub-date-range-day:hover { position: relative; z-index: 1; outline: 1px solid var(--range-accent); color: var(--range-accent); }
.hub-date-range-day.is-outside { background: transparent; color: var(--range-faint); opacity: .8; }
.hub-date-range-day.is-in-range { background: var(--range-accent-soft); color: var(--range-accent); }
.hub-date-range-day.is-start, .hub-date-range-day.is-end { background: var(--range-accent); color: #fff; font-weight: 700; }
.hub-date-range-day.is-today:not(.is-start):not(.is-end) { box-shadow: inset 0 0 0 1px var(--range-accent); }
.hub-date-range-day.is-disabled, .hub-date-range-month-grid button.is-disabled, .hub-date-range-year-grid button.is-disabled { color: var(--range-faint); opacity: .38; cursor: not-allowed; pointer-events: none; }
.hub-date-range-panel:not([data-mode="custom"]) .hub-date-range-calendars,
.hub-date-range-panel[data-view="months"] .hub-date-range-calendars,
.hub-date-range-panel[data-view="years"] .hub-date-range-calendars { grid-template-columns: 1fr; }
.hub-date-range-choice-view { min-width: 0; padding: 12px 12px 14px; }
.hub-date-range-choice-head { height: 32px; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; margin-bottom: 8px; text-align: center; color: var(--range-muted); }
.hub-date-range-choice-head > button { border: 0; background: transparent; color: var(--range-muted); padding: 2px 5px; font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.hub-date-range-choice-head > button:hover { color: var(--range-accent); }
.hub-date-range-choice-head > strong { font-weight: 500; }
.hub-date-range-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.hub-date-range-year-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.hub-date-range-month-grid button, .hub-date-range-year-grid button { height: 56px; border: 0; background: var(--range-panel-alt); color: var(--range-muted); font: inherit; cursor: pointer; }
.hub-date-range-month-grid button:hover, .hub-date-range-year-grid button:hover { color: var(--range-accent); box-shadow: inset 0 0 0 1px var(--range-accent); }
.hub-date-range-month-grid button.is-in-range, .hub-date-range-year-grid button.is-in-range { background: var(--range-accent-soft); color: var(--range-accent); }
.hub-date-range-month-grid button.is-start, .hub-date-range-year-grid button.is-start { background: var(--range-accent); color: #fff; font-weight: 700; }
@media (max-width: 700px) {
  .hub-date-range-panel { grid-template-columns: 120px 1fr; max-height: calc(100vh - 20px); overflow: auto; }
  .hub-date-range-calendars { grid-template-columns: 1fr; }
  .hub-date-range-month + .hub-date-range-month { border-left: 0; border-top: 1px solid var(--range-border); }
}