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

html {
    box-sizing: border-box;
    font-size: 62.5%; }
    @media screen and (max-width: 1200px) {
      html {
        font-size: 55%; } }
  

h1{
    color: white;
    padding: 10px;
}

head{
	position: fixed;
}

body{
    background-color: #1f1f1f;
    color: rgb(255, 171, 16);
    font-family: "Poppins", sans-serif;
  font-weight: 300;
  line-height: 1.9;
}

.box-0 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 9rem;
    width: 100dvw;
    z-index: 100;
    background: linear-gradient(90deg, #0582ca, #00a6fb); }

.box-1 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    
    height: 3rem;
    background: white; 
}
    
.box-1contents {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 1200px;
    font-size: 1.3rem;

    height: 3rem;
}
@media screen and (max-width: 550px) {
  .box-1contents  {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    font-size: 1.1rem;

    height: 3rem;}}
    @media screen and (max-width: 415px) {
      .box-1contents  {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        font-size: 0.9rem;

        height: 3rem;}}

#navigator{
    position: fixed;
    background-color: #4d4848;
    color: orange;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    z-index: 100;
}

.nav {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  align-items: center;
  justify-self: space-between;
  position: relative;
 }
  .nav-logo {
    font-size: 5rem;
    font-weight: 500;
    color: #f3f3f3;
    border-radius: 20rem;
    margin-right: auto; }
    @media screen and (max-width: 480px) {
      .nav-logo {
        font-size: 4rem;
    font-weight: 500;
    color: #f3f3f3;
    margin-right: auto; }}
    @media screen and (max-width: 440px) {
      .nav-logo {
        font-size: 3rem;}}

        #nav-beta {
          position: absolute;
          top: 10px;
          font-size: 2rem;
          font-weight: 500;
          color: #f3f3f3;
          border-radius: 20rem;
          margin-right: auto;
          margin-left:5px }
       
          @media screen and (max-width: 480px) {
            #nav-beta {
              font-size: 1.5rem;
          font-weight: 500;
          color: #f3f3f3;
          margin-right: auto; }}
          @media screen and (max-width: 440px) {
            #nav-beta {
              font-size: 1rem;}}

  .nav-svg {
    height: 4rem;
    width: 15rem;
    font-size: 1.6rem;
    font-family: inherit;
    font-weight: 600;
    border: none;
    border-radius: 10rem;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    color: orange;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
    background-color: whitesmoke;
    }
    @media screen and (max-width: 480px) {
      .nav-svg {
        height: 3rem;
        width: 12rem;
        font-size: 1.6rem;
        font-family: inherit;
        font-weight: 600;
        border: none;
        border-radius: 10rem;
        cursor: pointer;
        transition: all 0.3s;
        text-transform: uppercase;
        color: orange;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
        background-color: whitesmoke;
        }
      }
    .nav-svg:hover {
      background-color: orange;
      color: whitesmoke;
    }

a:link{
  color: #c5c5c5;}
a:visited{
  color: #c5c5c5;}
a:hover{
  color:#242222;
text-decoration: none;}

a.nav2headers{
color: rgb(65, 65, 65);
text-decoration: none;
font-weight: 400;
text-transform: uppercase;
  }

  a.nav2headers:hover{
    color: orange;
    text-decoration: none;
    font-weight: 400;
      }    

.footer {
background-color: #2e2e2e;
font-family: inherit;
padding: 5rem 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
  }
.footer__side1 {
  display: flex;
  flex-direction: column;
  margin-right: 10%; }
  @media screen and (max-width: 815px) {
    .footer__side1 {
      display: flex;
      flex-direction: column;
      margin-right: 0rem;
      margin-left:0rem;
  }} 
  .footer__side1__logo {
    font-size: 4rem;
    font-weight: 500;
    color: #0582ca;
  text-align: center; }
    @media screen and (max-width: 915px) {
      .footer__side1__logo {
        text-align: center; }
    }  
  .footer__side1__text {
    font-size: 1.6rem;
    margin-bottom: -1.5rem;
    color: #e4e4e4;
  text-align: center; }
    @media screen and (max-width: 915px) {
      .footer__side1__text {
        text-align: center;
      }
    }

.footer__side2 {
  display: flex;
  justify-content: center;
  text-align: center; }
      @media screen and (max-width: 735px) {
      .footer__side2 {
        margin-top: 20px; } }
  .footer__side2__nav {
    list-style: none;
    justify-content: center; 
    }
  .footer__side2__item {
    width: 16rem;
    color: #000; }
    @media screen and (max-width: 435px) {
      .footer__side2__item {
        width: 12rem; } }
    @media screen and (max-width: 375px) {
      .footer__side2__item {
        margin-right: 0rem;
        min-width: 0rem; } }
        @media screen and (max-width: 350px) {
          .footer__side2__item {
            transform: scale(75%); } }
  .footer__side2__linkheader {
    min-width: 5rem;
    font-size: 1.65rem;
    font-weight: 600;
    color: #b1b1b1;
    text-decoration: none; }
    @media screen and (max-width: 500px) {
      .footer__side2__linkheader {
        margin-right: 0rem;
        min-width: 0rem; } }
  .footer__side2__link {
    min-width: 5rem;
    font-size: 1.6rem;
    color: #f7f7f7;
    text-decoration: none; }
    @media screen and (max-width: 500px) {
      .footer__side2__link {
        font-size: 1.5rem; } }
      .footer__side2__link:hover{
        text-decoration: none;
      }
      .footer__img {
  display: flex;
  justify-content: center;
  padding-top: 3rem; 
  width:100%;
  }
  @media screen and (max-width: 600px) {
    .footer__img {
      transform: scale(0.75);
      } }
      @media screen and (max-width: 450px) {
        .footer__img {
          flex-direction: column;
          width: auto;
          padding-top: 0;
          } }
  .footer__img-1 {
    transform: scale(0.85); }
    @media screen and (max-width: 600px) {
      .footer__img-1 {
        
        height: 100%;
          } }
  .footer__img-2 {
    transform: scale(0.85); }
    @media screen and (max-width: 600px) {
      .footer__img-2 {
        height: 100%;
          } }
.footer__copyright {
  font-size: 1.4rem;
  color: #a1a1a1;
  text-align: center;
  width: 100%; }
.footer__link {
  font-size: 1.4rem;
  text-decoration: none; }
  .footer__btn {
    margin-top: 2rem; 
    background-color: white;
    font-size: 1.9rem;
    font-family: inherit;
    font-weight: 600;
    border: none;
    padding: 1.25rem 4.5rem;
    border-radius: 10rem;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    margin: auto;
    color: #0a75b4;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
    width: 27rem; }
    @media screen and (max-width: 1000px) {
      .btn {
        margin-left: 0; } }
        @media screen and (max-width: 879px) {
          .footer__btn {
            margin-bottom: 2rem; } }
    .btn:hover {
      background-color: rgba(255, 255, 255, 0.823); }
    .btn:active {
      transform: translateY(0.5rem);
      scale: 0.98; }

      .btn {
        margin:30px 20px 0px 20px;
        background-color: white;
        font-size: 1.9rem;
        font-family: inherit;
        font-weight: 600;
        border: none;
        padding: 1.25rem 4.5rem;
        border-radius: 10rem;
        cursor: pointer;
        transition: all 0.3s;
        text-transform: uppercase;
        color: #0a75b4;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
        width: 27rem; }
        @media screen and (max-width: 1000px) {
          }
        .btn:hover {
          background-color: rgba(255, 255, 255, 0.823); }
        .btn:active {
          transform: translateY(0.5rem);
          scale: 0.98; }


#loadingBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  color: white;
  font-size: 1.5em;
  margin-right: 20px;
  flex-direction: column;
  gap: 20px;
}



.spinner {
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
  box-sizing: border-box;

  position: relative;
}


/* ------------------------------------------------------------
   NORMAL RETRY STATES
------------------------------------------------------------ */

#loadingBar.retrying .spinner {
  border-top-color: #ffa700;
}

#loadingBar.save-error .spinner {
  border-top-color: #e53935;
}


/* ─────────────────────────────────────────────
   SUCCESS RING
   ───────────────────────────────────────────── */

#loadingBar.save-success .spinner {
  position: relative;
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  box-sizing: border-box;
  animation: none;
  background: transparent;
}

