#zui-date-range {
	position: fixed;
	z-index: 10020;
	box-sizing: border-box;
	width: 250px;
	max-width: calc(100vw - 16px);
	max-height: calc(100vh - 16px);
	overflow: auto;
	padding: 12px;
	border: 1px solid var(--zui-line, #ccd3dc);
	border-radius: 6px;
	background: var(--zui-bg, #fff);
	color: var(--zui-text, #333);
	box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
	font-size: 14px;
}
#zui-date-range[hidden] { display: none; }
#zui-period-title { display: block; padding-right: 24px; margin-bottom: 10px; }
#zui-date-range button {
	box-sizing: border-box;
	margin: 0;
	padding: 4px 10px;
	min-height: 28px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 20px;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}
#zui-date-range button:hover:not(:disabled),
#zui-date-range button:focus-visible { background: var(--zui-fill, #eef1f5); border-color: var(--zui-line, #ccd3dc); }
#zui-date-range button:disabled { opacity: .4; cursor: default; }
#zui-date-range .zui-period-close { position: absolute; top: 5px; right: 5px; font-size: 20px; }
#zui-date-range .zui-period-year { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
#zui-period-year {
	box-sizing: border-box;
	width: 82px;
	min-width: 0;
	padding: 4px;
	border: 1px solid var(--zui-line, #ccd3dc);
	border-radius: 4px;
	color: inherit;
	background: var(--zui-bg, #fff);
	font: inherit;
}
#zui-date-range .zui-period-months { display: flex; flex-direction: column; }
#zui-date-range .zui-period-months button { width: 100%; text-align: left; }
#zui-date-range .zui-period-current { font-weight: 700; border-left-color: var(--zui-accent, #345); }
#zui-date-range .zui-period-whole-year { width: 100%; margin-top: 8px; border-color: var(--zui-line, #ccd3dc); font-weight: 600; }