@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════
   ErgoTimer — Stand & Move Desk Reminder
   css/style.css
   ════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────
   Design tokens — Light mode (default)
   ────────────────────────────────────────────────── */

:root {
  --bg: #FFFFFF;
  --sidebar-bg: rgba(250, 249, 246, 0.97);
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --text: #1a1a1a;
  --text-muted: #767676;
  --sidebar-width: 395px;
  --brand-standly: #111111;
  --brand-tick: #D4901A;
  --brand-sub: rgb(51, 51, 51);
  --text-dim: #b0b0b0;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --input-bg: #ffffff;
  --input-border: rgba(0, 0, 0, 0.14);
  --input-focus: #4a90e2;
  --list-border: rgba(0, 0, 0, 0.07);
  --row-hover: rgba(0, 0, 0, 0.03);
  --toggle-off: rgba(0, 0, 0, 0.11);
  --toggle-off-bd: rgba(0, 0, 0, 0.15);
  --toggle-on: #4a90e2;
  --hamburger: rgba(0, 0, 0, 0.72);
  --veil: rgba(0, 0, 0, 0.16);
  --shadow: rgba(0, 0, 0, 0.10);
  --divider: rgba(0, 0, 0, 0.07);
  --note-text: #aaa;
  --btn-bg: #DEDEDB;
  --btn-border: rgba(0, 0, 0, 0.18);
  --btn-text: #1a1a1a;
  --btn-hover-bg: #f7f7f7;
  --scrollbar: rgba(0, 0, 0, 0.12);

  /* label colors */
  --lbl-ready: #D4A0B8;
  --lbl-sit: #D4A0B8;
  --lbl-stand: #6EA4D0;
  --lbl-inhale: #5DB894;
  --lbl-hold: #5DB894;
  --lbl-exhale: #5DB894;
  --lbl-walk: #D4902A;

  /* transitions */
  --bg-trans: background-color 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  --color-trans: color 0.4s ease;
  --fast: 0.22s ease;
}

/* ──────────────────────────────────────────────────
   Dark mode tokens
   ────────────────────────────────────────────────── */

body.dark-mode {
  --bg: #1c1c20;
  --sidebar-bg: rgba(20, 20, 24, 0.97);
  --sidebar-border: rgba(255, 255, 255, 0.07);
  --text: #e8e8e6;
  --text-muted: #858380;
  --brand-standly: #E8E8E6;
  --brand-tick: #D4901A;
  --brand-sub: #858380;
  --text-dim: #4a4846;
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.08);
  --input-bg: rgba(255, 255, 255, 0.07);
  --input-border: rgba(255, 255, 255, 0.13);
  --list-border: rgba(255, 255, 255, 0.06);
  --row-hover: rgba(255, 255, 255, 0.03);
  --toggle-off: rgba(255, 255, 255, 0.11);
  --toggle-off-bd: rgba(255, 255, 255, 0.15);
  --hamburger: rgba(255, 255, 255, 0.78);
  --veil: rgba(0, 0, 0, 0.45);
  --shadow: rgba(0, 0, 0, 0.40);
  --divider: rgba(255, 255, 255, 0.07);
  --note-text: #4a4846;
  --btn-bg: rgba(255, 255, 255, 0.07);
  --btn-border: rgba(255, 255, 255, 0.18);
  --btn-text: #d8d8d6;
  --btn-hover-bg: rgba(255, 255, 255, 0.11);
  --scrollbar: rgba(255, 255, 255, 0.11);

  --lbl-ready: #D4A0B8;
  --lbl-sit: #D4A0B8;
  --lbl-stand: #6EA4D0;
  --lbl-inhale: #5DB894;
  --lbl-hold: #5DB894;
  --lbl-exhale: #5DB894;
  --lbl-walk: #D4902A;
}

/* ──────────────────────────────────────────────────
   Reset & base
   ────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: var(--bg-trans), var(--color-trans);
  will-change: background-color;
}

/* Utility: visually hidden (for checkbox label trick) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ──────────────────────────────────────────────────
   Canvas
   ────────────────────────────────────────────────── */

#main-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────
   Center display overlay
   ────────────────────────────────────────────────── */

.center-display {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  user-select: none;
}

/* Outer Rim (A) - Flat solid luxury purple ring */
.outer-rim-gold {
  position: absolute;
  border-radius: 50%;
  width: calc(var(--outer-lim, 380px) * 2);
  height: calc(var(--outer-lim, 380px) * 2);
  background: #8B4A68 !important;
  border-color: #8B4A68 !important;
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
}

/* Phase 2 (STAND) - Force body/screen background strictly back to premium solid black in dark mode */
body.dark-mode.stage-stand {
  background-color: #000000 !important;
}

/* Phase 4 (WALK) - Force body/screen background strictly back to premium solid black in dark mode */
body.dark-mode.stage-walk {
  background-color: #000000 !important;
}

/* Phase 4 (WALK) - Force body/screen background strictly back to pure solid white in light mode */
body.light-mode.stage-walk {
  background-color: #FFFFFF !important;
}

/* Phase 2 (STAND) - Lock Outer Rim (A) strictly to deep Steel Sapphire dark tone */
.stage-stand .outer-rim-gold {
  background: #1A4878 !important;
  border-color: #1A4878 !important;
}