#loadingBar.save-success .success-ring {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 2;
  overflow: visible;

  /*
     Continue rotating at the exact same
     speed as the original spinner.

     Original spinner:
     360deg / 2s
     = 180deg per second
  */
  animation:
    successRingRotate 1s linear forwards;
}

#loadingBar.save-success .success-ring circle {
  fill: none;
  stroke: #2ecc71;
  stroke-width: 16;
  stroke-linecap: butt;

  /*
     326.73px = full circumference
     81.68px  = approximately 25%
  */
  stroke-dasharray:
    81.68 245.05;

  stroke-dashoffset: 0;

  /*
     Grow the existing green arc around
     the circle while it continues rotating.
  */
  animation:
    successRingFill 1s linear forwards;
}


/*
   The starting angle is supplied by JS.
   Continue forward at the original spinner speed.
*/
@keyframes successRingRotate {

  from {
    transform:
      rotate(var(--success-start-angle));
  }

  to {
    transform:
      rotate(
        calc(
          var(--success-start-angle) + 180deg
        )
      );
  }
}


/*
   Green arc starts at the same size as
   the blue border-top and fills to 100%.
*/
@keyframes successRingFill {

  from {
    stroke-dasharray:
      81.68 245.05;
  }

  to {
    stroke-dasharray:
      326.73 0;
  }
}


/* ─────────────────────────────────────────────
   BLOCK CHECKMARK
   ───────────────────────────────────────────── */

#loadingBar.save-success .spinner::after {
  content: '';

  position: absolute;

  left: 50%;
  top: 50%;

  width: 22px;
  height: 40px;

  border-right: 9px solid #2ecc71;
  border-bottom: 9px solid #2ecc71;

  transform:
    translate(-50%, -60%)
    rotate(45deg)
    scale(0);

  transform-origin: center;

  opacity: 0;

  animation:
    successTick 0.3s ease forwards;

  z-index: 5;
}


@keyframes successTick {

  0% {
    transform:
      translate(-50%, -60%)
      rotate(45deg)
      scale(0);

    opacity: 0;
  }

  60% {
    transform:
      translate(-50%, -60%)
      rotate(45deg)
      scale(1.15);

    opacity: 1;
  }

  100% {
    transform:
      translate(-50%, -60%)
      rotate(45deg)
      scale(1);

    opacity: 1;
  }
}


/* ─────────────────────────────────────────────
   SAVED MESSAGE
   ───────────────────────────────────────────── */

#loadingBar.save-success #loadingBarText {
  opacity: 0;

  animation:
    savedMessage 0.3s ease forwards;
}


/* ─────────────────────────────────────────────
   FAIL RING
   ───────────────────────────────────────────── */

#loadingBar.save-fail .spinner {
  position: relative;
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  box-sizing: border-box;
  animation: none;
  background: transparent;
}

#loadingBar.save-fail .fail-ring {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 2;
  overflow: visible;

  animation:
    failRingRotate 1s linear forwards;
}

#loadingBar.save-fail .fail-ring circle {
  fill: none;
  stroke: #e53935;
  stroke-width: 16;
  stroke-linecap: butt;

  stroke-dasharray:
    81.68 245.05;

  stroke-dashoffset: 0;

  animation:
    failRingFill 1s linear forwards;
}

#loadingBar.save-fail .spinner::before {
  animation:
    failCrossLeft 0.3s ease forwards;
}

#loadingBar.save-fail .spinner::after {
  animation:
    failCrossRight 0.3s ease forwards;
}


@keyframes failCrossLeft {

  0% {
    transform:
      translate(-50%, -50%)
      rotate(45deg)
      scale(0);

    opacity: 0;
  }

  60% {
    transform:
      translate(-50%, -50%)
      rotate(45deg)
      scale(1.15);

    opacity: 1;
  }

  100% {
    transform:
      translate(-50%, -50%)
      rotate(45deg)
      scale(1);

    opacity: 1;
  }
}


@keyframes failCrossRight {

  0% {
    transform:
      translate(-50%, -50%)
      rotate(-45deg)
      scale(0);

    opacity: 0;
  }

  60% {
    transform:
      translate(-50%, -50%)
      rotate(-45deg)
      scale(1.15);

    opacity: 1;
  }

  100% {
    transform:
      translate(-50%, -50%)
      rotate(-45deg)
      scale(1);

    opacity: 1;
  }
}

/* ─────────────────────────────────────────────
   FAIL RING ROTATION
   ───────────────────────────────────────────── */

@keyframes failRingRotate {

  from {
    transform:
      rotate(var(--fail-start-angle));
  }

  to {
    transform:
      rotate(
        calc(
          var(--fail-start-angle) + 180deg
        )
      );
  }
}


/* ─────────────────────────────────────────────
   FAIL RING FILL
   ───────────────────────────────────────────── */

@keyframes failRingFill {

  from {
    stroke-dasharray:
      81.68 245.05;
  }

  to {
    stroke-dasharray:
      326.73 0;
  }
}

/* ─────────────────────────────────────────────
   BLOCK FAIL CROSS
   ───────────────────────────────────────────── */

#loadingBar.save-fail .spinner::before,
#loadingBar.save-fail .spinner::after {

  content: '';

  position: absolute;

  left: 50%;
  top: 50%;

  width: 9px;
  height: 48px;

  background: #e53935;

  border-radius: 1px;

  transform-origin: center;

  opacity: 0;

  z-index: 5;
}


/* First stroke: / */

#loadingBar.save-fail .spinner::before {
  animation:
    failCrossLeft 0.3s ease forwards;
}


/* Second stroke: \ */

#loadingBar.save-fail .spinner::after {
  animation:
    failCrossRight 0.3s ease forwards;
}


/* / */

@keyframes failCrossLeft {

  0% {
    transform:
      translate(-50%, -50%)
      rotate(45deg)
      scale(0);

    opacity: 0;
  }

  60% {
    transform:
      translate(-50%, -50%)
      rotate(45deg)
      scale(1.15);

    opacity: 1;
  }

  100% {
    transform:
      translate(-50%, -50%)
      rotate(45deg)
      scale(1);

    opacity: 1;
  }
}


/* \ */

@keyframes failCrossRight {

  0% {
    transform:
      translate(-50%, -50%)
      rotate(-45deg)
      scale(0);

    opacity: 0;
  }

  60% {
    transform:
      translate(-50%, -50%)
      rotate(-45deg)
      scale(1.15);

    opacity: 1;
  }

  100% {
    transform:
      translate(-50%, -50%)
      rotate(-45deg)
      scale(1);

    opacity: 1;
  }
}



/* ─────────────────────────────────────────────
   SAVED MESSAGE
   ───────────────────────────────────────────── */

#loadingBar.save-fail #loadingBarText {
  opacity: 0;

  animation:
    savedMessage 0.3s ease forwards;
}

#loadingBar.save-fail .fail-ring {
  animation:
    failRingRotate 1s linear forwards;
}

#loadingBar.save-fail .fail-ring circle {
  stroke: #e53935;

  animation:
    failRingFill 1s linear forwards;
}

#loadingBar.save-fail .spinner::before,
#loadingBar.save-fail .spinner::after {
  background: #e53935;
}



