/*
 * This is a manifest file that'll be compiled into app.css, which will include all the files
 * listed below.
 *
 * Any CSS file within this directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require tailwind
 *= require_self
 */

/* Responsive navbar: functionality now handled via Tailwind classes in the view */


/* Z-Index Management - CSS Custom Properties */
:root {
  color-scheme: dark;
  --app-bg: #061226;
  --app-bg-top: #0b1730;
  --app-surface: rgba(11, 23, 48, 0.82);
  --app-surface-strong: rgba(16, 32, 61, 0.94);
  --app-surface-muted: rgba(8, 18, 38, 0.9);
  --app-nav-bg: rgba(6, 18, 38, 0.84);
  --app-footer-bg: rgba(6, 18, 38, 0.92);
  --app-control-bg: rgba(255, 255, 255, 0.04);
  --app-control-hover: rgba(255, 255, 255, 0.08);
  --app-border: rgba(148, 163, 184, 0.16);
  --app-border-strong: rgba(247, 111, 133, 0.24);
  --app-text-primary: #f7f7fa;
  --app-text-secondary: #c7d0de;
  --app-text-muted: #8d99af;
  --app-brand-coral: #f76f85;
  --app-brand-peach: #f3a56a;
  --app-brand-amber: #f6c24d;
  --app-brand-mint: #a9f0d1;
  --app-success: #55d38a;
  --app-warning: #f3c967;
  --app-danger: #fb7185;
  --app-info: #8ab4ff;
  --app-brand-gradient: linear-gradient(135deg, var(--app-brand-coral) 0%, var(--app-brand-peach) 52%, var(--app-brand-amber) 100%);
  --app-shadow-panel: 0 24px 60px rgba(2, 6, 23, 0.28);
  --app-shadow-hover: 0 32px 72px rgba(2, 6, 23, 0.36);
  --z-tooltip: 99999;
  --z-modal: 10000;
  --z-dropdown: 1000;
  --z-card: 1;
}

html[data-theme="light"] {
  color-scheme: light;
  --app-bg: #f2f6fb;
  --app-bg-top: #fbfdff;
  --app-surface: rgba(255, 255, 255, 0.84);
  --app-surface-strong: rgba(255, 255, 255, 0.96);
  --app-surface-muted: rgba(244, 247, 251, 0.92);
  --app-nav-bg: rgba(248, 251, 255, 0.86);
  --app-footer-bg: rgba(241, 245, 249, 0.92);
  --app-control-bg: rgba(255, 255, 255, 0.72);
  --app-control-hover: rgba(255, 255, 255, 0.94);
  --app-border: rgba(15, 23, 42, 0.1);
  --app-border-strong: rgba(247, 111, 133, 0.22);
  --app-text-primary: #0f172a;
  --app-text-secondary: #334155;
  --app-text-muted: #64748b;
  --app-success: #188f56;
  --app-warning: #b7791f;
  --app-danger: #d3455e;
  --app-info: #2563eb;
  --app-shadow-panel: 0 18px 40px rgba(15, 23, 42, 0.08);
  --app-shadow-hover: 0 24px 54px rgba(15, 23, 42, 0.12);
}

html {
  background: var(--app-bg);
}

body {
  min-height: 100vh;
  color: var(--app-text-primary);
  background:
    radial-gradient(circle at top left, rgba(247, 111, 133, 0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(246, 194, 77, 0.16), transparent 26%),
    linear-gradient(180deg, var(--app-bg-top) 0%, var(--app-bg) 42%, #040b17 100%);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(247, 111, 133, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(246, 194, 77, 0.14), transparent 26%),
    linear-gradient(180deg, var(--app-bg-top) 0%, var(--app-bg) 58%, #edf3fa 100%);
}

.app-main {
  background: transparent !important;
  color: var(--app-text-primary);
}

.app-brand-gradient-text {
  background-image: var(--app-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.app-brand-wordmark {
  color: var(--app-brand-peach);
}

.app-surface,
.app-card,
.app-panel,
.app-stat-card {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-surface-strong) 98%, transparent),
      color-mix(in srgb, var(--app-surface-muted) 98%, transparent)
    );
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-panel);
  backdrop-filter: blur(18px);
}

.app-card,
.app-panel,
.app-stat-card {
  border-radius: 1rem;
}

.app-card:hover,
.app-panel:hover,
.app-stat-card:hover {
  border-color: rgba(243, 165, 106, 0.22);
  box-shadow: var(--app-shadow-hover);
}

.app-page-shell {
  min-height: 100vh;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.app-page-shell.pt-0 {
  padding-top: 0 !important;
}

.app-public-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(243, 165, 106, 0.12), transparent 32%),
    radial-gradient(circle at top left, rgba(247, 111, 133, 0.1), transparent 28%),
    linear-gradient(180deg, #061226 0%, #081730 48%, #091d34 100%);
  color: var(--app-text-primary);
}

.app-page-subtitle,
.app-muted-text {
  color: var(--app-text-secondary);
}

.app-accent-link {
  color: var(--app-brand-peach);
}

.app-accent-link:hover {
  color: var(--app-brand-amber);
}

.app-button {
  position: relative;
  border: 1px solid transparent;
  border-radius: 0.95rem;
  font-weight: 600;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, filter 180ms ease;
}

.app-button:hover {
  transform: translateY(-1px);
}

.app-button:focus-visible,
.app-icon-button:focus-visible,
.app-form-control:focus,
.app-select-control:focus,
.app-textarea-control:focus,
.app-nav-shell summary:focus-visible,
.app-mobile-nav summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(243, 165, 106, 0.18);
}