/* Phase 3 (BREATHE) - Lock Outer Rim (A) strictly to deep Jade Emerald dark tone and animate HOLD progress */
.stage-breathe .outer-rim-gold {
  background: conic-gradient(from 0deg, #5DB894 0%, #5DB894 var(--hold-progress, 0%), #0D5C40 var(--hold-progress, 0%), #0D5C40 100%) !important;
  border-color: #0D5C40 !important;
}

/* Phase 4 (WALK) - Lock Outer Rim (A) strictly to deep Amber Copper dark tone */
.stage-walk .outer-rim-gold {
  background: #6E3C04 !important;
  border-color: #6E3C04 !important;
}

/* Outer ring (B) - Variable Ring (Static size, unified color) */
.outer-ring,
#outer-ring {
  position: absolute;
  border-radius: 50%;
  width: calc(var(--outer-r, 380px) * 2);
  height: calc(var(--outer-r, 380px) * 2);
  aspect-ratio: 1 / 1;
  contain: layout;
  background: var(--outer-ring-bg, #F5E6EC);
  border: 1.5px solid var(--outer-border, rgba(0, 0, 0, 0.1));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: border-color 0.4s ease, background-color 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, width, height, background-color, border-color;
  transform-origin: center;
  z-index: 2;
}

/* Solid premium unified color styling for SIT stage */
.stage-sit .outer-ring {
  background: var(--outer-ring-bg, #F5E6EC);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.12),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(208, 208, 117, 0.2);
}

/* Solid premium Steel Sapphire styling for STAND stage */
.stage-stand .outer-ring {
  background: var(--outer-ring-bg, #E4EEF8) !important;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.12),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  animation: none !important;
  /* Remain strictly static in shape and dimensions */
}

/* Solid premium Luxury Purple styling for BREATHE stage */
.stage-breathe .outer-ring {
  background: var(--outer-ring-bg, #DFF2EB) !important;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.12),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  animation: none !important;
  /* Remain strictly static in shape and dimensions */
}

/* Solid premium Amber Copper styling for WALK stage */
.stage-walk .outer-ring {
  background: var(--outer-ring-bg, #FBF0DA) !important;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.12),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  animation: none !important;
  /* Remain strictly static in shape and dimensions */
}

/* Rotating sun-shimmer conic gradient animation on Ring (B) during active stages (STAND, BREATHE, WALK) */
.stage-stand .outer-ring::after,
.stage-breathe .outer-ring::after,
.stage-walk .outer-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0.18) 30deg,
      rgba(255, 255, 255, 0) 60deg,
      rgba(255, 255, 255, 0.18) 90deg,
      rgba(255, 255, 255, 0) 120deg,
      rgba(255, 255, 255, 0.18) 150deg,
      rgba(255, 255, 255, 0) 180deg,
      rgba(255, 255, 255, 0.18) 210deg,
      rgba(255, 255, 255, 0) 240deg,
      rgba(255, 255, 255, 0.18) 270deg,
      rgba(255, 255, 255, 0) 300deg,
      rgba(255, 255, 255, 0.18) 330deg,
      rgba(255, 255, 255, 0) 360deg);
  animation: stand-shimmer 12s linear infinite;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 1;
}

@keyframes stand-shimmer {
  0% {
    transform: rotate(0deg);
    opacity: 0.5;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    transform: rotate(360deg);
    opacity: 0.5;
  }
}

/* Active breathing state keyframe animation loop */
.outer-ring.active-anim {
  animation: luxury-breath 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Dynamic water ripple wave elements — concentric circular stroke lines inside Ring (B) */
.ripple-container {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.ripple-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: calc(var(--core-r-fixed, 110px) * 2);
  height: calc(var(--core-r-fixed, 110px) * 2);
  border-radius: 50%;
  /* Dynamic inverse outline border driven by JS counter loop milestones */
  border: 1px solid var(--sit-ripple-stroke-color, rgba(82, 24, 64, 0.45)) !important;
  transition: border-color 0.5s ease-in-out;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, border-color;
}

/* Ripples animate only when the SIT phase is active & running */
.outer-ring.rippling .ripple-wave {
  animation: ripple-expand 6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.outer-ring.rippling .ripple-1 {
  animation-delay: 0s;
}

.outer-ring.rippling .ripple-2 {
  animation-delay: 2s;
}

.outer-ring.rippling .ripple-3 {
  animation-delay: 4s;
}

@keyframes ripple-expand {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(var(--core-expand-scale, 4.1));
    opacity: 0;
  }
}

/* Inner white central core (C) */
.inner-core {
  position: absolute;
  border-radius: 50%;
  width: calc(var(--core-r-fixed, 110px) * 2);
  height: calc(var(--core-r-fixed, 110px) * 2);
  background: #ffffff !important;
  border: 1.5px solid var(--core-border, rgba(0, 0, 0, 0.08));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03), 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: background-color 0.85s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width, height, background-color, border-color, transform;
  transform-origin: center;
  z-index: 3;
  transform: scale(var(--core-scale, 1));
}

/* SIT Phase Climax Sequence Styling */
body.phase-ended .inner-core.climax-expanded,
.inner-core.climax-expanded {
  animation: none !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

body.phase-ended .inner-core.core-snapback,
.inner-core.core-snapback {
  animation: none !important;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.inner-core,
.inner-core * {
  color: #000000 !important;
}

/* Dark Mode Recalibration for Center Core (C) */
body.dark-mode .inner-core {
  background: #000000 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .inner-core,
body.dark-mode .inner-core * {
  color: #ffffff !important;
}

/* Active SIT phase elements inside Center Core (C) rendered in mid-gradient luxury Rose Mauve */
.stage-ready .inner-core,
.stage-ready .inner-core *,
.stage-countdown .inner-core,
.stage-countdown .inner-core *,
.stage-sit .inner-core,
.stage-sit .inner-core *,
body.dark-mode .stage-ready .inner-core,
body.dark-mode .stage-ready .inner-core *,
body.dark-mode .stage-countdown .inner-core,
body.dark-mode .stage-countdown .inner-core *,
body.dark-mode .stage-sit .inner-core,
body.dark-mode .stage-sit .inner-core * {
  color: #D4A0B8 !important;
}

/* Active STAND phase elements inside Center Core (C) — Light Mode */
.stage-stand .inner-core,
.stage-stand .inner-core * {
  color: #6EA4D0 !important;
}

/* Active STAND phase elements inside Center Core (C) — Dark Mode override */
body.dark-mode .stage-stand .inner-core,
body.dark-mode .stage-stand .inner-core * {
  color: #6EA4D0 !important;
}

/* Active BREATHE phase elements inside Center Core (C) */
.stage-breathe .inner-core,
.stage-breathe .inner-core * {
  color: #5DB894 !important;
}

/* Active BREATHE phase elements inside Center Core (C) — Dark Mode override */
body.dark-mode .stage-breathe .inner-core,
body.dark-mode .stage-breathe .inner-core * {
  color: #5DB894 !important;
}

/* Active WALK (MOVE) phase elements inside Center Core (C) */
.stage-walk .inner-core,
.stage-walk .inner-core * {
  color: #D4902A !important;
}

/* Active WALK (MOVE) phase elements inside Center Core (C) — Dark Mode override */
body.dark-mode .stage-walk .inner-core,
body.dark-mode .stage-walk .inner-core * {
  color: #D4902A !important;
}



/* Breathing animation for BREATHE phase (STAND, BREATHE and WALK use JS-driven scaling / Luxury Breathe)
   De-coupled from CSS keyframe animation. */

@keyframes global-core-breath {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

/* BREATHE Phase: JS drives the "4+4+4+4 Box Breathing" programmatic expansion via --core-scale.
   No CSS animation — Core (C) breathes dynamically from baseline. */
.stage-breathe .inner-core {
  animation: none !important;
  will-change: transform;
}

/* STAND Phase: JS drives the "Slow Cover" linear expansion via --core-scale.
   No CSS animation — Core (C) creeps linearly from baseline to Rim (A). */
.stage-stand .inner-core {
  animation: none !important;
  will-change: transform;
}

/* WALK Phase: JS drives the "Luxury Breathe" programmatic expansion via --core-scale.
   No CSS animation — Core (C) breathes dynamically from baseline. */
.stage-walk .inner-core {
  animation: none !important;
  will-change: transform;
}

/* STAND Climax: Core (C) locked at peak (touching Rim A boundary) */
.stage-stand .inner-core.climax-expanded {
  animation: none !important;
  transition: none !important;
}

/* STAND Snapback: luxurious fabric-lift return to baseline */
.stage-stand .inner-core.core-snapback {
  animation: none !important;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}



/* ──────────────────────────────────────────────────
   Buffer Transition Stage & Fireworks Celebration
   ────────────────────────────────────────────────── */

.stage-buffer .inner-core,
.stage-buffer .inner-core * {
  color: var(--buffer-text-color) !important;
}

.stage-buffer .c-label {
  font-size: clamp(24px, 4.5vmin, 36px) !important;
  font-weight: 700;
  transition: none;
}

/* ── Phase Ready-Setup Countdown Delay ──────────────── */
/* Sweeping countdown digit in the timer sub-slot below "Ready?" header */
.c-timer.phase-ready-number {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(15px, 2.8vmin, 22px) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: none;
}

.stage-buffer .inner-core {
  animation: idle-pulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  will-change: transform;
}

@keyframes idle-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

.stage-buffer .outer-ring {
  background: var(--outer-ring-bg, #F5E6EC);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.12),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  animation: none !important;
}

.fireworks-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  z-index: 10;
  pointer-events: none;
}

.center-display-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes luxury-breath {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.85);
  }

  100% {
    transform: scale(1);
  }
}

/* Stage icon */
.c-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2d3748;
  /* premium professional charcoal */
  opacity: 0.85;
  margin-bottom: 2px;
  transition: var(--color-trans), opacity 0.4s;
}

body.dark-mode .c-icon {
  color: #e2e8f0;
}

.c-icon svg,
.c-icon i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(20px, 3.8vmin, 26px) !important;
  height: clamp(20px, 3.8vmin, 26px) !important;
  font-size: clamp(20px, 3.8vmin, 26px) !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Countdown / timer number (bottom element in the stack) */
.c-timer {
  font-size: clamp(11px, 2vmin, 14px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  min-height: 1.2em;
  transition: var(--color-trans);
}

/* Stage label (SIT / STAND / inhale / exhale - middle element in the stack) */
.c-label {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(15px, 2.7vmin, 20px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
  margin: 1px 0;
  line-height: 1.1;
  transition: color 0.55s ease;
}

/* Per-stage label colors */
.c-label.lbl-ready {
  color: var(--lbl-ready);
}

.c-label.lbl-sit {
  color: var(--lbl-sit);
}

.c-label.lbl-stand {
  color: var(--lbl-stand);
}

.c-label.lbl-inhale {
  color: var(--lbl-inhale);
}

.c-label.lbl-hold {
  color: var(--lbl-hold);
}

.c-label.lbl-exhale {
  color: var(--lbl-exhale);
}

.c-label.lbl-walk {
  color: var(--lbl-walk);
}

/* Em-dash shown only in READY state */
.c-dash {
  margin-top: 8px;
  font-size: clamp(13px, 2vmin, 18px);
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1;
  display: none;
  /* shown via JS */
  transition: var(--color-trans);
}

/* ──────────────────────────────────────────────────
   Countdown element inside Center Core (C)
   ────────────────────────────────────────────────── */

.c-countdown {
  font-size: clamp(11px, 2vmin, 14px);
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.2;
  min-height: 1.2em;
  display: none;
  transform-origin: center;
  will-change: transform, opacity;
  transition: var(--color-trans);
}

.c-countdown.cd-anim {
  animation: cdPop 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cdPop {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }

  18% {
    opacity: 1;
    transform: scale(1.00);
  }

  75% {
    opacity: 1;
    transform: scale(1.00);
  }

  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* ──────────────────────────────────────────────────
   Hamburger button
   ────────────────────────────────────────────────── */

.hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 24px;
  height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1002;
  padding: 0;
  transition:
    top 0.44s cubic-bezier(0.23, 1, 0.32, 1),
    left 0.44s cubic-bezier(0.23, 1, 0.32, 1),
    width 0.44s cubic-bezier(0.23, 1, 0.32, 1),
    height 0.44s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.36s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.22s ease;
}

.hamburger:hover {
  opacity: 0.6;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--hamburger);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.36s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.22s ease,
    background 0.4s ease,
    width 0.36s cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger span:nth-child(1) {
  align-self: flex-end;
}

.hamburger span:nth-child(2) {
  align-self: flex-start;
}

.hamburger span:nth-child(3) {
  align-self: flex-end;
}

/* Morph to a smaller, thinner × in the top-left of the sidebar when open */
#sidebar-toggle:checked~.hamburger {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 20px;
  height: 20px;
}

#sidebar-toggle:checked~.hamburger span {
  height: 1.5px;
  background: #666666;
  width: 20px;
  align-self: center;
}

#sidebar-toggle:checked~.hamburger span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

#sidebar-toggle:checked~.hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.15);
}

#sidebar-toggle:checked~.hamburger span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ──────────────────────────────────────────────────
   Sidebar veil (dim overlay)
   ────────────────────────────────────────────────── */

.sidebar-veil {
  position: fixed;
  inset: 0;
  z-index: 499;
  background: transparent;
  pointer-events: none;
  transition: background 0.42s ease, backdrop-filter 0.42s ease;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

#sidebar-toggle:checked~.sidebar-veil {
  background: transparent;
  pointer-events: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ──────────────────────────────────────────────────
   Sidebar panel
   ────────────────────────────────────────────────── */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  max-width: 90vw;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  z-index: 500;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(-100%);
  transition:
    transform 0.44s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.5s ease,
    border-color 0.4s ease;
}

.sidebar::-webkit-scrollbar {
  width: 3px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 2px;
}

#sidebar-toggle:checked~.sidebar {
  transform: translateX(0);
  box-shadow: 18px 0 60px var(--shadow);
}

/* Sidebar inner padding */
.sidebar-inner {
  padding: 35px 22px 48px;
}

/* ── Brand ── */
.brand {
  text-align: center;
  margin: 0 auto 20px;
}

/* Main Brand Title */
.brand-title,
.site-title,
header h1,
.sidebar-brand-wrapper h1,
.sidebar-brand-wrapper h2 {
  font-size: 28px !important;
  color: var(--brand-standly, var(--text));
  white-space: nowrap !important;
  display: inline-block !important;
}

body.dark-mode .brand-title,
body.dark-mode .site-title,
#app-body.dark-mode .brand-title,
#app-body.dark-mode .site-title,
[data-theme="dark"] .brand-title {
  color: var(--brand-standly, #E8E8E6) !important;
}

/* Tagline / Subtitle */
.brand-tagline,
.site-subtitle,
.brand-slogan,
.sidebar-brand-wrapper p {
  font-size: 13px !important;
}

.sidebar-brand-wrapper {
  margin-bottom: 36px !important;
}

.brand-name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 2.15rem;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  line-height: 1.2;
  transition: var(--color-trans);
}

.brand-standly {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  color: var(--brand-standly);
  transition: var(--color-trans);
}

.brand-tick {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 400 !important;
  color: #D4901A !important;
  transition: var(--color-trans);
}

.brand-tagline,
.brand-slogan,
.brand-sub {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-sub);
  margin-top: 5px;
  display: block;
  transition: var(--color-trans);
}