@keyframes savedMessage {

  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ------------------------------------------------------------
   SPINNER ROTATION
------------------------------------------------------------ */

@keyframes spin {

  0% {
    transform: rotate(0deg);
  }

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




.status-circle {
  min-width: 30px; /* Smaller size */
  min-height: 30px;
  border-radius: 50%; /* Circle shape */
  border: 2px solid white; /* White border */
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px; /* Space between the circle and text */
}

/* Container for user info displays */
.user-info {
  flex-direction: column; /* Stack them on top of each other */
  padding-right: 5px;
}

/* Style for the user ID and email displays */
.email-display {
  text-align: center; /* Center the text */
  color: #1f73f0; /* White text color */
  font-size: 22px; /* Adjust the size as needed */
    font-weight: bold;
  }
  @media screen and (max-width: 800px) { 
    .email-display {
    font-size: 16px; /* Adjust the size as needed */;
  }
  }
  @media screen and (max-width: 600px) { 
    .email-display {
    font-size: 8px; /* Adjust the size as needed */;
  }
  }
  @media screen and (max-width: 480px) { 
    .email-display {
    display: none;
  }
  }

  .user-id-display{
  text-align: center; /* Center the text */
  color: #d5d5d5; /* White text color */
  font-size: 10px; /* Adjust the size as needed */
}

.logged-out {
  background-color: blue;
}

.logged-in {
  background-color: #00ae00;
}



  
  #loginButtonsContainer{
    max-width: 5rem;
    min-width: 5rem;
    line-height: 0;
  }
  
  /* Tooltip Style */
  .login-tooltip {
    position: absolute;
    top: 122px; /* Adjust based on your toolbar height */
    right: 0;
    background-color: white;
    text-align: right;
  }
  @media screen and (max-width: 1200px) {
    .login-tooltip {
      top: 108px;
 }}
 @media screen and (max-width: 480px) {
  .login-tooltip {
    top: 100px;
}}
@media screen and (max-width: 440px) {
  .login-tooltip {
    top: 91px;
}}

.tooltipContentDiv{
  margin: 10px 50px;
}

/* Modal Style uses globalHeader*/
  .modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black with transparency */
  }

  .modal-logo {
    font-size: 5rem;
    font-weight: 500;
    color: #00a6fb;
margin-bottom: 1rem;
   }
  
  #modal-beta {
    position: relative;
    top: -20px;
    left: -5px;
    font-size: 1.5rem;
    font-weight: 500;
    color: #1f1f1f;
   }
       

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    top: -20px;
    position: relative;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  
  #login-btn{
    width: 90px;
    height: 40px;
    margin: 5px 5px 5px 5px;
    background-color: white;
    border: 0;
    border-radius: 3px;
    color: rgb(15, 15, 15);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
  
  }
  
  #signup-btn{
    width: 90px;
    height: 40px;
    margin: 5px 5px 5px 5px;
    background-color: #00a6fb;
    border: 0;
    border-radius: 3px;
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
  }
  
  #signup-btn:hover{
    background-color: #49c2ff;
  }
  
  #login-btn:hover{
    background-color: #eeeeee;
  }


#modal-switch-button-div{
  width: 100%;
  margin-bottom: 3rem;
}

#modal-content-switch-buttons {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 200px; /* Adjust as needed */
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    overflow: hidden;

  }
  
  .modal-switch {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    font-size: 16px;
}

#highlight {
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 3px;
    background-color: #007bff; /* Highlight color */
    border-radius: 2px;
    transition: transform 0.3s ease-in-out;
    left: 0;
}

#line{
  position: relative;
  border-bottom: 3px solid #959595;
  width: 100%;
  top: 39px;
}

#highlight.signup-active {
    transform: translateX(100%);
}

#highlight.login-active {
    transform: translateX(0%);
}

#highlight,
.modal-switch:hover ~ #highlight {
    transition: transform 0.3s ease-in-out;
}

.modal-switch:nth-child(1):hover ~ #highlight {
    transform: translateX(0%);
}

.modal-switch:nth-child(2):hover ~ #highlight {
    transform: translateX(100%);
}

.navForms{
  /* text-align: center; */
  flex-direction: column;
  margin-top: 2rem;
  margin-bottom: 3rem;
  }

 .navFormsh2{
  margin-top: 1rem;
  font-size: 2rem;
 }

.navFormsButtonDiv{
  margin-top: 3rem;
  text-align: center;
}

.navFormsButton{
  width: 120px;
  height: 40px;
  background-color: #00a6fb;
  border: 0;
  border-radius: 3px;
  color: white;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  margin: 1rem;
}
.navFormsButton:hover{
  background-color: #4dc4ff;
}
.navFormsButton:active{
  background-color: #0075af;
}

.navFormsInputs{
  width: 100%;
font-size: 1.6rem;
border-radius: 3px;
background-color: white;
padding: 5px;
border: 2px solid #bfbfbf;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.line {
  height: 2px; /* Thickness of the line */
  background-color: #8a8a8a;
  flex-grow: 1; /* Makes the lines flexible */
  margin: 0 10px; /* Space between the word and the lines */
}

.connect {
  font-size: 1.5rem;
  font-weight: bold;
  color: #8a8a8a;
}

.connected {
  font-size: 1rem;
  text-align: center;
  margin-top: 2rem;
}

.modalAuthLoginImgs{
  border-radius: 5px;
  max-height: 40px;
  margin: 1rem;
}

.modalAuthLoginImgs:hover{
  box-shadow:0px 0px 10px #a1a1a1
}

/* --------------------------------------------------------------------------PROGRAM SELECTOR */



.program-card {
    background:#17171B;
    border-radius:18px;
    padding:20px;
    margin:12px;
    box-shadow:
    0 8px 25px rgba(0,0,0,.35);
    cursor:pointer;
    transition:.2s ease;
    display:flex;
    flex-direction:column;
    gap:18px;
    color:#FFFFFF;
    font-size: 16px;
}


.program-card:hover {
    transform:translateY(-4px);
    box-shadow:
    0 12px 35px rgba(0,0,0,.5);
}

/* HEADER */
.program-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
}


.program-title h3 {
    margin:0;
    color:#FFFFFF;
    font-size:1.5em;
}


.program-title p {
    margin-top:8px;
    color:#A0A0A8;
    line-height:1.4;
    font-size: 1em;
}

/* DIFFICULTY */
.difficulty-tag {
    background:rgba(255,255,255,.08);
    color:#FFFFFF;
    padding:6px 12px;
    border-radius:20px;
    font-size:.85rem;
}

/* STATS */
.program-stats {
    display:grid;
    grid-template-columns:
    repeat(3,1fr);
    gap:10px;
}

.stat-box {
    background:#202027;
    border-radius:14px;
    padding:12px;
    text-align:center;
    border:1px solid rgba(255,255,255,.05);
}

.stat-box span {
    font-size:1.3rem;
}

.stat-box strong {
    display:block;
    color:#FFFFFF;
    margin-top:5px;
}

.stat-box small {
    color:#909099;
}

/* INFORMATION SECTIONS */
.program-content {
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:12px;
}

.info-section {
    background:#202027;
    border-radius:14px;
    padding:15px;
    border:1px solid rgba(255,255,255,.05);
}

.info-section h4 {
    margin-top:0;
    color:#FFFFFF;
    font-size:1em;
}

.info-section p {
    color:#B5B5BD;
    font-size:.9em;
}

/* FEATURES */
.program-features {
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:10px;
}

.program-features div {
    background:#202027;
    padding:12px;
    border-radius:12px;
    color:#C5C5CC;
    font-size:.85em;
}

/* BUTTON */
.program-footer button {
    width:100%;
    background:#FFFFFF;
    color:#111111;
    border:none;
    padding:14px;
    border-radius:12px;
    font-weight:bold;
}

/* MOBILE */
@media(max-width:600px){
.program-header {
    flex-direction:column;
}

.program-stats {
    grid-template-columns:1fr;
}

.program-content {
    grid-template-columns:1fr;
}

.program-features {
    grid-template-columns:1fr;
}
}




/* --------------------------------------------------------------------------EXERCISE LIBRARY */


.please{
	margin-top: 12rem;
	display: flex;
	justify-content: center;
	text-align: center;
  margin-bottom: 12rem;
  min-height: 78vh
}

.wNExerciseLibNowView {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}



#searchColumns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
}
@media screen and (max-width: 1000px) {
#searchColumns {
  flex-direction: column;
}  
}

/* General Styling for Muscle Search Panel */
#muscleSearchPanel {
  padding: 20px;
  background-color: #1c1c1c;
  border-radius: 8px;
  width: 60%;
}
@media screen and (max-width: 1000px) { 
  #muscleSearchPanel {
  width: 100%;
}
}

/* Toggle Buttons */
#muscleSearchToggleButtons {
  display: flex;
  justify-content: center;
  gap: 10px;

}

#muscleSearchToggleButtons button {
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
    padding: 10px;
}

/* Active button */
#muscleSearchToggleButtons button.active {
  background-color: #007bff;
  color: rgb(255, 255, 255);
}


.strengthDivsActive {
  background-color: #007bff !important;
  color: white !important;
  border: 2px outset #007bff;
  border-radius: 5px;
}

.programSelectorActive {
  background-color: #ff9100 !important;
  color: white !important;
  border: 2px solid #ff9100;
  border-radius: 5px;
}

