#page-calendar-app {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: var(--global-system-safe-bottom);
  --ui-icon-stroke: 1.4;
  --calendar-bg: var(--ui-surface);
  --calendar-ink: var(--ui-text);
  --calendar-muted: var(--ui-muted);
  --calendar-faint: var(--ui-surface-secondary);
  --calendar-subtle: var(--ui-line);
  --calendar-accent: var(--theme-color);
  --calendar-today: var(--ui-danger);
  --calendar-page-x: clamp(18px, 5.6vw, 26px);
  --calendar-top: clamp(16px, 2.8dvh, 24px);
  --calendar-space: clamp(16px, 2.5dvh, 24px);
  --calendar-content-start: 16px;
  --calendar-radius: 24px;
  --calendar-pill: 999px;
  --calendar-title-en-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --calendar-title-weight: 400;
  --calendar-body-size: 13px;
  --calendar-caption-size: 10px;
  --calendar-day-size: 14px;
  --calendar-icon-size: 19px;
  --calendar-icon-stroke: var(--ui-icon-stroke);
  --calendar-dock-height: 58px;
  --calendar-dock-gap: 4px;
  --calendar-dock-label-size: 10px;
  --calendar-selection-fill: var(--calendar-accent);
  --calendar-selection-ink: var(--theme-color-contrast);
  --schedule-day-content-height: 44px;
  --schedule-shell-inset: 15px;
  --schedule-highlight-inset: 20px;
  --schedule-shell-height: calc(var(--schedule-day-content-height) + var(--schedule-shell-inset) + var(--schedule-shell-inset));
  --schedule-highlight-height: calc(var(--schedule-day-content-height) + var(--schedule-highlight-inset) + var(--schedule-highlight-inset));
  --schedule-highlight-radius: 12px;
  --schedule-selection-fill: var(--calendar-bg);
  --schedule-selection-ink: var(--calendar-ink);
  --timeline-node-size: 30px;
  --timeline-track-width: 3px;
  --timeline-axis-space: 46px;
  --timeline-axis-gap: 8px;
  --health-profile-avatar-size: 64px;
  --health-stat-art-family: "Bodoni Moda", serif;
  --health-column-gap: 8px;
  --health-flow-gap: clamp(20px, 3.2dvh, 28px);
  --health-row-one-height: 128px;
  --health-row-two-height: 108px;
  --calendar-motion: 260ms;
  position: relative;
  overflow: hidden;
  background: var(--calendar-bg);
  color: var(--calendar-ink);
}

#qwq-calendar-root { width: 100%; height: 100%; min-height: 0; }

