:root {
  color-scheme: dark;
  --solar: #ffd200;
  --night: #0b1320;
  --slate: #334155;
  --mist: #94a3b8;
  --white: #f8fafc;
  --panel: #101b2b;
  --raised: #162437;
  --hover: #1d2d43;
  --muted: #acb9ca;
  --line: #26364b;
  --danger: #ffb1b1;
  --type: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--type);
  background: var(--night);
  color: var(--white);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--solar); outline-offset: 3px; }
button:disabled { opacity: .45; cursor: default; }
input, select, textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--slate);
  border-radius: 8px;
  background: var(--night);
  color: var(--white);
}
input::placeholder, textarea::placeholder { color: var(--mist); opacity: 1; }
textarea { min-height: 98px; resize: vertical; }

.primary, .secondary, .text-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .83rem;
  font-weight: 650;
  white-space: nowrap;
}
.primary { background: var(--solar); color: var(--night); }
.primary:hover:not(:disabled) { background: #ffe365; }
.secondary, .icon-button { background: var(--raised); border-color: var(--slate); color: var(--white); }
.secondary:hover:not(:disabled), a.icon-button:hover, button.icon-button:hover { background: var(--hover); border-color: var(--mist); }
.text-button { background: transparent; color: var(--muted); }
.text-button:hover:not(:disabled) { background: var(--hover); color: var(--white); }
.icon-button { width: 38px; padding: 0; font-size: 1.2rem; }
.icon-button[aria-disabled="true"] { opacity: .36; }
.chevron {
  display: block;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(-45deg);
}
.chevron.left { transform: rotate(135deg); }
.notice { padding: 10px 12px; border: 1px solid var(--slate); border-radius: 8px; font-size: .86rem; line-height: 1.45; }
.notice.error { background: #3b2333; border-color: #754751; color: var(--danger); }
.notice.success { background: #27281e; border-color: #64551c; color: #ffe88a; }

.eclipse-mark {
  position: relative;
  display: inline-block;
  flex: none;
  width: 31px;
  height: 31px;
  border: 1px solid var(--slate);
  border-radius: 50%;
  background: var(--night);
}
.eclipse-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px solid var(--solar);
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-34deg);
}

.login-layout { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); }
.login-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: clamp(30px, 6vw, 100px);
  overflow: hidden;
  background: #100e13;
}
.login-cover img, .login-cover::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-cover img { object-fit: cover; object-position: center 43%; z-index: -2; }
.login-cover::after { content: ""; z-index: -1; background: linear-gradient(180deg, transparent 43%, var(--night) 100%); }
.login-cover h1 { font-size: clamp(3.8rem, 6.6vw, 7.35rem); line-height: .99; font-weight: 750; letter-spacing: -.077em; }
.login-cover h1 span { color: var(--solar); }
.login-panel {
  display: grid;
  place-items: center;
  padding: 40px clamp(24px, 6vw, 96px);
  border-left: 1px solid var(--line);
  background: var(--panel);
}
.login-content { width: 100%; max-width: 392px; }
.login-content > .eclipse-mark { width: 38px; height: 38px; margin-bottom: 24px; }
.login-content h2 { margin-bottom: 28px; font-size: clamp(2.15rem, 4vw, 3.5rem); letter-spacing: -.055em; }
.login-form { display: grid; gap: 9px; }
.login-form label { font-size: .86rem; font-weight: 650; }
.login-form input { min-height: 47px; margin-bottom: 7px; }
.login-submit { justify-content: space-between; min-height: 46px; margin-top: 9px; padding-inline: 15px; }
.login-submit span { font-size: 1.2rem; }