.programlockedDivsButton {
  border: 3px outset #ff9100;
  border-radius: 5px;
}

.return-button{
  padding: 10px;
  border-radius: 5px;
  color: white;
  border: none;
  cursor: pointer;
  background-color: brown !important;
  border: 2px outset brown;
}


/* Inactive button */
#muscleSearchToggleButtons button.inactive {
  background-color: #4d4d4d;
}

#muscleSearchToggleButtons button.inactive:hover {
  background-color: #9b9b9b;
}


#searchByMuscle, #searchByExercise {
  display: block;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better visibility */
  background-color: #1a1a1a; /* Ensure background color matches the overall theme */
  flex: 1; /* Ensure both columns take equal space */
  min-width: 200px;
}

#exerciseSearchWrapper {
    position: relative;
    width: 100%;
}

#exerciseSuggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;

    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: 0 0 8px 8px;

    display: none;
    max-height: 320px;
    overflow-y: auto;
}

.exercise-suggestion {
  font-size: 14px;
    padding: 12px 14px;
    cursor: pointer;
    color: white;
    border-bottom: 1px solid #3a3a3a;
}

.exercise-suggestion:last-child {
    border-bottom: none;
}

.exercise-suggestion:hover,
.exercise-suggestion:active {
    background: #3a3a3a;
}

/* Ensure consistency for the Search Panels */
.muscleSearchSection {
  padding: 15px;
  border-radius: 8px;
  background-color: #1a1a1a;;
}


#musclesWorking {
  width: 100%;
  padding: 1rem;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better visibility */
  background-color: #1a1a1a; /* Ensure background color matches the overall theme */
  text-align: center;
}


.suggestion-item {
  cursor: pointer;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}




.wNExerciseLibNowView input[type="text"], .wNExerciseLibNowView select {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 10px;
    font-size: 16px;
    padding: 10px;
    background: #1f1f1f;
}

.wNExerciseLibNowView button {
  width: 100%;
  padding: 10px 0px 10px 0px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

#addRandomExerciseBtn, #addRandomExerciseBtn1{
  background-color: #ff6509;
  padding:10px;
}
#selectExerciseButton, #selectExerciseButton1{
  padding:10px;
}

#addRandomExerciseBtn:hover, #addRandomExerciseBtn1:hover{
  background-color: #d64f00;
}

.wNExerciseLibNowView button:hover {
    background-color: #0056b3;
}


.wNExerciseLibNowView #addMuscleButton {
    width: auto;
    padding: 10px 20px;
}

.wNExerciseLibNowView  .wNExerciseLibNowView #getMuscleData, .wNExerciseLibNowView #getMuscleEng, .wNExerciseLibNowView #completeWorkoutButton {
    width: auto;
    padding: 10px 20px;
}

.wNExerciseLibNowView h3 {
    margin-top: 10px;
    margin-bottom: 10px;
} */










/* Muscle Title Divs */
.muscleSearchSection h1 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

/* Flexbox for Tags */
#selectedMuscles1,
#selectedMuscles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background-color: #1a1a1a;
  justify-content: center;
}

/* Muscle Tag Styling */
.muscle-tag {
  color: white;
  display: flex;
  align-items: center;
  padding: 20px;
  margin: 5px;
  border: 1px solid #007bff;
  border-radius: 15px;
  position: relative;
  font-size: 18px;
}

.muscle-tag span {
  margin-right: 5px;
}

.muscle-tag button {
  background: none;
  border: none;
  color: rgb(255, 255, 255);
  font-size: 20px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007bff;
}

/* Exercise Suggestion Div Styling */
#exerciseSuggestionDiv1,
#exerciseSuggestionDiv {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

#exerciseSuggestionMuscleDropdownDivButtons1,
#exerciseSuggestionMuscleDropdownDivButtons{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 10px;
}

/* Muscle Mode Buttons */
#searchByMuscleModeButtons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#searchByMuscleModeButtons button {
  padding: 8px 15px;
  border-radius: 5px;
  background-color: #6c757d;
  color: white;
  border: none;
  cursor: pointer;
}

/* Active button */
#searchByMuscleModeButtons button.active {
  background-color: #1ec419;
  color: rgb(255, 255, 255);
}

/* Inactive button */
#searchByMuscleModeButtons button.inactive {
  background-color: rgb(85, 85, 85);
}

#searchByMuscleModeButtons button.inactive:hover {
  background-color: #9b9b9b;
}

/* Input Styling */
/* input[type="text"],
select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
} */

#muscleinput1, 
#muscleinput{
 width: 100%;
}
.muscleSearchInputWrapper {
    position: relative;
    width: 100%;
}

.customMuscleSuggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;

    display: none;

    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: 0 0 8px 8px;

    max-height: 320px;
    overflow-y: auto;
}

.muscleSuggestion {
    padding: 12px 14px;
    color: white;
    cursor: pointer;
    border-bottom: 1px solid #3a3a3a;
}

.muscleSuggestion:last-child {
    border-bottom: none;
}

/* Normal mouse hover */
.customMuscleSuggestions:not(.keyboardNavigation):not(.mouseSelecting)
.muscleSuggestion:hover {
    background: #3a3a3a;
}

/* Keyboard selection */
.customMuscleSuggestions.keyboardNavigation
.muscleSuggestion.highlighted {
    background: #3a3a3a;
    color: #ffffff;
}

/* Mouse click / drag selection */
.customMuscleSuggestions.mouseSelecting
.muscleSuggestion.highlighted {
    background: #3a3a3a;
    color: #ffffff;
}

/* Completely suppress normal hover while selecting */
.customMuscleSuggestions.mouseSelecting
.muscleSuggestion:hover {
    background: transparent;
}



/* ==========================
   Activation Slider
   ========================== */

#selectedMusclesEngagementSlider1 {

    width: 100%;
    /* max-width: 400px; */
    margin: 20px 0;
    padding: 10px;

}


#selectedMusclesEngagementSlider1 label {

    display: block;

    font-weight: 600;

    margin-bottom: 8px;

}


/* Slider */

#engagementSlider1 {

    appearance: none;

    width: 100%;
    height: 10px;

    border-radius: 10px;

    background: linear-gradient(
        to right,
        #4caf50 0%,
        #ffc107 35%,
        #ff9800 70%,
        #f44336 100%
    );

    outline: none;
    cursor: pointer;
}

#engagementSlider1Label {
font-size: 14px;
}


/* Chrome / Edge / Safari */

#engagementSlider1::-webkit-slider-thumb {

    appearance: none;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: white;

    border: 3px solid #333;

    cursor: pointer;

    box-shadow: 0 2px 6px rgba(0,0,0,0.25);

}


/* Firefox */

#engagementSlider1::-moz-range-thumb {

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: white;

    border: 3px solid #333;

    cursor: pointer;

    box-shadow: 0 2px 6px rgba(0,0,0,0.25);

}


/* Current activation text */

#engagementLevel1 {

    margin-top: 10px;

    text-align: center;

    font-weight: 600;

    font-size: 16px;

}


/* Optional mobile sizing */

@media (max-width: 600px) {

    #selectedMusclesEngagementSlider1 {

        padding: 8px;

    }


    #engagementSlider1 {

        height: 8px;

    }


    #engagementSlider1::-webkit-slider-thumb {

        width: 22px;
        height: 22px;

    }


    #engagementSlider1::-moz-range-thumb {

        width: 22px;
        height: 22px;

    }

}





/* Custom dropdown container */
.custom-dropdown {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  z-index: 10;
  display: none; /* Hidden by default */
}

/* Dropdown items */
.custom-dropdown .dropdown-item {
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}

.custom-dropdown .dropdown-item:hover {
  background-color: #007bff;
  color: white;
}



/* ---------------------------PREVIOUS WORKOUTS */

.pWindividualExerciseDiv{

  padding: 10px;
}

.exercise-outside-div{
text-align: left;
  display: flex;
  flex-direction: column;
  max-height: 25rem;
  overflow: auto;
}

.workout-div:focus-within{
  background-color: #242424; 
  border-radius: 8px;
}




/* ---------------------------MAIN PAGE */
/* ==========================
   Default (Desktop)
   ========================== */
.button-text {
    display: inline;
}