.brand-sub {
  color: rgb(51, 51, 51) !important;
  margin-top: 5px;
  display: block;
  transition: var(--color-trans);
}

body.dark .brand-sub,
.dark .brand-sub,
[data-theme="dark"] .brand-sub,
html.dark .brand-sub {
  color: rgb(200, 200, 198) !important;
}

body.dark-mode .brand-sub {
  color: rgb(200, 200, 198) !important;
}


/* ── Hero Section ── */
.sidebar-hero {
  text-align: left;
  margin: 18px 0 0 !important;
  padding: 0;
}

.hero-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--brand-standly);
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
  transition: var(--color-trans);
}

.hero-desc {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: rgb(17, 17, 17);
  line-height: 24px !important;
  max-width: 320px;
  margin: 0 auto 20px !important;
  text-align: center !important;
  transition: var(--color-trans);
}

body.dark-mode .hero-desc {
  color: rgb(200, 200, 198) !important;
}

/* ── Navigation row ── */
.sidebar-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 14px auto 16px !important;
}

.sidebar-nav .nav-link {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 400 !important;
}

.nav-link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  color: #D4901A !important;
  text-decoration: none;
  background-color: #DEDEDB !important;
  border: 1.5px solid #D4901A !important;
  padding: 5px 15px;
  border-radius: 50px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
  display: inline-block;
  cursor: pointer !important;
}