.site-header { border-bottom: 1px solid var(--line); background: var(--panel); }
.header-inner, .calendar-main { width: min(1280px, calc(100% - 72px)); margin-inline: auto; }
.header-inner, .brand, .account, .heading-row, .page-actions, .calendar-toolbar, .period-fields,
.period-form, .period-header, .period-arrows, .day-top, .dialog-head, .dialog-actions {
  display: flex;
  align-items: center;
}
.header-inner { min-height: 59px; justify-content: space-between; gap: 12px; }
.brand { gap: 10px; font-size: .95rem; font-weight: 690; letter-spacing: -.025em; }
.brand .eclipse-mark { width: 25px; height: 25px; }
.account { gap: 13px; color: var(--mist); font-size: .82rem; }
.account .text-button { padding-inline: 10px; }
.calendar-main { padding-block: 34px 48px; }
.heading-row { justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.heading-row h1 { font-size: clamp(2.05rem, 4vw, 3.1rem); letter-spacing: -.062em; line-height: 1.08; }
.page-actions { gap: 8px; flex-wrap: wrap; }
.search-icon {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}
.search-icon::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 1.6px;
  background: currentColor;
  bottom: -2px;
  right: -4px;
  transform: rotate(45deg);
}
.calendar-main > .notice { margin-bottom: 12px; }
.project-menu { position: relative; }
.project-menu > summary { list-style: none; }
.project-menu > summary::-webkit-details-marker { display: none; }
.project-menu > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -2px 0 0 2px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.project-menu[open] > summary::after { margin-top: 3px; transform: rotate(225deg); }
.project-menu-panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 7px);
  right: 0;
  width: min(296px, calc(100vw - 32px));
  display: grid;
  gap: 9px;
  padding: 13px;
  background: var(--raised);
  border: 1px solid var(--slate);
  border-radius: 11px;
  box-shadow: 0 15px 36px #030811a0;
}
.project-menu-panel p { color: var(--muted); font-size: .81rem; line-height: 1.45; }
.project-menu-panel .secondary { background: var(--panel); }