.button-icon {
    display: none;
}


/* Desktop */
#wNmuscleSelector,
#wNexerciseLibNow,
#wNprogramSelector,
#wNpreviousWorkouts,
#strengthReturn {
    padding: 10px;
}


#strengthDivNavDiv {
    display: flex;
    width: 100%;
    gap: 5px;
    justify-content: center;
    /* padding: 10px; */
}


/* Mobile */
@media (max-width: 600px) {

    .button-text {
        display: none;
    }

    .button-icon {
        display: block;
        width: 24px;
        height: 24px;
        object-fit: contain;
    }


    #wNmuscleSelector,
    #wNexerciseLibNow,
    #wNprogramSelector,
    #wNpreviousWorkouts,
    #strengthReturn {

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 1 1 0;
        min-width: 0;

        width: auto;
        height: auto;

        padding-inline: clamp(0px, 2vw, 20px);

    }

}

.activity {
  height: 200px;
  width: 200px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  background: #1f1f1f;
  text-align: center;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23D3D3D3' stroke-width='15' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media screen and (max-width: 1000px) {
  .activity {
    height: 100px;
    width: 100px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23D3D3D3' stroke-width='10' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.activity:hover {
background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23D3D3D3' stroke-width='25' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .activity:hover {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23D3D3D3' stroke-width='15' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.activity:hover .plus {
  font-size: 75px;
}

.plus {
    font-size: 50px;
    line-height: 24px;
}

@media screen and (max-width: 1000px) {
  .plus {
    font-size: 25px;
    line-height: 12px;
  }

  .activity:hover .plus {
    font-size: 36px;
    line-height: 18px;
  }
}

.label {
    margin-top: 10px;
    font-size: 14px;
    display: block; /* Ensures the text goes below the + symbol */
}

#wbuttonDiv {
  margin: 10px;
}
@media screen and (max-width: 1000px) {
  #wbuttonDiv {   
    margin: 5px;
  }
}

.wbutton {   
    height: 200px;
    width: 200px;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    overflow: hidden;
    background-color: transparent;
    text-align: center;
    margin: 10px;
}
@media screen and (max-width: 1000px) {
  .wbutton {   
    height: 100px;
    width: 100px;
    margin: 1px;
  }
}
.wbutton .plus {
  display: inline-block;
  font-size: 50px;
  line-height: 24px;
  transform: scale(1);
}

.wbutton:hover .plus {
  transform: scale(1.5);
}

@media screen and (max-width: 1000px) {
  .wbutton .plus {
    font-size: 25px;
    line-height: 12px;
  }

  .wbutton:hover .plus {
    transform: scale(1.45);
  }
}

.warmup {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23FF6347' stroke-width='15' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .warmup {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23FF6347' stroke-width='10' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.warmup:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23FF6347' stroke-width='25' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .warmup:hover {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23FF6347' stroke-width='15' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.strength {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%234682B4' stroke-width='15' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .strength {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%234682B4' stroke-width='10' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.strength:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%234682B4' stroke-width='25' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .strength:hover {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%234682B4' stroke-width='15' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.cardio {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%2332CD32' stroke-width='15' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .cardio {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2332CD32' stroke-width='10' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.cardio:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%2332CD32' stroke-width='25' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .cardio:hover {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2332CD32' stroke-width='15' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.flexibility {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23DA70D6' stroke-width='15' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .flexibility {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23DA70D6' stroke-width='10' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.flexibility:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23DA70D6' stroke-width='25' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .flexibility:hover {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23DA70D6' stroke-width='15' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.recovery {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23FFD700' stroke-width='15' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .recovery {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23FFD700' stroke-width='10' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.recovery:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23FFD700' stroke-width='25' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .recovery:hover {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23FFD700' stroke-width='15' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.warmdown {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%2320B2AA' stroke-width='15' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .warmdown {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2320B2AA' stroke-width='10' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.warmdown:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%2320B2AA' stroke-width='25' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .warmdown:hover {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2320B2AA' stroke-width='15' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}
    
.program {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23FF7800' stroke-width='15' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .program {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23FF7800' stroke-width='10' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}

.program:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23FF7800' stroke-width='25' stroke-dasharray='100' stroke-dashoffset='50' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1000px) {
  .program:hover {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23FF7800' stroke-width='15' stroke-dasharray='50' stroke-dashoffset='25' stroke-linecap='round'/%3e%3c/svg%3e");
  }
}
    
.zbutton {   
  height: 200px;
  width: 400px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  background-color: transparent;
  text-align: center;
  margin: 10px;
}
@media screen and (max-width: 1000px) {
.zbutton {   
  height: 100px;
  width: 200px;
  margin: 1px;
}
}



/* ---------------------------MAIN PAGE .cont. */

#startWorkoutButton {
  width: 100%;
  padding: 16px 0px 16px 0px;
  margin: 0px 0px 10px 0px;
  border: 2px outset #007bff;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

#togglePanel {
  border: 1px solid #202020;
  border-radius: 8px;
}

.panel-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: bold;
  border-radius: 8px;
  user-select: none;
}

.panel-title span:first-child {
  margin-right: 10px;
}

#arrow {
  transition: transform 0.3s;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Adjust this for grid layout */
  gap: 10px;
  display: none; /* Hidden by default */
}
.grid-container-extra {
  display: none; /* Hidden by default */
}

.grid-container label {
  display: block;
  margin-bottom: 10px;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
}

#settingsContent {
  margin: 0;
  text-align: left;
}

#settingsContent {
  display: none; /* Initially hidden */
}

#togglePanel.open .grid-container {
  display: grid;
}

#arrow.open {
  transform: rotate(180deg); /* Rotate the arrow when panel is open */
}

/* Style for the energy slider and labels */
input[type="range"] {
  width: 100%;
  margin: 10px 0;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.slider-labels span {
  flex: 1;
  text-align: center;
}

fieldset{
  padding: 5px;
}






.button-group {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.button-group button {
  padding: 8px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
.button-group button:focus {
  outline: none;
}
.increment-button {
  background-color: #e0e0e0;
}
.increment-button:hover {
  background-color: #ccc;
}

/* Timer styles */
.timer-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border: 2px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timer-text {
  font-size: 24px;
}


/* FIRST CLICK LISTENER STYLES WORKOUT PLANNER */

.recentWorkoutTemplates {
  margin: 10px;
  padding: 20px;
    width: 300px;
    flex: 0 0 300px;
  height: auto; /* Let it grow based on content */
  background-color: #1a1a1a;
  border-radius: 12px;
  color: #f0f0f0;
  transition: transform 0.3s,;
  overflow: hidden;
  text-align: left;
}

#recentWorkouts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.template-muscle-focus{
  text-align: center;
  margin-bottom: 10px;
}

.recentWorkoutTemplates:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.377);
}

.recentWorkoutTemplates h2 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #ffb347; /* Soft gold accent for title */
}

.recentWorkoutTemplates p {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
}

  .modal-content-rWorkouts {
  background: #2c2c2c;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  margin: 200px auto;
    border: 1px solid #888;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
  }

/* Modal overlay */
#recentWorkoutsModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Dark background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  display: none; /* Hidden by default */
}

/* Modal content */
#recentWorkoutsModal .modal-content {
  background: #2c2c2c;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  width: 300px;
  margin: 10% auto;
}

#recentWorkoutsModal .modal-content p {
color:rgb(252, 252, 252);
}

#recentWorkoutsModal .modal-content h3 {
  color:rgb(255, 187, 0);
  font-size: 16px;
  }

#recentWorkoutsModal .modal-content h2 {
  color: #ffffff;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}

/* Modal buttons */
#recentWorkoutsModal .modal-buttons {
  margin-top: 20px;
}

#recentWorkoutsModal .modal-tick, #recentWorkoutsModal .modal-cross {
  padding: 10px 20px;
  background: none;
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
  margin: 10px
}

/* Hover effects */
#recentWorkoutsModal .modal-tick:hover {
  background: #28a745; /* Green for tick */
}

#recentWorkoutsModal .modal-cross:hover {
  background: #db2234; /* Red for cross */
}

/* Workout Template Styling */
.workout-template {
  margin: 10px;
  width: 300px;
  height: 200px;
  background-color: #1a1a1a;
  color: white;
  padding: 20px;
  border-radius: 10px;
}

