/* PEPTODAY liquid-glass visual layer — versioned to avoid stale browser styles. */
:root {
  --liquid-card:
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(246,251,255,.45)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(151,211,239,.48) 48%, rgba(255,255,255,.74)) border-box;
  --liquid-shadow:
    0 24px 60px rgba(27,76,111,.11),
    0 5px 14px rgba(37,107,145,.06),
    inset 0 1.5px 0 rgba(255,255,255,.96),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(102,172,207,.12);
}

.app-shell {
  isolation: isolate;
  position: relative;
  background: #f8fbff !important;
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

.app-shell::before {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 34rem 28rem at 7% 9%, rgba(255,183,72,.2), transparent 68%),
    radial-gradient(ellipse 42rem 35rem at 92% 7%, rgba(44,169,218,.25), transparent 67%),
    radial-gradient(ellipse 39rem 34rem at 65% 79%, rgba(56,194,177,.18), transparent 69%),
    radial-gradient(ellipse 30rem 26rem at 24% 72%, rgba(135,154,234,.12), transparent 70%),
    linear-gradient(145deg, #fcfeff 0%, #eef7fd 49%, #f9fcff 100%);
}

.app-shell::after {
  width: 310px;
  height: 310px;
  right: 7vw;
  top: 18vh;
  z-index: 0;
  opacity: .42;
  border-radius: 44% 56% 63% 37% / 48% 43% 57% 52%;
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(51,177,216,.12));
  filter: blur(2px);
  box-shadow: inset 22px 18px 55px rgba(255,255,255,.38), 0 30px 90px rgba(64,168,202,.1);
  transform: rotate(-14deg);
}

.app-shell .workspace,
.app-shell .mobile-nav { position: relative; z-index: 1; }
.app-shell .sidebar { z-index: 10; }

.app-shell :is(
  .card,.stat-card,.dashboard-card,.schedule-card,.inventory-card,.protocol-card,.peptide-card,.modal-card,.panel,.table-wrap,.empty-state,
  .dose-card,.side-card,.protocol-card-large,.metric-card,.trend-card,.goal-card,.insight-card,.exercise-log-card,.month-card,.day-detail-card,
  .calendar-shell,.library-detail,.half-life-widget,.assistant-workspace,.stored-table,.safety-checks,.rotation-guidance,.supply-card
) {
  background: var(--liquid-card) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--liquid-shadow) !important;
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  backdrop-filter: blur(28px) saturate(155%);
}

.app-shell :is(.dose-card,.side-card,.inventory-card,.protocol-card-large,.metric-card,.goal-card,.insight-card,.peptide-card) {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

@media (hover:hover) {
  .app-shell :is(.dose-card,.side-card,.inventory-card,.protocol-card-large,.metric-card,.goal-card,.insight-card,.peptide-card):hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 70px rgba(26,78,112,.15), inset 0 1.5px 0 #fff, inset 0 -1px 0 rgba(90,176,213,.15) !important;
  }
}

.app-shell .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(241,249,254,.58)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(137,201,229,.36)) border-box !important;
  border-right: 1px solid transparent !important;
  box-shadow: 14px 0 48px rgba(31,87,122,.08), inset -1px 0 rgba(255,255,255,.66) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
}

.app-shell :is(.primary-button,.secondary-button,.icon-button,.complete-button,.done-button) {
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 9px 24px rgba(28,91,132,.12), inset 0 1px 0 rgba(255,255,255,.72) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.app-shell :is(.primary-button,.secondary-button,.icon-button,.complete-button,.done-button):hover {
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow: 0 14px 30px rgba(28,91,132,.17), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.app-shell .primary-nav button.active {
  background: linear-gradient(100deg, rgba(224,241,255,.82), rgba(231,250,250,.55)) !important;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 3px 0 #1685df, 0 8px 22px rgba(33,105,150,.08), inset 0 1px rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

/* Dense information surfaces stay more opaque for fast scanning. */
.app-shell :is(table, thead, tbody, tr, th, td, input, select, textarea) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-theme="dark"] .app-shell,
.dark .app-shell { background: #08131d !important; }

[data-theme="dark"] .app-shell::before,
.dark .app-shell::before {
  background:
    radial-gradient(ellipse 34rem 28rem at 7% 9%, rgba(247,166,45,.14), transparent 68%),
    radial-gradient(ellipse 42rem 35rem at 92% 7%, rgba(32,143,190,.24), transparent 67%),
    radial-gradient(ellipse 39rem 34rem at 65% 79%, rgba(32,156,143,.14), transparent 69%),
    linear-gradient(145deg, #0a1722 0%, #08131d 52%, #0d1b27 100%);
}

[data-theme="dark"] .app-shell::after,
.dark .app-shell::after { opacity: .2; }

[data-theme="dark"] .app-shell :is(
  .card,.stat-card,.dashboard-card,.schedule-card,.inventory-card,.protocol-card,.peptide-card,.modal-card,.panel,.table-wrap,.empty-state,
  .dose-card,.side-card,.protocol-card-large,.metric-card,.trend-card,.goal-card,.insight-card,.exercise-log-card,.month-card,.day-detail-card,
  .calendar-shell,.library-detail,.half-life-widget,.assistant-workspace,.stored-table,.safety-checks,.rotation-guidance,.supply-card
),
.dark .app-shell :is(
  .card,.stat-card,.dashboard-card,.schedule-card,.inventory-card,.protocol-card,.peptide-card,.modal-card,.panel,.table-wrap,.empty-state,
  .dose-card,.side-card,.protocol-card-large,.metric-card,.trend-card,.goal-card,.insight-card,.exercise-log-card,.month-card,.day-detail-card,
  .calendar-shell,.library-detail,.half-life-widget,.assistant-workspace,.stored-table,.safety-checks,.rotation-guidance,.supply-card
) {
  background:
    linear-gradient(145deg, rgba(19,39,54,.76), rgba(8,25,38,.5)) padding-box,
    linear-gradient(135deg, rgba(128,199,228,.28), rgba(255,255,255,.05) 48%, rgba(61,162,189,.18)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: 0 26px 62px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px rgba(57,154,190,.12) !important;
}

[data-theme="dark"] .app-shell .sidebar,
.dark .app-shell .sidebar {
  background: linear-gradient(180deg, rgba(12,30,44,.86), rgba(7,22,34,.68)) !important;
  border-right-color: rgba(123,193,220,.14) !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell * { transition-duration: .01ms !important; }
}

@media (max-width: 720px) {
  .app-shell::after { width: 210px; height: 210px; right: -70px; top: 12vh; }
  .app-shell :is(.card,.dose-card,.side-card,.inventory-card,.protocol-card-large,.metric-card,.goal-card,.peptide-card) {
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
  }
}