:root {
  --background: #0d0e11;
  --foreground: #f2f2f3;
  --muted: #a3a3aa;
  --quiet: #666870;
  --rule: #303137;
  --red: #ec3750;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
.page-shell { width: min(100% - 72px, 1460px); margin: 0 auto; }

.topbar {
  display: flex;
  min-height: 124px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--red);
}
.brand-lockup { display: flex; align-items: center; min-width: 0; }
.brand-lockup img { display: block; width: 138px; height: auto; }
.brand-divider { width: 1px; height: 37px; margin: 0 21px; background: var(--rule); }
.brand-url { color: var(--red); font: 500 17px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.header-actions { display: flex; gap: 17px; }
.header-actions button {
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: 500 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
}
.header-actions button:hover { color: var(--foreground); border-bottom-color: var(--red); }
.header-actions button span { color: var(--red); font-size: 16px; }
.header-actions button.loading span { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.month-heading { display: flex; align-items: flex-end; justify-content: space-between; padding: 36px 31px 22px; }
.month-controls { display: flex; gap: 18px; padding-bottom: 12px; }
.month-controls button { padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 28px; line-height: 1; }
.month-controls button:hover { color: var(--red); }
.month-heading h1 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(5.5rem, 12vw, 11rem);
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: .86;
}
.month-heading p { margin: 12px 0 0 2px; color: var(--red); font-size: clamp(1.7rem, 3vw, 2.55rem); font-weight: 700; letter-spacing: .02em; }

.calendar-wrap { overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; }
.weekday-row, .days-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-row { min-height: 53px; align-items: center; border-bottom: 1px solid var(--rule); }
.weekday-row span { color: var(--foreground); font-size: clamp(.75rem, 1.25vw, 1.15rem); font-weight: 700; text-align: center; }
.weekday-row .weekend { color: var(--red); }
.day {
  position: relative;
  min-width: 0;
  min-height: clamp(105px, 11vw, 166px);
  padding: 14px 16px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--foreground);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
}
.day:nth-child(7n) { border-right: 0; }
.day:nth-last-child(-n + 7) { border-bottom: 0; }
.day:hover, .day.selected { background: #141519; }
.day.outside { color: var(--quiet); }
.day.today .day-number { color: var(--red); }
.day-number { display: block; font-size: clamp(.9rem, 1.5vw, 1.25rem); line-height: 1; }
.day.today .day-number::after { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 7px; border-radius: 50%; background: var(--red); }
.event-chip {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin-top: 17px;
  padding-left: 9px;
  border-left: 2px solid var(--red);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.more-events { display: block; margin-top: 7px; color: var(--red); font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.calendar-note {
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--red);
}
.note-mark, .footer-mark { color: var(--red); font: 700 23px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.calendar-note p { margin: 0; color: var(--muted); font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sync-status { margin-left: auto; color: var(--quiet); font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.sync-status.error { color: var(--red); }
.site-footer {
  display: flex;
  min-height: 91px;
  align-items: center;
  justify-content: space-between;
  border-top: 0;
  color: var(--muted);
}
.site-footer p { margin: 0; font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.footer-mark { margin-right: 10px; font-size: 20px; }
.footer-add { color: var(--red); font: 500 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.footer-add:hover { color: var(--foreground); }
.site-footer img { display: block; width: 35px; height: auto; }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 32px, 620px); }
  .topbar { min-height: 91px; }
  .brand-lockup img { width: 112px; }
  .brand-divider { height: 28px; margin: 0 13px; }
  .brand-url { font-size: 13px; }
  .header-actions { gap: 10px; }
  .header-actions button { font-size: 9px; }
  .month-heading { padding: 31px 13px 19px; }
  .month-heading h1 { font-size: clamp(4.3rem, 18vw, 7rem); }
  .month-controls { gap: 11px; padding-bottom: 8px; }
  .month-controls button { font-size: 23px; }
  .weekday-row { min-height: 45px; }
  .day { min-height: 82px; padding: 10px 8px; }
  .event-chip { margin-top: 12px; padding-left: 5px; font-size: 8px; }
  .calendar-note { min-height: 60px; }
  .calendar-note p, .site-footer p { font-size: 10px; }
}
@media (max-width: 480px) {
  .page-shell { width: calc(100% - 20px); }
  .topbar { min-height: 75px; }
  .brand-lockup img { width: 92px; }
  .brand-divider { height: 23px; margin: 0 9px; }
  .brand-url { font-size: 10px; }
  .header-actions { display: block; }
  .header-actions button { display: block; padding: 2px 0; }
  .month-heading { padding: 27px 5px 19px; }
  .month-heading h1 { font-size: clamp(3.8rem, 18vw, 5.8rem); }
  .month-heading p { margin-top: 8px; font-size: 1.5rem; }
  .month-controls { gap: 7px; padding-bottom: 5px; }
  .month-controls button { font-size: 20px; }
  .weekday-row { min-height: 38px; }
  .weekday-row span { font-size: .58rem; }
  .day { min-height: 62px; padding: 7px 4px; }
  .day-number { font-size: .72rem; }
  .day.today .day-number::after { width: 4px; height: 4px; margin: 0 0 2px 3px; }
  .event-chip { overflow: hidden; margin-top: 8px; padding-left: 3px; font-size: 7px; }
  .more-events { font-size: 7px; }
  .calendar-note { gap: 8px; min-height: 54px; }
  .note-mark { font-size: 16px; }
  .calendar-note p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sync-status { display: none; }
  .site-footer { min-height: 70px; }
  .site-footer p { font-size: 8px; }
  .footer-mark { margin-right: 5px; font-size: 14px; }
  .site-footer img { width: 27px; }
}