.app-button-primary {
  color: #081223;
  background-image: var(--app-brand-gradient);
  box-shadow: 0 16px 34px rgba(243, 165, 106, 0.18);
}

.app-button-primary:hover {
  filter: saturate(1.08) brightness(1.03);
}

.app-button-secondary {
  color: var(--app-text-primary);
  background: var(--app-control-bg);
  border-color: var(--app-border);
}

.app-button-secondary:hover,
.app-button-ghost:hover {
  background: var(--app-control-hover);
  border-color: rgba(243, 165, 106, 0.18);
}

.app-button-ghost {
  color: var(--app-text-secondary);
  background: transparent;
}

.app-button-danger {
  color: #fff5f7;
  background: rgba(251, 113, 133, 0.12);
  border-color: rgba(251, 113, 133, 0.28);
}

.app-button-danger:hover {
  background: rgba(251, 113, 133, 0.18);
}

html[data-theme="light"] .app-button-danger {
  color: #ffffff;
  background: #cf2448;
  border-color: rgba(207, 36, 72, 0.28);
  box-shadow: 0 12px 24px rgba(207, 36, 72, 0.18);
}

html[data-theme="light"] .app-button-danger:hover {
  background: #b91c3d;
}

.app-button-success {
  color: #ecfff4;
  background: rgba(85, 211, 138, 0.14);
  border-color: rgba(85, 211, 138, 0.28);
}

.app-button-success:hover {
  background: rgba(85, 211, 138, 0.2);
}

.app-form-label {
  color: var(--app-text-secondary);
}

.app-form-hint {
  color: var(--app-text-muted);
}

.app-form-control,
.app-select-control,
.app-textarea-control {
  color: var(--app-text-primary);
  background: var(--app-control-bg);
  border-color: var(--app-border);
}

.app-form-control::placeholder,
.app-textarea-control::placeholder {
  color: var(--app-text-muted);
}

.app-form-control:hover,
.app-select-control:hover,
.app-textarea-control:hover {
  border-color: rgba(243, 165, 106, 0.22);
}

.app-form-control:focus,
.app-select-control:focus,
.app-textarea-control:focus {
  border-color: rgba(243, 165, 106, 0.42);
}

.app-form-control:disabled,
.app-select-control:disabled,
.app-textarea-control:disabled {
  background: color-mix(in srgb, var(--app-control-bg) 86%, transparent);
  color: var(--app-text-muted);
}

.app-badge {
  border-radius: 999px;
  border-width: 1px;
}

.app-badge--primary {
  color: var(--app-brand-peach);
  background: rgba(247, 111, 133, 0.1);
  border-color: rgba(247, 111, 133, 0.22);
}

.app-badge--success {
  color: var(--app-success);
  background: rgba(85, 211, 138, 0.1);
  border-color: rgba(85, 211, 138, 0.22);
}

.app-badge--warning {
  color: var(--app-warning);
  background: rgba(243, 201, 103, 0.1);
  border-color: rgba(243, 201, 103, 0.22);
}

.app-badge--danger {
  color: var(--app-danger);
  background: rgba(251, 113, 133, 0.1);
  border-color: rgba(251, 113, 133, 0.24);
}

.app-badge--gray {
  color: var(--app-text-secondary);
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.16);
}

.app-badge--purple,
.app-badge--pink,
.app-badge--indigo {
  color: var(--app-brand-mint);
  background: rgba(169, 240, 209, 0.08);
  border-color: rgba(169, 240, 209, 0.16);
}

.app-status-surface--success {
  background: rgba(85, 211, 138, 0.12);
  border: 1px solid rgba(85, 211, 138, 0.24);
  color: var(--app-success);
}

.app-status-surface--info {
  background: rgba(138, 180, 255, 0.12);
  border: 1px solid rgba(138, 180, 255, 0.24);
  color: var(--app-info);
}

.app-status-surface--warning {
  background: rgba(243, 201, 103, 0.12);
  border: 1px solid rgba(243, 201, 103, 0.24);
  color: var(--app-warning);
}

.app-status-surface--neutral {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--app-text-secondary);
}

.app-status-surface--muted {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--app-text-muted);
}

.app-icon-tile {
  border-radius: 0.9rem;
}

.app-icon-tile--info {
  background: rgba(138, 180, 255, 0.12);
  border: 1px solid rgba(138, 180, 255, 0.2);
}

.app-icon-tile--accent {
  background: rgba(243, 165, 106, 0.12);
  border: 1px solid rgba(243, 165, 106, 0.2);
}

.app-alert {
  border-radius: 1rem;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.22);
}

.app-alert--success {
  background:
    linear-gradient(135deg, rgba(5, 95, 68, 0.96), rgba(18, 121, 86, 0.94)),
    rgba(5, 95, 68, 0.96);
  border-color: rgba(167, 243, 208, 0.42);
  color: #ecfdf5;
}

