body {
  background: var(--black);
  color: var(--cream);
  font-family: 'DM Mono', monospace;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── Topbar ── */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: #0a0700;
  border-bottom: 2px solid var(--amber);
  position: sticky;
  top: 0;
  z-index: 100;
}
#back-btn {
  background: none;
  border: none;
  color: var(--amber);
  font-family: 'DM Mono', monospace;
  font-size: .85rem;
  cursor: pointer;
  padding: .25rem .5rem;
  text-decoration: none;
}
#topbar h1 {
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .06em;
  color: var(--amber-hi);
}
#add-fab {
  background: var(--amber);
  color: var(--black);
  border: none;
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

/* ── Login wall ── */
#login-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 60px);
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}
#login-wall h2 { font-family: 'Anton', sans-serif; font-size: 1.8rem; color: var(--amber-hi); }
#login-wall p  { color: #aaa; font-size: .9rem; line-height: 1.5; }
#login-btn {
  background: var(--amber);
  color: var(--black);
  border: 2px solid var(--cream);
  padding: .8rem 2rem;
  min-height: 44px;
  min-width: 44px;
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .05em;
  border-radius: 8px;
  cursor: pointer;
}

/* ── Error state ── */
.error-state {
  text-align: center;
  color: #ff6b6b;
  font-size: .85rem;
  padding: 2rem 1rem;
  line-height: 1.6;
  border: 1px dashed #ff6b6b44;
  border-radius: 6px;
  margin: 1rem;
}

/* ── Month nav ── */
#month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem .5rem;
}
#month-nav button {
  background: none;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 1.1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
}
#month-label {
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  letter-spacing: .05em;
  color: var(--cream);
}

