/* ── Calendar page styles ─────────────────────────────────────────────────── */
/* Semantic colors for calendar entry types — fixed across ALL themes */
:root {
  --cal-bday: #ff6eb4;
  --cal-bday-deep: #db2777;
  --cal-bday-lo: rgba(255,110,180,0.08);
  --cal-bday-mid: rgba(255,110,180,0.25);
  --cal-bday-subtle: rgba(255,110,180,0.15);
  --cal-bday-glow: rgba(255,110,180,0.12);
  --cal-bday-grad: linear-gradient(135deg, #ff6eb4, #c084fc);
  --cal-event: #cbd5e1;
  --cal-event-deep: #94a3b8;
  --cal-event-light: #f1f5f9;
  --cal-debut: #22d3ee;
  --cal-debut-deep: #14b8a6;
}

/* ── Clock bar ── */
.cal-clockbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 6px; margin-bottom: 2px;
}
.cal-clock {
  display: flex; align-items: center; gap: 8px;
}
.cal-clock-label {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 7px; line-height: 1.6;
}
.cal-clock-time {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.15rem; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(135deg, var(--cal-bday), #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cal-clock-jst .cal-clock-time {
  background: linear-gradient(135deg, #c084fc, var(--cal-debut));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 480px) {
  .cal-clockbar { gap: 14px; }
  .cal-clock-time { font-size: 0.95rem; }
  .cal-clock-label { font-size: 0.6rem; padding: 2px 5px; }
}

/* ── Toast ── */
#cal-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--bg3); border: 1px solid var(--accent-mid);
  border-radius: 10px; padding: 10px 20px;
  font-size: 0.85rem; color: var(--text); z-index: 300;
  transition: transform 0.3s, opacity 0.3s;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  pointer-events: none; opacity: 0;
}
#cal-toast.show {
  transform: translateX(-50%) translateY(0);
  pointer-events: auto; opacity: 1;
}

/* ── Error Banner ── */
#cal-error-banner {
  max-width: 1100px; margin: 8px auto 0;
  padding: 12px 18px;
  background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.45);
  border-radius: 12px; color: #fecaca;
  font-size: 0.82rem; line-height: 1.5; display: none;
}
#cal-error-banner.show { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#cal-error-banner .err-msg { flex: 1; min-width: 200px; }
#cal-error-banner button {
  background: rgba(220,38,38,0.2); border: 1px solid rgba(220,38,38,0.6);
  color: #fff; border-radius: 8px; padding: 6px 14px;
  cursor: pointer; font-family: inherit; font-size: 0.75rem;
  font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
#cal-error-banner button:hover { background: rgba(220,38,38,0.35); }

/* ── Status Bar ── */
#cal-status-bar {
  text-align: center; font-size: 0.72rem; color: var(--muted);
  padding: 6px; letter-spacing: 0.08em;
  font-family: 'Quicksand', sans-serif;
}

/* ── Year Switcher ── */
.cal-year-switcher {
  display: flex; gap: 8px; justify-content: center;
  padding: 0 0 1rem; flex-wrap: wrap;
}
.cal-year-btn {
  padding: 6px 16px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer;
  font-family: 'Quicksand', sans-serif; font-size: 0.85rem; font-weight: 600;
  transition: all 0.2s; position: relative;
}
.cal-year-btn:hover { border-color: var(--accent2); color: var(--accent); }
.cal-year-btn.active {
  background: var(--btn-grad); border-color: transparent;
  color: #fff; box-shadow: 0 0 16px var(--btn-glow);
}
.cal-now-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--btn-grad); color: white;
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 5px; border-radius: 8px; text-transform: uppercase;
}

/* ── Filter Bar ── */
.cal-filter-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 0 0 0.75rem; flex-wrap: wrap;
}
.cal-filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-events-btn.active {
  background: rgba(203,213,225,0.12) !important;
  border-color: var(--cal-event) !important;
  color: var(--cal-event-light) !important;
  box-shadow: none !important;
}
.cal-search {
  font-family: 'Zen Maru Gothic', 'Quicksand', sans-serif; font-size: 0.85rem;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; padding: 0.45rem 1rem;
  color: var(--text); width: 200px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cal-search::placeholder { color: var(--muted); opacity: 0.5; }
.cal-search:focus { border-color: var(--cal-bday-mid); box-shadow: 0 0 0 3px var(--cal-bday-glow); }

/* ── View Tabs ── */
.cal-view-tabs {
  display: flex; gap: 0.25rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}

/* ── View Panes ── */
.cal-pane { display: none; }
.cal-pane.active { display: block; }

/* ── Archive Label ── */
.cal-archive-label {
  display: inline-block; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); padding: 6px 16px;
  background: var(--bg3); border-radius: 8px;
  border: 1px solid var(--border);
  font-family: 'Quicksand', sans-serif;
}

/* ── Next Up Banner ── */
.cal-next-up {
  position: relative; background: var(--bg3);
  border: 1px solid var(--cal-bday-subtle); border-radius: 14px;
  padding: 18px 24px; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 18px;
  overflow: hidden; cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}
.cal-next-up::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--cal-bday-glow), transparent);
  pointer-events: none;
}
.cal-next-up:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(255,110,180,0.15);
}
.cal-next-up.is-event-banner { border-color: rgba(203,213,225,0.25); }
.cal-next-up.is-event-banner::before {
  background: linear-gradient(135deg, rgba(203,213,225,0.05), transparent);
}
.nub-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-family: 'Quicksand', sans-serif;
  margin-bottom: 4px; font-weight: 700; text-align: center;
}
.nub-avatar {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid var(--cal-bday-subtle); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: var(--bg);
  box-shadow: 0 0 20px var(--cal-bday-glow);
}
.nub-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nub-info { flex: 1; min-width: 0; }
.nub-name {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nub-date {
  font-size: 0.78rem; color: var(--cal-bday); font-weight: 600; margin-top: 2px;
  font-family: 'Quicksand', sans-serif;
}
.nub-countdown { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.nub-countdown-unit {
  display: flex; flex-direction: column; align-items: center;
  background: var(--cal-bday-lo); border: 1px solid var(--cal-bday-mid);
  border-radius: 10px; padding: 8px 12px; min-width: 52px;
}
.nub-countdown-unit.gold-unit {
  background: rgba(203,213,225,0.06);
  border-color: rgba(203,213,225,0.2);
}
.nub-num {
  font-size: 1.35rem; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--cal-bday), #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-family: 'Quicksand', sans-serif;
}
.nub-num.gold-num {
  background: linear-gradient(135deg, #f1f5f9, #94a3b8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nub-lbl {
  font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px; font-weight: 700;
  font-family: 'Quicksand', sans-serif;
}
.nub-today { font-size: 1.3rem; font-weight: 700; }
.nub-arrow { font-size: 20px; color: var(--muted); flex-shrink: 0; transition: color 0.2s; }
.cal-next-up:hover .nub-arrow { color: var(--cal-bday); }

/* ── This Month Divider ── */
.cal-this-month-divider {
  text-align: center; margin-bottom: 1rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--cal-bday); text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  font-family: 'Quicksand', sans-serif;
}
.cal-this-month-divider::before, .cal-this-month-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--faint));
}
.cal-this-month-divider::after {
  background: linear-gradient(90deg, var(--faint), transparent);
}

