/* MaluchTime Theme v1.3.3
   Shared pastel visual language based on the Desktop application.
   Keep semantic token names stable across PWA/PDF/mobile. */
:root {
  --mt-canvas: #fffafc;
  --mt-surface: #ffffff;
  --mt-surface-warm: #fffcfd;
  --mt-text: #0f172a;
  --mt-muted: #64748b;
  --mt-border: #e0d7ec;

  --mt-rose-soft: #fff1f5;
  --mt-rose-border: #e7afc0;
  --mt-rose: #b96b83;
  --mt-rose-deep: #7d5365;

  --mt-lavender-soft: #f5f0fa;
  --mt-lavender-border: #d6c7e5;
  --mt-lavender-deep: #65566f;

  --mt-green-soft: #f2faf3;
  --mt-green-border: #cfe6d4;
  --mt-green-deep: #5e7a62;

  --mt-blue-soft: #f2f8ff;
  --mt-blue-border: #c9ddf3;
  --mt-blue-deep: #35566f;

  --mt-warning-soft: #fff7df;
  --mt-warning-deep: #8a6a28;
  --mt-danger-soft: #fff1f2;
  --mt-danger-deep: #9f1239;

  /* aliases expected by the older PWA CSS */
  --accent: var(--mt-rose);
  --accent2: var(--mt-rose-deep);
  --bg: var(--mt-canvas);
  --card: var(--mt-surface);
  --text: var(--mt-text);
  --muted: var(--mt-muted);
  --border: var(--mt-border);
  --mt-primary: var(--mt-rose);
  --mt-bg: var(--mt-canvas);
}

html {
  background: var(--mt-canvas);
}