.nav-link:hover {
  background-color: #E8AE42 !important;
  border-color: #E8AE42 !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  filter: none !important;
}

body.dark-mode .nav-link {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #D4901A !important;
  border: 1.5px solid #D4901A !important;
}

body.dark-mode .nav-link:hover {
  background-color: #E8AE42 !important;
  border-color: #E8AE42 !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  filter: none !important;
}

/* ── Divider between Nav and Content ── */
.nav-divider {
  border: none;
  border-top: 1px solid #E5E5E5;
  margin: 16px 0 !important;
  transition: border-color 0.4s;
}

body.dark-mode .nav-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Problem & Solution Section ── */
.problem-solution-section {
  text-align: left;
  margin: 0 0 16px 0 !important;
  padding: 0;
}

.problem-solution-field-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  color: #333333;
  text-align: center !important;
  margin-bottom: 12px !important;
  display: block !important;
  width: 100% !important;
  transition: var(--color-trans);
}

body.dark-mode .problem-solution-field-title {
  color: #c8c8c6;
}

/* ── Sidebar Section Titles ── */
.sidebar-section-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333333;
  text-align: left;
  margin: 4px 0 12px;
  display: block;
  transition: var(--color-trans);
}

body.dark-mode .sidebar-section-title {
  color: #c8c8c6;
}