.app-alert--danger {
  background:
    linear-gradient(135deg, rgba(159, 18, 57, 0.96), rgba(190, 18, 60, 0.94)),
    rgba(159, 18, 57, 0.96);
  border-color: rgba(253, 164, 175, 0.42);
  color: #fff1f2;
}

.app-alert--warning {
  background:
    linear-gradient(135deg, rgba(146, 64, 14, 0.96), rgba(180, 83, 9, 0.94)),
    rgba(146, 64, 14, 0.96);
  border-color: rgba(253, 230, 138, 0.46);
  color: #fffbeb;
}

.app-alert--info {
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.96), rgba(37, 99, 235, 0.94)),
    rgba(30, 64, 175, 0.96);
  border-color: rgba(191, 219, 254, 0.42);
  color: #eff6ff;
}

.app-icon-button {
  background: var(--app-control-bg);
  border-color: var(--app-border);
  color: var(--app-text-secondary);
}

.app-icon-button:hover {
  background: var(--app-control-hover);
  border-color: rgba(243, 165, 106, 0.2);
  color: var(--app-text-primary);
}

.app-icon-button--primary {
  color: var(--app-brand-peach);
}

.app-icon-button--success {
  color: var(--app-success);
}

.app-icon-button--danger {
  color: var(--app-danger);
}

.app-nav-shell {
  background: var(--app-nav-bg) !important;
  border-bottom: 1px solid var(--app-border) !important;
  backdrop-filter: blur(20px);
}

.app-mobile-nav {
  background: linear-gradient(180deg, rgba(16, 32, 61, 0.98), rgba(8, 18, 38, 0.96));
  border: 1px solid rgba(243, 165, 106, 0.14);
  border-bottom-color: rgba(243, 165, 106, 0.2);
  border-radius: 1.25rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  padding: 0.3rem 0.35rem calc(env(safe-area-inset-bottom) + 0.42rem);
}

.app-footer-shell {
  background: var(--app-footer-bg);
  border-top: 1px solid var(--app-border);
}

.app-nav-shell .text-gray-900,
.app-nav-shell .text-gray-700,
.app-nav-shell .text-gray-600,
.app-mobile-nav .text-gray-900,
.app-mobile-nav .text-gray-700,
.app-footer-shell .text-gray-500,
.app-footer-shell .text-gray-400 {
  color: var(--app-text-secondary);
}

.app-nav-shell .text-blue-600,
.app-nav-shell .text-green-600,
.app-nav-shell .text-yellow-600,
.app-mobile-nav .text-blue-600,
.app-mobile-nav .text-green-600,
.app-mobile-nav .text-yellow-600,
.app-mobile-nav .text-gray-900,
.app-footer-shell .hover\:text-green-500:hover,
.app-footer-shell .hover\:text-blue-600:hover,
.app-footer-shell .hover\:text-blue-500:hover {
  color: var(--app-brand-peach);
}

.app-nav-shell .bg-blue-50,
.app-nav-shell .bg-green-50,
.app-mobile-nav .bg-blue-50,
.app-mobile-nav .bg-green-50 {
  background: rgba(247, 111, 133, 0.1);
}

.app-nav-shell .border-gray-200,
.app-mobile-nav .border-gray-200,
.app-footer-shell .border-gray-100 {
  border-color: var(--app-border);
}

.app-nav-shell details > summary,
.app-mobile-nav details > summary {
  background: var(--app-control-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text-secondary) !important;
}

.app-nav-shell details > div,
.app-mobile-nav details > div {
  background: var(--app-surface-strong) !important;
  border-color: var(--app-border) !important;
}

.app-nav-lang-menu {
  width: min(12.5rem, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
  max-height: min(65vh, 24rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-mobile-nav > div {
  min-height: 3.45rem;
  height: auto !important;
}

.app-mobile-nav-item {
  border-radius: 0.78rem;
  padding: 0.34rem 0.22rem 0.32rem;
  min-width: 0;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.app-mobile-nav a[aria-current="page"] {
  background:
    linear-gradient(180deg, rgba(247, 111, 133, 0.12), rgba(243, 165, 106, 0.08)),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(243, 165, 106, 0.2), 0 8px 18px rgba(247, 111, 133, 0.08);
  transform: none;
  color: var(--app-brand-peach);
}

.app-nav-lang-trigger {
  min-height: 2.45rem;
  min-width: 4rem;
  padding-inline: 0.78rem;
  border-radius: 1.05rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
    linear-gradient(135deg, rgba(247, 111, 133, 0.1), rgba(243, 165, 106, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 14px 30px rgba(2, 6, 23, 0.18);
}

.app-nav-lang-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  color: var(--app-text-secondary);
  text-align: left;
  transition: background-color 180ms ease, color 180ms ease;
}

.app-nav-lang-button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--app-text-primary);
}

.app-nav-lang-button.is-selected {
  background: rgba(243, 165, 106, 0.14);
  color: var(--app-text-primary);
  font-weight: 600;
}

html[data-theme="light"] .app-mobile-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.96));
  border-color: rgba(148, 163, 184, 0.28);
  border-bottom-color: rgba(148, 163, 184, 0.34);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] .app-mobile-nav .app-mobile-nav-item {
  color: #475569;
}

html[data-theme="light"] .app-mobile-nav .app-mobile-nav-item svg {
  color: currentColor;
}

