.best-calendar-layout { display:grid; grid-template-columns:minmax(360px,1.35fr) minmax(280px,1fr); gap:24px; }
#recordsPage .best-calendar-layout .panel { margin:0; padding:24px; background:var(--theme-surface); border:1px solid var(--theme-border); border-radius:10px; }
.calendar-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.calendar-toolbar h2 { flex:1; margin:0; text-align:center; font-size:22px; }
#recordsPage .calendar-toolbar button { min-width:40px; min-height:40px; padding:8px 12px; background:var(--theme-input); color:var(--theme-ink); border:1px solid var(--theme-border); }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.calendar-weekdays { margin-bottom:8px; text-align:center; color:var(--theme-muted); }
#recordsPage .calendar-day { position:relative; min-width:0; min-height:64px; padding:8px 4px 20px; border:1px solid transparent; border-radius:6px; background:var(--theme-input); color:var(--theme-ink); font-size:17px; font-variant-numeric:tabular-nums; }
#recordsPage .calendar-day:hover { background:var(--theme-hover); }
#recordsPage .calendar-day[aria-current=date] { text-decoration:underline; text-underline-offset:5px; }
#recordsPage .calendar-day[aria-pressed=true] { border-color:var(--theme-accent); background:var(--theme-selected); }
.calendar-day.has-audio::after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--theme-accent); left:calc(50% - 3px); bottom:9px; }
.calendar-caption,.calendar-storage-note { color:var(--theme-muted); font-size:14px; line-height:1.65; }
.calendar-storage-note { margin:18px 0 28px; }
.calendar-player h2 { margin:0 0 24px; font-size:22px; }
#calendarAudioTitle { font-size:20px; }
#calendarEmpty { color:var(--theme-muted); line-height:1.9; }
#calendarPlayback>button { min-height:44px; margin:4px 6px 10px 0; }
#calendarPlay { background:var(--theme-action); color:var(--theme-on-action); }
.calendar-seek-label { display:block; margin-top:20px; color:var(--theme-muted); font-size:14px; }
#calendarSeek { width:100%; accent-color:var(--theme-accent); padding:0; margin:12px 0; }
#calendarTime { display:block; font-variant-numeric:tabular-nums; color:var(--theme-muted); }
#calendarPlayback .calendar-delete { display:block; margin-top:32px; color:var(--theme-danger-ink); }
#calendarStatus { min-height:1.6em; line-height:1.6; }
.calendar-legacy { margin-top:28px; }
.calendar-legacy>summary { cursor:pointer; margin-bottom:18px; }
#connectionPage .take-row:has(.take-best-play) { flex-wrap:wrap; }
#connectionPage .take-row .take-best-play { flex:0 0 calc(100% - 16px); margin:0 8px 6px; min-height:30px; padding:5px 8px; border:1px solid var(--theme-border); border-radius:4px; font-size:13px; color:var(--theme-muted); background:transparent; text-align:left; }
#connectionPage .take-row .take-best-play[data-saved=true] { color:var(--theme-accent); border-color:var(--theme-accent); }
.calendar-confirm { width:min(440px,calc(100vw - 40px)); padding:28px; border:1px solid var(--theme-border); border-radius:10px; background:var(--theme-surface); color:var(--theme-ink); }
.calendar-confirm::backdrop { background:#0009; }
.calendar-confirm p { line-height:1.8; }
.calendar-confirm-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.calendar-confirm button { min-height:44px; padding:10px 18px; background:var(--theme-subtle); color:var(--theme-ink); border:1px solid var(--theme-border); }
.calendar-confirm button:last-child { border-color:var(--theme-accent); }
@media(max-width:850px) { .best-calendar-layout { grid-template-columns:1fr; } }
@media(max-width:440px) { #recordsPage .best-calendar-layout .panel { padding:14px; } #recordsPage .calendar-day { min-height:48px; } .calendar-toolbar { gap:4px; } .calendar-toolbar h2 { font-size:18px; } }