.workout-template h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.workout-template p {
  font-size: 14px;
}

.workout-template p strong {
  color: #ccc;
}






.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* phase 3 modal add */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-box {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 2rem;
  width: min(340px, 90vw);
  max-width: none;
  text-align: center;
  position: relative;
  z-index: 1001;
  margin: 0;
}

.modal-title {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #fff;
}

.modal-body {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.modal-cta {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 600;
  cursor: pointer;
}

.modal-cta:hover {
  opacity: 0.85;
}






#workoutPlannerMainButton {
  font-size: 2rem;
  height: 100px;
  width: 400px;
  color: #007bff;
  margin-bottom: 20px;
  border-radius: 4px;
  border: 0;
  background-color: #e7e7e7;
}
#workoutPlannerMainButton:hover {
  background-color: #007bff;
  color: #ffffff;
}

#newWorkout {
  font-size: 2rem;
  height: 100px;
  width: 400px;
  color: #007bff;
  background-color: #e7e7e7;
  border-radius: 4px;
  border: 0;
  margin-bottom: 80px;
}
#newWorkout:hover {
  background-color: #007bff;
  color: #ffffff;
}

#resumeWorkout {
  font-size: 2rem;
  height: 100px;
  width: 400px;
  color: #eeeeee;
  background-color: #373737;
  border-radius: 4px;
  border: 0;
  margin-bottom: 20px;
}
#resumeWorkout:hover {
  background-color: #424242;
  color: #f39407;
}

.resumeWorkoutOn {
  font-size: 2rem;
  height: 100px;
  width: 200px;
  color: #ff9100;
  border-radius: 4px;
  border: 0;
  background-color: #e7e7e7;
}
.resumeWorkoutOn:hover {
  background-color: #ff9100;
  color: #ffffff;
}

.liveSession {
  font-size: 2rem;
  height: 100px;
  width: 400px;
  color: #1f1f1f;
  background-color: #373737;
  border-radius: 4px;
  border: 0;
  margin-bottom: 20px;
}
.liveSession:hover {
  background-color: #e7e7e7;
  color: #00cf0a;
}

.liveSessionActive {
  font-size: 2rem;
  height: 100px;
  width: 400px;
  /* color: #1f1f1f;
  background-color: #373737; */
  background-color: #e7e7e7;
  color: #00cf0a;
  border-radius: 4px;
  border: 0;
  margin-bottom: 20px;
}
.liveSessionActive:hover {
  /* background-color: #e7e7e7;
  color: #00cf0a; */
  background-color: #34c417;
  color: #e7e7e7;
}

#logSession {
  font-size: 2rem;
  height: 100px;
  width: 400px;
  color: #ffa700;
  background-color: #373737;
  border-radius: 4px;
  border: 0;
}
#logSession:hover {
  background-color: #414141;
  color: #ffa700;
}

@media screen and (max-width: 600px) {
  #workoutPlannerMainButton {
    max-width: 100%;
  }
  #liveSession {
    max-width: 100%;
  }
  #logSession {
    max-width: 100%;
  }
   #newWorkout {
    max-width: 100%;
  }
   #resumeWorkout {
    max-width: 100%;
  }
}



#workoutPlannerSection {
  width: 1200px;
  min-height: 600px;
  
}
@media screen and (max-width: 1200px) {
  #workoutPlannerSection {
  width: 100%;
  min-height: 600px;
  }
}


#workoutLoading {
  padding-top: 100px;
  padding-bottom: 320px;
  margin: 0px 10%;
}

#workoutPlannerChooser{
  padding-top: 100px;
    margin: 0px 10%;
}

#workoutPlannerMainDiv {
  width: 100%;
  margin: 0 auto;
}





#workoutPlannerMainDivSettings {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#workoutPlannerWorkoutDiv {
  display: flex;
  max-width: 100%;
}

#workoutPlannerWorkoutSettings{
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  align-items: center;
}

#workoutPlannerActivityList {
  width: 25%; /* Fixed width or percentage ratio */
  margin-right: 20px; /* Space between the activity list and the main exercise div */
  flex: 1;
  min-width: 200px;
  min-height: 600px;
  Overflow: hidden;
}
@media screen and (max-width: 1000px) {
  #workoutPlannerActivityList {
    width: 0%; /* Fixed width or percentage ratio */
    margin-right: 0px; /* Space between the activity list and the main exercise div */
    flex: 1;
    max-width: 150px;
    min-width: 0px;
    min-height: 300px;
    overflow:hidden
  }
}

#workoutPlannerMainExerciseDiv {
  width: 75%; /* Remaining width */
  flex: 3;
}

/* Optional: Styling for better visual separation */
#workoutPlannerMainDivSettings button {
  flex: 1;
  margin: 0 5px;
}

#workoutPlannerWorkoutDiv > div {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
@media screen and (max-width: 1000px) {
  #workoutPlannerWorkoutDiv > div {
    padding: 0px;
    margin: 0px;
  } 
}




.listItem {
  margin-bottom: 5px;
  padding: 10 10 20 10px;
  /* border: 2px solid #1d1d1d; */
  border-radius: 10px;
  background-color: #f9f9f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #1f1f1f;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
@media screen and (max-width: 1000px) {
  .listItem {
    padding: 10 10 20 0px;
    margin-bottom: 2px;
  }
}

.exerciseListButtonContainer{
  display: flex;
  flex-direction: column;
  margin-bottom:10px;
  margin-left:5px; /* Add spacing from other elements */
}

.removeButton {
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  background-color: #d9534f;
  color: white;
  cursor: pointer;
  width: 80px;
}

.removeButton:hover {
  background-color: #c9302c;
}

.listItem span {
  flex: 1;
  font-size: 12px;
}
@media screen and (max-width: 1000px) {
  .listItem span {
    flex: 1;
    padding-top: 10px;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 8px;
  }
}

.listItem img{
 bottom: 10px;
}

.listItem::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 70%;
  height: 10px; /* Adjust height as needed */
  background: linear-gradient(to top, rgb(7, 142, 253), rgb(121, 195, 255)); 
  /* background: linear-gradient(to top, rgb(253, 7, 7), rgb(255, 121, 121)); warmup */
  /* background: linear-gradient(to top, rgb(38, 190, 0), rgb(105, 255, 113)); cardio */
  /* background: linear-gradient(to top, rgb(212, 7, 253), rgb(229, 97, 255)); flexibility */
  /* background: linear-gradient(to top, rgb(255, 187, 0), rgb(255, 199, 95)); recovery */
  /* background: linear-gradient(to top, rgb(135, 234, 252), rgb(0, 247, 255)); warmdown */
  transform: skewX(-45deg); /* Adjust angle as needed */
  transform-origin: left bottom;
}

.statusBox {
  width: 15px;
  height: 10px;
  background-color: rgb(0, 255, 34); /* Example color, adjust as needed */
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid #797979;
  border-radius: 3px;
}

.exercise-svg-button {
  cursor: pointer;
  margin-left: 10px;
  min-width: 24px;
}
@media screen and (max-width: 1000px) {
  .exercise-svg-button {
    cursor: pointer;
    margin-left: 0px;
    min-width: 24px;
    margin-top: 10px;
  }
}

.muscles-container {
  display: inline-block;
}
/* @media screen and (max-width: 1000px) {
  .muscles-container {
      margin-right: 5px;
  }
} */

.img-box {
  width: 80px;
  height: 80px;
  border-left: 3px solid #000;
  display: inline-block;
}
@media screen and (max-width: 1000px) {
  .img-box {
    width: 50px;
    height: 50px;
}
}

.img-box img {
  width: 100%;
  height: 100%;
}



.set-nav-button {
  background-color: grey;
  color: white;
  border: none;
  margin: 5px;
  padding: 10px;
  cursor: pointer;
  opacity: 0.5;
}

.set-nav-button.active-set {
  background-color: orange;
  opacity: 1;
}

.set-nav-button.completed-set {
  background-color: green;
  opacity: 1;
}

.completed-set {
  background-color: green;
}

.uncompleted-set {
  background-color: red;
}
  

.hidden {
  display: none;
}
/* ACTIVE WORKOUT CSS*/

/* ── TOKENS ─────────────────────────────────────────────── */
  :root {
    --bg:           #1f1f1f;
    --surface:      #181818;
    --surface-2:    #222222;
    --border:       #2a2a2a;
    --border-light: #333333;
    --accent:       #00a6fb;      /* sharp lime — effort made visible */
    --accent-dim:   #006da3;
    --text-1:       #f0f0f0;
    --text-2:       #888888;
    --text-3:       #555555;
    --danger:       #e05555;
    --warn:         #e09a3a;
    --rest-bg:      #141a0a;      /* subtle green tint for rest rows */
    --radius:       8px;
    --radius-sm:    4px;
    --font-mono:    'JetBrains Mono', 'Fira Mono', monospace;
    --header-h:     64px;

  }
 
  /* ── RESET ───────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; background: var(--bg); color: var(--text-1);}
  /* button { cursor: pointer; border: none; background: none; color: inherit; font-size: 1.5rem;} */
  input, select { font: inherit; color: inherit; background: none; border: none; outline: none; }
  ul { list-style: none; }
 
  /* ── STICKY HEADER ───────────────────────────────────────── */
  .wk-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px;
  }
 
  .wk-title-wrap { flex: 1; min-width: 0; }
  .wk-title {
    background: none; border: none; outline: none;
    font-size: 15px; font-weight: 600;
    width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wk-title::placeholder { color: var(--text-3); }
  .wk-date { font-size: 11px; color: var(--text-2); margin-top: 1px; }
 
  /* Timer block */
  .wk-timer-block {
    display: flex; flex-direction: row; align-items: center; gap: 2px;
    padding: 16px 0px 0px 0px;
    flex-shrink: 0;
  }
  .wk-timer-display {
    font-family: var(--font-mono); font-size: 20px; font-weight: 700;
    color: var(--accent); letter-spacing: 0.04em; cursor: pointer;
  }
  .wk-timer-display.editing {
    background: var(--surface-2); border: 1px solid var(--accent);
    border-radius: var(--radius-sm); padding: 0 6px;
  }
  .wk-timer-controls { display: flex; gap: 6px; }
  .wk-timer-btn {
    font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-2);
    padding: 2px 6px; border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    transition: color 0.15s, border-color 0.15s;
  }
  .wk-timer-btn:hover { color: var(--accent); border-color: var(--accent); }
  .wk-timer-btn.active { color: var(--accent); border-color: var(--accent); }
 
  /* Complete button */
  .wk-complete-btn {
    flex-shrink: 0;
    background: var(--accent); color: #0f0f0f;
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 14px; border-radius: var(--radius);
    transition: opacity 0.15s;
        border:0px;
  }
  .wk-complete-btn:hover { opacity: 0.85; }
 
  /* ── MAIN SCROLL AREA ────────────────────────────────────── */
  .wk-body {
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    /* leave room for header */
    padding-bottom: 80px;
  }
 
  /* ── EXERCISE CARD ───────────────────────────────────────── */
  .ex-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.15s;
    position: relative;
    scroll-margin-top: 180px;
  }
  .ex-card.dragging {
    opacity: 0.5; border-color: var(--accent);
  }
  .ex-card.drag-over { border-color: var(--accent); }
 
  .ex-card-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .ex-drag-handle {
    color: var(--text-3); font-size: 16px; cursor: grab;
    flex-shrink: 0; user-select: none;
    padding: 0 2px;
  }
  .ex-drag-handle:active { cursor: grabbing; }
  .ex-name {
    flex: 1; font-size: 13px; font-weight: 600; color: var(--text-1);
  }
  .ex-remove-btn {
    color: var(--text-3); font-size: 18px; line-height: 1;
    padding: 2px 4px; border-radius: var(--radius-sm);
    transition: color 0.15s;
  }
  .ex-remove-btn:hover { color: var(--danger); }
 
  /* Column headers */
.ex-col-headers {
    display:grid;

    grid-template-columns:
        minmax(70px, 2fr)
        minmax(25px, .5fr)
        minmax(55px, 1.5fr)
        minmax(55px, 1.5fr)
        minmax(40px, 1fr)
        minmax(25px, .5fr);

    gap:6px;

    align-items:center;

    justify-content:center;

    padding:6px 8px;
}
  /* ── SET ROW ─────────────────────────────────────────────── */
  .set-rows { display: flex; flex-direction: column; min-width: 0}
 
.set-row {

    display:grid;

    grid-template-columns:
        minmax(70px, 2fr)
        minmax(25px, .5fr)
        minmax(55px, 1.5fr)
        minmax(55px, 1.5fr)
        minmax(40px, 1fr)
        minmax(25px, .5fr);

    gap:6px;

    align-items:center;

    padding:6px 8px;

    border-top:1px solid var(--border);

    transition:background 0.1s;
}
.set-row.completed {
  background: rgba(0, 0, 0, 0.04);
}
 
  /* Label dropdown */
.set-label-select {

    background:var(--surface-2);
    border:1px solid var(--border-light);

    border-radius:var(--radius-sm);

    color:var(--text-2);

    font-size:11px;
    font-weight:700;

    width:100%;
    height:100%;
min-width: 0;
    padding:3px;

    text-align:center;

    justify-self:center;
}
  .set-label-select:focus { border-color: var(--accent); color: var(--text-1); }
    .set-label-select:disabled { opacity: 0.4; cursor: not-allowed; }
 
  /* Set number */
  .set-num {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--text-3); text-align: center;
  }
 
  /* Number inputs */
.set-input {
    background:var(--surface-2);
    border:1px solid var(--border-light);

    border-radius:var(--radius-sm);

    padding:5px 3px;

    width:80%;
    justify-self:center;

    font-family:var(--font-mono);
    font-size:13px;
    font-weight:600;

    color:var(--text-1);

    text-align:center;
}
  .set-input:focus { border-color: var(--accent); outline: none; }
  .set-input:disabled { opacity: 0.4; cursor: not-allowed; }
  .set-input::placeholder { color: var(--text-3); font-weight: 400; }
 
  /* RPE dropdown */
.set-rpe-select {

    background:var(--surface-2);
    border:1px solid var(--border-light);

    border-radius:var(--radius-sm);

    color:var(--text-2);

    font-size:12px;
    font-family:var(--font-mono);

    width:100%;
    height:100%;

    padding:0;
padding-left:15px;
    text-align:center;
    justify-self:center;
}
  .set-rpe-select:focus { border-color: var(--accent); color: var(--text-1); }
    .set-rpe-select:disabled { opacity: 0.4; cursor: not-allowed; }
 
  /* Completion tick */
.set-tick {
    width:22px;
    height:22px;

    border:2px solid var(--border-light);
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    margin:auto;
}
  .set-tick.done {
    background: var(--accent); border-color: var(--accent);
  }
  .set-tick.done::after {
    content: '✓'; font-size: 11px; color: #0f0f0f; font-weight: 700;
  }
 


  .weight-input-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.weight-input-wrap .weight-input {
  width: 100%;
  padding-right: 18px;
}

.weight-spinner-control {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 16px;

  display: flex;
  flex-direction: column;

  overflow: hidden;
  z-index: 2;

  border-radius: 0 3px 3px 0;

  user-select: none;
  -webkit-user-select: none;
}

/* Shared top / middle / bottom zones */

.weight-spinner-zone {
  width: 100%;
  min-width: 0;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  color: #777;

  font-family: Arial, sans-serif;
  font-size: 7px;
  font-weight: normal;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  user-select: none;
  -webkit-user-select: none;

  appearance: none;
  -webkit-appearance: none;
}

/* Top increase area */

.weight-spinner-up {
  flex: 0 0 28%;
  cursor: pointer;
  touch-action: manipulation;
}

.weight-spinner-up:hover {
  color: #aaa;
  background: rgba(255, 255, 255, 0.04);
}

.weight-spinner-up:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Middle drag area */

.weight-spinner-drag {
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  touch-action: none;
  cursor: default;
}

.weight-spinner-drag.dragging {
  cursor: ns-resize;
}

.weight-spinner-drag span {
  display: block;
  width: 7px;
  height: 1px;

  background: #777;
  border-radius: 1px;
}

.weight-spinner-drag:hover span {
  background: #aaa;
}

.weight-spinner-drag.dragging span {
  background: #fff;
}

/* Bottom decrease area */