#personalized-setup-kicker,
.personalized-setup-kicker {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  text-align: left !important;
  align-self: flex-start !important;
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

#preferences-kicker,
.preferences-kicker {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
}

body.dark-mode #preferences-kicker,
body.dark-mode .preferences-kicker,
body.dark #preferences-kicker,
body.dark .preferences-kicker,
[data-theme="dark"] #preferences-kicker,
[data-theme="dark"] .preferences-kicker {
  color: #c8c8c6 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
}

.problem-solution-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--brand-standly);
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
  transition: var(--color-trans);
}

.problem-solution-desc {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: rgb(17, 17, 17);
  line-height: 24px !important;
  max-width: 320px;
  margin: 0 auto 28px !important;
  text-align: center !important;
  transition: var(--color-trans);
}

body.dark-mode .problem-solution-desc {
  color: rgb(200, 200, 198) !important;
}

/* ── Divider ── */
.divider {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 18px 0;
  transition: border-color 0.4s;
}

/* ──────────────────────────────────────────────────
   Profile card
   ────────────────────────────────────────────────── */

.profile-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  transition: background 0.4s, border-color 0.4s;
}

.profile-card-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: rgb(17, 17, 17);
  line-height: 24px !important;
  margin-bottom: 14px;
  text-align: left !important;
  align-self: flex-start !important;
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  white-space: nowrap;
  transition: var(--color-trans);
}

body.dark-mode .profile-card-title,
body.dark .profile-card-title,
.dark .profile-card-title,
[data-theme="dark"] .profile-card-title {
  color: rgb(232, 232, 230);
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.profile-banner {
  margin-top: 2px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4;
  background-color: #EBEBEB !important;
  color: rgb(17, 17, 17);
  display: flex;
  align-items: center;
  gap: 8px;
}

body.dark-mode .profile-banner {
  background-color: #000000 !important;
  color: rgb(232, 232, 230) !important;
}

body.dark-mode .profile-banner-text {
  color: rgb(232, 232, 230) !important;
}

/* Category indicator badge / pill text */
.profile-banner-text,
#profile-banner-text,
.category-badge,
.category-label,
#category-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  text-align: left !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

.profile-banner-text span,
#profile-banner-text span {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
}

/* Dark Mode Dropdown and Numeric Input Configuration */
body.dark-mode #sel-hours,
body.dark #sel-hours,
.dark #sel-hours,
[data-theme="dark"] #sel-hours {
  background-color: #000000 !important;
  color: rgb(232, 232, 230) !important;
}

body.dark-mode #sel-hours option,
body.dark #sel-hours option,
.dark #sel-hours option,
[data-theme="dark"] #sel-hours option {
  background-color: #000000 !important;
  color: rgb(232, 232, 230) !important;
}

body.dark-mode #inp-weight,
body.dark #inp-weight,
.dark #inp-weight,
[data-theme="dark"] #inp-weight {
  background-color: #000000 !important;
  color: rgb(232, 232, 230) !important;
}

body.dark-mode #inp-weight::-webkit-inner-spin-button,
body.dark-mode #inp-weight::-webkit-outer-spin-button {
  background-color: #000000 !important;
  filter: invert(1) !important;
  opacity: 1 !important;
}

.profile-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  transition: background-color var(--fast);
}

.profile-banner-dot.cat-a {
  background-color: #28a745 !important;
  color: #28a745 !important;
}

.profile-banner-dot.cat-b {
  background-color: #3b82f6 !important;
  color: #3b82f6 !important;
}

.profile-banner-dot.cat-c {
  background-color: #E53E3E !important;
  color: #E53E3E !important;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: rgb(17, 17, 17);
  letter-spacing: 0.01em;
  transition: var(--color-trans);
}

body.dark-mode .field-label,
body.dark .field-label,
.dark .field-label,
[data-theme="dark"] .field-label {
  color: rgb(232, 232, 230);
}

.field-input,
.field-select {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  color: rgb(17, 17, 17);
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 400;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.22s, background 0.4s, color 0.4s;
}

/* Weight input & Work hours select elements */
.setup-card input[type="number"],
.setup-card select,
.setup-card select option,
#weight-input,
#hours-select,
#hours-select option,
.profile-card input[type="number"],
.profile-card select,
.profile-card select option,
#inp-weight,
#sel-hours,
#sel-hours option,
.field-input,
.field-select,
.field-select option {
  font-size: 16px !important;
  color: rgb(17, 17, 17);
}

.field-input:focus,
.field-select:focus {
  border-color: var(--input-focus);
}

.field-select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}


/* ──────────────────────────────────────────────────
   Stage list
   ────────────────────────────────────────────────── */

.stage-list {
  margin-bottom: 18px;
}

.stage-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--list-border);
  border-radius: 6px;
  transition: background 0.18s;
}

.stage-row:last-child {
  border-bottom: none;
}

.stage-row:hover {
  background: var(--row-hover);
}

/* Colored dot */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.dot-gray {
  background: #D4A0B8 !important;
}

.dot-blue {
  background: #6EA4D0 !important;
}

.dot-purple {
  background: #5DB894 !important;
}

.dot-green {
  background: #D4902A !important;
}

/* Force SIT row icon and dot to match the mid-gradient luxury Rose Mauve tone across all themes */
#ico-sit,
body.dark-mode #ico-sit {
  color: #D4A0B8 !important;
}

body.dark-mode .dot-gray {
  background: #D4A0B8 !important;
}

/* Force STAND row icon and dot to match the mid-gradient Steel Sapphire tone across all themes */
#ico-stand,
body.dark-mode #ico-stand {
  color: #6EA4D0 !important;
}

body.dark-mode .dot-blue {
  background: #6EA4D0 !important;
}