body,
body.mt-pwa-page,
body.mt-login-page,
body.mt-install-page,
body.mt-admin-page {
  color: var(--mt-text);
  background:
    radial-gradient(circle at 7% 8%, rgba(231,175,192,.20), transparent 28%),
    radial-gradient(circle at 94% 12%, rgba(214,199,229,.24), transparent 27%),
    radial-gradient(circle at 88% 94%, rgba(207,230,212,.20), transparent 28%),
    linear-gradient(180deg, #fffdfd 0%, var(--mt-canvas) 100%) !important;
}

/* Main PWA */
body.mt-pwa-page header {
  color: var(--mt-text);
  background: linear-gradient(108deg, #fff1f5 0%, #fcffffff 48%, #f2faf3 100%);
  border-bottom: 1px solid rgba(214,199,229,.72);
  box-shadow: 0 10px 30px rgba(101,86,111,.10);
}
body.mt-pwa-page header .sub { color: var(--mt-muted); opacity: 1; }
body.mt-pwa-page header h1::before {
  background: #e7afc0;
  box-shadow: 0 0 0 5px rgba(231,175,192,.22);
}

body.mt-pwa-page .card,
body.mt-pwa-page .journal-start__card,
body.mt-pwa-page .journal-context__box,
body.mt-pwa-page .mt-carousel-journal,
body.mt-pwa-page .mt-carousel-day-title,
body.mt-pwa-page .mt-carousel-date-pill {
  background: rgba(255,255,255,.96);
  border-color: rgba(214,199,229,.62);
  box-shadow: 0 10px 28px rgba(101,86,111,.08);
}
body.mt-pwa-page select,
body.mt-pwa-page input,
body.mt-pwa-page textarea {
  border-color: rgba(214,199,229,.78);
  background: #fffdfd;
  color: var(--mt-text);
}
body.mt-pwa-page select:focus,
body.mt-pwa-page input:focus,
body.mt-pwa-page textarea:focus {
  outline: 3px solid rgba(231,175,192,.20);
  border-color: var(--mt-rose-border);
}

body.mt-pwa-page .main {
  background: linear-gradient(135deg, #d95f83, #b96b83);
  color: #fff;
  box-shadow: 0 10px 22px rgba(185,107,131,.20);
}
body.mt-pwa-page .dark {
  background: var(--mt-lavender-soft);
  color: var(--mt-lavender-deep);
  border: 1px solid var(--mt-lavender-border);
}
body.mt-pwa-page .cancel,
body.mt-pwa-page .copy-one,
body.mt-pwa-page .edit-line button,
body.mt-pwa-page .time-presets button {
  background: var(--mt-lavender-soft);
  color: var(--mt-lavender-deep);
}

body.mt-pwa-page .quick-row .quick-action {
  border-color: rgba(214,199,229,.62);
  background: linear-gradient(180deg,#fff,#faf7fc);
  color: var(--mt-text);
  box-shadow: 0 7px 18px rgba(101,86,111,.08), inset 0 1px 0 rgba(255,255,255,.88);
}
body.mt-pwa-page .quick-row .quick-today {
  background: linear-gradient(180deg,#fffaf0,#fff4e6);
  color: #8a664d;
}
body.mt-pwa-page .quick-row .quick-refresh {
  background: linear-gradient(180deg,#faf7fc,#f3eef8);
  color: var(--mt-lavender-deep);
}
body.mt-pwa-page .quick-row .quick-missing {
  background: linear-gradient(180deg,#fff5f7,#fff1f5);
  color: var(--mt-rose-deep);
}

body.mt-pwa-page .pill.present,
body.mt-pwa-page .badge.present { background: var(--mt-green-soft); color: #365c3c; }
body.mt-pwa-page .pill.absent,
body.mt-pwa-page .badge.absent { background: var(--mt-rose-soft); color: var(--mt-danger-deep); }
body.mt-pwa-page .pill.empty,
body.mt-pwa-page .badge.empty { background: var(--mt-lavender-soft); color: var(--mt-lavender-deep); }
body.mt-pwa-page .child-card { border-color: rgba(214,199,229,.66); }
body.mt-pwa-page .child-card.present { border-color: var(--mt-green-border); background: linear-gradient(180deg,var(--mt-green-soft),#fff); }
body.mt-pwa-page .child-card.absent { border-color: var(--mt-rose-border); background: linear-gradient(180deg,var(--mt-rose-soft),#fff); }
body.mt-pwa-page .child-card.empty { border-color: var(--mt-lavender-border); background: #fff; }

body.mt-pwa-page .journal-picker__button {
  border-color: var(--mt-lavender-border);
  background: linear-gradient(180deg,#fff,#faf7fc);
  color: var(--mt-text);
}
body.mt-pwa-page .journal-picker__icon { background: var(--mt-lavender-soft); }
body.mt-pwa-page .journal-picker__option:hover,
body.mt-pwa-page .journal-picker__option:focus-visible { background: var(--mt-lavender-soft); }
body.mt-pwa-page .journal-picker__option.is-selected {
  background: var(--mt-rose-soft);
  color: var(--mt-rose-deep);
}
body.mt-pwa-page .journal-start__eyebrow,
body.mt-pwa-page .journal-back-btn {
  background: var(--mt-rose-soft);
  color: var(--mt-rose-deep);
  border-color: var(--mt-rose-border);
}
body.mt-pwa-page .journal-start__option.is-recent {
  border-color: var(--mt-lavender-border);
  background: linear-gradient(180deg,var(--mt-lavender-soft),#fff);
}
body.mt-pwa-page .journal-start__icon { background: var(--mt-green-soft); }
body.mt-pwa-page .journal-start__arrow { background: var(--mt-lavender-soft); color: var(--mt-lavender-deep); }
body.mt-pwa-page .mt-day-carousel,
body.mt-pwa-page .mt-day-carousel__panel { background: var(--mt-canvas); }

body.mt-pwa-page .mt-userbar { color: var(--mt-text); }
body.mt-pwa-page .mt-userbar-account,
body.mt-pwa-page .mt-userbar-admin {
  background: rgba(255,255,255,.76);
  color: var(--mt-text);
  border-color: rgba(214,199,229,.72);
  box-shadow: 0 7px 18px rgba(101,86,111,.08);
}
body.mt-pwa-page .mt-userbar-name { color: var(--mt-text); }
body.mt-pwa-page .mt-userbar-avatar { background: var(--mt-lavender-soft); }
body.mt-pwa-page .mt-userbar-logout {
  background: var(--mt-rose-soft);
  color: var(--mt-rose-deep);
  border-color: var(--mt-rose-border);
}

/* Login */
body.mt-login-page .box {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(214,199,229,.72);
  box-shadow: 0 22px 60px rgba(101,86,111,.13);
}
body.mt-login-page input {
  border-color: var(--mt-lavender-border);
  background: #fffdfd;
}
body.mt-login-page input:focus {
  outline: 3px solid rgba(231,175,192,.20);
  border-color: var(--mt-rose-border);
}
body.mt-login-page button {
  background: linear-gradient(135deg,#d95f83,#b96b83);
  box-shadow: 0 12px 24px rgba(185,107,131,.22);
}
body.mt-login-page .error { background: var(--mt-danger-soft); color: var(--mt-danger-deep); }

/* Install */
body.mt-install-page .wrap {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(214,199,229,.72);
  box-shadow: 0 22px 60px rgba(101,86,111,.13);
}
body.mt-install-page .install-btn {
  background: linear-gradient(135deg,#d95f83,#b96b83);
  box-shadow: 0 12px 24px rgba(185,107,131,.22);
}
body.mt-install-page .secondary { background: var(--mt-rose-soft); color: var(--mt-rose-deep); }
body.mt-install-page .box { background: var(--mt-surface-warm); border-color: var(--mt-lavender-border); }

/* Admin page: still technical, but visually belongs to MaluchTime. */
body.mt-admin-page .toplink { background: var(--mt-rose-soft); color: var(--mt-rose-deep); }
body.mt-admin-page .card,
body.mt-admin-page .row,
body.mt-admin-page .backup-row,
body.mt-admin-page .tool-card {
  border-color: var(--mt-lavender-border);
  box-shadow: 0 10px 28px rgba(101,86,111,.07);
}
body.mt-admin-page .tabs { background: linear-gradient(rgba(255,250,252,.96), rgba(255,250,252,.96)); }
body.mt-admin-page .tab.active,
body.mt-admin-page .primary { background: linear-gradient(135deg,#d95f83,#b96b83); }
body.mt-admin-page .soft { background: var(--mt-lavender-soft); color: var(--mt-lavender-deep); }
body.mt-admin-page .pill.admin { background: var(--mt-rose-soft); color: var(--mt-rose-deep); }
body.mt-admin-page .pill.teacher { background: var(--mt-lavender-soft); color: var(--mt-lavender-deep); }
body.mt-admin-page .backup-kind { background: var(--mt-blue-soft); color: var(--mt-blue-deep); }
body.mt-admin-page .backup-kind.database { background: var(--mt-green-soft); color: #365c3c; }
body.mt-admin-page .backup-kind.application { background: var(--mt-lavender-soft); color: var(--mt-lavender-deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* MaluchTime Theme v1.1 - PWA polish: mniej tekstu, pastelowe akcje, mobile-first details. */
:root {
  --mt-present-soft: #eaf7ed;
  --mt-present-border: #b9dec1;
  --mt-present-deep: #456b4b;
  --mt-absent-soft: #fff0f3;
  --mt-absent-border: #e8b5c4;
  --mt-absent-deep: #8a4359;
}

/* Header: bez nakładania konta / administracji / wylogowania. */
body.mt-pwa-page header,
body.mt-userbar-in-header header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  min-height: 62px;
}
body.mt-pwa-page header h1 { grid-column: 1; grid-row: 1; margin: 0; }
body.mt-pwa-page header .sub { display: none; }
body.mt-pwa-page .mt-userbar {
  position: static;
  grid-column: 2;
  grid-row: 1;
  transform: none;
  right: auto;
  top: auto;
  max-width: none;
  gap: 7px;
}
body.mt-pwa-page .mt-userbar-account,
body.mt-pwa-page .mt-userbar-admin,
body.mt-pwa-page .mt-userbar-logout {
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
}
body.mt-pwa-page .mt-userbar-account { min-width: 0; padding: 6px 10px; }
body.mt-pwa-page .mt-userbar-name { max-width: 120px; }
body.mt-pwa-page .mt-userbar-admin { padding: 7px 11px; }
body.mt-pwa-page .mt-userbar-logout { padding: 7px 12px; }

/* Ekran wyboru dziennika też może oddychać. */
body.mt-pwa-page .journal-start p { display: none; }
body.mt-pwa-page .journal-start__card { padding: 18px; }

/* Główny panel dnia - progresywne ujawnianie informacji. */
body.mt-pwa-page .day-control-card { padding: 12px; }
body.mt-pwa-page .journal-context__box {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
}
body.mt-pwa-page .journal-context__box > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
body.mt-pwa-page .journal-context__kicker { display: none; }
body.mt-pwa-page .journal-back-btn { min-height: 36px; padding: 7px 11px; width: auto; }
body.mt-pwa-page .day-control { min-width: 0; }
body.mt-pwa-page .day-title { margin-top: 7px; }
body.mt-pwa-page .swipe-hint { display: none !important; }

body.mt-pwa-page .day-info {
  margin-top: 10px;
  border-top: 1px solid rgba(214,199,229,.52);
  padding-top: 8px;
}
body.mt-pwa-page .day-info > summary {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--mt-muted);
  font-size: 12px;
  font-weight: 850;
  padding: 5px 9px;
  border-radius: 999px;
  transition: background 120ms ease, color 120ms ease;
}
body.mt-pwa-page .day-info > summary::-webkit-details-marker { display: none; }
body.mt-pwa-page .day-info > summary:hover,
body.mt-pwa-page .day-info[open] > summary {
  background: var(--mt-lavender-soft);
  color: var(--mt-lavender-deep);
}
body.mt-pwa-page .day-info__panel { padding-top: 6px; }
body.mt-pwa-page .day-info .defaults-line { margin-top: 0; font-size: 12px; font-weight: 750; }
body.mt-pwa-page .day-info .summary { margin-top: 8px; }
body.mt-pwa-page .day-swipe-info {
  margin-top: 8px;
  text-align: center;
  color: var(--mt-muted);
  font-size: 11px;
  line-height: 1.35;
}
body.mt-pwa-page .quick-count {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(231,175,192,.55);
  font-size: 11px;
  line-height: 1;
}

/* Status pozostaje semantyczny, ale nie krzyczy. */
body.mt-pwa-page .presentBtn {
  background: linear-gradient(180deg, #f5fbf6, var(--mt-present-soft));
  color: var(--mt-present-deep);
  border: 1px solid var(--mt-present-border);
  box-shadow: 0 7px 16px rgba(69,107,75,.10);
}
body.mt-pwa-page .absentBtn {
  background: linear-gradient(180deg, #fff8fa, var(--mt-absent-soft));
  color: var(--mt-absent-deep);
  border: 1px solid var(--mt-absent-border);
  box-shadow: 0 7px 16px rgba(138,67,89,.09);
}
body.mt-pwa-page .presentBtn:active,
body.mt-pwa-page .absentBtn:active { transform: translateY(1px) scale(.985); }
body.mt-pwa-page .modal-status.present { color: var(--mt-present-deep); }
body.mt-pwa-page .modal-status.absent { color: var(--mt-absent-deep); }
body.mt-pwa-page .pill.present,
body.mt-pwa-page .badge.present { background: var(--mt-present-soft); color: var(--mt-present-deep); }
body.mt-pwa-page .pill.absent,
body.mt-pwa-page .badge.absent { background: var(--mt-absent-soft); color: var(--mt-absent-deep); }
body.mt-pwa-page .child-card.present { border-color: var(--mt-present-border); background: linear-gradient(180deg,#f7fcf8,#fff); }
body.mt-pwa-page .child-card.absent { border-color: var(--mt-absent-border); background: linear-gradient(180deg,#fff8fa,#fff); }

body.mt-pwa-page .edit-line {
  display: flex;
  justify-content: flex-end;
  margin-top: 7px;
}
body.mt-pwa-page .edit-line button { width: auto; min-height: 34px; padding: 7px 11px; }
body.mt-pwa-page .details { min-height: 0; margin: 7px 0 9px; }

body.mt-pwa-page .mt-carousel-summary {
  margin-top: 8px;
  text-align: center;
  color: var(--mt-muted);
  font-size: 12px;
  font-weight: 800;
}

/* Toasty też są spokojniejsze i bardziej zgodne z Desktopem. */
body.mt-pwa-page .toast,
body.mt-pwa-page .mt-toast--ok {
  background: rgba(255,255,255,.97) !important;
  color: var(--mt-present-deep) !important;
  border: 1px solid var(--mt-present-border) !important;
  box-shadow: 0 14px 34px rgba(69,107,75,.14) !important;
}
body.mt-pwa-page .toast.error,
body.mt-pwa-page .mt-toast--error {
  background: rgba(255,255,255,.97) !important;
  color: var(--mt-absent-deep) !important;
  border: 1px solid var(--mt-absent-border) !important;
  box-shadow: 0 14px 34px rgba(138,67,89,.13) !important;
}

@media (max-width: 640px) {
  body.mt-pwa-page header,
  body.mt-userbar-in-header header { padding: 10px 10px !important; gap: 8px; }
  body.mt-pwa-page header h1 { font-size: 19px; }
  body.mt-pwa-page .mt-userbar { gap: 5px; }
  body.mt-pwa-page .mt-userbar-account { min-width: 0; padding: 6px 8px; }
  body.mt-pwa-page .mt-userbar-name { max-width: 76px; font-size: 11px; }
  body.mt-pwa-page .mt-userbar-admin { width: 36px; min-width: 36px; padding: 0; font-size: 0; }
  body.mt-pwa-page .mt-userbar-admin::before { content: "⚙"; font-size: 15px; }
  body.mt-pwa-page .mt-userbar-logout { width: 36px; min-width: 36px; padding: 0; font-size: 0; }
  body.mt-pwa-page .mt-userbar-logout::after { content: "↪"; font-size: 16px; line-height: 1; }
  body.mt-pwa-page .toolbar { gap: 8px; }
}

@media (max-width: 390px) {
  body.mt-pwa-page .mt-userbar-name { display: none; }
  body.mt-pwa-page .mt-userbar-account { width: 36px; min-width: 36px; padding: 0; justify-content: center; }
  body.mt-pwa-page .mt-userbar-avatar { width: 22px; height: 22px; }
  body.mt-pwa-page .quick-row .quick-action { gap: 4px; }
  body.mt-pwa-page .quick-count { min-width: 18px; height: 18px; padding: 0 5px; }
}

/* MaluchTime Theme v1.2 - Web Admin Unification.
   Admin pozostaje narzedziem technicznym, ale korzysta z tego samego jezyka
   wizualnego co PWA/Desktop: lekkie powierzchnie, semantyczne pastele i
   mocniejszy kolor tylko dla rzeczywiscie ryzykownych akcji. */
body.mt-admin-page header {
  border-color: rgba(214,199,229,.72);
  background: rgba(255,255,255,.90);
  box-shadow: 0 12px 30px rgba(101,86,111,.08);
}
body.mt-admin-page .tab.active {
  background: var(--mt-rose-soft);
  color: var(--mt-rose-deep);
  border-color: var(--mt-rose-border);
}
body.mt-admin-page .primary {
  background: linear-gradient(180deg,#fff8fa,var(--mt-rose-soft));
  color: var(--mt-rose-deep);
  border-color: var(--mt-rose-border);
}
body.mt-admin-page input,
body.mt-admin-page select {
  border-color: var(--mt-lavender-border);
  background: var(--mt-surface-warm);
}
body.mt-admin-page input:focus,
body.mt-admin-page select:focus {
  outline: 3px solid rgba(231,175,192,.18);
  border-color: var(--mt-rose-border);
}
body.mt-admin-page input[type="checkbox"] { accent-color: var(--mt-rose); }
body.mt-admin-page .journal-check {
  border-color: var(--mt-lavender-border);
  background: linear-gradient(180deg,#fff,var(--mt-lavender-soft));
}
body.mt-admin-page .journal-check:has(input:checked) {
  border-color: var(--mt-rose-border);
  background: var(--mt-rose-soft);
  color: var(--mt-rose-deep);
}
body.mt-admin-page .row,
body.mt-admin-page .backup-row {
  background: linear-gradient(180deg,#fff,var(--mt-surface-warm));
}
body.mt-admin-page .danger,
body.mt-admin-page .danger-strong {
  background: var(--mt-danger-soft);
  color: var(--mt-danger-deep);
  border-color: #efbcc9;
}
body.mt-admin-page .warn-strong {
  background: var(--mt-warning-soft);
  color: var(--mt-warning-deep);
  border-color: #ead7a8;
}
body.mt-admin-page .okbtn {
  background: var(--mt-green-soft);
  color: var(--mt-green-deep);
  border-color: var(--mt-green-border);
}
body.mt-admin-page .tool-card {
  background: linear-gradient(180deg,#fff,var(--mt-lavender-soft));
}
body.mt-admin-page .muted-code {
  background: var(--mt-lavender-soft);
  color: var(--mt-lavender-deep);
}
body.mt-admin-page .log-box {
  background: #242333;
  color: #eef2ff;
  border-color: #444057;
}


/* MaluchTime Theme v1.3.3 - Floral PWA.
   Wspolny motyw z Desktop/PDF, ale o nizszej intensywnosci w widokach roboczych.
   Warstwa jest czysto dekoracyjna: fixed, pointer-events:none i bez wplywu na uklad. */
:root {
  --mt-floral-image: url("/static/maluchtime-floral.webp?v=1.3.3");
}

body.mt-pwa-page,
body.mt-login-page,
body.mt-install-page,
body.mt-admin-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: transparent !important;
}

body.mt-pwa-page { --mt-floral-veil-top: rgba(255,253,253,.80); --mt-floral-veil-bottom: rgba(255,250,252,.86); }
body.mt-login-page { --mt-floral-veil-top: rgba(255,253,253,.66); --mt-floral-veil-bottom: rgba(255,250,252,.74); }
body.mt-install-page { --mt-floral-veil-top: rgba(255,253,253,.70); --mt-floral-veil-bottom: rgba(255,250,252,.78); }
body.mt-admin-page { --mt-floral-veil-top: rgba(255,253,253,.87); --mt-floral-veil-bottom: rgba(255,250,252,.91); }

body.mt-pwa-page::before,
body.mt-login-page::before,
body.mt-install-page::before,
body.mt-admin-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--mt-canvas);
  background-image:
    linear-gradient(180deg, var(--mt-floral-veil-top), var(--mt-floral-veil-bottom)),
    var(--mt-floral-image);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

/* Karty zachowuja biala strefe robocza, a floral ma byc widoczny glownie dookola. */
body.mt-pwa-page .card,
body.mt-pwa-page .journal-start__card,
body.mt-pwa-page .journal-context__box,
body.mt-pwa-page .mt-carousel-journal,
body.mt-pwa-page .mt-carousel-day-title,
body.mt-pwa-page .mt-carousel-date-pill,
body.mt-admin-page header,
body.mt-admin-page .card,
body.mt-admin-page .row,
body.mt-admin-page .backup-row,
body.mt-admin-page .tool-card,
body.mt-login-page .box,
body.mt-install-page .wrap {
  background-color: rgba(255,255,255,.94);
}

@supports (backdrop-filter: blur(3px)) {
  body.mt-login-page .box,
  body.mt-install-page .wrap,
  body.mt-admin-page header {
    backdrop-filter: blur(3px);
  }
}

/* Na telefonie zwykle pracujemy w pionie. Dwa kadry tego samego assetu
   zostawiaja kwiaty w rogach zamiast wycinac je przez background-size:cover. */
@media (max-width: 720px) {
  body.mt-pwa-page { --mt-floral-veil-top: rgba(255,253,253,.83); --mt-floral-veil-bottom: rgba(255,250,252,.89); }
  body.mt-login-page { --mt-floral-veil-top: rgba(255,253,253,.69); --mt-floral-veil-bottom: rgba(255,250,252,.77); }
  body.mt-install-page { --mt-floral-veil-top: rgba(255,253,253,.73); --mt-floral-veil-bottom: rgba(255,250,252,.81); }
  body.mt-admin-page { --mt-floral-veil-top: rgba(255,253,253,.90); --mt-floral-veil-bottom: rgba(255,250,252,.93); }

  body.mt-pwa-page::before,
  body.mt-login-page::before,
  body.mt-install-page::before,
  body.mt-admin-page::before {
    background-image:
      linear-gradient(180deg, var(--mt-floral-veil-top), var(--mt-floral-veil-bottom)),
      var(--mt-floral-image),
      var(--mt-floral-image);
    background-position: center, left top, right bottom;
    background-size: 100% 100%, 900px auto, 900px auto;
    background-repeat: no-repeat;
  }

  body.mt-pwa-page main { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  body.mt-pwa-page .card,
  body.mt-pwa-page .journal-start__card { box-shadow: 0 8px 22px rgba(101,86,111,.07); }
}

@media (max-width: 420px) {
  body.mt-pwa-page::before,
  body.mt-login-page::before,
  body.mt-install-page::before,
  body.mt-admin-page::before {
    background-size: 100% 100%, 760px auto, 760px auto;
  }
}


/* Theme v1.3.3 - Floral Surface Fix.
   The swipe carousel is a full-screen work surface. In v1.3 it still used
   an opaque canvas background, which covered the body floral layer.
   Keep the carousel and its panels transparent so the fixed floral frame
   remains visible around the white work cards on PWA and narrow screens. */
body.mt-pwa-page .mt-day-carousel,
body.mt-pwa-page .mt-day-carousel__track,
body.mt-pwa-page .mt-day-carousel__panel,
body.mt-pwa-page .mt-carousel-main {
  background-color: transparent !important;
  background-image: none !important;
}

/* Preserve a calm work area without hiding the floral frame. */
body.mt-pwa-page .mt-carousel-controls,
body.mt-pwa-page .child-card,
body.mt-pwa-page .journal-start__card {
  backdrop-filter: blur(1.5px);
}
/* Theme v1.3.3 - PWA Floral Pseudo-Layer Compatibility Fix.
   ux-polish.css v35 intentionally disables body::before/body::after with
   content:none !important for the old swipe pseudo-background. The PWA now
   reuses body::before for the floral layer, so restore only this scoped
   pseudo-element after ux-polish.css is loaded. */
body.mt-pwa-page::before {
  content: "" !important;
  display: block !important;
}

/* Keep the old swipe helper pseudo-element disabled. */
body.mt-pwa-page::after {
  content: none !important;
  display: none !important;
}

/* Theme v1.3.3 - PWA Floral DOM Layer.
   Main PWA still contains legacy swipe CSS that historically owns body::before/body::after.
   Do not reuse those pseudo-elements for branding. A real fixed decorative layer is
   deterministic across journal chooser, day view and swipe carousel. */
body.mt-pwa-page::before,
body.mt-pwa-page::after {
  content: none !important;
  display: none !important;
}

body.mt-pwa-page > .mt-pwa-floral-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--mt-canvas);
  background-image:
    linear-gradient(180deg, var(--mt-floral-veil-top), var(--mt-floral-veil-bottom)),
    var(--mt-floral-image);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

/* Keep all interactive PWA surfaces above the decorative layer. */
body.mt-pwa-page > header,
body.mt-pwa-page > #journalStart,
body.mt-pwa-page > #appMain,
body.mt-pwa-page > .mt-day-carousel,
body.mt-pwa-page > .modal-backdrop,
body.mt-pwa-page > .toast,
body.mt-pwa-page > .mt-toast,
body.mt-pwa-page > .mt-install-banner {
  position: relative;
  z-index: 2;
}
body.mt-pwa-page > header { z-index: 10; }
body.mt-pwa-page > .mt-day-carousel { position: fixed; z-index: 22; }
body.mt-pwa-page > .modal-backdrop { position: fixed; z-index: 30; }
body.mt-pwa-page > .toast,
body.mt-pwa-page > .mt-toast { position: fixed; z-index: 10020; }

@media (max-width: 720px) {
  body.mt-pwa-page > .mt-pwa-floral-layer {
    background-image:
      linear-gradient(180deg, var(--mt-floral-veil-top), var(--mt-floral-veil-bottom)),
      var(--mt-floral-image),
      var(--mt-floral-image);
    background-position: center, left top, right bottom;
    background-size: 100% 100%, 900px auto, 900px auto;
    background-repeat: no-repeat;
  }
}

@media (max-width: 420px) {
  body.mt-pwa-page > .mt-pwa-floral-layer {
    background-size: 100% 100%, 760px auto, 760px auto;
  }
}