html[data-theme="light"] .app-mobile-nav a[aria-current="page"] {
  background:
    linear-gradient(180deg, rgba(255, 238, 229, 0.94), rgba(255, 246, 221, 0.9)),
    rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 1px rgba(243, 165, 106, 0.26), 0 8px 16px rgba(243, 165, 106, 0.16);
  color: #9a4f1d;
}

html[data-theme="light"] .app-nav-lang-trigger {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

html[data-theme="light"] .app-nav-lang-button:hover {
  background: rgba(148, 163, 184, 0.14);
}

html[data-theme="light"] .app-nav-lang-button.is-selected {
  background: rgba(243, 165, 106, 0.2);
}

.app-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.65rem;
  padding: 0.42rem 1rem 0.42rem 0.46rem;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    var(--app-control-bg);
  color: var(--app-text-secondary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 12px 28px rgba(2, 6, 23, 0.14);
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.app-back-link:hover {
  transform: translateY(-1px);
  color: var(--app-text-primary);
  background: var(--app-control-hover);
  border-color: rgba(243, 165, 106, 0.22);
}

.app-back-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 0.85rem;
  background:
    linear-gradient(135deg, rgba(247, 111, 133, 0.16), rgba(243, 165, 106, 0.14)),
    rgba(243, 165, 106, 0.08);
  color: var(--app-brand-peach);
  border: 1px solid rgba(243, 165, 106, 0.18);
  flex-shrink: 0;
}

.app-back-link__text {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
}

.app-section-header {
  background: linear-gradient(180deg, rgba(247, 111, 133, 0.08), rgba(243, 165, 106, 0.05));
}

.app-theme-option {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 1.1rem;
  border: 1px solid var(--app-border);
  background: var(--app-control-bg);
  color: var(--app-text-secondary);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.app-theme-option:hover {
  transform: translateY(-1px);
  border-color: rgba(243, 165, 106, 0.22);
  background: var(--app-control-hover);
  color: var(--app-text-primary);
}

.app-theme-option.is-active {
  border-color: rgba(243, 165, 106, 0.34);
  background:
    linear-gradient(180deg, rgba(247, 111, 133, 0.1), rgba(243, 165, 106, 0.08)),
    var(--app-control-hover);
  box-shadow: 0 18px 32px rgba(243, 165, 106, 0.12);
  color: var(--app-text-primary);
}

.app-theme-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.95rem;
  background: rgba(243, 165, 106, 0.14);
  color: var(--app-brand-peach);
  border: 1px solid rgba(243, 165, 106, 0.18);
  flex-shrink: 0;
}

.app-theme-option__title {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--app-text-primary);
}

.app-theme-option__description {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--app-text-muted);
}

.app-theme-option__check {
  margin-left: auto;
  color: var(--app-brand-peach);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 180ms ease, transform 180ms ease;
}

.app-theme-option.is-active .app-theme-option__check {
  opacity: 1;
  transform: scale(1);
}

.app-achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(243, 165, 106, 0.2);
  color: var(--app-text-primary);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.18);
}

.app-streak-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
}

.app-streak-track__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.2rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.app-streak-track__day.is-active {
  background: rgba(243, 165, 106, 0.12);
  border-color: rgba(243, 165, 106, 0.28);
}

.app-streak-track__label {
  font-size: 0.62rem;
  color: var(--app-text-muted);
}

.app-streak-track__icon {
  font-size: 0.95rem;
}

.app-confirmation-backdrop {
  background: rgba(4, 11, 23, 0.76);
  backdrop-filter: blur(8px);
}

.app-confirmation-card {
  background: linear-gradient(180deg, rgba(18, 34, 63, 0.98), rgba(8, 18, 38, 0.96));
  border: 1px solid var(--app-border);
  border-radius: 1.6rem;
  box-shadow: 0 36px 80px rgba(2, 6, 23, 0.5);
  color: var(--app-text-primary);
}

.app-confirmation-body {
  background: transparent;
}

.app-confirmation-footer {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--app-border);
}

.app-confirmation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.app-confirmation-icon--primary {
  background: rgba(138, 180, 255, 0.12);
  border-color: rgba(138, 180, 255, 0.24);
  color: var(--app-info);
}

.app-confirmation-icon--warning {
  background: rgba(243, 201, 103, 0.12);
  border-color: rgba(243, 201, 103, 0.24);
  color: var(--app-warning);
}

.app-confirmation-icon--danger {
  background: rgba(251, 113, 133, 0.12);
  border-color: rgba(251, 113, 133, 0.24);
  color: var(--app-danger);
}

.app-workout-header {
  position: sticky;
  top: calc(3rem - 1px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--app-nav-bg) 96%, transparent), color-mix(in srgb, var(--app-bg) 96%, transparent));
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(20px);
  margin-top: -1px;
  z-index: 40;
}

.app-workout-header__inner {
  padding-top: 0.08rem;
  padding-bottom: 0.2rem;
}

@media (min-width: 1024px) {
  .app-workout-header {
    top: calc(3.5rem - 1px);
  }
}