/* Force BREATHE row icon and dot to match the Jade Emerald tone across all themes */
#ico-breathe,
body.dark-mode #ico-breathe {
  color: #5DB894 !important;
}

body.dark-mode .dot-purple {
  background: #5DB894 !important;
}

/* Force WALK row icon and dot to match the Amber Copper tone across all themes */
#ico-walk,
body.dark-mode #ico-walk {
  color: #D4902A !important;
}

.dot-green,
body.dark-mode .dot-green {
  background: #D4902A !important;
}

/* Row icon */
.row-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: var(--color-trans);
  margin-top: -1px;
}

.row-icon svg,
.row-icon i {
  width: 17px;
  height: 17px;
  font-size: 18px;
  line-height: 1;
}

/* Row text */
.row-meta {
  flex: 1;
  min-width: 0;
}

.row-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: rgb(17, 17, 17);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  transition: var(--color-trans);
}

body.dark-mode .row-name,
body.dark .row-name,
.dark .row-name,
[data-theme="dark"] .row-name,
body.dark-mode .phase-title,
body.dark .phase-title,
.dark .phase-title,
[data-theme="dark"] .phase-title {
  color: rgb(232, 232, 230) !important;
}

.row-desc {
  font-size: 13px !important;
  color: var(--text-muted);
  line-height: 1.3;
  transition: var(--color-trans);
}

#sit-desc,
.stage-row:first-child .row-desc {
  white-space: nowrap !important;
  letter-spacing: -0.2px;
}

/* Duration badge */
.row-dur {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  text-align: right;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: var(--color-trans);
  margin-top: 1px;
}

/* ──────────────────────────────────────────────────
   Action buttons
   ────────────────────────────────────────────────── */

.action-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.btn-start {
  width: 100%;
  margin-bottom: 10px;
  background: var(--btn-bg);
  border: 1.5px solid #D4901A !important;
  border-radius: 50px;
  color: #D4901A !important;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 500;
  padding: 11px 20px;
  cursor: pointer;
  transition: color 0.2s ease-in-out, background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, opacity 0.2s ease !important;
}

.btn-start:hover:not(:disabled) {
  background: #E8AE42 !important;
  border-color: #E8AE42 !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  filter: none !important;
  transform: translateY(-1px);
}

.btn-start:active:not(:disabled) {
  transform: translateY(0);
}

.btn-start:disabled {
  opacity: 0.52;
  cursor: default;
}

.action-subrow {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}

.btn-pause,
.btn-reset {
  flex: 1;
  background: var(--btn-bg);
  border: 1.5px solid #D4901A !important;
  border-radius: 50px;
  color: #D4901A !important;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 500;
  padding: 11px 20px;
  cursor: pointer;
  text-align: center;
  transition: color 0.2s ease-in-out, background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, opacity 0.2s ease !important;
}

.btn-pause:hover:not(:disabled),
.btn-reset:hover:not(:disabled) {
  background: #E8AE42 !important;
  border-color: #E8AE42 !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  filter: none !important;
  transform: translateY(-1px);
}

body.dark-mode .btn-start:hover:not(:disabled),
body.dark-mode .btn-pause:hover:not(:disabled),
body.dark-mode .btn-reset:hover:not(:disabled) {
  border-color: #E8AE42 !important;
  color: #FFFFFF !important;
}

.btn-pause:active:not(:disabled),
.btn-reset:active:not(:disabled) {
  transform: translateY(0);
}

.btn-pause:disabled,
.btn-reset:disabled {
  opacity: 0.52;
  cursor: default;
}

/* ──────────────────────────────────────────────────
   Toggle switches
   ────────────────────────────────────────────────── */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
}

.toggle-label {
  font-size: 14px !important;
  color: var(--text-muted);
  transition: var(--color-trans);
}

.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--toggle-off);
  border: 1px solid var(--toggle-off-bd);
  border-radius: 12px;
  transition: background 0.28s ease, border-color 0.28s ease;
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.toggle input:checked+.toggle-track {
  background: var(--toggle-on);
  border-color: var(--toggle-on);
}

.toggle input:checked+.toggle-track .toggle-knob {
  transform: translateX(20px);
}

/* ──────────────────────────────────────────────────
   Sidebar note
   ────────────────────────────────────────────────── */

.sidebar-note {
  font-size: 12px !important;
  color: #555555 !important;
  line-height: 1.65;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 20px;
  margin-bottom: 24px;
  transition: var(--color-trans);
}

body.dark-mode .sidebar-note {
  color: #A0A0A0 !important;
}

.sidebar-disclosure {
  font-size: 12px !important;
}

.preferences-section {
  margin-bottom: 20px;
}

/* ──────────────────────────────────────────────────
   Responsive — mobile
   ────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .sidebar-inner {
    padding: 35px 18px 38px;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .hamburger {
    top: 16px;
    left: 16px;
  }

  #sidebar-toggle:checked~.hamburger {
    left: 15px;
    top: 15px;
  }
}

/* ──────────────────────────────────────────────────
   Tabler Icon Matrix Stage Coloring
   ────────────────────────────────────────────────── */

/* Sidebar row icon coloring */
#ico-sit {
  color: #888780;
}

#ico-stand {
  color: #4A90D9;
}

#ico-breathe {
  color: #5DB894 !important;
}

#ico-walk {
  color: #D4902A !important;
}

/* Center core icon stage-based coloring */
.stage-ready #stage-icon,
.stage-countdown #stage-icon,
.stage-sit #stage-icon {
  color: #888780;
}

.stage-stand #stage-icon {
  color: #4A90D9;
}

.stage-breathe #stage-icon {
  color: #5DB894 !important;
}

.stage-walk #stage-icon {
  color: #D4902A !important;
}

/* ──────────────────────────────────────────────────
   Buy Me a Coffee Section
   ────────────────────────────────────────────────── */

.donation-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 22px 0;
  padding: 0;
  text-align: left;
}

.donation-header {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: rgb(17, 17, 17) !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  letter-spacing: -0.01em !important;
  transition: var(--color-trans);
}

body.dark-mode .donation-header,
body.dark .donation-header,
[data-theme="dark"] .donation-header {
  color: rgb(232, 232, 230) !important;
}

.btn-coffee {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.84rem;
  padding: 10px 24px;
  border-radius: 50px;
  border: 1.5px solid #D4901A;
  background-color: #DEDEDB !important;
  color: #D4901A;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out !important;
  cursor: pointer;
}

.btn-coffee:hover {
  background-color: #D4901A !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(212, 144, 26, 0.25);
  transform: translateY(-1.5px);
}

.btn-coffee:active {
  transform: translateY(0);
}

body.dark-mode .btn-coffee {
  border-color: #D4901A;
  color: #D4901A;
  background-color: transparent !important;
}

body.dark-mode .btn-coffee:hover {
  background-color: #D4901A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(212, 144, 26, 0.4);
}

/* ──────────────────────────────────────────────────
   Buy Me a Coffee CTA Component
   ────────────────────────────────────────────────── */

.about-coffee-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 auto 50px !important;
  gap: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.about-coffee-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  color: #333333 !important;
  max-width: 600px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-btn-coffee {
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  border: 1.5px solid #D4901A !important;
  background-color: #DEDEDB !important;
  color: #D4901A !important;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out !important;
  cursor: pointer !important;
}

.about-btn-coffee:hover {
  background-color: #D4901A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(212, 144, 26, 0.25) !important;
  transform: translateY(-1.5px) !important;
}

.about-btn-coffee:active {
  transform: translateY(0) !important;
}

body.dark-mode .about-coffee-text {
  color: #e8e8e6 !important;
}

body.dark-mode .about-btn-coffee {
  border-color: #D4901A !important;
  color: #D4901A !important;
  background-color: transparent !important;
}

body.dark-mode .about-btn-coffee:hover {
  background-color: #D4901A !important;
  color: #1c1c20 !important;
  box-shadow: 0 4px 15px rgba(212, 144, 26, 0.4) !important;
}

@media (min-width: 769px) {
  .about-coffee-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 27px !important;
    font-weight: 400 !important;
    letter-spacing: 0px !important;
    color: #333333 !important;
  }
}

@media (max-width: 768px) {

  /* ── Center Circle Timer Display: Mobile Proportional Scaling ── */
  .center-display-inner {
    padding: 2px 6px;
    max-width: 90%;
    box-sizing: border-box;
  }

  .c-icon {
    margin-bottom: 1px;
  }

  .c-icon svg,
  .c-icon i,
  .c-icon img {
    width: clamp(14px, 2.8vmin, 18px) !important;
    height: clamp(14px, 2.8vmin, 18px) !important;
    font-size: clamp(14px, 2.8vmin, 18px) !important;
    line-height: 1 !important;
  }

  .c-label {
    font-size: clamp(10.5px, 2.1vmin, 13.5px);
    letter-spacing: 0.025em;
    margin: 0.5px 0;
    line-height: 1.08;
  }

  .c-timer {
    font-size: clamp(8.5px, 1.6vmin, 10.5px);
    line-height: 1.1;
    min-height: 1.1em;
    letter-spacing: 0.015em;
  }

  .c-timer.phase-ready-number {
    font-size: clamp(10.5px, 2.1vmin, 14px) !important;
  }

  .c-countdown {
    font-size: clamp(8.5px, 1.6vmin, 10.5px);
    line-height: 1.1;
    min-height: 1.1em;
  }

  .c-dash {
    font-size: clamp(9px, 1.6vmin, 12px);
    margin-top: 4px;
  }

  .stage-buffer .c-label {
    font-size: clamp(14px, 3vmin, 18px) !important;
  }

  .about-coffee-container {
    margin: 0 auto 35px !important;
  }

  .about-coffee-text {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  /* Targeted Two Sidebar Headings */
  .hero-title,
  .problem-solution-title {
    font-size: 16px !important;
  }

  /* Targeted Sidebar Paragraphs & Support Text */
  .hero-desc,
  .problem-solution-desc,
  .donation-header {
    font-size: 14px !important;
  }

  /* Targeted Profile Calculation Card Elements */
  .profile-card-title,
  .field-label,
  label[for="inp-weight"],
  label[for="sel-hours"],
  label[for*="weight"],
  label[for*="hours"],
  .field-input,
  .field-select,
  .field-select option,
  #inp-weight,
  #sel-hours,
  #sel-hours option,
  .profile-banner-text,
  #profile-banner-text,
  .category-label,
  .profile-banner>span:not(.profile-banner-dot),
  .profile-banner,
  .row-name,
  .stage-row .row-name,
  .row-dur,
  .stage-row .row-dur,
  #dur-sit,
  #dur-stand,
  #dur-breathe,
  #dur-walk {
    font-size: 14px !important;
  }
}

/* ──────────────────────────────────────────────────
   Sidebar Footer Details (Links, Socials, Copyright)
   ────────────────────────────────────────────────── */

.sidebar-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 18px;
  text-align: center;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
}

.footer-link {
  color: #555555;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.footer-link:hover {
  color: #E8AE42 !important;
  text-decoration: underline !important;
}

.footer-link-separator {
  color: #888888;
  font-size: 0.8rem;
}

.footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.social-icon-link {
  color: #555555;
  opacity: 0.75;
  transition: all 0.25s ease-in-out;
  display: inline-flex;
}

.social-icon-link:hover {
  color: #E8AE42 !important;
  opacity: 1 !important;
  transform: scale(1.15);
}

.social-icon {
  width: 16px;
  height: 16px;
}

/* Copyright element */
.sidebar-copyright {
  font-size: 0.8rem;
  color: #555555;
  transition: all 0.25s ease-in-out;
}

/* Dark mode configurations */
body.dark-mode .footer-link,
body.dark-mode .footer-link-separator,
body.dark-mode .social-icon-link,
body.dark-mode .sidebar-copyright {
  color: #A0A0A0;
}

body.dark-mode .footer-link:hover,
body.dark-mode .social-icon-link:hover {
  color: #E8AE42 !important;
}

/* ──────────────────────────────────────────────────
   Modal Overlays
   ────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10000;
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background-color: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  padding: 32px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  font-family: 'Outfit', sans-serif !important;
  color: #2c2c2c;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
}

.modal-overlay.active .modal-container {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #888888;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 4px;
}

.modal-close:hover {
  color: #1a1a1a;
}

.modal-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 20px;
  color: #1a1a1a;
}

.modal-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

.modal-date {
  font-weight: 500;
  color: #666666;
  margin-bottom: 16px;
}

.modal-body ul {
  padding-left: 20px;
  margin-bottom: 0;
}

.modal-body li {
  margin-bottom: 12px;
}

.modal-body li strong {
  font-weight: 600;
  color: #1a1a1a;
}

/* Dark mode overrides for modal overlay */
body.dark-mode .modal-overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-container {
  background-color: #1c1c20;
  color: #e8e8e6;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .modal-close {
  color: #aaaaaa;
}

body.dark-mode .modal-close:hover {
  color: #ffffff;
}

body.dark-mode .modal-title {
  color: #ffffff;
}

body.dark-mode .modal-date {
  color: #aaaaaa;
}

body.dark-mode .modal-body li strong {
  color: #ffffff;
}

.modal-copyright {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  text-align: center !important;
  display: block !important;
  margin-top: 25px !important;
  font-size: 0.8rem !important;
  opacity: 0.7 !important;
  color: inherit;
}

/* FAQ Accordion Component */
.faq-summary {
  font-size: 16px;
}

/* ════════════════════════════════════════════════════
   Featured Product Card & Badge Styles
   ════════════════════════════════════════════════════ */

.featured-badge {
  position: absolute !important;
  top: 22px !important;
  left: 24px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #D4901A !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.featured-content .card-meta span:not(.card-category) {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

body.dark-mode .featured-badge {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #D4901A !important;
}

.card-img-area {
  background: #ffffff !important;
  box-shadow: none !important;
}

.card-img-area::before,
.card-img-area::after {
  display: none !important;
  content: none !important;
}

.card-badge {
  left: 16px !important;
}

.blog-card[data-category="chairs"] .card-img-area img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
  padding-top: 8px !important;
  padding-bottom: 0px !important;
  background-color: #ffffff !important;
}

.card-img-area img[alt="tounee Laptop Stand for Desk"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  padding-top: 10px !important;
  padding-bottom: 8px !important;
  background-color: #ffffff !important;
}

.card-img-area img[alt="Lamicall Laptop Stand Desk"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  box-sizing: border-box !important;
  padding-top: 18px !important;
  padding-bottom: 6px !important;
  background-color: #ffffff !important;
}

.card-img-area img[alt="Lifelong Laptop Stand Desk"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: 60% center !important;
  box-sizing: border-box !important;
  padding-top: 10px !important;
  padding-bottom: 8px !important;
  padding-left: 24px !important;
  padding-right: 8px !important;
  background-color: #ffffff !important;
}

.blog-card .card-img-area img[alt="Desktronic HomeOne Standing Desk"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  padding-top: 8px !important;
  transform: translateX(14px) !important;
  background-color: #ffffff !important;
}

#featured-review-stands .featured-img-area,
#featured-review-desks .featured-img-area,
#featured-review-all .featured-img-area {
  background: #ffffff !important;
  aspect-ratio: auto !important;
}

#featured-review-stands .featured-img-area img,
#featured-review-desks .featured-img-area img,
#featured-review-all .featured-img-area img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  padding: 10px 0 !important;
  transform: none !important;
  background-color: #ffffff !important;
}

.card-img-area:has(img[alt="VIVO Standing Desk Converter"]) {
  background: #ffffff !important;
}

.blog-card .card-img-area img[alt="VIVO Standing Desk Converter"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  padding-top: 8px !important;
  transform: translateX(18px) !important;
  background-color: #ffffff !important;
}

.blog-card .card-img-area img[alt="FEZIBO Electric Standing Desk"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  padding-top: 8px !important;
  transform: translateY(8px) !important;
  background-color: #ffffff !important;
}

.blog-card .card-img-area img[alt="ErGear Electric Standing Desk"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  padding-top: 8px !important;
  transform: translateY(10px) !important;
  background-color: #ffffff !important;
}


.card-img-area img[alt="Desktronic HomeOne Standing Desk"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  padding-top: 8px !important;
  background-color: #ffffff !important;
}

.card-img-area img[alt="Travel Ease Ergonomic Cushion"] {
  padding-top: 12px !important;
  padding-bottom: 8px !important;
  object-position: center !important;
}

@media (max-width: 768px) {
  #featured-review-chairs .featured-img-area img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding-top: 6px !important;
    box-sizing: border-box !important;
  }

  #featured-review-stands .featured-img-area img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    box-sizing: border-box !important;
    padding: 10px 0 !important;
    transform: none !important;
    background-color: #ffffff !important;
  }

  #featured-review-desks .featured-img-area,
  #featured-review-all .featured-img-area {
    overflow: hidden !important;
  }

  #featured-review-desks .featured-img-area img,
  #featured-review-all .featured-img-area img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    box-sizing: border-box !important;
    padding: 10px 0 !important;
    transform: translateX(30px) !important;
    background-color: #ffffff !important;
  }

  .featured-badge {
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  .featured-content .card-meta span:not(.card-category) {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
  }

  .featured-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  .card-link {
    font-size: 14px !important;
  }
}

.featured-cta {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
}

.card-link {
  font-size: 14px !important;
}