.month-picker{position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid #ddd;border-radius:22px;background:#fff;color:#222;box-shadow:0 20px 70px #0003;overflow:auto}
.month-picker::backdrop{background:#0005;backdrop-filter:blur(2px)}
.month-picker .month-picker-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.month-picker h2{font-size:20px;margin:0}
.month-picker button{font:inherit;cursor:pointer;background:#fff;color:inherit;border:1px solid #ddd;transition:background .15s,border-color .15s}
.month-picker button:hover{background:#f5f5f5;border-color:#555}
.month-picker button:focus-visible{outline:3px solid #346b5c;outline-offset:3px}
.month-picker .month-picker-close{width:36px;height:36px;border:0;border-radius:50%;font-size:26px;line-height:1}
.month-picker-year{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.month-picker-year strong{font-size:19px}
.month-picker-year button{width:38px;height:38px;border-radius:50%;font-size:26px;line-height:1}
.month-picker-year button:disabled{opacity:.35;cursor:default}
.month-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.month-picker-grid button{min-height:58px;padding:10px 5px;border-radius:12px;font-weight:600}
.month-picker-grid button[aria-pressed="true"]{background:#1e433d;color:#fff;border-color:#1e433d}
.month-picker .month-picker-current{display:block;margin:20px auto 0;padding:10px 16px;border:0;border-radius:8px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:420px){.month-picker{padding:20px}.month-picker-grid{gap:8px}.month-picker-grid button{min-height:54px}}