/* stage-76-cinematic-shell-alignment */

.app-shell {
  --stage76-shell-vignette: rgba(38, 35, 30, 0.18);
  --stage76-shell-depth: rgba(245, 241, 234, 0.22);
  --stage76-calendar-clarity: 0.64;
  --stage76-modal-overlay: rgba(38, 35, 30, 0.18);
  --stage76-dock-tint: rgba(255, 255, 255, 0.30);
  --stage76-warm-shadow: 0 28px 88px rgba(63, 54, 44, 0.16);
  --focus-app-atmosphere-opacity: 0.72;
  --focus-app-atmosphere-overlay-opacity: 1;
  --focus-app-atmosphere-blur: 0.8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 231, 203, 0.24), transparent 32rem),
    radial-gradient(circle at 87% 12%, color-mix(in srgb, var(--focus-app-atmosphere-accent, var(--primary)) 18%, transparent), transparent 34rem),
    linear-gradient(135deg, #eee6d8 0%, #d9d4c6 52%, #c8cfc0 100%);
}

.app-shell::before {
  opacity: var(--focus-app-atmosphere-opacity);
  filter: saturate(1.18) contrast(1.08) brightness(0.98);
  transform: scale(1.025);
}

.app-shell::after {
  background:
    radial-gradient(circle at 46% 24%, rgba(255, 245, 226, 0.035), transparent 23rem),
    linear-gradient(90deg, rgba(27, 31, 37, 0.30), transparent 20%, transparent 70%, rgba(47, 42, 38, 0.15)),
    linear-gradient(180deg, rgba(255, 248, 236, 0.035), rgba(245, 241, 234, 0.08) 42%, rgba(41, 37, 32, 0.18));
  opacity: 1;
  backdrop-filter: blur(var(--focus-app-atmosphere-blur)) saturate(1.06);
  -webkit-backdrop-filter: blur(var(--focus-app-atmosphere-blur)) saturate(1.06);
}

.main-surface {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.27), rgba(255, 255, 255, 0.14)),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.22), transparent 16rem);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 24px 72px rgba(38, 35, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.sidebar .brand,
.sidebar-user-card,
.desktop-logout {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18));
  border-color: rgba(255, 255, 255, 0.30);
}

.side-button {
  border-color: transparent;
}

.side-button:is(:hover, :focus-visible) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.18));
  box-shadow: 0 14px 34px rgba(54, 48, 39, 0.10);
}

.topbar {
  filter: drop-shadow(0 24px 42px rgba(55, 48, 39, 0.10));
}

.current-date,
.quote-dock {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--stage76-dock-tint) 78%, rgba(255, 255, 255, 0.36)), rgba(255, 255, 255, 0.18));
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow:
    0 18px 48px rgba(46, 39, 32, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.top-add-button {
  min-height: 66px;
  border-color: rgba(210, 118, 78, 0.42);
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.35), transparent 42%),
    linear-gradient(135deg, rgba(237, 160, 118, 0.78), rgba(197, 106, 75, 0.56));
  color: #573328;
  box-shadow:
    0 22px 58px rgba(197, 106, 75, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.top-add-button:is(:hover, :focus-visible) {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(135deg, rgba(246, 178, 132, 0.84), rgba(197, 106, 75, 0.64));
}

.calendar-sheet {
  --focus-calendar-image-visibility: 1;
  --focus-calendar-image-saturation: 1.34;
  --focus-calendar-image-contrast: 1.14;
  --focus-calendar-image-brightness: 1.03;
  --focus-calendar-cell-image-opacity: 0.095;
  --focus-calendar-cell-image-border: rgba(255, 255, 255, 0.26);
  box-shadow:
    0 30px 90px rgba(34, 34, 28, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.calendar-sheet::before {
  filter:
    saturate(var(--focus-calendar-image-saturation))
    contrast(var(--focus-calendar-image-contrast))
    brightness(var(--focus-calendar-image-brightness));
}

.calendar-sheet::after {
  background:
    radial-gradient(circle at 22% 8%, rgba(255, 255, 255, 0.08), transparent 19rem),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 14%, transparent), transparent 22rem),
    var(--calendar-season-noise),
    linear-gradient(180deg, rgba(12, 10, 8, 0.00), rgba(12, 10, 8, 0.10) 70%, rgba(12, 10, 8, 0.18));
  opacity: var(--stage76-calendar-clarity);
  backdrop-filter: blur(0.18px);
  -webkit-backdrop-filter: blur(0.18px);
}

.calendar-sheet .focus-calendar-cell {
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.13), transparent 44%),
    rgba(255, 255, 255, var(--focus-calendar-cell-image-opacity));
  backdrop-filter: blur(2.4px) saturate(1.04);
  -webkit-backdrop-filter: blur(2.4px) saturate(1.04);
}