.calendar-toolbar {
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin-bottom: 13px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}
.view-switch { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--night); }
.view-switch a { padding: 7px 15px; border-radius: 6px; color: var(--muted); font-size: .83rem; font-weight: 650; line-height: 1.3; }
.view-switch a:hover { background: var(--raised); color: var(--white); }
.view-switch a[aria-current="page"] { background: var(--solar); color: var(--night); }
.period-fields, .period-form { flex-wrap: wrap; gap: 8px; }
.period-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; font-weight: 630; }
.period-field input, .period-field select { padding: 6px 8px; min-height: 33px; font-size: .83rem; font-weight: 600; }
.period-field input { width: 75px; font-variant-numeric: tabular-nums; }
#cycle-jump { width: 64px; }
.period-field select { width: auto; padding-right: 12px; }
.period-form .go-button { width: 32px; min-height: 33px; font-size: 1rem; }
.calendar-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.period-header { justify-content: space-between; gap: 12px; padding: 21px 22px; }
.period-header h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); line-height: 1.12; font-weight: 720; letter-spacing: -.05em; }
.period-header p { color: var(--mist); font-size: .83rem; margin-top: 6px; line-height: 1.35; }
.period-arrows { gap: 6px; flex: none; }
.weekdays, .days, .mini-weekdays, .mini-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekdays {
  padding-block: 10px;
  background: var(--raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}
.weekday-short { display: none; }
.days { gap: 1px; background: var(--line); }
.day-cell { min-width: 0; min-height: clamp(80px, 8.1vw, 115px); padding: 10px; background: var(--panel); }
.day-cell:nth-child(7n), .day-cell:nth-child(7n + 6) { background: #0e1929; }
.day-cell.has-events { background: #122033; }
a.day-cell:hover, a.special-day:hover { background: var(--hover); }
.day-cell[aria-disabled="true"], .mini-day[aria-disabled="true"] { color: #75859b; background: var(--night); }
.day-cell[aria-current="date"], .special-day[aria-current="date"] { background: #222b34; box-shadow: inset 0 0 0 1px var(--solar); }
.day-cell[aria-current="date"] .day-number, .special-day[aria-current="date"] .day-number,
.day-cell.cycle-start .day-number, .special-day.cycle-start .day-number { color: var(--solar); }
.day-cell:focus-visible, .special-day:focus-visible, .mini-day:focus-visible { outline-offset: -3px; }
.day-top { justify-content: space-between; gap: 4px; }
.day-number { font-size: .94rem; font-weight: 680; font-variant-numeric: tabular-nums; }
.day-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  min-height: 20px;
  padding-inline: 4px;
  border-radius: 5px;
  background: #39351f;
  color: var(--solar);
  font-size: .69rem;
  font-weight: 700;
  line-height: 1;
}
.day-preview {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  margin-top: 6px;
  padding: 4px 5px;
  border-left: 2px solid var(--solar);
  border-radius: 0 4px 4px 0;
  background: #32301f;
  color: #fff1b2;
  font-size: .69rem;
  line-height: 1.24;
}
.day-preview > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.day-preview.auto { border-left-color: var(--mist); background: #203047; color: #e2e9f2; }
.day-cell.cycle-start .day-preview.auto, .special-day.cycle-start .day-preview.auto {
  border-left-color: var(--solar);
}
.preview-time { color: inherit; font-size: .62rem; font-variant-numeric: tabular-nums; flex: none; }
.special-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}
.special-day { min-width: 0; padding: 11px 12px; background: var(--raised); }
.special-day .day-number { font-size: .8rem; }
.outside-week { display: block; margin-top: 4px; color: var(--mist); font-size: .72rem; }

.year-grid, .cycle-grid { display: grid; gap: 12px; }
.year-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 16px 16px; }
.mini-month { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--night); }
.mini-month.unavailable { color: var(--mist); }
.mini-month.unavailable h3 { font-size: .91rem; }
.mini-month.unavailable p { margin-top: 8px; font-size: .74rem; }
.mini-month-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 5px;
  min-height: 30px;
  padding: 3px 4px;
  border-radius: 5px;
}
.mini-month-head:hover { background: var(--raised); }
.mini-month-head h3 { font-size: .91rem; letter-spacing: -.02em; }
.mini-month-head[aria-current="true"] h3 { color: var(--solar); }
.mini-month-head span { color: var(--mist); font-size: .66rem; }
.mini-weekdays { padding-block: 3px 5px; color: var(--mist); text-align: center; font-size: .63rem; font-weight: 650; }
.mini-days { gap: 2px; }
.mini-day { display: grid; place-items: center; min-height: 28px; border-radius: 4px; }
.mini-day .day-number { font-size: .75rem; font-weight: 540; }
.mini-day.has-events { background: #39351f; color: #ffe778; }
.mini-day[aria-current="date"], a.mini-day:hover { box-shadow: inset 0 0 0 1px var(--solar); }
.mini-day.cycle-start .day-number { color: var(--solar); font-weight: 750; }
.mini-day .day-count, .mini-month .day-count { display: none; }
.mini-month .special-days { margin-top: 7px; background: none; gap: 4px; padding-top: 5px; }
.mini-month .special-day { padding: 5px 6px; border-radius: 4px; }
.mini-month .special-day .day-number { font-size: .68rem; }
.mini-month .special-day.has-events { color: var(--solar); }
.mini-highlights, .cycle-highlights { display: grid; gap: 3px; padding-top: 7px; }
.mini-highlight { display: flex; gap: 6px; min-width: 0; padding: 3px 4px; border-radius: 4px; font-size: .7rem; color: var(--muted); }
.mini-highlight:hover { background: var(--raised); color: var(--white); }
.mini-highlight > span:first-child { color: var(--solar); font-variant-numeric: tabular-nums; }
.mini-highlight > span:last-child, .cycle-highlights > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.cycle-overview { padding: 0 16px 16px; }
.cycle-beginning {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #64551c;
  border-radius: 8px;
  background: #28291f;
  color: #ffe88a;
  font-size: .86rem;
}
.cycle-beginning:hover { border-color: var(--solar); }
.cycle-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cycle-year { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--night); }
.cycle-year[aria-current="true"], .cycle-year:hover { border-color: var(--solar); }
.cycle-year-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.cycle-year-head strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.cycle-year-head > span, .cycle-coverage { color: var(--mist); font-size: .71rem; }
.cycle-coverage { display: block; margin: 4px 0 9px; }
.cycle-months { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; }
.cycle-months span {
  display: grid;
  place-items: center;
  min-height: 16px;
  border-radius: 3px;
  background: var(--raised);
  color: var(--muted);
  font-size: .58rem;
  font-variant-numeric: tabular-nums;
}
.cycle-months .has-events { background: var(--solar); color: var(--night); }
.cycle-months .outside { background: none; color: #77869a; }
.cycle-highlights { color: var(--muted); font-size: .68rem; }

dialog {
  width: min(610px, calc(100% - 28px));
  max-height: calc(100svh - 30px);
  padding: 22px;
  overflow: auto;
  border: 1px solid var(--slate);
  border-radius: 13px;
  box-shadow: 0 20px 66px #020611a0;
  background: var(--panel);
  color: var(--white);
}
dialog::backdrop { background: #030811be; }
body:has(dialog[open]) { overflow: hidden; }
#search-dialog { width: min(680px, calc(100% - 28px)); }
.dialog-head { justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.dialog-head h2 { font-size: clamp(1.25rem, 4.5vw, 1.7rem); line-height: 1.15; letter-spacing: -.042em; }
.dialog-head p { color: var(--mist); font-size: .82rem; margin-top: 5px; }
.dialog-head .icon-button { flex: none; }
.dialog-actions { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
#day-dialog .dialog-actions { margin-top: 15px; }
.empty-state { padding: 14px 12px; border: 1px dashed var(--slate); border-radius: 8px; color: var(--mist); font-size: .87rem; }
.event-item { display: flex; justify-content: space-between; align-items: start; gap: 9px; padding: 12px 0; border-top: 1px solid var(--line); }
.event-item > div { min-width: 0; }
.event-item h3 { font-size: .96rem; overflow-wrap: anywhere; line-height: 1.38; }
.event-item p { margin-top: 5px; color: var(--muted); font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.event-meta, .event-links { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--mist); font-size: .73rem; line-height: 1.3; }
.event-meta { margin-bottom: 5px; }
.event-links { margin-top: 7px; }
.event-links span { padding: 4px 6px; border-radius: 4px; background: var(--raised); }
.event-edit { min-height: 33px; padding: 5px 7px; }
.event-editor { display: grid; gap: 13px; }
.event-editor label, .search-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: .81rem; font-weight: 650; }
.event-editor input, .event-editor select, .event-editor textarea, .search-form input { font-weight: 450; }
.date-fields, .link-fields, .search-form { display: grid; align-items: end; gap: 8px; }
.date-fields { grid-template-columns: minmax(51px, .62fr) minmax(104px, 1.5fr) minmax(63px, .78fr) minmax(80px, .95fr); }
.link-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.delete-button { color: var(--danger); margin-right: auto; }
.search-form { grid-template-columns: minmax(0, 1fr) 96px auto; }
.search-form input, .search-form button { min-height: 39px; }
.search-status { color: var(--mist); font-size: .8rem; line-height: 1.4; padding: 13px 0 8px; }
.search-result { display: grid; gap: 4px; padding: 10px 8px; border-top: 1px solid var(--line); }
.search-result:hover { background: var(--raised); }
.search-result strong { font-size: .87rem; overflow-wrap: anywhere; }
.search-result span { color: var(--mist); font-size: .76rem; }
.search-pages { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }

@media (max-width: 1080px) {
  .year-grid, .cycle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .header-inner, .calendar-main { width: calc(100% - 36px); }
  .calendar-main { padding-top: 25px; }
  .login-layout { grid-template-columns: 1fr; }
  .login-cover { min-height: 320px; padding: 26px; }
  .login-cover img { object-position: center 40%; }
  .login-cover h1 { font-size: clamp(3.25rem, 10vw, 5.4rem); }
  .login-panel { padding: 33px 25px 46px; border: 0; place-items: start center; }
  .login-content > .eclipse-mark { display: none; }
  .login-content h2 { margin-bottom: 20px; }
  .day-cell { padding: 8px 6px; }
  .preview-time { display: none; }
}
@media (max-width: 650px) {
  .heading-row { position: relative; flex-wrap: wrap; margin-bottom: 15px; }
  .calendar-toolbar { align-items: stretch; }
  .period-fields { width: 100%; }
  .period-field { gap: 5px; }
  .period-form { gap: 5px; }
  .period-header { padding: 16px 13px; }
  .weekday-long { display: none; }
  .weekday-short { display: inline; }
  .day-cell { min-height: 58px; }
  .day-preview { font-size: .63rem; }
  .year-grid, .cycle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 10px; gap: 8px; }
  .cycle-overview { padding-inline: 10px; }
  .cycle-overview .cycle-grid { padding-inline: 0; }
  .project-menu { position: static; }
}
@media (max-width: 460px) {
  .header-inner, .calendar-main { width: calc(100% - 24px); }
  .brand { font-size: .84rem; }
  .account > span { display: none; }
  .account .text-button { padding-inline: 3px; font-size: .76rem; }
  .page-actions > button, .project-menu > summary { min-height: 34px; padding-inline: 9px; font-size: .76rem; }
  .calendar-toolbar { gap: 8px; padding: 7px; }
  .view-switch a { padding-inline: 13px; }
  .period-field { font-size: .72rem; }
  .period-field input { width: 63px; }
  .period-field select { max-width: 112px; }
  .day-cell { padding: 7px 4px; }
  .day-preview { display: none; }
  .day-number { font-size: .8rem; }
  .day-count { min-width: 16px; min-height: 16px; padding-inline: 3px; font-size: .6rem; }
  .mini-month { padding: 7px; }
  .mini-month-head { flex-wrap: wrap; padding: 2px; }
  .mini-day { min-height: 25px; }
  .year-grid { grid-template-columns: 1fr; }
  .cycle-year { padding: 8px; }
  .cycle-months { gap: 1px; }
  .cycle-months span { font-size: .52rem; }
  dialog { padding: 15px; }
  .date-fields { grid-template-columns: minmax(54px, .6fr) minmax(115px, 1.4fr); }
  .link-fields { grid-template-columns: 1fr; }
  .search-form { grid-template-columns: minmax(0, 1fr) 80px; }
  .search-form button { grid-column: 2; padding-inline: 4px; font-size: .71rem; min-height: 31px; }
}