#calendar-toggle{margin-left:auto;flex-shrink:0;display:flex;align-items:center;border:1px solid transparent;border-radius:7px;padding:4px 8px;background:transparent;line-height:1.6}
#calendar-toggle:hover,#calendar-toggle[aria-expanded=true]{background:var(--accent-soft);border-color:var(--line)}
#calendar-toggle #desktop-clock{margin-left:0}
#desktop-calendar{--ink:var(--glass-ink);--muted:var(--glass-muted);position:fixed;z-index:11000;top:calc(var(--bar-height) + env(safe-area-inset-top,0px) + 10px);right:max(24px,env(safe-area-inset-right,0px));width:320px;max-width:calc(100vw - 24px);max-height:calc(100dvh - var(--bar-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);overflow:auto;padding:20px;border:1px solid var(--glass-edge);border-radius:18px;background:var(--glass-surface);color:var(--ink);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);animation:calendar-open .16s ease-out;outline:none}
.calendar-header{display:grid;gap:3px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.calendar-header>span{font-size:11px;color:var(--muted)}
.calendar-header>strong{font-size:14px;font-weight:600;letter-spacing:.02em}
.calendar-monthbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 12px}
.calendar-monthbar h2{font-size:14px;font-weight:600;white-space:nowrap}
.calendar-navigation{display:flex;align-items:center;gap:3px}
.calendar-navigation button{height:30px;min-width:30px;border:1px solid transparent;border-radius:7px;background:transparent;padding:0 7px;color:var(--muted);line-height:1}
.calendar-navigation button:hover{color:var(--ink);background:var(--accent-soft);border-color:var(--line)}
.calendar-navigation .calendar-arrow{font-size:24px;padding-bottom:3px}
.calendar-navigation .calendar-today{font-size:11px}
.calendar-weekdays,.calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.calendar-weekdays{margin-bottom:6px;font-size:11px;color:var(--muted);text-align:center}
.calendar-weekdays>span{padding:4px 0}
.calendar-week{margin-top:3px}
.calendar-day{display:grid;place-items:center;aspect-ratio:1;min-width:0;width:100%;padding:0;border:1px solid transparent;border-radius:50%;font-size:12px;line-height:1;background:transparent;color:var(--ink);font-variant-numeric:tabular-nums;position:relative}
.calendar-day.adjacent-month{color:var(--muted);opacity:.52}
.calendar-day:hover{background:var(--accent-soft);border-color:transparent;opacity:1}
.calendar-day.is-today:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;bottom:3px;background:var(--accent)}
.calendar-day.is-selected{color:var(--accent);background:var(--accent-soft);border-color:var(--accent);opacity:1;font-weight:650}
.calendar-day.is-today.is-selected{color:var(--surface);background:var(--accent)}
.calendar-day.is-today.is-selected:after{background:currentColor}
.calendar-day:focus-visible{outline-offset:1px}
.calendar-selection{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;text-align:center}
@keyframes calendar-open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (max-width:760px){#calendar-toggle{padding:4px 5px}#desktop-calendar{right:max(12px,env(safe-area-inset-right,0px));padding:18px}}
@media (prefers-reduced-motion:reduce){#desktop-calendar{animation:none}}
:root[data-reduce-motion=true] #desktop-calendar{animation:none}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#desktop-calendar{background:var(--surface)}}