/* Calendar App：纯白、高留白；禁止渐变、阴影、描边与磨砂。 */

    .calendar-app {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      background: var(--calendar-bg);
      isolation: isolate;
    }

    .calendar-nav {
      position: relative;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--calendar-space);
      min-height: 54px;
      padding: calc(var(--calendar-top) + var(--safe-top)) var(--calendar-page-x) 8px;
      background: var(--calendar-bg);
    }

    .calendar-nav-left,
    .calendar-nav-actions {
      display: flex;
      align-items: center;
    }
    .calendar-nav-left { gap: 11px; min-width: 0; }
    .calendar-return { flex: 0 0 auto; }
    .calendar-nav-actions { gap: 3px; }

    .calendar-icon-button {
      appearance: none;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 0;
      border-radius: var(--calendar-pill);
      display: grid;
      place-items: center;
      color: var(--calendar-ink);
      background: transparent;
      cursor: pointer;
      touch-action: manipulation;
    }
    .calendar-icon-button:active { background: var(--calendar-faint); }
    .calendar-icon-button[hidden] { display: none; }
    .calendar-icon-button .lucide {
      width: var(--calendar-icon-size);
      height: var(--calendar-icon-size);
      stroke-width: var(--calendar-icon-stroke);
    }
    .calendar-return.calendar-icon-button { width: 27px; }

    .calendar-brand {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      white-space: nowrap;
    }
    .calendar-brand-name {
      display: block;
      margin: 0;
      padding: 0;
      color: var(--calendar-ink);
      white-space: nowrap;
    }

    .calendar-body {
      position: absolute;
      inset: calc(70px + var(--safe-top)) 0 0;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0 var(--calendar-page-x) calc(var(--calendar-dock-height) + var(--safe-bottom) + 42px);
      scrollbar-width: none;
      overscroll-behavior-y: contain;
      -webkit-overflow-scrolling: touch;
    }
    .calendar-body::-webkit-scrollbar { display: none; }

    .calendar-view { display: none; padding-top: var(--calendar-content-start); animation: calendar-enter var(--calendar-motion) ease both; }
    .calendar-view.is-active { display: block; }
    @keyframes calendar-enter {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .calendar-view { animation: none; }
    }

    .month-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .month-label {
      font-size: 20px;
      font-weight: 650;
      line-height: 1;
      letter-spacing: -.035em;
    }
    .month-year {
      appearance: none;
      padding: 6px 0 6px 12px;
      border: 0;
      color: var(--calendar-ink);
      background: transparent;
      font-family: var(--calendar-title-en-family);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: .1em;
      cursor: pointer;
    }

    .month-surface { position: relative; }
    .month-surface.is-next { animation: month-in-next var(--calendar-motion) cubic-bezier(.22,.72,.2,1) both; }
    .month-surface.is-prev { animation: month-in-prev var(--calendar-motion) cubic-bezier(.22,.72,.2,1) both; }
    @keyframes month-in-next {
      from { opacity: .25; transform: translateX(38px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes month-in-prev {
      from { opacity: .25; transform: translateX(-38px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .weekday-row,
    .month-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .weekday-row { margin-top: var(--calendar-space); }
    .weekday {
      color: var(--calendar-muted);
      font-size: var(--calendar-caption-size);
      font-weight: 600;
      line-height: 24px;
      text-align: center;
    }
    .month-grid {
      row-gap: clamp(7px, 1.35dvh, 12px);
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
    }
    .calendar-day {
      appearance: none;
      position: relative;
      width: 100%;
      min-width: 0;
      aspect-ratio: 1 / 1.06;
      padding: 0;
      border: 0;
      border-radius: var(--calendar-pill);
      display: grid;
      place-items: center;
      color: var(--calendar-ink);
      background: transparent;
      font-size: var(--calendar-day-size);
      font-weight: 500;
      cursor: pointer;
    }
    .calendar-day.is-outside { color: var(--calendar-subtle); }
    .calendar-day.is-today { color: var(--calendar-today); font-weight: 700; }
    .calendar-day.is-selected { color: var(--calendar-selection-ink); background: var(--calendar-selection-fill); }
    .calendar-day.has-event::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 4px;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
      transform: translateX(-50%);
    }

    .year-picker {
      position: absolute;
      z-index: 3;
      inset: 42px 0 auto;
      padding: 16px;
      border-radius: var(--calendar-radius);
      color: var(--calendar-bg);
      background: var(--calendar-accent);
      animation: year-picker-in var(--calendar-motion) cubic-bezier(.22,.72,.2,1) both;
    }
    @keyframes year-picker-in {
      from { opacity: 0; transform: translateY(-8px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .year-picker-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: 11px;
      letter-spacing: .08em;
    }
    .year-picker-close {
      appearance: none;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: inherit;
      background: rgba(255,255,255,.12);
    }
    .year-picker-close .lucide { width: 14px; height: 14px; }
    .year-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .year-option {
      appearance: none;
      height: 38px;
      padding: 0;
      border: 0;
      border-radius: var(--calendar-pill);
      color: inherit;
      background: transparent;
      font-size: 11px;
      font-variant-numeric: tabular-nums;
    }
    .year-option.is-selected { color: var(--calendar-ink); background: var(--calendar-bg); font-weight: 700; }

    .section-heading {
      margin: calc(var(--calendar-space) * 1.55) 0 12px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }
    .section-heading h2 {
      margin: 0;
      font-size: 17px;
      line-height: 1.1;
      font-weight: 650;
      letter-spacing: -.03em;
    }
    .section-heading span {
      color: var(--calendar-muted);
      font-size: var(--calendar-caption-size);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .day-summary {
      min-height: 76px;
      padding: 10px 13px 10px 10px;
      border-radius: calc(var(--calendar-radius) * .76);
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      background: var(--calendar-faint);
    }
    .day-summary-date {
      width: 54px;
      height: 54px;
      border-radius: calc(var(--calendar-radius) * .62);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--calendar-bg);
      background: var(--calendar-accent);
    }
    .day-summary-date strong { font-size: 20px; line-height: 1; letter-spacing: -.04em; }
    .day-summary-date span { margin-top: 4px; font-size: 7px; letter-spacing: .12em; opacity: .58; }
    .day-summary-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .day-summary-title { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
    .day-summary-meta { overflow: hidden; color: var(--calendar-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .day-summary-order { color: var(--calendar-muted); font-size: 9px; line-height: 1.35; text-align: right; white-space: nowrap; }

    .schedule-week-shell {
      position: relative;
      width: 100%;
      height: var(--schedule-shell-height);
      margin: 24px auto 34px;
      padding: var(--schedule-shell-inset) 6px;
      border-radius: var(--calendar-radius);
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      grid-template-rows: var(--schedule-day-content-height);
      gap: 2px;
      align-items: center;
      align-content: center;
      overflow: visible;
      color: var(--calendar-bg);
      background: var(--calendar-accent);
    }
    .schedule-week-day {
      appearance: none;
      width: 100%;
      min-width: 0;
      height: var(--schedule-day-content-height);
      padding: 0 2px;
      border: 0;
      border-radius: calc(var(--calendar-radius) * .72);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: inherit;
      background: transparent;
      cursor: pointer;
      transition: height var(--calendar-motion) cubic-bezier(.22,.72,.2,1), color var(--calendar-motion) ease, background var(--calendar-motion) ease;
    }
    .schedule-week-day.is-selected {
      width: 100%;
      height: var(--schedule-highlight-height);
      place-self: center;
      border-radius: var(--schedule-highlight-radius);
      color: var(--schedule-selection-ink);
      background: var(--schedule-selection-fill);
    }
    .schedule-week-name {
      font-family: var(--calendar-title-en-family);
      font-size: 8px;
      font-weight: var(--calendar-title-weight);
      line-height: 1;
      letter-spacing: .08em;
    }
    .schedule-week-date { font-size: 16px; font-weight: 650; line-height: 1; }
    .schedule-week-lunar {
      overflow: hidden;
      width: 100%;
      font-size: 7px;
      line-height: 1;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      opacity: .62;
    }

    .schedule-agenda {
      padding: 0;
      background: transparent;
    }
    .schedule-agenda-head {
      margin-bottom: 13px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
    }
    .schedule-agenda-count { display: flex; align-items: flex-end; gap: 5px; }
    .schedule-agenda-count strong { font-size: 31px; font-weight: 650; line-height: .85; letter-spacing: -.07em; }
    .schedule-agenda-count span { color: var(--calendar-muted); font-size: 9px; line-height: 1; }
    .schedule-agenda-total { color: var(--calendar-muted); font-size: 9px; letter-spacing: .04em; }
    .timeline-list { position: relative; display: flex; flex-direction: column; gap: 12px; }
    .timeline-item {
      position: relative;
      min-height: 92px;
      display: grid;
      grid-template-columns: max-content var(--timeline-axis-space) minmax(0, 1fr);
      gap: var(--timeline-axis-gap);
      align-items: stretch;
    }
    .timeline-time {
      padding-top: 13px;
      color: var(--calendar-ink);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.025em;
      text-align: left;
      font-variant-numeric: tabular-nums;
    }
    .timeline-track { position: relative; display: flex; justify-content: center; }
    .timeline-track::before {
      content: "";
      position: absolute;
      top: 45px;
      bottom: 6px;
      width: var(--timeline-track-width);
      border-radius: var(--calendar-pill);
      background: var(--calendar-subtle);
    }
    .timeline-item:last-child .timeline-track::before { display: none; }
    .timeline-node {
      position: relative;
      z-index: 1;
      width: var(--timeline-node-size);
      height: var(--timeline-node-size);
      margin-top: 7px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--calendar-bg);
      background: var(--calendar-accent);
      font-family: var(--calendar-title-en-family);
      font-size: 8px;
      font-weight: 650;
      letter-spacing: .08em;
      font-variant-numeric: tabular-nums;
    }
    .timeline-node::after {
      content: "";
      position: absolute;
      left: calc(100% - 1px);
      top: 13px;
      width: 6px;
      height: var(--timeline-track-width);
      border-radius: var(--calendar-pill);
      background: var(--calendar-accent);
    }
    .timeline-card {
      min-width: 0;
      min-height: 88px;
      padding: 13px 14px;
      border-radius: calc(var(--calendar-radius) * .72);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 9px;
      background: var(--calendar-bg);
    }
    .timeline-item:first-child .timeline-card { color: var(--calendar-bg); background: var(--calendar-accent); }
    .timeline-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .timeline-title { min-width: 0; overflow: hidden; font-size: var(--calendar-body-size); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
    .timeline-duration { padding: 5px 7px; border-radius: var(--calendar-pill); color: var(--calendar-muted); background: var(--calendar-faint); font-size: 8px; white-space: nowrap; }
    .timeline-item:first-child .timeline-duration { color: var(--calendar-ink); background: var(--calendar-bg); }
    .timeline-meta { color: var(--calendar-muted); font-size: 9px; line-height: 1.35; }
    .timeline-item:first-child .timeline-meta { color: inherit; opacity: .58; }
    .timeline-window { display: flex; align-items: center; gap: 7px; color: var(--calendar-muted); font-size: 8px; font-variant-numeric: tabular-nums; }
    .timeline-item:first-child .timeline-window { color: inherit; opacity: .72; }
    .timeline-window::before { content: ""; flex: 1; height: 2px; border-radius: var(--calendar-pill); background: currentColor; opacity: .3; }
    .timeline-empty { padding: 24px 0 8px; color: var(--calendar-muted); font-size: var(--calendar-body-size); }

    .health-profile {
      margin: 0 0 var(--health-flow-gap);
      padding: 0;
      color: var(--calendar-ink);
    }
    .health-profile-main {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .health-profile-avatar {
      width: var(--health-profile-avatar-size);
      height: var(--health-profile-avatar-size);
      flex: 0 0 auto;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--calendar-ink);
      background: var(--calendar-faint);
      overflow: hidden;
    }
    .health-profile-avatar .lucide {
      width: 22px;
      height: 22px;
      stroke-width: var(--calendar-icon-stroke);
    }
    .health-profile-copy { min-width: 0; }
    .health-profile-name {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .health-profile-name .lucide {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      stroke-width: var(--calendar-icon-stroke);
    }
    .health-profile-name strong {
      min-width: 0;
      overflow: hidden;
      font-size: 22px;
      font-weight: 650;
      letter-spacing: -.055em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .health-profile-signature {
      margin-top: 6px;
      display: block;
      overflow: hidden;
      color: var(--calendar-muted);
      font-size: 11px;
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .health-profile-stats {
      margin-top: 18px;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      color: var(--calendar-ink);
    }
    .health-profile-stat {
      min-width: 0;
      padding-left: 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .health-profile-stat:first-child { padding-left: 0; }
    .health-profile-stat strong {
      font-family: var(--health-stat-art-family);
      font-size: 20px;
      font-style: italic;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.045em;
      white-space: nowrap;
    }
    .health-profile-stat strong small {
      margin-left: 2px;
      color: var(--calendar-muted);
      font-family: var(--calendar-title-en-family);
      font-size: 7px;
      font-style: normal;
      font-weight: 500;
      letter-spacing: 0;
    }
    .health-profile-stat > small {
      color: var(--calendar-muted);
      font-size: 8px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .health-summary {
      margin-top: 0;
      padding: 20px;
      border-radius: var(--calendar-radius);
      color: var(--calendar-bg);
      background: var(--calendar-accent);
    }
    .health-summary-label {
      color: inherit;
      font-size: var(--calendar-caption-size);
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .health-summary-value {
      margin-top: 9px;
      font-size: clamp(38px, 12vw, 50px);
      font-weight: 650;
      line-height: .95;
      letter-spacing: -.06em;
    }
    .health-summary-unit { margin-left: 6px; color: inherit; font-size: 13px; letter-spacing: 0; opacity: .62; }
    .health-summary-note { margin-top: 12px; color: inherit; font-size: 11px; line-height: 1.5; opacity: .62; }
    .health-grid {
      margin-top: var(--health-flow-gap);
      display: flex;
      flex-direction: column;
      gap: var(--health-flow-gap);
    }
    .health-row { display: grid; gap: var(--health-column-gap); }
    .health-row.is-first { grid-template-columns: minmax(0, 1.28fr) minmax(0, .76fr) minmax(0, .96fr); }
    .health-row.is-second { grid-template-columns: minmax(0, .82fr) minmax(0, 1.22fr) minmax(0, .96fr); }
    .health-row.is-first .health-card { height: var(--health-row-one-height); }
    .health-row.is-second .health-card { height: var(--health-row-two-height); }
    .health-card {
      position: relative;
      min-width: 0;
      padding: 13px;
      border-radius: calc(var(--calendar-radius) * .8);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      background: var(--calendar-faint);
    }
    .health-card.is-dark {
      color: var(--calendar-bg);
      background: var(--calendar-accent);
    }
    .health-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .health-card-code { color: var(--calendar-muted); font-family: var(--calendar-title-en-family); font-size: 8px; letter-spacing: .08em; }
    .health-card.is-dark .health-card-code { color: inherit; opacity: .46; }
    .health-card .lucide {
      width: var(--calendar-icon-size);
      height: var(--calendar-icon-size);
      stroke-width: var(--calendar-icon-stroke);
    }
    .health-card-data { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    .health-card.is-compact .health-card-foot { flex-direction: column; align-items: flex-start; gap: 3px; }
    .health-card-value { font-size: clamp(17px, 5.1vw, 23px); font-weight: 650; letter-spacing: -.055em; line-height: .95; white-space: nowrap; }
    .health-card-value small { margin-left: 2px; color: var(--calendar-muted); font-size: 8px; font-weight: 500; letter-spacing: 0; }
    .health-card.is-dark .health-card-value small { color: inherit; opacity: .55; }
    .health-card-foot { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
    .health-card-label { overflow: hidden; color: var(--calendar-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .health-card-note { color: var(--calendar-muted); font-size: 7px; white-space: nowrap; }
    .health-card.is-dark .health-card-label,
    .health-card.is-dark .health-card-note { color: inherit; opacity: .55; }
    .women-records { display: flex; align-items: center; gap: 4px; }
    .women-records span {
      padding: 5px;
      border-radius: var(--calendar-pill);
      font-size: 9px;
      line-height: 1;
      white-space: nowrap;
      color: var(--calendar-ink);
      background: var(--calendar-bg);
    }

    .calendar-dock {
      position: absolute;
      z-index: 5;
      left: 50%;
      bottom: calc(12px + var(--safe-bottom));
      height: var(--calendar-dock-height);
      padding: var(--calendar-dock-gap);
      border: 0;
      border-radius: var(--calendar-pill);
      display: flex;
      align-items: center;
      gap: var(--calendar-dock-gap);
      background: var(--calendar-faint);
      transform: translateX(-50%);
      white-space: nowrap;
    }
    .calendar-dock-button {
      appearance: none;
      height: calc(var(--calendar-dock-height) - var(--calendar-dock-gap) * 2);
      min-width: 50px;
      padding: 0 15px;
      border: 0;
      border-radius: var(--calendar-pill);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--calendar-muted);
      background: transparent;
      cursor: pointer;
      transition: color var(--calendar-motion) ease, background var(--calendar-motion) ease;
    }
    .calendar-dock-button .lucide {
      width: var(--calendar-icon-size);
      height: var(--calendar-icon-size);
      flex: 0 0 auto;
      stroke-width: var(--calendar-icon-stroke);
    }
    .calendar-dock-label {
      overflow: hidden;
      width: 0;
      max-width: 0;
      opacity: 0;
      font-family: var(--calendar-title-en-family);
      font-size: var(--calendar-dock-label-size);
      font-weight: var(--calendar-title-weight);
      letter-spacing: .12em;
      transition: max-width var(--calendar-motion) ease, opacity var(--calendar-motion) ease;
    }
    .calendar-dock-button.is-active {
      color: var(--calendar-bg);
      background: var(--calendar-accent);
    }
    .calendar-dock-button.is-active .calendar-dock-label {
      width: auto;
      max-width: 84px;
      opacity: 1;
    }

    .calendar-toast {
      position: absolute;
      z-index: 8;
      left: 50%;
      bottom: calc(var(--calendar-dock-height) + var(--safe-bottom) + 24px);
      padding: 9px 14px;
      border-radius: var(--calendar-pill);
      color: var(--calendar-bg);
      background: var(--calendar-accent);
      font-size: 11px;
      pointer-events: none;
      transform: translate(-50%, 8px);
      opacity: 0;
      transition: opacity var(--calendar-motion) ease, transform var(--calendar-motion) ease;
    }
    .calendar-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }