:root{
  --glow-blue:86,181,255;
  --glow-cyan:71,215,172;
  --glow-purple:167,139,250;
  --glow-green:74,222,128;
}

.card{
  --card-glow:var(--glow-blue);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:border-color .24s ease,box-shadow .24s ease,transform .24s cubic-bezier(.2,.8,.2,1),background .24s ease;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:
    radial-gradient(430px circle at var(--glow-x,18%) var(--glow-y,0%),
      rgba(var(--card-glow),.18),transparent 46%);
  opacity:.48;
  pointer-events:none;
  transition:opacity .24s ease;
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 36%);
  opacity:.5;
  pointer-events:none;
}

.card[data-dashboard-card="exercise"],.exercise-section{--card-glow:var(--glow-green)}
.card[data-dashboard-card="supplements"],.supplements-section{--card-glow:var(--glow-purple)}
.card[data-dashboard-card="labs"],.labs-section{--card-glow:77,208,225}
.card[data-dashboard-card="today-focus"],.card[data-dashboard-card="trends"]{--card-glow:var(--glow-cyan)}
.card[data-dashboard-card="insights"]{--card-glow:129,140,248}
.card[data-dashboard-card="history"],#entrySection{--card-glow:96,165,250}

@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-3px) scale(1.006);
    border-color:rgba(var(--card-glow),.5);
    box-shadow:0 22px 54px rgba(0,0,0,.34),0 0 0 1px rgba(var(--card-glow),.12),0 0 32px rgba(var(--card-glow),.13);
  }
  .card:hover::before{opacity:1}
}

.card.is-illuminated,.card:focus-within{
  border-color:rgba(var(--card-glow),.52);
  box-shadow:0 20px 48px rgba(0,0,0,.32),0 0 0 1px rgba(var(--card-glow),.13),0 0 30px rgba(var(--card-glow),.14);
}
.card.is-illuminated{transform:translateY(-2px) scale(1.004)}
.card.is-illuminated::before,.card:focus-within::before{opacity:1}

.card.is-pressing{
  transform:translateY(0) scale(.994);
  transition-duration:.1s;
}

.exercise-card .eyebrow,.supplements-card .eyebrow,.labs-card .eyebrow,
.card[data-dashboard-card="today-focus"] .eyebrow,
.card[data-dashboard-card="trends"] .eyebrow,
.card[data-dashboard-card="insights"] .eyebrow{
  text-shadow:0 0 16px rgba(var(--card-glow),.5);
}

.card .primary,.card .secondary,.card .ghost{
  transition:transform .14s ease,box-shadow .18s ease,filter .18s ease,border-color .18s ease;
}
.card button:active{transform:scale(.97)}
.card .primary:hover{filter:brightness(1.08);box-shadow:0 0 22px rgba(71,215,172,.18)}

/* Slow, restrained colour shimmer for every actionable control. */
button,.secondary,.file-button{
  --button-pulse:71,215,172;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  animation:button-colour-breathe 4.8s ease-in-out infinite;
}

.primary{--button-pulse:71,215,172}
.secondary{--button-pulse:86,181,255}
.ghost{--button-pulse:167,139,250}
.danger-button,.delete,.danger-outline{--button-pulse:251,113,133}
.range-btn{--button-pulse:86,181,255}
.range-btn.active,.supplement-filters .active{--button-pulse:71,215,172}

button::after,.secondary::after,.file-button::after{
  content:"";
  position:absolute;
  inset:-55% -85%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(112deg,
    transparent 35%,
    rgba(120,210,255,.035) 41%,
    rgba(198,145,255,.12) 46%,
    rgba(var(--button-pulse),.22) 50%,
    rgba(255,255,255,.18) 53%,
    rgba(115,238,220,.10) 57%,
    transparent 60%);
  mix-blend-mode:screen;
  transform:translateX(-32%) rotate(2deg);
  animation:button-iridescent-sweep 7.2s ease-in-out infinite;
}

button:nth-of-type(2n),.form-actions .file-button{
  animation-delay:-1.2s;
}
button:nth-of-type(3n){
  animation-delay:-2.4s;
}
button:nth-of-type(2n)::after,.form-actions .file-button::after{
  animation-delay:-1.6s;
}
button:nth-of-type(3n)::after{
  animation-delay:-3.2s;
}

.score-ring{
  animation:score-ring-breathe 4.8s ease-in-out infinite;
}

@keyframes button-colour-breathe{
  0%,100%{
    filter:brightness(1);
    box-shadow:0 0 0 rgba(var(--button-pulse),0);
  }
  50%{
    filter:brightness(1.075) saturate(1.06);
    box-shadow:0 0 18px rgba(var(--button-pulse),.13);
  }
}

@keyframes button-iridescent-sweep{
  0%,22%{transform:translateX(-38%) rotate(2deg);opacity:0}
  34%{opacity:.78}
  64%{transform:translateX(38%) rotate(2deg);opacity:.78}
  76%,100%{transform:translateX(38%) rotate(2deg);opacity:0}
}

@keyframes score-ring-breathe{
  0%,100%{
    filter:brightness(1);
    box-shadow:inset 0 0 0 6px rgba(255,255,255,.04),0 0 0 rgba(71,215,172,0);
  }
  50%{
    filter:brightness(1.11) saturate(1.08);
    box-shadow:inset 0 0 0 6px rgba(255,255,255,.055),0 0 24px rgba(71,215,172,.22);
  }
}

.reorder-drag-preview{
  box-shadow:0 26px 66px rgba(0,0,0,.6),0 0 0 2px rgba(71,215,172,.28),0 0 42px rgba(71,215,172,.28)!important;
}

@media (prefers-reduced-motion:reduce){
  .card,.card::before,.card button{transition:none!important}
  .card:hover,.card.is-illuminated,.card.is-pressing{transform:none}
  button,.secondary,.file-button,.score-ring,
  button::after,.secondary::after,.file-button::after{
    animation:none!important;
  }
}

@media(max-width:480px){
  .card::before{background:radial-gradient(300px circle at var(--glow-x,18%) var(--glow-y,0%),rgba(var(--card-glow),.18),transparent 48%)}
}