.date-period-control{position:relative;display:inline-flex;vertical-align:middle;max-width:100%;min-width:0}
.date-period-control>input{width:100%;min-width:0;padding-right:30px!important}
.date-period-control>input::-webkit-calendar-picker-indicator{display:none}
.date-period-control>.date-period-open{position:absolute;right:3px;top:3px;bottom:3px;width:25px;min-height:0!important;padding:0!important;border:0;background:transparent;color:var(--text-3);font-size:18px;line-height:1;cursor:pointer}
.date-period-open:disabled{opacity:1;cursor:default;color:var(--placeholder)}
dialog.date-period-picker{box-sizing:border-box;width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border:1px solid var(--control-line);border-radius:var(--r-card);overflow:auto;color:var(--text-2);background:var(--surface)}
.date-period-picker::backdrop{background:var(--backdrop)}
.date-period-head,.date-period-year,.date-period-shortcuts{display:flex;align-items:center;gap:8px}
.date-period-head{justify-content:space-between;margin-bottom:12px}
.date-period-picker button{cursor:pointer;border:1px solid var(--control-line);border-radius:var(--r-control);padding:6px 9px;background:var(--surface);color:var(--text-2);font:inherit}
.date-period-picker button:focus-visible,.date-period-picker input:focus-visible,.date-period-picker select:focus-visible{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}
.date-period-picker button:disabled{opacity:1;cursor:default;background:var(--neutral-bg);border-color:var(--neutral-line);color:var(--placeholder)}
.date-period-year label{display:flex;align-items:center;gap:6px;margin:0}
.date-period-year input{width:82px!important;min-width:0;padding:5px!important;height:34px!important}
.date-period-year select{width:75px!important;min-width:0;padding:5px!important;height:34px!important}
.date-period-picker .date-period-hint{font-size:12px;color:var(--muted);margin:9px 0}
.date-period-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.date-period-grid.months{grid-template-columns:repeat(3,minmax(0,1fr))}
.date-period-grid button{padding:6px 0;min-width:0}
.date-period-grid button[aria-pressed=true]{background:var(--primary);color:var(--surface)}
.date-period-shortcuts{margin-top:10px;flex-wrap:wrap}
.date-period-picker [data-message]{margin:6px 0;font-size:12px;color:var(--danger)}