.app-workout-exercise-card {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.app-workout-exercise-card__meta {
  background: rgba(255, 255, 255, 0.05);
  color: var(--app-text-muted);
}

.app-workout-exercise-card__detail-link {
  color: var(--app-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.app-workout-exercise-card__detail-link:hover {
  color: var(--app-info);
  background: rgba(138, 180, 255, 0.12);
  border-color: rgba(138, 180, 255, 0.24);
}

.app-workout-stepper {
  color: var(--app-text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-workout-stepper:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(243, 165, 106, 0.18);
}

.app-nav-shell a:hover,
.app-mobile-nav a:hover,
.app-footer-shell a:hover {
  color: var(--app-text-primary);
}

.app-panel .text-gray-900,
.app-panel .text-gray-800,
.app-card .text-gray-900,
.app-card .text-gray-800,
.app-page-shell .text-gray-900 {
  color: var(--app-text-primary);
}

.app-panel .text-gray-700,
.app-panel .text-gray-600,
.app-card .text-gray-700,
.app-card .text-gray-600,
.app-page-shell .text-gray-600 {
  color: var(--app-text-secondary);
}

.app-panel .text-gray-500,
.app-panel .text-gray-400,
.app-card .text-gray-500,
.app-card .text-gray-400,
.app-page-shell .text-gray-500 {
  color: var(--app-text-muted);
}

.app-panel .border-gray-200,
.app-panel .border-gray-200\/60,
.app-panel .border-gray-100,
.app-panel .border-gray-300,
.app-card .border-gray-200,
.app-card .border-gray-200\/60,
.app-card .border-gray-100,
.app-card .border-gray-300,
.app-page-shell .border-gray-200 {
  border-color: var(--app-border);
}

html[data-theme="dark"] .app-panel .bg-green-50,
html[data-theme="dark"] .app-panel .bg-blue-50,
html[data-theme="dark"] .app-panel .bg-yellow-50,
html[data-theme="dark"] .app-panel .bg-gray-50,
html[data-theme="dark"] .app-panel .bg-gray-100,
html[data-theme="dark"] .app-panel .bg-gray-200,
html[data-theme="dark"] .app-panel .from-yellow-50,
html[data-theme="dark"] .app-panel .to-orange-50,
html[data-theme="dark"] .app-card .bg-green-50,
html[data-theme="dark"] .app-card .bg-blue-50,
html[data-theme="dark"] .app-card .bg-yellow-50,
html[data-theme="dark"] .app-card .bg-gray-50,
html[data-theme="dark"] .app-card .bg-gray-100,
html[data-theme="dark"] .app-card .bg-gray-200,
html[data-theme="dark"] .app-card .bg-white,
html[data-theme="dark"] .app-card .bg-white\/95,
html[data-theme="dark"] .app-card .from-yellow-50,
html[data-theme="dark"] .app-card .to-orange-50,
html[data-theme="dark"] .app-page-shell .from-green-100,
html[data-theme="dark"] .app-page-shell .to-blue-100 {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] .app-panel,
html[data-theme="light"] .app-card,
html[data-theme="light"] .app-stat-card {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(248, 251, 255, 0.9)
    );
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .app-panel .text-gray-900,
html[data-theme="light"] .app-panel .text-gray-800,
html[data-theme="light"] .app-card .text-gray-900,
html[data-theme="light"] .app-card .text-gray-800,
html[data-theme="light"] .app-page-shell .text-gray-900 {
  color: #0f172a;
}

html[data-theme="light"] .app-panel .text-gray-700,
html[data-theme="light"] .app-panel .text-gray-600,
html[data-theme="light"] .app-card .text-gray-700,
html[data-theme="light"] .app-card .text-gray-600,
html[data-theme="light"] .app-page-shell .text-gray-600 {
  color: #334155;
}

html[data-theme="light"] .app-panel .text-gray-500,
html[data-theme="light"] .app-panel .text-gray-400,
html[data-theme="light"] .app-card .text-gray-500,
html[data-theme="light"] .app-card .text-gray-400,
html[data-theme="light"] .app-page-shell .text-gray-500 {
  color: #64748b;
}

html[data-theme="light"] .app-page-shell.app-legacy-page,
html[data-theme="light"] .app-legacy-page.bg-gradient-to-br,
html[data-theme="light"] .app-legacy-page .bg-gradient-to-br {
  background-image: none;
  background-color: transparent;
}

.app-panel .text-green-700,
.app-panel .text-green-600,
.app-card .text-green-700,
.app-card .text-green-600 {
  color: var(--app-success);
}

.app-panel .text-blue-700,
.app-panel .text-blue-600,
.app-card .text-blue-700,
.app-card .text-blue-600 {
  color: var(--app-info);
}

.app-panel .text-purple-700,
.app-panel .text-purple-600,
.app-card .text-purple-700,
.app-card .text-purple-600 {
  color: var(--app-brand-peach);
}

.app-panel .text-yellow-700,
.app-panel .text-yellow-800,
.app-card .text-yellow-700,
.app-card .text-yellow-800 {
  color: var(--app-warning);
}

.app-panel .border-green-200 {
  border-color: rgba(85, 211, 138, 0.24);
}

.app-panel .border-blue-200 {
  border-color: rgba(138, 180, 255, 0.24);
}

.app-panel .border-yellow-200 {
  border-color: rgba(243, 201, 103, 0.24);
}

.app-card .border-green-200 {
  border-color: rgba(85, 211, 138, 0.24);
}

.app-card .border-blue-200 {
  border-color: rgba(138, 180, 255, 0.24);
}

.app-card .border-yellow-200 {
  border-color: rgba(243, 201, 103, 0.24);
}

.app-panel .bg-gradient-to-r.from-green-500.to-green-600,
.app-panel .bg-gradient-to-r.from-green-500.to-green-600.hover\:from-green-600.hover\:to-green-700,
.app-panel .bg-gradient-to-r.from-teal-500.to-cyan-600,
.app-panel .bg-gradient-to-r.from-purple-500.to-purple-600,
.app-panel .bg-gradient-to-r.from-blue-500.to-blue-600 {
  background-image: var(--app-brand-gradient);
  color: #081223;
}

.app-public-page .bg-white,
.app-public-page .bg-white\/95,
.app-public-page .bg-white\/90,
.app-public-page .bg-gray-50,
.app-public-page .bg-gradient-to-br.from-green-50.to-blue-50,
.app-public-page .bg-gradient-to-br.from-green-50.via-white.to-blue-50,
.app-public-page .bg-gradient-to-b.from-gray-50.to-white,
.app-public-page .bg-gradient-to-r.from-green-50.to-blue-50 {
  background: transparent;
}

.app-public-page .bg-white,
.app-public-page .bg-white\/95,
.app-public-page .bg-white\/90,
.app-public-page .bg-gray-50,
.app-public-page .bg-gradient-to-br.from-blue-50.to-blue-100,
.app-public-page .bg-gradient-to-br.from-teal-50.to-teal-100,
.app-public-page .bg-gradient-to-br.from-green-50.to-green-100,
.app-public-page .bg-gradient-to-br.from-purple-50.to-purple-100,
.app-public-page .bg-gradient-to-br.from-indigo-50.to-indigo-100,
.app-public-page .bg-gradient-to-br.from-cyan-50.to-cyan-100,
.app-public-page .bg-gradient-to-r.from-green-50.to-blue-50 {
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-panel);
  backdrop-filter: blur(18px);
}

.app-public-page .rounded-xl.bg-white,
.app-public-page .rounded-2xl.bg-white,
.app-public-page .rounded-3xl.bg-white,
.app-public-page .bg-white.rounded-xl,
.app-public-page .bg-white.rounded-2xl,
.app-public-page .bg-white.rounded-3xl,
.app-public-page .bg-white\/95.rounded-xl,
.app-public-page .bg-white\/90.rounded-2xl,
.app-public-page .bg-gray-50.rounded-2xl,
.app-public-page .bg-gradient-to-br.from-blue-50.to-blue-100.rounded-xl,
.app-public-page .bg-gradient-to-br.from-teal-50.to-teal-100.rounded-xl,
.app-public-page .bg-gradient-to-br.from-green-50.to-green-100.rounded-xl,
.app-public-page .bg-gradient-to-br.from-purple-50.to-purple-100.rounded-xl,
.app-public-page .bg-gradient-to-br.from-indigo-50.to-indigo-100.rounded-xl,
.app-public-page .bg-gradient-to-br.from-cyan-50.to-cyan-100.rounded-xl,
.app-public-page .bg-gradient-to-r.from-green-50.to-blue-50 {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-surface-strong) 98%, transparent),
      color-mix(in srgb, var(--app-surface-muted) 98%, transparent)
    );
}

