/* 日历生成器：仅本页特有样式。
   #calendar 内不使用 color-mix 等新语法，保证 html2canvas 导出效果与页面一致。 */
.tb-split > .tb-card { margin-top: 0; }
.tb-stack > .tb-card { margin-top: 0; }
.ym-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-row .tb-btn, .export-row .tb-btn { flex: 1 1 auto; }
.check-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 1rem; }
.check-list label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; font-size: 0.875rem; color: var(--color-text-secondary); cursor: pointer; }

.calendar {
    --cal-accent: var(--color-primary);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(10px, 2.2vw, 24px);
    box-shadow: var(--shadow-sm);
}
.calendar-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 0.75rem; padding: 0 2px; }
.calendar-title-main { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem); font-weight: 700; color: var(--cal-accent); }
.calendar-title-sub { font-size: 0.875rem; color: var(--color-text-muted); }
.calendar-header, .calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(2px, 0.6vw, 6px); }
.calendar-header { text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-bottom: 2px solid var(--cal-accent); }
.calendar-header .is-weekend { color: var(--color-hot); }
.calendar-body { display: flex; flex-direction: column; gap: clamp(2px, 0.6vw, 6px); }

.calendar-day {
    appearance: none; font: inherit; color: var(--color-text); background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
    min-height: clamp(56px, 9vw, 92px); padding: clamp(4px, 1vw, 8px) 2px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    cursor: pointer; min-width: 0; overflow: hidden;
}
.calendar-day:hover { border-color: var(--color-border-hover); }
.calendar-day.is-selected { border-color: var(--cal-accent); box-shadow: inset 0 0 0 1px var(--cal-accent); }
.calendar-day.weekend { background: var(--color-surface); }
.calendar-day.weekend .solar-date { color: var(--color-hot); }
.calendar-day.other-month { opacity: 0.38; }
.solar-date {
    font-size: clamp(0.9375rem, 0.8rem + 0.6vw, 1.25rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    width: 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0;
}
.calendar-day.today .solar-date { background: var(--cal-accent); color: #fff; }
.lunar-date, .festival { font-size: clamp(0.625rem, 0.5rem + 0.45vw, 0.75rem); line-height: 1.25; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.lunar-date { color: var(--color-text-muted); }
.festival { color: var(--color-hot); font-weight: 600; }
.festival.solar-term { color: var(--cal-accent); }

.day-detail { display: grid; gap: 0.25rem; font-size: 0.9375rem; }
.day-detail strong { font-family: var(--font-display); font-size: 1.125rem; }
.day-detail .tb-row { gap: 0.375rem; margin-top: 0.25rem; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; font-size: 0.8125rem; color: var(--color-text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-color { width: 14px; height: 14px; border-radius: 4px; }
.legend-color.today { border-radius: 50%; background: var(--cal-accent, var(--color-primary)); }
.legend-color.festival-mark { background: var(--color-hot); }
.legend-color.term-mark { background: var(--color-primary); }
.legend-color.weekend { background: var(--color-surface); border: 1px solid var(--color-border); }

@media (max-width: 480px) {
    .calendar { border-radius: var(--radius-md); }
    .calendar-day { border-radius: 6px; }
}

@media print {
    .tb-split { display: block; }
    .calendar { border: 0; box-shadow: none; padding: 0; background: #fff; }
    .calendar-day { min-height: 96px; color: #000; border-color: #bbb; }
    .calendar-day.is-selected { border-color: #bbb; box-shadow: none; }
    .calendar-day.weekend { background: #f3f3f3; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .calendar-day.today .solar-date { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .lunar-date, .calendar-title-sub { color: #555; }
}