.timeline-filter {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 2px 0 12px;
}
.timeline-filter button {
  min-height: 34px; padding: 7px 5px !important; border-radius: 999px !important;
  color: #d8e8f7 !important; background: rgba(255,255,255,.08) !important;
  box-shadow: none !important; font-family: var(--font-cute); font-size: 12px; font-weight: 400;
}
.timeline-filter .active {
  color: #102033 !important; background: linear-gradient(180deg, #fff7df, #e6fbff) !important;
}
.timeline-list {
  position: relative; display: grid; gap: 10px; padding-left: 12px;
}
.timeline-list::before {
  content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 2px;
  border-radius: 999px; background: linear-gradient(var(--mint), var(--peach), var(--pink));
  opacity: .72;
}
.timeline-item {
  position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 10px;
  padding: 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
.timeline-item::before {
  content: ""; position: absolute; left: -14px; top: 23px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff8df; box-shadow: 0 0 16px rgba(255,176,95,.74);
}
.timeline-token {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px;
  color: #102033; background: linear-gradient(135deg, #fff6de, #dff8ff);
  font-family: var(--font-cute); font-size: 12px;
}
.timeline-copy b {
  display: block; color: #fff; font-family: var(--font-cute); font-size: 16px; font-weight: 400;
}
.timeline-copy span {
  display: block; margin: 3px 0 6px; color: #b9c8d8; font-size: 12px;
}
.timeline-copy p {
  color: #e6f1ff; font-family: var(--font-soft); font-size: 13px; line-height: 1.55;
}
.timeline-empty {
  padding: 14px; border: 1px dashed rgba(255,255,255,.18); border-radius: 8px;
  background: rgba(255,255,255,.05);
}
.timeline-empty b {
  display: block; color: #fff; font-family: var(--font-cute); font-size: 17px; font-weight: 400;
}
.timeline-empty span {
  display: block; margin-top: 4px; color: #cbd9e9; font-family: var(--font-soft); font-size: 13px; line-height: 1.55;
}
.weekly-panel {
  background:
    radial-gradient(circle at 15% 0, rgba(255,78,120,.17), transparent 32%),
    linear-gradient(145deg, rgba(10,25,43,.94), rgba(38,23,48,.84));
}
.weekly-card {
  min-height: 116px; padding: 15px; border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(99,230,184,.08));
}
.weekly-card b {
  display: block; color: #fff; font-family: var(--font-cute); font-size: 25px; line-height: 1.08; font-weight: 400;
}
.weekly-card p {
  margin-top: 8px; color: #d8e8f7; font-family: var(--font-soft); font-size: 14px; line-height: 1.6;
}
.weekly-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;
}
.weekly-chips span {
  padding: 8px 10px; border-radius: 999px; color: #102033;
  background: linear-gradient(180deg, #fff, #eaf7ff); font-family: var(--font-cute); font-size: 12px;
}
#weekly-share-button {
  min-height: 40px; width: 100%; border-radius: 8px; color: #fff;
  background: linear-gradient(135deg, #1f6cff, #ff4e78);
  font-family: var(--font-cute); font-weight: 400;
}