.app-public-page .text-gray-900,
.app-public-page .text-gray-800,
.app-public-page .prose h1,
.app-public-page .prose h2,
.app-public-page .prose h3,
.app-public-page .prose h4,
.app-public-page .prose strong {
  color: var(--app-text-primary);
}

.app-public-page .text-gray-700,
.app-public-page .text-gray-600,
.app-public-page .prose,
.app-public-page .prose p,
.app-public-page .prose li,
.app-public-page .prose ul,
.app-public-page .prose ol {
  color: var(--app-text-secondary);
}

.app-public-page .text-gray-500,
.app-public-page .text-gray-400,
.app-public-page .prose a {
  color: var(--app-text-muted);
}

.app-public-page .border-gray-200,
.app-public-page .border-gray-200\/60,
.app-public-page .border-gray-300,
.app-public-page .border-blue-100,
.app-public-page .border-white\/20 {
  border-color: var(--app-border);
}

.app-public-page .text-blue-600,
.app-public-page .text-green-600,
.app-public-page .text-indigo-600,
.app-public-page .text-teal-600,
.app-public-page .hover\:text-blue-700:hover,
.app-public-page .hover\:text-blue-600:hover,
.app-public-page .hover\:text-gray-700:hover {
  color: var(--app-brand-peach);
}

.app-public-page .text-green-700,
.app-public-page .text-green-200,
.app-public-page .text-green-100,
.app-public-page .text-blue-700,
.app-public-page .text-purple-700,
.app-public-page .text-yellow-700,
.app-public-page .text-orange-700,
.app-public-page .text-red-700 {
  color: var(--app-text-secondary);
}

.app-public-page .bg-green-100,
.app-public-page .bg-red-100,
.app-public-page .bg-blue-100,
.app-public-page .bg-teal-100,
.app-public-page .bg-purple-100,
.app-public-page .bg-indigo-100,
.app-public-page .bg-cyan-100,
.app-public-page .bg-yellow-100 {
  background: rgba(255, 255, 255, 0.08);
}