/* ── Calendar grid ── */
#cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 .5rem .5rem;
}
.cal-dow {
  text-align: center;
  font-size: .65rem;
  color: #666;
  padding: .3rem 0;
  text-transform: uppercase;
}
.cal-day {
  position: relative;
  min-height: 2.6rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .25rem .15rem .2rem;
  cursor: pointer;
  transition: background .15s;
  gap: 2px;
}
.cal-day:hover { background: rgba(212,146,10,.08); }
.cal-day.today .cal-num {
  background: var(--amber);
  color: var(--black);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-day.other-month .cal-num { color: #444; }
.cal-num {
  font-size: .8rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-dots {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 2.2rem;
}
.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.dot-dota       { background: var(--amber); }
.dot-dota_klein { background: #e0a843; }
.dot-dota_gross { background: #ffc15e; }
.dot-fick       { background: #ff6b6b; }
.dot-bday       { background: #ff8cff; }
.dot-ausflug    { background: #6bd66b; }
.dot-bvb        { background: #ffe000; }
.dot-custom     { background: #6bcfff; }
.cal-day.has-bday { background: rgba(255,140,255,.05); }

/* ── Section headers ── */
.section-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1rem .5rem;
  font-family: 'Anton', sans-serif;
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--amber);
  border-top: 1px solid #1a1200;
  margin-top: .5rem;
  user-select: none;
}
.section-head .head-count {
  color: #666;
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  letter-spacing: .02em;
  font-weight: normal;
}
.section-head.toggleable {
  cursor: pointer;
}
.section-head .head-chevron {
  margin-left: auto;
  color: #666;
  transition: transform .2s;
  font-size: .8rem;
}
.section-head.collapsed .head-chevron { transform: rotate(-90deg); }

/* ── Event list ── */
#event-list, #past-list {
  padding: 0 .75rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
#past-list {
  padding-bottom: 6rem;
}
#past-wrap.collapsed #past-list { display: none; }
#event-list:last-child { padding-bottom: 6rem; }

/* ── Event card (new design) ── */
.ev-card {
  position: relative;
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: .9rem;
  background: linear-gradient(135deg, rgba(212,146,10,.08), rgba(10,7,0,.85));
  border: 1px solid rgba(212,146,10,.22);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: .75rem .85rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.ev-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(245,176,48,.06), transparent 60%);
  pointer-events: none;
}
.ev-card.type-dota       { border-left-color: var(--amber); }
.ev-card.type-dota_klein { border-left-color: #e0a843; }
.ev-card.type-dota_gross { border-left-color: #ffc15e; }
.ev-card.type-fick       { border-left-color: #ff6b6b; }
.ev-card.type-bday       { border-left-color: #ff8cff; }
.ev-card.type-ausflug    { border-left-color: #6bd66b; }
.ev-card.type-bvb        { border-left-color: #ffe000; }
.ev-card.type-custom     { border-left-color: #6bcfff; }

.ev-card.is-past {
  opacity: .55;
  filter: grayscale(.3);
}
.ev-card.is-today {
  border-color: var(--amber-hi);
  box-shadow: 0 0 0 1px rgba(245,176,48,.3), 0 4px 20px rgba(245,176,48,.12);
}
.ev-card.flash {
  animation: flashPulse .8s ease-out;
}
@keyframes flashPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,176,48,.6); }
  60%  { box-shadow: 0 0 0 8px rgba(245,176,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,176,48,0); }
}

/* Date block (left column) */
.ev-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .2rem .1rem;
  background: rgba(0,0,0,.35);
  border-radius: 6px;
  border: 1px solid rgba(212,146,10,.18);
  min-width: 3.2rem;
}
.ev-date-dow {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: .08em;
  color: var(--amber);
  text-transform: uppercase;
}
.ev-date-day {
  font-family: 'Anton', sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--cream);
  margin: .1rem 0;
}
.ev-date-mon {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: .08em;
  color: #888;
  text-transform: uppercase;
}
.ev-card.is-today .ev-date-dow { color: var(--amber-hi); }
.ev-card.is-today .ev-date-day { color: var(--amber-hi); }

/* Body (right column) */
.ev-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
.ev-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .4rem;
}
.ev-title {
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .03em;
  line-height: 1.15;
  color: var(--cream);
  word-break: break-word;
}
.ev-type-tag {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #aaa;
  margin-top: .15rem;
}
.ev-del {
  background: none;
  border: none;
  color: #555;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 .2rem;
  line-height: 1;
}
.ev-del:hover { color: #ff6b6b; }

.ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  margin-top: .35rem;
  font-size: .72rem;
  color: #9a8c6a;
}
.ev-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.ev-meta .meta-ico { opacity: .8; }

.ev-host {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .4rem;
  padding: .15rem .45rem .15rem .2rem;
  background: rgba(212,146,10,.12);
  border: 1px solid rgba(212,146,10,.3);
  border-radius: 99px;
  font-size: .65rem;
  color: var(--amber-hi);
  letter-spacing: .04em;
  width: fit-content;
}
.ev-host img {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  object-fit: cover;
}

/* ── RSVP row ── */
.ev-rsvp {
  display: flex;
  gap: .3rem;
  margin-top: .6rem;
  align-items: center;
}
.rsvp-btn {
  flex: 1;
  border: 1px solid #333;
  background: rgba(0,0,0,.3);
  color: #888;
  font-family: 'Anton', sans-serif;
  font-size: .75rem;
  letter-spacing: .04em;
  padding: .38rem .3rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
  min-width: 0;
}
.rsvp-btn:hover { border-color: #555; color: #ccc; }
.rsvp-btn.active-ja {
  border-color: #7bc97b;
  color: #0d1b0d;
  background: linear-gradient(180deg, #8fd68f, #6bb86b);
  box-shadow: 0 0 0 1px rgba(123,201,123,.3);
}
.rsvp-btn.active-vlt {
  border-color: var(--amber-hi);
  color: var(--black);
  background: linear-gradient(180deg, var(--amber-hi), var(--amber));
  box-shadow: 0 0 0 1px rgba(245,176,48,.3);
}
.rsvp-btn.active-nein {
  border-color: #666;
  color: #ccc;
  background: #2a2a2a;
}

/* ── RSVP tally (avatars) ── */
.rsvp-tally {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  margin-top: .55rem;
  font-size: .66rem;
  color: #666;
}
.rsvp-tally-group {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.rsvp-tally-label {
  font-family: 'DM Mono', monospace;
  letter-spacing: .04em;
}
.rsvp-tally-label.lbl-ja   { color: #7bc97b; }
.rsvp-tally-label.lbl-vlt  { color: var(--amber); }
.rsvp-tally-label.lbl-nein { color: #888; }
.rsvp-avatars {
  display: flex;
}
.rsvp-avatars img, .rsvp-avatars .avatar-placeholder {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #0a0700;
  margin-left: -.35rem;
  background: #1a1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  color: var(--amber);
  font-family: 'DM Mono', monospace;
}
.rsvp-avatars img:first-child,
.rsvp-avatars .avatar-placeholder:first-child { margin-left: 0; }

/* ── Birthday card ── */
.ev-card.type-bday {
  background: linear-gradient(135deg, rgba(255,140,255,.10), rgba(10,7,0,.85));
  border-color: rgba(255,140,255,.25);
}
.ev-card.type-bday .ev-date-dow { color: #ff8cff; }
.ev-card.type-bday .ev-date-block { border-color: rgba(255,140,255,.25); }
.bday-portrait {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .35rem;
}
.bday-portrait img {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff8cff;
}
.bday-portrait .bday-sub {
  font-size: .68rem;
  color: #c488c4;
  line-height: 1.3;
}
.bday-ack {
  margin-top: .55rem;
  padding: .3rem .6rem;
  background: rgba(255,140,255,.08);
  border: 1px solid rgba(255,140,255,.2);
  border-radius: 4px;
  font-size: .65rem;
  color: #c488c4;
  text-align: center;
  font-style: italic;
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  color: #666;
  font-size: .82rem;
  padding: 2.5rem 1rem;
  line-height: 1.7;
  border: 1px dashed #2a1e00;
  border-radius: 8px;
  margin: .5rem;
}

/* ── Add event sheet ── */
#add-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #0f0b02;
  border-top: 2px solid var(--amber);
  border-radius: 16px 16px 0 0;
  padding: 1.2rem 1rem 2rem;
  z-index: 200;
  transform: translateY(100%);
  transition: transform .3s ease;
  max-height: 92vh;
  overflow-y: auto;
}
#add-sheet.open { transform: translateY(0); }
#sheet-title {
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  color: var(--amber-hi);
  margin-bottom: 1rem;
  letter-spacing: .04em;
}
.field { margin-bottom: .75rem; }
.field label {
  display: block;
  font-size: .72rem;
  color: #888;
  margin-bottom: .3rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.field input, .field select {
  width: 100%;
  background: #1a1200;
  border: 1px solid #333;
  border-radius: 4px;
  color: var(--cream);
  font-family: 'DM Mono', monospace;
  font-size: .9rem;
  padding: .55rem .75rem;
  outline: none;
  -webkit-appearance: none;
}
.field input:focus, .field select:focus { border-color: var(--amber); }
.field select option { background: #1a1200; }
.sheet-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
#save-event {
  width: 100%;
  margin-top: .75rem;
  background: var(--amber);
  color: var(--black);
  border: 2px solid var(--cream);
  padding: .75rem;
  min-height: 44px;
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .05em;
  border-radius: 8px;
  cursor: pointer;
}
#sheet-close {
  float: right;
  background: none;
  border: none;
  color: #666;
  font-size: 1.3rem;
  cursor: pointer;
  margin-top: -.2rem;
}
#sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 199;
}
#sheet-overlay.open { display: block; }

/* ── Tiny screens ── */
@media (max-width: 360px) {
  .ev-card { grid-template-columns: 3.1rem 1fr; gap: .65rem; padding: .6rem .7rem; }
  .ev-date-day { font-size: 1.4rem; }
  .ev-title { font-size: .95rem; }
  .rsvp-btn { font-size: .68rem; padding: .35rem .2rem; }
}