/* ── This Month Panel ── */
.cal-this-month-panel {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-bottom: 1.75rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cal-this-month-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(255,110,180,0.1);
}
.cal-this-month-inner {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 360px;
}
.cal-this-month-cal {
  padding: 22px 24px;
  border-right: 1px solid var(--border);
}
.cal-this-month-cal-header {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.cal-this-month-cal-title {
  font-size: 1.6rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cal-this-month-cal-year { font-size: 0.82rem; color: var(--muted); font-family: 'Quicksand', sans-serif; }
.cal-this-month-cal-count {
  margin-left: auto; font-size: 0.72rem;
  color: var(--accent); background: var(--accent-lo);
  border: 1px solid var(--accent-mid);
  padding: 2px 10px; border-radius: 10px;
  font-family: 'Quicksand', sans-serif;
}
.cal-this-month-list {
  padding: 22px; overflow-y: auto; max-height: 500px;
  display: flex; flex-direction: column; gap: 8px;
}
.cal-this-month-list-header {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px; flex-shrink: 0;
  font-family: 'Quicksand', sans-serif;
}

/* ── Entry Row Item (shared across views) ── */
.bday-row-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; background: var(--bg3);
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; transition: all 0.2s; font-size: 0.85rem;
}
.bday-row-item:hover { border-color: rgba(255,110,180,0.35); background: var(--bg4); }
.bday-row-item.is-event { background: rgba(203,213,225,0.03); border-color: rgba(203,213,225,0.12); }
.bday-row-item.is-event:hover { border-color: rgba(203,213,225,0.35); }
.bday-row-item.is-debut { background: rgba(34,211,238,0.04); border-color: rgba(34,211,238,0.15); }
.bday-row-item.is-debut:hover { border-color: rgba(34,211,238,0.4); }
.bday-row-item.is-both { background: linear-gradient(135deg, rgba(255,110,180,0.05), rgba(34,211,238,0.05)); border-color: rgba(160,200,230,0.2); }
.bday-row-item.is-both:hover { border-color: rgba(160,200,230,0.5); }
.bday-day-badge {
  flex-shrink: 0; min-width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700;
  background: var(--cal-bday-grad); color: white;
  font-family: 'Quicksand', sans-serif;
}
.bday-day-badge.gold { background: linear-gradient(135deg, #334155, #94a3b8); color: #f1f5f9; }
.bday-day-badge.cyan { background: linear-gradient(135deg, var(--cal-debut-deep), var(--cal-debut)); color: #fff; }
.bday-day-badge.pink-cyan { background: linear-gradient(135deg, var(--cal-bday), var(--cal-debut)); color: #fff; }
.bday-avatar {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--cal-bday-subtle); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--bg);
}
.bday-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bday-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.bday-name {
  font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--text); min-width: 0;
  font-size: 0.85rem;
}
.bday-name.both-name {
  background: linear-gradient(90deg, var(--cal-bday), var(--cal-debut));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
}
.bday-name.debut-name { color: #a8eefc; }
.bday-name.event-name { color: var(--cal-event-light); }
.bday-gen {
  font-size: 0.72rem; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
  font-family: 'Quicksand', sans-serif;
}
.bday-countdown {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700;
  color: var(--cal-bday); white-space: nowrap;
  font-family: 'Quicksand', sans-serif;
}
.bday-countdown.gold { color: var(--cal-event); }
.bday-countdown.teal { color: var(--cal-debut-deep); }
.bday-countdown.cyan { color: var(--cal-debut); }
.bday-countdown.past { color: var(--muted); font-weight: 400; }
.bday-countdown.both {
  background: linear-gradient(90deg, var(--cal-bday), var(--cal-debut)) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Month Grid (12 months) ── */
.cal-months-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px; padding-bottom: 60px;
}
.cal-month-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cal-month-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(255,110,180,0.1);
}
.cal-month-card-header {
  padding: 13px 17px;
  background: var(--faint);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.cal-month-card-name {
  font-size: 1rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cal-month-card-count {
  font-size: 0.78rem; font-weight: 700;
  color: var(--accent); background: var(--accent-lo);
  border: 1px solid var(--accent-mid);
  padding: 2px 10px; border-radius: 10px;
  font-family: 'Quicksand', sans-serif;
}
.cal-month-card-cal { padding: 11px; }
.cal-month-entries {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 10px 10px; max-height: 240px; overflow-y: auto;
}

/* ── Mini Calendar ── */
.mini-cal { width: 100%; }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mini-cal-grid.large-grid { gap: 6px; }
.mini-cal-day-label {
  text-align: center; font-size: 0.55rem; color: var(--muted);
  padding: 3px 2px 5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; font-family: 'Quicksand', sans-serif;
}
.mini-cal-cell {
  text-align: center; font-size: 0.78rem; padding: 5px 2px; border-radius: 6px;
  cursor: default; position: relative; color: var(--muted);
  min-height: 30px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
  transition: all 0.2s; font-family: 'Quicksand', sans-serif; font-weight: 600;
}
.mini-cal-cell.large { font-size: 0.85rem; min-height: 38px; }
.mini-cal-cell.has-birthday {
  background: linear-gradient(135deg, rgba(255,110,180,0.85), rgba(192,132,252,0.75));
  border: 1px solid rgba(255,110,180,0.9); color: #fff; font-weight: 700;
  cursor: pointer; box-shadow: 0 0 8px rgba(255,110,180,0.4);
}
.mini-cal-cell.has-birthday:hover { transform: scale(1.12); z-index: 2; box-shadow: 0 0 16px rgba(255,110,180,0.65); }
.mini-cal-cell.has-event {
  color: #0f172a; background: linear-gradient(135deg, rgba(241,245,249,0.9), rgba(203,213,225,0.8));
  font-weight: 700; cursor: pointer; border: 1px solid rgba(241,245,249,0.95);
  box-shadow: 0 0 8px rgba(203,213,225,0.3);
}
.mini-cal-cell.has-event:hover { transform: scale(1.12); z-index: 2; box-shadow: 0 0 14px rgba(203,213,225,0.5); }
.mini-cal-cell.has-birthday.has-event {
  background: linear-gradient(135deg, rgba(255,110,180,0.85), rgba(192,132,252,0.75));
  border: 2px solid rgba(241,245,249,0.9); color: #fff;
}
.mini-cal-cell.has-debut {
  background: linear-gradient(135deg, rgba(34,211,238,0.85), rgba(20,184,166,0.75));
  border: 1px solid rgba(34,211,238,0.9); color: #fff; font-weight: 700;
  cursor: pointer; box-shadow: 0 0 8px rgba(34,211,238,0.4);
}
.mini-cal-cell.has-debut:hover { transform: scale(1.12); z-index: 2; box-shadow: 0 0 16px rgba(34,211,238,0.65); }
.mini-cal-cell.has-birthday.has-debut {
  background: linear-gradient(135deg, rgba(255,110,180,0.85) 0%, rgba(200,100,220,0.7) 50%, rgba(34,211,238,0.85) 100%);
  border: 1px solid rgba(200,160,240,0.9); color: #fff;
}
.mini-cal-cell.has-event.has-debut {
  background: linear-gradient(135deg, rgba(34,211,238,0.85), rgba(20,184,166,0.75));
  border: 2px solid rgba(241,245,249,0.9); color: #fff;
}
.mini-cal-cell.today { outline: 2px solid var(--cal-bday); outline-offset: -1px; font-weight: 700; }
.mini-cal-cell.today:not(.has-birthday):not(.has-event):not(.has-debut) { color: var(--text); }
.mini-cal-cell .today-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cal-bday); margin-top: 2px; flex-shrink: 0;
}

/* ── Timeline ── */
.cal-timeline-month { margin-bottom: 36px; }
.cal-timeline-month-title {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.cal-timeline-month-title::before {
  content: ''; width: 5px; height: 22px; border-radius: 2px;
  background: var(--cal-bday-grad); display: inline-block;
}
.cal-timeline-scroll {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px;
}
.cal-timeline-card {
  flex: 0 0 auto; width: 175px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 13px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cal-timeline-card:hover {
  border-color: rgba(255,110,180,0.4); transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255,110,180,0.12);
}
.cal-timeline-card.event-card { border-color: rgba(203,213,225,0.2); }
.cal-timeline-card.event-card:hover { border-color: var(--cal-event); box-shadow: 0 8px 24px rgba(203,213,225,0.15); }
.cal-timeline-card.both-card { border-color: rgba(160,200,230,0.25); }
.cal-timeline-card.both-card:hover { border-color: rgba(160,200,230,0.6); }
.cal-timeline-card.debut-card { border-color: rgba(34,211,238,0.2); }
.cal-timeline-card.debut-card:hover { border-color: var(--cal-debut); box-shadow: 0 0 12px rgba(34,211,238,0.2); }
.tl-date-circle {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 10px;
  background: var(--cal-bday-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700; color: white;
  font-family: 'Quicksand', sans-serif;
  box-shadow: 0 0 20px rgba(255,110,180,0.35);
}
.cal-timeline-card.event-card .tl-date-circle { background: linear-gradient(135deg, #334155, #94a3b8); box-shadow: 0 0 20px rgba(203,213,225,0.2); }
.cal-timeline-card.both-card .tl-date-circle { background: linear-gradient(135deg, var(--cal-bday), var(--cal-debut)); box-shadow: 0 0 20px rgba(160,200,230,0.3); }
.cal-timeline-card.debut-card .tl-date-circle { background: linear-gradient(135deg, var(--cal-debut-deep), var(--cal-debut)); box-shadow: 0 0 20px rgba(34,211,238,0.3); }
.tl-avatar {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 8px;
  border: 2px solid var(--cal-bday-subtle); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: var(--bg3);
}
.tl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tl-name {
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 5px;
}
.tl-name.both-name, .cal-timeline-card.both-card .tl-name {
  background: linear-gradient(90deg, var(--cal-bday), var(--cal-debut));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tl-gen-badge {
  display: inline-block; font-size: 0.72rem; padding: 3px 8px; border-radius: 8px;
  background: var(--cal-bday-lo); color: var(--cal-bday); border: 1px solid var(--cal-bday-mid);
  letter-spacing: 0.04em; font-family: 'Quicksand', sans-serif;
}
.cal-timeline-card.event-card .tl-gen-badge { background: rgba(203,213,225,0.08); color: var(--cal-event); border-color: rgba(203,213,225,0.2); }
.cal-timeline-card.both-card .tl-gen-badge { background: linear-gradient(135deg, rgba(255,110,180,0.1), rgba(34,211,238,0.1)); color: var(--cal-debut); border-color: rgba(160,200,230,0.2); }
.cal-timeline-card.debut-card .tl-gen-badge { background: rgba(34,211,238,0.1); color: var(--cal-debut); border-color: rgba(34,211,238,0.2); }

/* ── Upcoming ── */
.cal-upcoming-next {
  background: var(--bg2); border: 1px solid var(--cal-bday-subtle);
  border-radius: 20px; padding: 28px; margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(255,110,180,0.08);
  display: flex; align-items: center; gap: 28px;
  flex-wrap: wrap; justify-content: center;
}
.cal-upcoming-avatar {
  width: 120px; height: 120px; border-radius: 50%;
  border: 3px solid var(--cal-bday); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; background: var(--bg3);
  box-shadow: 0 0 30px rgba(255,110,180,0.35);
}
.cal-upcoming-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cal-upcoming-info { text-align: center; }
.cal-upcoming-label {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px; font-family: 'Quicksand', sans-serif;
}
.cal-upcoming-name { font-size: clamp(20px, 5vw, 32px); font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cal-upcoming-date { font-size: clamp(14px, 3vw, 19px); color: var(--cal-bday); margin-bottom: 12px; font-family: 'Quicksand', sans-serif; font-weight: 600; }
.cal-upcoming-countdown { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.countdown-unit { text-align: center; }
.countdown-num {
  font-size: clamp(40px, 10vw, 72px); font-weight: 700;
  background: linear-gradient(160deg, var(--cal-bday) 0%, #c084fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; display: block; font-family: 'Quicksand', sans-serif;
}
.countdown-lbl {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; font-family: 'Quicksand', sans-serif;
}
.cal-today-badge { font-size: 1.5rem; font-weight: 700; color: var(--cal-bday); letter-spacing: 0.1em; }
.cal-upcoming-list { display: flex; flex-direction: column; gap: 10px; }
.cal-upcoming-item {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
  content-visibility: auto; contain-intrinsic-size: 0 68px;
}
.cal-upcoming-item:hover { border-color: rgba(255,110,180,0.35); background: var(--bg3); }
.cal-upcoming-item.event-item { border-color: rgba(203,213,225,0.15); }
.cal-upcoming-item.event-item:hover { border-color: var(--cal-event); }
.cal-upcoming-item.both-item { border-color: rgba(160,200,230,0.2); }
.cal-upcoming-item.both-item:hover { border-color: rgba(160,200,230,0.5); }
.cal-upcoming-item.debut-item { border-color: rgba(34,211,238,0.15); }
.cal-upcoming-item.debut-item:hover { border-color: var(--cal-debut); }
.up-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--cal-bday-subtle); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: var(--bg3); flex-shrink: 0;
}
.up-avatar img { width: 100%; height: 100%; object-fit: cover; }
.up-info { flex: 1; min-width: 0; }
.up-name { font-size: 1rem; font-weight: 600; color: var(--text); }
.up-sub { font-size: 0.82rem; color: var(--muted); margin-top: 2px; font-family: 'Quicksand', sans-serif; }
.up-time { font-size: 1rem; color: var(--cal-bday); font-weight: 600; white-space: nowrap; font-family: 'Quicksand', sans-serif; }
.up-time.gold { color: var(--cal-event); }
.up-time.teal { color: var(--cal-debut-deep); }
.up-time.cyan { color: var(--cal-debut); }
.up-time.muted { color: var(--muted); }

/* ── Weekly ── */
.cal-week-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 18px;
}
.cal-week-nav-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); border-radius: 8px; padding: 8px 18px;
  cursor: pointer; font-family: inherit; font-size: 0.92rem;
  transition: all 0.2s;
}
.cal-week-nav-btn:hover { border-color: var(--cal-bday-mid); color: var(--cal-bday); }
.cal-week-range {
  font-size: clamp(14px, 3vw, 19px); color: var(--text); font-weight: 600;
  min-width: min(260px, 40vw); text-align: center;
}
.cal-week-grid-scroll { overflow-x: auto; padding-bottom: 8px; }
.cal-week-grid {
  display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px; min-width: 700px;
}
.cal-week-day-col {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 10px; min-height: 200px; transition: border-color 0.2s;
}
.cal-week-day-col.today-col { border-color: var(--cal-bday); box-shadow: 0 0 14px var(--cal-bday-glow); }
.cal-week-day-header {
  font-size: 0.92rem; text-align: center; margin-bottom: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.cal-week-day-name {
  color: var(--muted); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.08em; display: block; font-family: 'Quicksand', sans-serif;
}
.cal-week-day-num { font-size: 1.5rem; font-weight: 700; color: var(--text); display: block; line-height: 1.2; }
.cal-week-day-col.today-col .cal-week-day-num { color: var(--cal-bday); }
.cal-week-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 8px; margin-bottom: 5px;
  cursor: pointer; background: var(--faint);
  border: 1px solid var(--cal-bday-subtle); transition: all 0.2s;
}
.cal-week-chip:hover { background: var(--cal-bday-lo); }
.cal-week-chip.event-chip { background: rgba(203,213,225,0.05); border-color: rgba(203,213,225,0.15); }
.cal-week-chip.event-chip:hover { background: rgba(203,213,225,0.12); }
.cal-week-chip.both-chip { background: linear-gradient(135deg, rgba(255,110,180,0.08), rgba(34,211,238,0.08)); border-color: rgba(160,200,230,0.2); }
.cal-week-chip.debut-chip { background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.15); }
.chip-avatar {
  width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--bg3); flex-shrink: 0;
}
.chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chip-name {
  font-size: 0.82rem; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.chip-name.gold { color: var(--cal-event-light); }
.chip-name.both {
  background: linear-gradient(90deg, var(--cal-bday), var(--cal-debut));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.chip-name.cyan { color: var(--cal-debut); }

/* ── Detail Overlay ── */
#detail-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.85); display: flex;
  align-items: center; justify-content: center; padding: 20px;
  visibility: hidden; opacity: 0; transition: opacity 0.18s, visibility 0.18s;
}
#detail-overlay.open { visibility: visible; opacity: 1; }
#detail-panel {
  background: var(--bg2); border: 1px solid var(--cal-bday-subtle);
  border-radius: 20px; max-width: 580px; width: 100%;
  position: relative; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  animation: calDetailIn 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes calDetailIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#detail-panel.has-fullimg {
  max-width: min(1020px, 95vw); height: 92vh;
  display: flex; flex-direction: row; align-items: flex-start;
}
.detail-fullimg-side {
  width: clamp(100px, 45vw, 480px); flex-shrink: 0;
  position: relative; overflow: hidden; border-radius: 20px 0 0 20px;
  background: var(--bg); align-self: stretch;
}
.detail-fullimg-side img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
}
#detail-content-wrap {
  padding: 36px 32px 32px; flex: 1; min-width: 0;
  overflow-y: auto; max-height: 92vh; position: relative; z-index: 1;
}
#detail-panel:not(.has-fullimg) #detail-content-wrap { padding: 40px 36px 36px; }
.cal-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted); border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: all 0.2s; z-index: 10;
}
.cal-modal-close:hover { border-color: var(--cal-bday); color: var(--cal-bday); background: var(--faint); }
.cal-back-btn { right: auto; left: 16px; }
.detail-avatar {
  width: 110px; height: 110px; border-radius: 50%;
  margin: 0 auto 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 50px; background: var(--bg3);
  box-shadow: 0 0 0 3px var(--cal-bday-subtle), 0 0 0 7px var(--cal-bday-glow), 0 12px 36px rgba(0,0,0,0.55);
}
.detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-avatar.event-avatar {
  border-radius: 18px; width: 100%; height: 160px; font-size: 62px;
  box-shadow: 0 0 0 2px rgba(203,213,225,0.35), 0 12px 36px rgba(0,0,0,0.55);
}
.detail-type-badge {
  display: inline-block; font-size: 0.62rem; padding: 4px 12px; border-radius: 20px;
  background: var(--cal-bday-lo); color: var(--cal-bday);
  border: 1px solid var(--cal-bday-subtle);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 8px; font-weight: 700;
  font-family: 'Quicksand', sans-serif;
}
.detail-type-badge.event { background: rgba(203,213,225,0.08); color: var(--cal-event); border-color: rgba(203,213,225,0.2); }
.detail-type-badge.debut { background: rgba(34,211,238,0.08); color: var(--cal-debut); border-color: rgba(34,211,238,0.2); }
.detail-name {
  font-size: 1.6rem; font-weight: 700; color: var(--text);
  margin-bottom: 3px; text-align: center; letter-spacing: -0.02em;
}
.detail-gen {
  font-size: 0.78rem; color: var(--muted); text-align: center;
  margin-bottom: 18px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: 'Quicksand', sans-serif;
}
.detail-info-section {
  background: rgba(0,0,0,0.15); border: 1px solid var(--faint);
  border-radius: 14px; overflow: hidden; margin-bottom: 14px;
}
.detail-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px; font-size: 0.88rem;
  border-bottom: 1px solid var(--faint);
}
.detail-info-row:last-of-type { border-bottom: none; }
.detail-info-row:hover { background: var(--faint); }
.detail-info-label {
  color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700;
  font-family: 'Quicksand', sans-serif;
}
.detail-info-value { color: var(--text); font-weight: 600; font-size: 0.92rem; }
.detail-countdown {
  margin-top: 0; text-align: center; padding: 20px 16px 18px;
  background: var(--faint); border-radius: 14px;
  border: 1px solid var(--cal-bday-subtle);
  position: relative; overflow: hidden; flex: 1;
}
.detail-countdown-label {
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; font-weight: 700;
  font-family: 'Quicksand', sans-serif;
}
.detail-countdown-nums { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.detail-countdown .countdown-unit {
  text-align: center; background: rgba(0,0,0,0.2);
  border: 1px solid var(--faint); border-radius: 12px;
  padding: 10px 12px; min-width: 52px;
}
.detail-countdown .countdown-num {
  font-size: clamp(30px, 6vw, 52px); font-weight: 700;
  background: linear-gradient(160deg, var(--cal-bday) 0%, #c084fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; display: block; font-family: 'Quicksand', sans-serif;
}
.detail-countdown .countdown-lbl {
  font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-top: 4px; display: block;
  font-family: 'Quicksand', sans-serif;
}

/* ── Day Overlay ── */
#day-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(0,0,0,0.88); display: flex;
  align-items: center; justify-content: center; padding: 20px;
  visibility: hidden; opacity: 0; transition: opacity 0.15s, visibility 0.15s;
}
#day-overlay.open { visibility: visible; opacity: 1; }
#day-panel {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 32px 30px 28px;
  width: 100%; max-width: 600px; max-height: 88vh;
  overflow-y: auto; position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.day-modal-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; padding-right: 40px;
}
.day-modal-title {
  font-size: 1.4rem; font-weight: 700;
  background: linear-gradient(135deg, var(--cal-bday), #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.day-modal-count {
  font-size: 0.78rem; font-weight: 700;
  color: var(--cal-bday); background: var(--cal-bday-lo);
  border: 1px solid var(--cal-bday-mid);
  padding: 3px 12px; border-radius: 10px;
  font-family: 'Quicksand', sans-serif;
}
.day-modal-list { display: flex; flex-direction: column; gap: 10px; }
.day-modal-entry {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all 0.2s;
}
.day-modal-entry:hover {
  border-color: rgba(255,110,180,0.4); background: var(--bg4);
  transform: translateX(3px);
}
.day-modal-entry.is-event { border-color: rgba(203,213,225,0.15); }
.day-modal-entry.is-event:hover { border-color: var(--cal-event); }
.day-modal-avatar {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; border: 2px solid var(--cal-bday-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--bg);
}
.day-modal-entry.is-event .day-modal-avatar { border-color: rgba(203,213,225,0.3); }
.day-modal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.day-modal-info { flex: 1; min-width: 0; }
.day-modal-name {
  font-size: 0.92rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-modal-entry.is-event .day-modal-name { color: var(--cal-event-light); }
.day-modal-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; font-family: 'Quicksand', sans-serif; }
.day-modal-type {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px; flex-shrink: 0;
  font-family: 'Quicksand', sans-serif;
}
.day-modal-type.birthday { background: rgba(255,110,180,0.12); color: var(--cal-bday); border: 1px solid rgba(255,110,180,0.25); }
.day-modal-type.debut { background: rgba(34,211,238,0.12); color: var(--cal-debut); border: 1px solid rgba(34,211,238,0.25); }
.day-modal-type.event { background: rgba(203,213,225,0.08); color: var(--cal-event); border: 1px solid rgba(203,213,225,0.2); }
.day-modal-arrow { font-size: 0.78rem; color: var(--muted); flex-shrink: 0; }

/* ── Misc ── */
.cal-empty-state {
  text-align: center; padding: 60px 20px; color: var(--muted);
  font-size: 0.88rem; font-family: 'Quicksand', sans-serif;
}
.cal-empty-state .emoji { font-size: 40px; margin-bottom: 12px; display: block; }
.grad-circle {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cal-bday-grad); font-size: inherit;
}
._grad-both {
  background: linear-gradient(90deg, var(--cal-bday), var(--cal-debut));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: inline-block;
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .cal-this-month-inner { grid-template-columns: 1fr; }
  .cal-this-month-cal { border-right: none; border-bottom: 1px solid var(--border); }
}
@media (max-width: 768px) {
  .cal-filter-bar { flex-direction: column; align-items: stretch; }
  .cal-search { width: 100%; }
  .nub-countdown { gap: 6px; }
  .nub-countdown-unit { padding: 6px 8px; min-width: 42px; }
  .nub-num { font-size: 1.1rem; }
  .cal-next-up { gap: 12px; padding: 14px 16px; }
  .cal-upcoming-avatar { width: 88px; height: 88px; font-size: 36px; }
  .cal-timeline-card { width: 150px; }
  .cal-months-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .cal-week-range { min-width: 0; }
}
@media (max-width: 540px) {
  .cal-months-grid { grid-template-columns: 1fr; gap: 12px; }
  .cal-timeline-card { width: 135px; padding: 12px 10px; }
  .tl-avatar { width: 52px; height: 52px; font-size: 24px; }
  .tl-date-circle { width: 42px; height: 42px; font-size: 1rem; }
  .cal-upcoming-next { padding: 18px 14px; gap: 14px; }
  .cal-upcoming-avatar { width: 70px; height: 70px; font-size: 28px; }
  .cal-upcoming-item { padding: 10px 12px; gap: 10px; }
  .up-name { font-size: 0.88rem; }
  .up-avatar { width: 38px; height: 38px; font-size: 18px; }
  .cal-week-day-col { padding: 10px 7px; min-height: 150px; }
  .cal-week-day-num { font-size: 1.2rem; }
  .cal-week-range { font-size: 0.88rem; }
  .cal-week-nav-btn { padding: 6px 12px; font-size: 0.82rem; }
  #detail-overlay { padding: 8px; }
  #detail-panel { border-radius: 14px; }
  #detail-panel.has-fullimg { max-width: 100%; }
  .detail-fullimg-side { border-radius: 14px 0 0 14px; }
  #detail-content-wrap { padding: 16px 12px; }
  .detail-avatar { width: 80px; height: 80px; font-size: 32px; }
  .detail-name { font-size: 1.2rem; }
  .detail-gen { font-size: 0.72rem; margin-bottom: 10px; }
  .detail-info-row { font-size: 0.78rem; padding: 7px 0; }
  .detail-countdown { padding: 10px; margin-top: 10px; }
  .detail-countdown .countdown-num { font-size: 2rem; }
  #day-panel { padding: 18px 14px 16px; border-radius: 14px; }
  .day-modal-title { font-size: 1.1rem; }
  .day-modal-entry { padding: 10px 12px; gap: 10px; }
  .day-modal-avatar { width: 38px; height: 38px; font-size: 16px; }
  .day-modal-name { font-size: 0.82rem; }
  #cal-status-bar { font-size: 0.65rem; }
}