.app-public-page .bg-gradient-to-r.from-green-500.to-blue-600,
.app-public-page .bg-gradient-to-r.from-green-500.to-indigo-500,
.app-public-page .bg-gradient-to-br.from-green-500.to-green-600,
.app-public-page .bg-gradient-to-br.from-teal-500.to-teal-600,
.app-public-page .bg-gradient-to-br.from-blue-500.to-blue-600,
.app-public-page .bg-gradient-to-br.from-indigo-500.to-indigo-600 {
  background-image: var(--app-brand-gradient);
  color: #081223;
}

.app-public-page .prose a:hover,
.app-public-page .underline:hover,
.app-public-page a:hover {
  color: var(--app-text-primary);
}

.app-public-section-title {
  color: #f8fafc;
}

.app-public-section-copy {
  color: #cbd5e1;
}

.app-public-hero-pill {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(8, 18, 38, 0.7)),
    rgba(8, 18, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.2);
  color: #f8fafc;
  backdrop-filter: blur(18px);
}

.app-public-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 253, 0.94)) !important;
  border: 1px solid rgba(226, 232, 240, 0.88);
  box-shadow: 0 24px 58px rgba(2, 6, 23, 0.22);
  color: #0f172a;
  backdrop-filter: blur(18px);
}

.app-public-card-title {
  color: #0f172a;
}

.app-public-card-copy {
  color: #334155;
}

.app-public-card-muted {
  color: #64748b;
}

.app-public-card a:not(.app-button) {
  color: #a6541f;
}

.app-public-card .app-button-secondary {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(148, 163, 184, 0.32);
  color: #0f172a;
}

.app-public-card .app-button-secondary:hover {
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
}

.app-legacy-page .text-gray-900,
.app-legacy-page .text-gray-800 {
  color: var(--app-text-primary);
}

.app-legacy-page .text-gray-700,
.app-legacy-page .text-gray-600 {
  color: var(--app-text-secondary);
}

.app-legacy-page .text-gray-500,
.app-legacy-page .text-gray-400 {
  color: var(--app-text-muted);
}

.app-legacy-page .border-gray-200,
.app-legacy-page .border-gray-200\/60,
.app-legacy-page .border-gray-100,
.app-legacy-page .border-gray-300,
.app-legacy-page .border-blue-200,
.app-legacy-page .border-green-200,
.app-legacy-page .border-yellow-200,
.app-legacy-page .border-red-200,
.app-legacy-page .border-purple-200 {
  border-color: var(--app-border);
}

.app-legacy-page .bg-white,
.app-legacy-page .bg-white\/95,
.app-legacy-page .bg-white\/90,
.app-legacy-page .bg-white\/5,
.app-legacy-page .bg-gray-50,
.app-legacy-page .bg-gray-100,
.app-legacy-page .bg-gray-200,
.app-legacy-page .bg-blue-50,
.app-legacy-page .bg-blue-100,
.app-legacy-page .bg-green-50,
.app-legacy-page .bg-green-100,
.app-legacy-page .bg-yellow-50,
.app-legacy-page .bg-yellow-100,
.app-legacy-page .bg-red-50,
.app-legacy-page .bg-red-100,
.app-legacy-page .bg-purple-50,
.app-legacy-page .bg-purple-100,
.app-legacy-page .bg-teal-50,
.app-legacy-page .bg-teal-100,
.app-legacy-page .bg-indigo-100,
.app-legacy-page .bg-gradient-to-r.from-green-50.to-blue-50,
.app-legacy-page .bg-gradient-to-br.from-green-50.via-white.to-blue-50,
.app-legacy-page .bg-gradient-to-br.from-blue-50.via-white.to-green-50,
.app-legacy-page .bg-gradient-to-br.from-green-50.to-blue-50,
.app-legacy-page .bg-gradient-to-br.from-blue-50.via-green-50.to-blue-50 {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-surface-strong) 98%, transparent),
      color-mix(in srgb, var(--app-surface-muted) 98%, transparent)
    );
  border-color: var(--app-border) !important;
  box-shadow: var(--app-shadow-panel);
  backdrop-filter: blur(18px);
}

.app-legacy-page .text-blue-600,
.app-legacy-page .text-blue-700,
.app-legacy-page .hover\:text-blue-700:hover,
.app-legacy-page .hover\:text-blue-800:hover {
  color: var(--app-info);
}

.app-legacy-page .text-green-600,
.app-legacy-page .text-green-700 {
  color: var(--app-success);
}

.app-legacy-page .text-red-600,
.app-legacy-page .text-red-700 {
  color: var(--app-danger);
}

.app-legacy-page .text-yellow-600,
.app-legacy-page .text-yellow-700,
.app-legacy-page .text-yellow-800 {
  color: var(--app-warning);
}

.app-legacy-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.app-legacy-page select,
.app-legacy-page textarea {
  color: var(--app-text-primary);
  background: var(--app-control-bg);
  border-color: var(--app-border);
}

.app-legacy-page input::placeholder,
.app-legacy-page textarea::placeholder {
  color: var(--app-text-muted);
}

.app-legacy-page select option {
  color: #081223;
}

.app-legacy-page .bg-blue-600,
.app-legacy-page .hover\:bg-blue-700:hover,
.app-legacy-page .bg-gradient-to-r.from-blue-500.to-blue-600,
.app-legacy-page .bg-gradient-to-r.from-green-500.to-blue-600,
.app-legacy-page .bg-gradient-to-r.from-green-500.to-green-600,
.app-legacy-page .bg-gradient-to-r.from-teal-500.to-cyan-600,
.app-legacy-page .bg-yellow-600,
.app-legacy-page .hover\:bg-yellow-700:hover,
.app-legacy-page .bg-red-600,
.app-legacy-page .hover\:bg-red-700:hover,
.app-legacy-page .bg-green-600,
.app-legacy-page .hover\:bg-green-700:hover {
  background-image: var(--app-brand-gradient);
  background-color: transparent;
  color: #081223;
  border-color: transparent;
}

.app-stat-card .text-gray-600,
.app-stat-card .text-gray-500,
.app-stat-card .text-gray-400 {
  color: var(--app-text-muted);
}

.app-stat-card .text-gray-900 {
  color: var(--app-text-primary);
}

.app-auth-google-button {
  color: var(--app-text-primary);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--app-border);
}

.app-auth-google-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(243, 165, 106, 0.2);
}

.app-auth-divider {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-surface-strong) 98%, transparent),
      color-mix(in srgb, var(--app-surface-muted) 98%, transparent)
    );
}

@media (max-width: 639px) {
  .app-footer-shell {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.app-stat-icon {
  background: rgba(255, 255, 255, 0.05);
  color: var(--app-brand-peach);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.app-stat-icon--blue {
  color: #8ab4ff;
  background: rgba(138, 180, 255, 0.12);
}

.app-stat-icon--green {
  color: #55d38a;
  background: rgba(85, 211, 138, 0.12);
}

.app-stat-icon--orange {
  color: #f3a56a;
  background: rgba(243, 165, 106, 0.12);
}

.app-stat-icon--purple {
  color: #f6c24d;
  background: rgba(246, 194, 77, 0.12);
}

.app-stat-icon--teal {
  color: var(--app-brand-mint);
  background: rgba(169, 240, 209, 0.12);
}

.app-stat-icon--red {
  color: var(--app-danger);
  background: rgba(251, 113, 133, 0.12);
}

.app-stat-icon--gray {
  color: var(--app-text-secondary);
  background: rgba(148, 163, 184, 0.12);
}

/* Tooltip Portal Container - Always on top */
/* Use isolation: isolate to create a new stacking context that's guaranteed to be above everything */
#tooltip-portal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  /* Maximum z-index value */
  isolation: isolate !important;
  /* Create new stacking context */
}


/* Tooltip content styling - ensure it's always on top */
#tooltip-portal>[role="tooltip"] {
  pointer-events: auto !important;
  position: fixed !important;
  z-index: 2147483647 !important;
  /* Explicit maximum z-index */
  /* Use transform to create new stacking context above everything */
  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
  /* Hint browser for optimization */
  overflow: visible !important;
  width: max-content !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Ensure tooltip inner content displays correctly */
#tooltip-portal>[role="tooltip"]>div {
  display: block !important;
  position: relative !important;
  z-index: inherit !important;
  width: max-content !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Search input: app radius + enough height so icon and text are not clipped */
[data-search-input-wrapper] {
  min-height: 2.75rem;
}

[data-search-input-wrapper] input {
  border-radius: 0.75rem !important;
  min-height: 2.75rem;
  box-sizing: border-box;
  padding-left: 3.5rem !important;
  /* gap between icon and placeholder so they never overlay */
}

/* Blog article typography */
.blog-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--app-text-secondary);
  max-width: 42rem;
  margin-inline: auto;
}

.blog-content p + p {
  margin-top: 1rem;
}

.blog-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--app-text-primary);
}

.blog-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--app-text-primary);
}

.blog-content ul,
.blog-content ol {
  padding-left: 1.25rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.blog-content li + li {
  margin-top: 0.25rem;
}

/* Rest timer: completion state */
.rest-timer-container.rest-timer-complete {
  background: rgb(240 253 244);
  border-color: rgb(34 197 94);
  animation: rest-timer-pulse 1.5s ease-in-out 2;
}

/* Stable app chrome spacing: avoid runtime Tailwind class mismatches */
.app-main {
  padding-top: 3rem;
}

.app-flash-stack {
  top: 3rem;
}

body.user-signed-in {
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
}

.app-footer-signed-in {
  display: none;
}

@media (min-width: 1024px) {
  /* Guest nav stays h-12 (3rem); signed-in nav uses lg:h-14 (3.5rem). Extra top padding
     only for signed-in — otherwise a white strip appears between nav and hero on landing. */
  body.user-signed-in .app-main {
    padding-top: 3.5rem;
  }

  body.user-signed-in .app-flash-stack {
    top: 3.5rem;
  }

  body.user-signed-in {
    padding-bottom: 0;
  }

  .app-footer-signed-in {
    display: block;
    margin-bottom: 0;
  }
}

@media (max-width: 639px) {
  .app-mobile-nav {
    margin-inline: 0.35rem;
  }

  .app-footer-shell:not(.app-footer-signed-in) {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@keyframes rest-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}