.calendar-page { display: flex; flex-direction: column; gap: 12px; min-width: 0; animation: calendar-page-enter .28s ease both; }
.calendar-header { align-items: center; }
.calendar-header-actions { display: flex; align-items: center; gap: 10px; }
.calendar-view-switch { display: inline-flex; padding: 2px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-soft); }
.calendar-view-button { min-width: 25px; padding: 4px 7px; border: 0; border-radius: 999px; background: transparent; color: var(--color-muted); cursor: pointer; font-size: var(--fs-caption); transition: background .2s ease, color .2s ease, transform .2s ease; }
.calendar-view-button:hover { transform: translateY(-1px); }
.calendar-view-button.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 2px 7px rgba(0,0,0,.08); }
@keyframes calendar-page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.calendar-month-actions { display: flex; gap: 8px; }
.calendar-nav-button { width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-muted); cursor: pointer; font-size: var(--fs-heading); line-height: 1; }
.calendar-card { padding: 12px 10px 10px; }
.calendar-layout { display: grid; gap: 5px; }
.calendar-top-row { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 8px; align-items: center; }
.calendar-layout__days { min-width: 0; }
.calendar-weekdays { display: grid; grid-template-columns: 12px repeat(7, minmax(0, 1fr)); gap: 5px; padding: 0 2px; color: var(--color-muted); font-size: var(--fs-caption); text-align: center; }
.calendar-weekdays span:first-child { visibility: hidden; }
.calendar-grid { display: grid; gap: 5px; }
.calendar-week-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) 24px; gap: 5px; align-items: stretch; }
.calendar-week-color { display: block; min-height: 64px; height: 100%; border-radius: 999px; background: #e5e5e7; }
.calendar-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.calendar-week-spend { position: static; display: flex; align-items: center; justify-content: center; width: 24px; min-height: 64px; padding: 4px 0; border-left: 0; border-radius: 8px; background: #ffd21f !important; color: #000 !important; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; text-align: center; white-space: nowrap; }
.calendar-week-spend:empty { display: none; }
.calendar-week-spend:not(:empty) { min-width: 24px; box-shadow: 0 2px 6px rgba(210,166,0,.14); background: #ffd21f !important; color: #000 !important; font-weight: 700; }
.calendar-spend-head { display: flex; align-items: center; justify-content: center; height: 20px; color: var(--color-muted); font-size: var(--fs-micro); line-height: 1.1; text-align: center; }
.calendar-spend-head span { writing-mode: horizontal-tb; }
.calendar-spend-head small { display: none; }
.calendar-day { position: relative; min-height: 64px; overflow: hidden; padding: 15px 5px 5px; border: 1px solid #ececf0; border-radius: 9px; background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; }
.calendar-day::before { position: absolute; top: 0; right: 0; left: 0; height: 12px; border-bottom: 1px solid #f0f0f2; content: ''; }
.calendar-day:hover { border-color: var(--color-border-strong); }
.calendar-day.is-selected { background: #e8e8e8; border-color: #d8d8dc; }
.calendar-day.is-today { z-index: 2; border: 2px solid #ffffff; background: #ffffff; box-shadow: 0 8px 18px rgba(42,39,36,.24); transform: translateY(-2px); }
.calendar-day.is-today:hover { border-color: #ffffff; background: #ffffff; box-shadow: 0 11px 22px rgba(42,39,36,.30); transform: translateY(-4px); }
.calendar-day.is-today::before { border-bottom: 2px solid var(--color-accent); }
.calendar-day.is-today .calendar-day__number { color: var(--color-text); font-size: var(--fs-body); font-weight: 400 !important; }
.calendar-day.is-today.is-selected { background: #ffffff; border-color: #ffffff; }
.calendar-day.is-today.has-record .calendar-day__number { color: var(--color-accent); font-weight: 700 !important; }
.calendar-day--empty { background: #fafafa; border-color: transparent; cursor: default; }
.calendar-day__image { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .88; }
.calendar-day__image::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06) 46%, rgba(20,20,20,.18)); content: ''; }
.calendar-day__number { position: absolute; z-index: 3; top: 0; left: 5px; display: block; width: fit-content; height: 12px; margin: 0; font-size: var(--fs-body); line-height: 12px; }
.calendar-day.has-record .calendar-day__number { color: var(--color-accent); font-weight: 700; }
.calendar-day.is-today.has-record .calendar-day__number { font-weight: 700 !important; }
.calendar-day__event-dot { position: absolute; z-index: 3; top: 3px; right: 5px; width: 12px; height: 6px; border-radius: 999px; background: var(--color-accent); }
.calendar-day__events { position: absolute; right: 4px; bottom: 4px; left: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calendar-day__event { position: relative; z-index: 2; display: flex; min-width: 0; align-items: center; gap: 3px; overflow: hidden; color: var(--color-accent); font-size: var(--fs-micro); line-height: 1.1; }
.calendar-day__event i { display: block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 999px; background: var(--color-accent); }
.calendar-day__event em { overflow: hidden; min-width: 0; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.calendar-day__event--more { color: var(--color-muted); }
.calendar-day__event--more i { background: var(--color-accent); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 2px 0; color: var(--color-muted); font-size: var(--fs-caption); }
.calendar-legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend-mark, .legend-event, .legend-today { display: inline-block; }
.legend-mark { width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
.legend-event { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.legend-today { width: 10px; height: 10px; border-radius: 3px; background: #e8e8e8; }
.calendar-detail { overflow: hidden; }
.calendar-detail__block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calendar-inline-edit { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: var(--fs-caption); font-weight: 650; }
.calendar-checkin-items { display: flex; flex-wrap: wrap; gap: 7px 10px; }
.calendar-checkin-item { display: inline-flex; align-items: center; gap: 4px; color: var(--color-muted); }
.calendar-checkin-item i { width: 8px; height: 8px; border: 1px solid #cfcfd4; border-radius: 50%; background: #e5e5ea; }
.calendar-checkin-item.is-done { color: var(--color-accent); }
.calendar-checkin-item.is-done i { border-color: var(--color-accent); background: var(--color-accent); }
.calendar-detail__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px 11px; border-bottom: 1px solid var(--color-border); }
.calendar-detail__header strong { display: block; font-size: var(--fs-body); font-weight: 600; }
.calendar-detail__header span { display: block; margin-top: 4px; color: var(--color-muted); font-size: var(--fs-caption); }
.calendar-detail__edit { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: var(--fs-caption); font-weight: 650; }
.calendar-detail__body { display: flex; flex-direction: column; gap: 10px; padding: 11px 14px 13px; }
.calendar-note-block { padding: 0 0 10px; border-bottom: 1px solid var(--color-border); }
.calendar-info-list { display: flex; flex-direction: column; }
.calendar-info-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid #f0f0f2; }
.calendar-info-row:last-child { border-bottom: 0; padding-bottom: 0; }
.calendar-info-row .detail-label { margin: 2px 0 0; }
.calendar-info-content { min-width: 0; }
.calendar-image-strip, .record-image-preview .calendar-image-strip { display: flex; gap: 7px; overflow-x: auto; margin-top: 9px; }
.calendar-image-item { position: relative; flex: 0 0 auto; }
.calendar-image-strip img { display: block; width: 76px; height: 58px; border-radius: 8px; object-fit: cover; }
.calendar-image-remove { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: #242321; color: #fff; cursor: pointer; font-size: var(--fs-body); line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.calendar-image-remove:hover { background: var(--color-accent); }
.detail-label { margin-bottom: 6px; color: var(--color-muted); font-size: var(--fs-caption); }
.detail-text { color: var(--color-text); font-size: var(--fs-body); line-height: 1.45; }
.detail-amount { display: block; margin-bottom: 3px; color: var(--accent); font-size: var(--fs-lead); font-weight: 700; }
.detail-muted { color: var(--color-muted); font-size: var(--fs-caption); line-height: 1.4; }
.form-field textarea { width: 100%; resize: vertical; border: 1px solid rgba(42,39,36,.12); border-radius: 14px; padding: 13px 14px; background: #fbfaf8; color: var(--color-text); font: inherit; line-height: 1.5; outline: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.form-field textarea:focus { border-color: rgba(185,79,73,.35); background: #fff; box-shadow: 0 0 0 4px rgba(185,79,73,.08); }
.form-hint { color: var(--color-muted); font-size: var(--fs-caption); }
.calendar-record-modal { border-radius: 24px; padding: 20px; box-shadow: 0 22px 60px rgba(44,38,32,.18); }
.calendar-record-modal .modal__header { align-items: flex-start; padding-bottom: 15px; border-bottom: 0; }
.calendar-record-modal .modal__header strong { display: block; margin-top: 4px; color: #242321; font-size: var(--fs-heading); font-weight: 650; }
.modal-kicker { display: block; color: #a09992; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1.8px; }
.calendar-editor-field { gap: 8px; }
.calendar-editor-label { display: block; color: #6f6962; font-size: var(--fs-caption); font-weight: 650; }
.calendar-image-uploader { display: flex; flex-direction: column; gap: 8px; }
.calendar-photo-button { display: flex; align-items: center; gap: 11px; min-height: 62px; padding: 11px 13px; border: 1px dashed rgba(185,79,73,.3); border-radius: 15px; background: var(--accent-bg); color: #514842; cursor: pointer; }
.calendar-photo-button:hover { background: var(--accent-bg); border-color: rgba(185,79,73,.55); }
.calendar-photo-button__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: var(--color-accent); color: #fff; font-size: var(--fs-title); font-weight: 300; line-height: 1; }
.calendar-photo-button b, .calendar-photo-button small { display: block; }
.calendar-photo-button b { font-size: var(--fs-caption); font-weight: 650; }
.calendar-photo-button small { margin-top: 3px; color: #a09992; font-size: var(--fs-caption); }
.calendar-photo-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.calendar-record-modal .record-image-preview { min-height: 0; }
.calendar-record-modal .form-actions { padding-top: 7px; }
.calendar-record-modal .form-actions .primary { border-radius: 12px; padding-inline: 18px; }
.calendar-year-layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; padding: 5px 2px 8px; animation: calendar-view-content-enter .35s ease both; }
.calendar-year-month { position: relative; min-width: 0; padding: 9px 9px 10px; border: 1px solid transparent; border-radius: 14px; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.calendar-year-month:hover { border-color: #e4dede; background: var(--accent-bg); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(44,38,32,.07); }
.calendar-year-month::after { position: absolute; right: 9px; top: 8px; padding: 4px 6px; border-radius: 6px; background: #2a2724; color: #fff; content: attr(data-tooltip); font-size: var(--fs-micro); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; }
.calendar-year-month:hover::after { opacity: .92; transform: translateY(0); }
.calendar-year-month h2 { margin: 0 0 7px; color: var(--color-text); font-size: var(--fs-body); font-weight: 650; }
.calendar-year-month__title { display: inline-block; cursor: pointer; transition: color .2s ease, transform .2s ease; }
.calendar-year-month__title:hover, .calendar-year-month__title:focus-visible { color: var(--color-accent); transform: translateX(2px); outline: none; }
.calendar-year-weekdays, .calendar-year-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-year-weekdays { margin-bottom: 4px; color: var(--color-muted); font-size: var(--fs-micro); text-align: center; }
.calendar-year-day { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text); cursor: pointer; font-size: var(--fs-micro); line-height: 1; transition: background .2s ease, color .2s ease, transform .2s ease; }
.calendar-year-day:hover { transform: scale(1.15); background: #f0f0f2; }
.calendar-year-day--empty { cursor: default; }
.calendar-year-day--empty:hover { transform: none; background: transparent; }
.calendar-year-day.has-record { color: var(--color-accent); font-weight: 400; }
.calendar-year-day.has-event { background: var(--color-accent); color: #fff; }
.calendar-year-day.has-event:hover { background: var(--accent); }
.calendar-year-day.is-selected { box-shadow: 0 0 0 2px #d8d8dc; }
.calendar-year-day.has-event.is-selected { box-shadow: 0 0 0 2px var(--accent); }
.calendar-year-day.is-today { background: #f0f0f2; box-shadow: 0 0 0 1.5px #cfd0d4; }
.calendar-year-day.is-today:hover { background: #e8e8ea; box-shadow: 0 2px 6px rgba(42,39,36,.14); }
.calendar-year-day.is-today.has-event { box-shadow: 0 0 0 1.5px #cfd0d4; }
.calendar-year-day.has-record.has-event { color: var(--color-accent); }
.calendar-page--year .calendar-detail { animation: calendar-detail-enter .35s .08s ease both; }
@keyframes calendar-view-content-enter { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes calendar-detail-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 620px) { .calendar-year-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 10px; } }
@media (max-width: 460px) { .calendar-header-actions { gap: 6px; } .calendar-year-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 14px; } .calendar-year-month::after { right: 6px; top: 5px; font-size: var(--fs-micro); } }
@media (max-width: 360px) { .calendar-day { min-height: 56px; padding-inline: 4px; } .calendar-top-row { grid-template-columns: minmax(0, 1fr) 30px; } .calendar-week-row { grid-template-columns: 9px minmax(0, 1fr) 30px; } .calendar-weekdays { grid-template-columns: 9px repeat(7, minmax(0, 1fr)); } .calendar-week-spend { width: 30px; font-size: var(--fs-micro); } .calendar-info-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; } .calendar-header-actions { gap: 4px; } .calendar-view-button { min-width: 22px; padding-inline: 5px; } }