.weight-spinner-down {
  flex: 0 0 28%;
  cursor: pointer;
  touch-action: manipulation;
}

.weight-spinner-down:hover {
  color: #aaa;
  background: rgba(255, 255, 255, 0.04);
}

.weight-spinner-down:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.reps-input-wrap {
  position: relative;
  width: 80%;
  justify-self: center;
}

.reps-input-wrap .set-input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 19px;
}

.weight-spinner-control.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.weight-spinner-control.disabled .weight-spinner-zone {
  cursor: not-allowed;
  pointer-events: none;
}


/* Hide browser-native number arrows */
.reps-input-wrap .set-input::-webkit-inner-spin-button,
.reps-input-wrap .set-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.reps-input-wrap .set-input {
  appearance: textfield;
}

/* Same structure as KG spinner */

.reps-spinner-control {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 16px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  z-index: 2;

  border-radius: 0 3px 3px 0;

  user-select: none;
  -webkit-user-select: none;
}


/* Same arrow zones */

.reps-spinner-zone {
  flex: 1;

  padding: 0;
  margin: 0;

  border: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 7px;
  line-height: 1;

  cursor: pointer;

  background: transparent;
  color: var(--text-2);

  touch-action: none;
}

.reps-spinner-zone:hover {
  background: rgba(255, 255, 255, 0.06);
}

.reps-spinner-zone:active {
  background: rgba(255, 255, 255, 0.12);
}


/* Disabled completed-set state */

.reps-spinner-control.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.reps-spinner-control.disabled .reps-spinner-zone {
  cursor: not-allowed;
  pointer-events: none;
}


  /* ── REST TIMER ROW ──────────────────────────────────────── */
  .rest-row {
    padding: 0 12px;

    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
    max-height: 0; /* collapsed by default, expanded by JS */
  }
  .rest-row.visible {
     max-height: 60px;
      padding: 5px 12px;
        border-top: 1px solid #2ea225;
    background: #272727; }
 
  .rest-inner {
    display: flex; align-items: center; gap: 10px;
  }
  .rest-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text-3);
    flex-shrink: 0;
  }
  .rest-time {
    font-family: var(--font-mono); font-size: 18px; font-weight: 700;
    color: #2ea225;
    letter-spacing: 0.04em; flex: 1;
  }
  .rest-toggle-btn {
color: #ffffff;
  background: #7d7d7d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border-color: #ffffff00;
  }
  .rest-toggle-btn:hover { color: var(--text-1); }
  .rest-next-btn {
    color: #ffffff;
    background: #487000;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; padding: 5px 10px;
    border-radius: var(--radius-sm);
    border-color: #ffffff00;

  }
 
  /* ── ADD SET BUTTON ──────────────────────────────────────── */
  .add-set-btn {
    width: 100%; padding: 9px;
    font-size: 12px; font-weight: 600; color: var(--text-2);
    letter-spacing: 0.04em;
    border:1px solid #1f1f1f;
    border-top: 1px solid #234682B4;
    text-align: center;
    background: #181818;
  }
  .add-set-btn:hover { color: var(--accent);
     background: rgba(40, 40, 40);
      border-top: 1px solid var(--accent)
     }
 
  /* ── ADD EXERCISE CARD ───────────────────────────────────── */
  .add-ex-card {
    background: var(--surface);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
  }
 
  .add-ex-search-wrap { padding: 12px; }
  .add-ex-search-input {
    width: 100%; background: var(--surface-2);
    border: 1px solid var(--border-light); border-radius: var(--radius-sm);
    padding: 8px 10px; font-size: 13px; color: var(--text-1);
    transition: border-color 0.15s;
  }
  .add-ex-search-input:focus { outline: none; border-color: var(--accent); }
  .add-ex-search-input::placeholder { color: var(--text-3); }
 
  .add-ex-results {
    max-height: 180px; overflow-y: auto;
    border-top: 1px solid var(--border);
  }
  .add-ex-result-item {
    padding: 9px 12px; font-size: 12px; color: var(--text-2);
    cursor: pointer; transition: background 0.1s, color 0.1s;
    border-bottom: 1px solid var(--border);
  }
  .add-ex-result-item:last-child { border-bottom: none; }
  .add-ex-result-item:hover { background: var(--surface-2); color: var(--text-1); }
  .add-ex-result-item.blocked {
    color: var(--text-3); cursor: not-allowed;
    font-style: italic;
  }
 
  .add-ex-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px;
    padding: 20px;
  }
  .add-ex-placeholder-icon {
    font-size: 24px; color: var(--text-3);
  }
  .add-ex-select-btn {
    font-size: 13px; font-weight: 600; color: var(--accent);
    padding: 6px 14px; 
    border: 1px solid #2e2e2e;
    color: rgb(50,50,50);
    border-radius: var(--radius);
    transition: background 0.15s;
    background: #1f1f1f
  }
  .add-ex-select-btn:hover {  
    background: rgba(40, 40, 40);
  color: var(--accent);
  }
 
  .remove-overlay {
    position:absolute;
    inset:0;
    background:rgba(20,20,20,0.92);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:12px;

    opacity:0;
    pointer-events:none;
    transition:opacity .2s;

    z-index:10;
}

.ex-card.confirming-remove .remove-overlay {
    opacity:1;
    pointer-events:auto;
}


.ex-card.active {
  border: 1px solid #363636;
}

.ex-card.active .ex-card-header {
  border-bottom: 1px solid #ff9657;
}

/* ── REMOVE OVERLAY ───────────────────────────────────────── */

.remove-overlay {
    position:absolute;
    inset:0;
    background:
        rgba(120, 20, 20, 0.90);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;
    opacity:0;
    pointer-events:none;
    transition:
        opacity .18s ease;
    z-index:20;
}

.ex-card.confirming-remove .remove-overlay {
    opacity:1;
    pointer-events:auto;
}

.remove-title {
    color:#fff;
    font-size:15px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.remove-name {
    color:#fff;
    font-size:14px;
    font-weight:600;
}

.remove-warning {
    color:rgba(255,255,255,.8);
    font-size:12px;
}

.remove-actions {
    display:flex;
    gap:12px;
    margin-top:8px;
}

.remove-actions button {
    padding:7px 16px;
    border-radius:var(--radius-sm);
    font-size:12px;
    font-weight:700;
}

.remove-cancel {
    background:transparent;
    border:1px solid rgba(255,255,255,.4);
    color:#fff;
}

.remove-confirm {
    background:var(--danger);
    color:#fff;
}
 
  /* ── SCROLLBAR ───────────────────────────────────────────── */
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
 
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }




/* ------------------------------------------------------------
   POST-WORKOUT OPTIONS
------------------------------------------------------------ */
.workout-content-exiting {
  opacity: 0;
  transform: translateY(-15px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}

.post-workout-options {
  display: flex;
  width: 100%;
  max-width: 400px;
  margin: 30px auto;
  flex-direction: column;
  gap: 20px;
margin-top: -50px;
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.post-workout-options.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.post-workout-btn {
  font-size: 2rem;
  height: 100px;
  width: 400px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}


/* ─────────────────────────────────────────
   WORKOUT AGAIN
   Matches the existing blue workout buttons
───────────────────────────────────────── */

#workoutAgainBtn {
  color: #007bff;
  background-color: #e7e7e7;
}

#workoutAgainBtn:hover {
  background-color: #007bff;
  color: #ffffff;
}


/* ─────────────────────────────────────────
   RECOVERY PROFILE
   Matches the live-session green identity
───────────────────────────────────────── */

#recoveryProfileBtn {
  color: #00cf0a;
  background-color: #e7e7e7;
}

#recoveryProfileBtn:hover {
  background-color: #34c417;
  color: #e7e7e7;
}


/* ─────────────────────────────────────────
   JOURNAL
   Orange identity
───────────────────────────────────────── */

#journalBtn {
  color: #ff9100;
  background-color: #e7e7e7;
}

#journalBtn:hover {
  background-color: #ff9100;
  color: #ffffff;
}


/* ─────────────────────────────────────────
   MOBILE
───────────────────────────────────────── */

@media (max-width: 440px) {

  .post-workout-options {
    width: calc(100% - 40px);
  }

  .post-workout-btn {
    width: 100%;
    font-size: 1.6rem;
  }

}