.calendar-sheet .focus-calendar-cell-selected {
  background:
    radial-gradient(circle at 60% 12%, rgba(255, 238, 214, 0.44), transparent 48%),
    linear-gradient(135deg, rgba(221, 135, 96, 0.56), rgba(105, 74, 58, 0.26));
  border-color: rgba(255, 218, 189, 0.66);
  box-shadow:
    0 16px 38px rgba(197, 106, 75, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.focus-summary-card,
.focus-tasks-card,
.interesting-today,
.add-menu {
  box-shadow: var(--stage76-warm-shadow);
}

.modal::backdrop,
.week-modal::backdrop,
.day-card-modal::backdrop {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 247, 232, 0.05), transparent 26rem),
    color-mix(in srgb, var(--stage76-modal-overlay) 72%, transparent);
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
}

.modal-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.24)),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.22), transparent 18rem);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow:
    0 34px 92px rgba(36, 31, 27, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.day-card-panel,
.week-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.20)),
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.24), transparent 20rem);
}

:root[data-theme="dark"] .app-shell {
  --stage76-shell-vignette: rgba(5, 7, 12, 0.46);
  --stage76-shell-depth: rgba(12, 15, 23, 0.62);
  --stage76-modal-overlay: rgba(5, 7, 12, 0.36);
  --stage76-dock-tint: rgba(255, 255, 255, 0.08);
  --focus-app-atmosphere-opacity: 0.42;
  --focus-app-atmosphere-blur: 1.2px;
  background:
    radial-gradient(circle at 50% 16%, rgba(111, 140, 255, 0.12), transparent 34rem),
    linear-gradient(135deg, #131722, #1a2030 52%, #10131c);
}

:root[data-theme="dark"] .app-shell::after {
  background:
    radial-gradient(circle at 48% 16%, rgba(111, 140, 255, 0.10), transparent 30rem),
    linear-gradient(90deg, rgba(5, 7, 12, 0.66), transparent 28%, rgba(5, 7, 12, 0.58)),
    linear-gradient(180deg, rgba(13, 15, 22, 0.22), rgba(13, 15, 22, 0.62));
}

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .modal-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
    radial-gradient(circle at 16% 0%, rgba(111, 140, 255, 0.10), transparent 18rem);
  border-color: rgba(255, 255, 255, 0.11);
}

:root[data-theme="dark"] .current-date,
:root[data-theme="dark"] .quote-dock {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045));
  border-color: rgba(255, 255, 255, 0.11);
}

:root[data-theme="dark"] .calendar-sheet {
  --focus-calendar-cell-image-opacity: 0.082;
  --focus-calendar-cell-image-border: rgba(255, 255, 255, 0.17);
}

:root[data-theme="contrast"] .app-shell {
  --stage76-shell-vignette: rgba(30, 30, 30, 0.10);
  --stage76-shell-depth: rgba(247, 247, 245, 0.30);
  --stage76-modal-overlay: rgba(30, 30, 30, 0.14);
  --focus-app-atmosphere-opacity: 0.46;
  --focus-app-atmosphere-blur: 0.7px;
}

:root[data-theme="contrast"] .calendar-sheet {
  --focus-calendar-cell-image-opacity: 0.12;
}

@media (max-width: 760px) {
  .app-shell {
    --focus-app-atmosphere-opacity: 0.48;
    --focus-app-atmosphere-blur: 0.5px;
    background:
      radial-gradient(circle at 50% 2%, rgba(255, 224, 196, 0.22), transparent 22rem),
      linear-gradient(180deg, #e3ded2, #cfd6ca);
  }

  .app-shell::after {
    background:
      linear-gradient(180deg, rgba(255, 248, 236, 0.10), rgba(245, 241, 234, 0.24) 45%, rgba(42, 38, 32, 0.12));
  }

  .top-add-button {
    min-height: 58px;
  }

  .calendar-sheet {
    --focus-calendar-cell-image-opacity: 0.115;
  }

  .modal::backdrop,
  .week-modal::backdrop,
  .day-card-modal::backdrop {
    backdrop-filter: blur(8px) saturate(1.04);
    -webkit-backdrop-filter: blur(8px) saturate(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell::before,
  .app-shell::after,
  .calendar-sheet::before,
  .calendar-sheet::after {
    transition: none;
    transform: none;
  }
}