body::before {
  content: "";
  position: fixed;
  inset: 18% 8% 8%;
  background: var(--calendar-logo) center / min(680px, 90%) auto no-repeat;
  opacity: .055;
  pointer-events: none;
}
.page-shell { position: relative; padding-top: 24px; }
.app-header, .section-bar, .month-controls, .view-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.app-header, .section-bar { justify-content: space-between; }
.app-header { margin-bottom: 26px; }
.brand { display: block; width: min(200px, 60vw); background: white; padding: 7px; border-radius: 9px; }
.brand img { display: block; width: 100%; height: auto; }
.tools { position: relative; z-index: 2; }
.tools summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--cyan); background: var(--panel); font-size: 23px; }
.tools summary::-webkit-details-marker { display: none; }
.tools-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 225px; padding: 8px; }
.tools-menu a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text); text-decoration: none; }
.tools-menu a:hover, .tools-menu a:focus-visible { background: var(--panel2); }
.view-nav { margin: 14px 0 18px; }
[aria-current="page"], [aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
h2 { margin: 0 0 12px; font-size: 1.25rem; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 12px; }
.weekday, .day { background: var(--panel); padding: 8px; }
.weekday { color: var(--muted); text-align: center; font-weight: 600; }
.day { min-height: 82px; }
.day.is-today { background: var(--panel2); color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.form-grid label { display: block; color: var(--muted); }
.form-grid label .form-control { margin-top: 4px; }
.wide { grid-column: 1 / -1; }
fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 9px; margin: 0; padding: 12px; }
.color-picker { max-width: 85px; height: 42px; }
.button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .day { min-height: 48px; }
  #liste { overflow-x: auto; }
  .weekday, .day { padding: 5px; }
}
.month-grid { position: relative; }
.month-grid::after { content: ""; position: absolute; inset: 40px 12px 12px; background: var(--calendar-logo) center / min(520px, 75%) auto no-repeat; opacity: .055; pointer-events: none; }

.calendar-event { display:block; margin-top:4px; padding-left:5px; border-left:3px solid var(--cyan); font-size:.75rem; overflow-wrap:anywhere; }

:root { --calendar-logo: url("alcondisapps-dark.svg?v=curves2"); }
:root[data-theme="light"] { --calendar-logo: url("alcondisapps-light.svg?v=curves2"); }
:root[data-theme="fancy"] { --calendar-logo: url("alcondisapps-fancy.svg?v=curves2"); }
.brand { background: transparent; padding: 0; }
.brand-mark { display: block; aspect-ratio: 97.148678 / 19.065481; background: var(--calendar-logo) center / contain no-repeat; }
.tools-menu .theme-picker { display: grid; padding: 8px 12px; }
html[data-theme="light"] .weekday, html[data-theme="light"] .day { background: var(--panel); }
html[data-theme="light"] .day.is-today { background: var(--panel2); }.ics-link { padding: 2px 6px; font-size: .72rem; white-space: nowrap; } #series-downloads { display:grid; gap:8px; padding-left:20px; }

#series-downloads { list-style: none; padding: 0; }
#series-downloads .ics-link {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 12px;
  font-size: var(--series-font-size, 15px);
  white-space: normal;
  overflow-wrap: anywhere;
}

.list-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; max-width:100%; }
.list-controls select { width: clamp(160px, 30vw, 460px); min-width:0; max-width:100%; }

button.calendar-event { width:100%; text-align:left; color:var(--text); background:var(--panel2); border:0; border-left:3px solid var(--cyan); padding:3px 5px; cursor:pointer; }
button.calendar-event:hover { text-decoration:underline; }
#event-details { width:min(640px, calc(100% - 2rem)); max-height:85vh; color:var(--text); overflow:auto; }
#event-details::backdrop { background:#0009; }
#event-fields dt { color:var(--muted); font-weight:600; }
#event-fields dd { margin:0 0 .7rem; overflow-wrap:anywhere; white-space:pre-wrap; }
.event-actions { display:flex; justify-content:flex-end; gap:12px; flex-wrap:nowrap; }

.header-actions { display:flex; align-items:center; gap:8px; }
#account-button { width:38px; height:38px; padding:0; }
#account-button.signed-in { color:var(--green); border-color:var(--green); }
#account-dialog { width:min(420px, calc(100% - 2rem)); color:var(--text); }
#account-dialog::backdrop { background:#0009; }
#account-form { display:grid; gap:12px; }
#account-form .form-control { margin-top:4px; }
#account-form[hidden], #admin-link[hidden] { display:none; }

.event-actions .event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}
.event-actions .event-icon[hidden] { display: none; }

.account-actions { display: flex; align-items: center; gap: 12px; }
.account-actions #account-logout[hidden] { display: none; }