body {
  font-family: 'Calibri', 'Helvetica', 'Arial', sans-serif;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  background-color: #161616;
}

a {
  color: blue;
}

.main-column-div  {
  display: flex; 
  flex-direction: column;
  align-items: center;
}

.main-column-div {
  width: 100%;
  margin: auto;
  /* background-color: rgb(165, 165, 165); */
  /* background-color: #0d1117; */
  background: 
    radial-gradient(900px 500px at 120% -10%, rgba(59,130,246,.1), transparent),
    radial-gradient(800px 500px at -20% -20%, rgba(147,197,253,.08), transparent),
    linear-gradient(180deg, #0b0e13, #0d1117);
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2), 2px 0 4px rgba(0, 0, 0, 0.2);
}

.stuff-to-hide-for-now-div, .hide-this {
  display: none !important;
}

.bold-text {
  font-weight: bold;
}

.light-gray-border {
  border-bottom: 1px solid #b3b2b2;
  border-top: 0px;
  width: 100%;
}

.underlined {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

/*
.button-13 {
  background-color: #fff;
  border: 1px solid #595959;
  border-radius: 8px;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  padding: 6px 10px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
}

.button-13:hover {
  background-color: #f7fafa;
}

.button-13:focus {
  border-color: #008296;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  outline: 0;
}
*/

.button-13 {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: rgba(59, 130, 246, .22);
  font-weight: 700;
  cursor: pointer;
  color: #e5e7eb;
  font-size: 14px;
}

.button-13-v2 {
  background-color: #fff;
  border: 1px solid #595959;
  border-radius: 3px;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  padding: 6px 10px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
}

.button-13-v2:hover {
  background-color: #f7fafa;
}

.button-13-v2:focus {
  border-color: #008296;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  outline: 0;
}

.button-13-v2:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}


.button-15 {
  background-image: linear-gradient(#42A1EC, #0070C9);
  border: 1px solid #0077CC;
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  direction: ltr;
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.47059;
  min-width: 30px;
  overflow: visible;
  padding: 4px 15px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}

.button-15:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.button-15:hover {
  background-image: linear-gradient(#51A9EE, #147BCD);
  border-color: #1482D0;
  text-decoration: none;
}

.button-15:active {
  background-image: linear-gradient(#3D94D9, #0067B9);
  border-color: #006DBC;
  outline: none;
}

.button-15:focus {
  box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
  outline: none;
}

.disabled-button {
  cursor: not-allowed;
  opacity: .3;
}

.website-header {
  height: 60px;
  background-color: #343434;
  display: flex;
  justify-content: space-between;
}

.website-header   a   {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  font-family: 'Montserrat';
}

.user-account-link {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  font-family: 'Montserrat';
  text-decoration: underline;
  cursor: pointer;
}

.header-div-left {
  display: flex;
  align-items: center;
  margin-left: 20px;
  gap: 10px;
}

.header-div-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
  gap: 32px;
}

.website-header-logo-image {
  height: 34px;
}

.website-header-company-name {
  color: white;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Montserrat';
}

.clickable-header-item-left {
  text-decoration: none;
  color: inherit;
}

.main-product-headline {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 21px;
  font-family: 'Montserrat';
}

.boldest-text {
  font-weight: 900;
}

article {
	width: 100%;
}

.website-footer {
  /* height: 60px; */
  background-color: #343434;
  display: flex;
  flex-direction: column;
  /* padding-left: 24px;
  padding-right: 24px; */
  padding-top: 18px;
}

.website-footer   a   {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  font-family: 'Montserrat';
}

.footer-section-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid gray;
  padding-bottom: 20px;
}

.footer-section-left {
  display: flex;
  flex-direction: column;
  width: 33.33%;
}

.footer-text-1 {
  color: white;
  margin-left: 30px;
  font-size: 16px;
}

.footer-section-right {
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
  gap: 32px;
  width: 66.66%;
}

.footer-section-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 36px;
  margin-bottom: 50px;
}

.footer-section-bottom-3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left-section-div-for-layout {
  display: flex;
  flex-direction: row;
  width: 25%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  margin-left: 30px;
}

.right-section-div-for-layout {
  display: flex;
  justify-content: center;
  width: 75%;
}

.footer-section-bottom-2 {
  display: flex;
  flex-direction: row;
  border-top: 1px solid gray;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
}

.footer-product-summary-div {
  display: flex;
  justify-content: center;
  width: 75%;
}

.footer-product-summary {
  /* margin-top: 36px; */
  /* margin-bottom: 36px; */
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 64px;
  margin-left: 30px;
  color: #e3e3e3;
  text-align: justify;
  font-size: 16px;
}

.footer-product-summary-2 {
  margin-top: 32px;
  margin-bottom: 40px;
  margin-right: 64px;
  margin-left: 30px;
  color: #e3e3e3;
  text-align: justify;
  font-weight: 400;
}

.footer-website-logo-div {
  display: flex;
  flex-direction: row;
  width: 25%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  margin-left: 30px;
}

.bolder-headline-text {
  font-weight: 800;
}

.main-headline-logo {
  height: 26px;
  margin-right: 10px;
}

#darkened-background-overlay-for-popups {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.75); /* Dark transparent background */
  z-index: 1000; /* Ensure it stays on top */
}

#login-popup-div {
  display: none; /* Initially hidden */
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  min-width: 20vw;
  max-width: 90vw;
  width: 430px;
  height: auto;
  background: #111827;
  /* background: radial-gradient(900px 500px at 120% -10%, rgba(59, 130, 246, .1), transparent), radial-gradient(800px 500px at -20% -20%, rgba(147, 197, 253, .08), transparent), linear-gradient(180deg, #0b0e13, #0d1117); */
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 28px 50px 26px 50px;
  z-index: 1001; /* Higher than the overlay */
  flex-direction: column;
  align-items: center;
}

#reset-password-popup-div {
  display: none; /* Initially hidden */
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  min-width: 20vw;
  max-width: 90vw;
  width: 350px;
  height: auto;
  background: #111827;
  /* background: radial-gradient(900px 500px at 120% -10%, rgba(59, 130, 246, .1), transparent), radial-gradient(800px 500px at -20% -20%, rgba(147, 197, 253, .08), transparent), linear-gradient(180deg, #0b0e13, #0d1117); */
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 28px 34px 26px 34px;
  z-index: 1001; /* Higher than the overlay */
  flex-direction: column;
  align-items: center;
}


#change-password-popup-div {
  display: none; /* Initially hidden */
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  min-width: 20vw;
  max-width: 90vw;
  width: 350px;
  height: auto;
  background: #111827;
  /* background: radial-gradient(900px 500px at 120% -10%, rgba(59, 130, 246, .1), transparent), radial-gradient(800px 500px at -20% -20%, rgba(147, 197, 253, .08), transparent), linear-gradient(180deg, #0b0e13, #0d1117); */
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 28px 34px 26px 34px;
  z-index: 1001; /* Higher than the overlay */
  flex-direction: column;
  align-items: center;
}

#end-free-trial-popup-div {
  display: none; /* Initially hidden */
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  width: 600px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 1001; /* Higher than the overlay */
  flex-direction: column;
  align-items: center;
  padding-top: 26px;
  padding-bottom: 40px;
  padding-left: 60px;
  padding-right: 60px;
}

.non-bold-text {
  font-weight: 400;
}

.size-15-font {
  font-size: 15px;
}

.size-13-font {
  font-size: 13px;
}

#capture-onboarding-info-popup-div, #capture-unsubscribe-info-popup-div {
  display: none; /* Initially hidden */
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  min-width: 20vw;
  width: 45vw;
  max-width: 90vw;
  height: auto;
  background: #111827;
  /* background: radial-gradient(900px 500px at 120% -10%, rgba(59, 130, 246, .1), transparent), radial-gradient(800px 500px at -20% -20%, rgba(147, 197, 253, .08), transparent), linear-gradient(180deg, #0b0e13, #0d1117); */
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 28px 34px 26px 34px;
  z-index: 1001; /* Higher than the overlay */
  flex-direction: column;
  align-items: center;
  padding-top: 26px;
  padding-bottom: 54px;
  padding-left: 60px;
  padding-right: 60px;
}

#onboarding-radio-option-div, #unsubscribe-radio-option-div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  margin-bottom: 6px;
}

#onboarding-radio-option-div  span, #unsubscribe-radio-option-div  span {
  margin-left: 50px;
  margin-right: 6px;
}

#onboarding-radio-option-div  label, #unsubscribe-radio-option-div  label {
  margin-right: 6px;
}

#onboarding-radio-option-div  input[type="radio"], #unsubscribe-radio-option-div  input[type="radio"] {
  margin: 0px 6px 0px 0px;
  height: 16px;
  width: 16px;
}

#onboarding-radio-option-div  input[type="text"], #unsubscribe-radio-option-div  input[type="text"] {
  font-size: 16px;
  border-radius: 4px;
}

#onboarding-radio-option-div > div:first-child, #unsubscribe-radio-option-div > div:first-child {
  display: flex;
  align-items: center;
}

#login-popup-div input[type="text"], #login-popup-div input[type="password"] {
  width: 80%;
  padding: 10px;
  margin: 6px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 15px;
}

#reset-password-popup-div input[type="text"], #change-password-popup-div input[type="password"] {
  width: 80%;
  padding: 10px;
  margin: 6px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

#login-button, #create-account-button, #submit-onboarding-info-button, #submit-unsubscribe-info-button,
#send-reset-password-link-button, #change-password-button {
  width: 80%;
  padding: 10px;
  margin: 6px 0;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 15px;
}

#login-button:hover, #create-account-button:hover, #submit-onboarding-info-button:hover, #submit-unsubscribe-info-button:hover,
#send-reset-password-link-button:hover, #change-password-button:hover {
  background-color: #208cff;
}

#login-button:disabled, #create-account-button:disabled, #send-reset-password-link-button:disabled,
#change-password-button:disabled {
  opacity: 0.6;
}

#submit-onboarding-info-button, #submit-unsubscribe-info-button {
  margin-top: 50px;
  font-size: 16px;
}

#capture-onboarding-popup-headline, #capture-unsubscribe-popup-headline {
  text-align: center;
  margin-bottom: 40px;
  font-size: 26px;
}

#login-popup-headline {
  text-align: center;
  margin-bottom: 10px;
  font-size: 24px;
}

#reset-password-popup-headline, #change-password-popup-headline {
  text-align: center;
  margin-bottom: 10px;
}

#end-free-trial-popup-headline {
  text-align: center;
  margin-bottom: 30px;
}

#reject-login-button {
  display: none;
  width: 80%;
  padding: 10px;
  margin: 6px 0;
  border: none;
  border-radius: 5px;
  background-color: #ff0000;
  color: white;
  cursor: pointer;
  box-sizing: border-box;
}

#reject-login-button:hover {
  background-color: #b30000;
}

.login-capture-subtext {
  font-size: 14px;
  text-align: center;
  margin-top: 4px;
}

.end-free-trial-popup-subtext {
  font-size: 14px;
  text-align: center;
  margin-top: 4px;
}

.upgrade-subscription-OR-text {
  font-size: 14px;
}

.login-capture-subtext  a  {
  color: #e5e7eb;
  text-decoration: underline;
}

#x-button-to-close-login-popup, #x-button-to-close-account-popup, #x-button-to-close-capture-payment-popup,
#x-button-to-close-reset-password-popup, #x-button-to-close-change-password-popup, #x-button-to-close-paddle-checkout-popup,
#x-button-to-close-unsubscribe-info-popup {
  position: absolute;
  top: 0px;
  right: 12px;
  font-size: 26px;
  cursor: pointer;
  font-weight: bold;
  color: #a4a4a4;
}

#x-button-to-close-login-popup:hover, #x-button-to-close-account-popup:hover, #x-button-to-close-capture-payment-popup:hover,
#x-button-to-close-reset-password-popup:hover, #x-button-to-close-change-password-popup:hover, #x-button-to-close-paddle-checkout-popup:hover,
#x-button-to-close-unsubscribe-info-popup:hover {
  color: rgb(255, 255, 255);
}

#login-popup-subtext {
  display: none;
  margin-top: 20px;
  font-weight: bold;
  text-align: center;
}

.red-error-text {
  color: red;
}

.green-success-text {
  color: #24b724;
}

#account-popup-div {
  display: none; /* Initially hidden */
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  min-width: 20vw;
  max-width: 90vw;
  width: 560px;       /* sensible default */
  height: auto;
  background: #111827;
  /* background: radial-gradient(900px 500px at 120% -10%, rgba(59, 130, 246, .1), transparent), radial-gradient(800px 500px at -20% -20%, rgba(147, 197, 253, .08), transparent), linear-gradient(180deg, #0b0e13, #0d1117); */
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 28px 44px 26px 44px;
  z-index: 1001; /* Higher than the overlay */
  flex-direction: column;
}

.account-popup-headline {
  text-align: center;
  margin-bottom: 54px;
  font-size: 22px;
  margin-top: 10px;
}







#user-account-info-div {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

#user-account-button-div {
  display: flex;
  justify-content: flex-end;
}

#user-email-address-text {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 18px;
}

#upgrade-subscription-account-button, #manage-subscription-account-button {
 display: none;
}

#cancel-subscription-account-button {
  margin-top: 32px;
}

#log-user-out-button {
  margin-top: 20px;
}

#update-payment-method-account-button, #manage-subscription-account-button {
  margin-top: 16px;
}

#user-pricing-information {
  flex-direction: column;
  display: none;
  font-size: 18px;
}

#loading-account-info-text {
  text-align: center;
  font-size: 18px;
}





/* Fullscreen Wrapper */
#paddle-checkout-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

/* Scaled Popup */
#paddle-checkout-popup-div {
  position: relative; /* Needed for absolute child positioning */
  width: 100dvw;
  height: 100dvh;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  padding-top: 70px;
  padding-bottom: 50px;
  padding-left: 30px;
  padding-right: 30px;
  justify-content: center;
  gap: 30px;
  box-sizing: border-box;

  /* Scale down while keeping centered */
  transform: scale(0.90);
  transform-origin: center;
}

/* Left Column (Line Items) */
.paddle-checkout-line-items {
  width: 45%;
  height: 100%;
  overflow-y: auto;
}

/* Right Column (Checkout Container) */
.paddle-checkout-container {
  width: 55%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  /* Add subtle left border like Stripe */
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.1); /* Only left shadow */
}

/* Paddle's Iframe */
#paddle-checkout-popup-div iframe {
  position: relative !important;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

/* Paddle's Inline Frame */
.paddle-frame-inline {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}


.line-items-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  color: #333;
}

.checkout-title {
  font-size: 19.2px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #808080;
}

.checkout-main-price-title {
  font-size: 28.8px;
  font-weight: bold;
  margin: 0;
}

.checkout-subtext {
  font-size: 16.8px;
  color: #555;
  margin: 0;
}

.checkout-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  padding: 10px;
  padding-left: 14px;
  padding-right: 14px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.checkout-logo {
  width: 48px;
  height: auto;
  border-radius: 4px;
}

.item-details {
  flex-grow: 1;
}

.item-title {
  font-size: 16.8px;
  font-weight: bold;
  margin: 0;
}

.item-description {
  font-size: 13.5px;
  color: #666;
  margin: 4px 0 0;
  font-family: Lato, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}

.item-price {
  font-size: 16.8px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  margin-left: 0px;
}

.item-price, .item-price-subtext {
  margin-top: 0px;
  margin-bottom: 0px;
}

.item-price-subtext {
  color: gray;
}

.item-price-div {
  display: flex;
  flex-direction: column;
}

.checkout-summary {
  margin-top: 16px;
  border-top: 1px solid #ddd;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkout-summary p {
  display: flex;
  justify-content: space-between;
  font-size: 16.8px;
  margin: 0;
}

.checkout-summary span {
  color: #333;
}

.checkout-summary-2 {
  margin-top: 0px;
  border-top: 1px solid #ddd;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkout-summary-2 p {
  display: flex;
  justify-content: space-between;
  font-size: 16.8px;
  margin: 0;
}

.checkout-summary-2 span {
  color: #333;
}

.total-today-text {
  font-weight: bold;
}

.subtotal-text, .taxes-text, .total-after-trial-text {
  font-weight: normal;
}







#capture-payment-popup-div {
  display: none; /* Initially hidden */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  min-width: 20vw;
  max-width: 90vw;
  height: auto;
  /* background: #111827; */
  background: radial-gradient(900px 500px at 120% -10%, rgba(59, 130, 246, .1), transparent), radial-gradient(800px 500px at -20% -20%, rgba(147, 197, 253, .08), transparent), linear-gradient(180deg, #0b0e13, #0d1117);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  z-index: 1001; /* Higher than the overlay */
  flex-direction: column;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 38px;
  padding-left: 80px;
  padding-right: 80px;
  max-height: 95vh;
  overflow-y: auto; /* Enables vertical scrolling when content exceeds max height */
}

/*
#capture-payment-popup-div, #darkened-background-overlay-for-popups {
  display: flex;
}
*/



.green-checkmark-span {
  color: rgb(0, 190, 0);
  font-weight: bold;
  font-size: 21px;
  margin-right: 2px;
}

#capture-payment-popup-CTA-button-green, #upgrade-subscription-button {
  padding: 10px 20px;
  margin: 6px 0;
  border: none;
  border-radius: 5px;
  background-color: #008802;
  color: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #3b3b3b;
  border-bottom: 2px solid #000000;
  border-bottom: 2px solid #000000;
  /* box-shadow: 2px 2px 2px #000000; */
  font-weight: bold;
  font-size: 16px;
  text-wrap: nowrap;
}

#capture-payment-popup-CTA-button-green:hover, #upgrade-subscription-button:hover {
  background-color: #00c103;
}

#upgrade-subscription-button:disabled {
  opacity: 0.6;
}

#capture-payment-popup-CTA-button-green:disabled {
  opacity: 0.6;
}

#capture-payment-popup-CTA-button-red, #decline-upgrade-subscription-button {
  padding: 10px 20px;
  margin: 6px 0;
  border: none;
  border-radius: 5px;
  background-color: #b70000;
  color: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #3b3b3b;
  border-bottom: 2px solid #000000;
  border-right: 2px solid #000000;
  /* box-shadow: 2px 2px 2px #000000; */
  font-weight: bold;
  font-size: 16px;
  text-wrap: nowrap;
}

#capture-payment-popup-CTA-button-red:hover, #decline-upgrade-subscription-button:hover {
  background-color: #f70000;
}

#capture-payment-popup-value-proposition-div-1, #capture-payment-popup-value-proposition-div-2 {
  display: flex;
  /* box-shadow: 2px 2px 2px #000000; */
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 15px;
  font-size: 19px;
  background: #111827;
  border-radius: 8px;
  border: 1px solid #252f38;
  
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: 11px;
  padding-top: 7px;
  text-wrap: nowrap;
}

#capture-payment-popup-value-proposition-div-2 {
  display: none;
}

#capture-payment-popup-headline {
  margin-bottom: 4px;
  margin-top: 0px;
  font-size: 26px;
  font-weight: bold;
  white-space: nowrap; /* forces it to stay on one line, instead of weirdly spilling over to second which looks AWFUL for this CTA card */
}

.capture-payment-popup-light-gray-border {
  border-bottom: 1px solid #36434f;
  border-top: 0px;
  width: 100%;
  border-left: 0px;
  border-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
}

#capture-payment-popup-headline-subtext {
  margin-top: 5px;
  font-size: 24px;
}

#capture-payment-popup-CTA-button-div {
  display: flex;
  flex-direction: row;
  margin-top: 0px;
  margin-bottom: 4px;
  gap: 18px;
}

#capture-payment-popup-info-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0px;
  font-size: 15px;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #b5b4b4;
  border-bottom: 2px solid #959595;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 9px;
  padding-top: 6px;
  display: none;
}

.capture-payment-popup-support-email-text {
  color: #9aa3b2;
}

#capture-payment-popup-green-CTA-div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thin-right-arrow {
  font-family: arial;
}

.red-heavy-X-emoji {
  color: red;
  font-weight: bold;
  font-size: 21px;
  margin-right: 2px;
}

#capture-payment-popup-headline-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0px;
  /* background: #111827; */
  /* border: 1px solid #36434f; */
  /* box-shadow: 2px 2px 2px #000000; */
  padding-left: 26px;
  padding-right: 26px;
  padding-bottom: 10px;
  padding-top: 9px;
  margin-top: 0px;
  border-radius: 8px;
}

.capture-payment-popup-down-arrow {
  margin-top: 8px;
  margin-bottom: 12px;
  color: #8d8d8d;
  display: none;
}

#capture-payment-popup-customer-support-text, #capture-payment-popup-other-product-text {
  font-size: 16px;
}

#capture-payment-popup-customer-support-text {
  margin-top: 0px;
  color: #9aa3b2;
}

#process-payment-popup-div {
  display: none; /* Initially hidden */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  width: 700px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 1001; /* Higher than the overlay */
  flex-direction: column;
  align-items: center;
  padding-top: 26px;
  padding-bottom: 32px;
  padding-left: 60px;
  padding-right: 60px;
  max-height: 85vh;
}

.credit-card-widget-wrapper {
  transform: scale(0.8);
  transform-origin: top;
}

.process-payment-subtext {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 500;
  color: #1a3b5d;
  width: 100%;
  display: block;
  user-select: none;
  text-align: center;
  margin-top: 10px;
}

.disabled-operation-setup-element {
  opacity: 0.5;
  pointer-events: none;
}

#money-back-guarantee-div {
  display: flex;
  justify-content: center;
  margin-top: 0px;
  margin-bottom: 46px;
  font-size: 18px;
  text-wrap: nowrap;
  color: #9aa3b2;
}

#refund-terms-text {
  font-size: 16px;
}

#ToS-checkbox-holder-div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.privacy-policy-and-ToS-span-text {
  font-size: 13px;
}

#ToS-checkbox-holder-div a {
  color: #0063fe;
}

#forgot-password-text {
  cursor: pointer;
  font-weight: 600;
  margin-top: 0px;
  font-size: 16px;
  text-decoration: underline;
  color: #007aff;
}

#forgot-email-address-text {
  cursor: pointer;
  font-weight: 600;
  margin-top: 28px;
  font-size: 16px;
  text-decoration: underline;
  color: #007aff;
}

.vsc-initialize {
  background: transparent !important;
}













































#habit-streak-tracker-table, #habit-quantity-tracker-table {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  /* background-color: #111827; */
}

#habit-streak-tracker-table thead, #habit-quantity-tracker-table thead {
  font-size: 20px;
}

#habit-streak-tracker-table tbody, #habit-quantity-tracker-table tbody {
  font-size: 20px;
}

#habit-streak-tracker-table td, #habit-quantity-tracker-table td {
  padding-left: 20px;
  padding-right: 20px;
}

/* prevents the pesky default browser behavior of holding shift + moving the mouse causing it to select all text in the range */
#habit-streak-tracker-table td {
  user-select: none; 
}

#habit-streak-tracker-table, #habit-quantity-tracker-table {
  border-collapse: collapse;
}

/*
#habit-streak-tracker-table th, #habit-quantity-tracker-table th {
  border: 1px solid #2C3444;
}
*/

#habit-streak-tracker-table td, #habit-quantity-tracker-table td {
  border: 1px solid #2C3444;
}

#habit-streak-tracker-table td, #habit-quantity-tracker-table td {
  font-size: 17px;
  font-weight: 300;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #e5e7eb;
  /* padding-top: 4px;
  padding-bottom: 4px; */
  padding-top: 4px;
  padding-bottom: 4px;
}

#habit-streak-tracker-table thead th, #habit-quantity-tracker-table thead th {
  /* position: sticky; */
  top: 0px;
  z-index: 2;
  background: #111827; /* overtly specified, in addition to the table background, so the text of this sticky header stays visible over the rows */
  font-size: 17px;
  font-weight: 300;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #e5e7eb;
  padding-top: 4px;
  padding-bottom: 6px;
  /* this becomes the de-facto “bottom border” that always shows even with the table's border-collapse set to "collapse */
  /* box-shadow: 
    inset 0 -1px 0 #2C3444; */
}

/* This pseudo-element is added to functionally "cover up" that pesky little 1-pixel strip that would show the elements underneath at the top of the header */
/* Default cover strip */
/*
#habit-streak-tracker-table thead th::before,
#habit-quantity-tracker-table thead th::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #111827;
  z-index: 3;
}
*/

/* Override cover strip color for incomplete header cells */
/*
#habit-streak-tracker-table thead th.incomplete-habit-header::before,
#habit-quantity-tracker-table thead th.incomplete-habit-header::before {
  background: #2a4669 !important;
}
*/





#habit-streak-tracker-table thead {
  position: sticky;
  top: 0px;
  z-index: 2;
  /*
  box-shadow:
    0 6px 10px -6px rgba(0,0,0,.9);
  */
  /*
  box-shadow:
    0 4px 6px -2px rgba(0,0,0,.95),
    0 6px 10px -3px rgba(0,0,0,.9);
  */
  /*
  box-shadow:
    0 4px 6px -2px rgba(0,0,0,.4),
    0 6px 10px -3px rgba(0,0,0,.4),
    0 8px 14px -4px rgba(0,0,0,.4),
    0 16px 20px -5px rgba(0,0,0,.4);
  */
  box-shadow:
    0 4px 6px -2px rgba(0,0,0,.4),
    0 6px 10px -3px rgba(0,0,0,.4),
    0 8px 14px -4px rgba(0,0,0,.4),
    0 16px 20px -5px rgba(0,0,0,.4);
}

#habit-quantity-tracker-table thead {
  position: sticky;
  top: -1px;
  z-index: 2;
  /*
  box-shadow:
    0 4px 6px -2px rgba(0,0,0,.4),
    0 6px 10px -3px rgba(0,0,0,.4),
    0 8px 14px -4px rgba(0,0,0,.4),
    0 16px 20px -5px rgba(0,0,0,.4);
  */
  box-shadow:
    0 4px 6px -2px rgba(0,0,0,.6),
    0 6px 10px -3px rgba(0,0,0,.6),
    0 8px 14px -4px rgba(0,0,0,.6),
    0 16px 20px -5px rgba(0,0,0,.6);
}

#habit-streak-tracker-table-outer-div, #habit-quantity-tracker-table-outer-div {
  max-width: 90%;
  z-index: 2;
}



#habit-streak-tracker-table-scroll-container, #habit-quantity-tracker-table-scroll-container {
  position: relative; /* required for the handle positioning */
  min-height: 20vh;
  max-height: 200vh;
  height: 70vh;
  overflow-y: auto;
  overflow-x: auto;
  margin-top: 20px;
  border: 1px solid rgba(148,163,184,.2);

  /* applies the rounding to only the top-left and bottom-left corners, thus allowing the scrollbar on right to remain rectangular */
  border-radius: 12px 0 0 12px; 

  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

#habit-streak-tracker-table-scroll-container::-webkit-scrollbar,
#habit-quantity-tracker-table-scroll-container::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(148,163,184,.2);
}

#habit-streak-tracker-table-scroll-container::-webkit-scrollbar-track,
#habit-quantity-tracker-table-scroll-container::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, 0.85); /* matches #111827 */
  /* border-radius: 10px; */
}

#habit-streak-tracker-table-scroll-container::-webkit-scrollbar-thumb,
#habit-quantity-tracker-table-scroll-container::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(148,163,184,0.55),
    rgba(100,116,139,0.55)
  );
  /* border-radius: 10px; */
  border: 2px solid rgba(17, 24, 39, 0.85); /* creates inset look */
}

#habit-streak-tracker-table-scroll-container::-webkit-scrollbar-thumb:hover,
#habit-quantity-tracker-table-scroll-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(148,163,184,0.75),
    rgba(100,116,139,0.75)
  );
}


/* NOTE: this is set to a bottom -px position (relative to its parent container) at a px that matches this element's own height.
The reason for that is, having ANY overlap with the table itself would cover up both the x-axis scrollbar,
AS WELL AS the bottom arrow of the y-axis scrollbar. And with the higher z-index, that would effectively disable/override their functionality.
I thus made the simple decision to move this ENTIRELY BELOW the table so all scrolling functionality remains entirely intact,
but the user can still reposition at will. */
#habit-streak-tracker-table-resize-handle, #habit-quantity-tracker-table-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  cursor: ns-resize;
  background: transparent;
  z-index: 200;
}

/* NOTE: to avoid a pesky overflow-y scrollbar from appearing, overflow-y must be set to VISIBLE (not auto) for this element.
This is because the table-resize-handle sits inside of it, and thus, based on its -px bottom position, technically overflows its contents. */
#habit-streak-tracker-table-outer-div, #habit-quantity-tracker-table-outer-div {
  overflow-y: visible;
}







#habit-streak-tracker-table td:not(:first-child), 
#habit-quantity-tracker-table td:not(:first-child) {
  cursor: pointer;
}

#habit-streak-tracker-table td:not(:first-child):hover, 
#habit-quantity-tracker-table td:not(:first-child):hover {
  background-color: #555;
}

#habit-streak-tracker-table th[contenteditable="true"],
#habit-quantity-tracker-table th[contenteditable="true"] {
  cursor: text;
}

#habit-streak-tracker-table th[contenteditable="true"]:hover,
#habit-quantity-tracker-table th[contenteditable="true"]:hover {
  background-color: #e4e4e4;
  box-shadow: inset 0 0 0 2px #aaa;
}

#habit-streak-tracker-table th[contenteditable="true"]:focus,
#habit-quantity-tracker-table th[contenteditable="true"]:focus {
  box-shadow: inset 0 0 0 2px #aaa;
}







.habit-header-cell {
  position: relative;
  padding: 0; /* let the inner row handle spacing */
}

/* One-line layout inside the header cell */
.habit-header-elements {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 12px;
  padding-right: 6px;
}

/* Left drag handle */
.habit-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: grab;
  user-select: none;
  color: #e5e7eb;
  opacity: 0.85;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.habit-drag-handle:active {
  cursor: grabbing;
}

/* Editable name */
.habit-header-text {
  flex: 1;
  min-width: 0; /* allows ellipsis */
  color: #e5e7eb;
  outline: none;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 7px;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover/focus styling for the ACTUAL contenteditable element */
.habit-header-text:hover {
  background-color: rgba(147, 197, 253, 0.10);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

.habit-header-text:focus {
  background-color: rgba(147, 197, 253, 0.14);
  box-shadow: inset 0 0 0 2px rgba(147, 197, 253, 0.55);
}

/* Right-side actions */
.habit-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}








.animated-streak-progress-badge {
  max-width: 25px;
  max-height: 25px;
}

.streak-progress-badge {
  /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.50); */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.50);
  transition: opacity 200ms ease;
  /*
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.75),
    0 0 4px rgba(0, 0, 0, 0.33)
  */
}

.habit-streak-number {
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  text-shadow: 1px 1px 2px rgb(0 0 0);
  /*
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 0 4px rgba(0, 0, 0, 0.75)*/
}

.streak-meter{
  position:absolute;
  left:8px;
  right:8px;
  bottom:5px;
  height:3px;
  border-radius:999px;
  overflow:hidden;
  opacity: .9;
}

.streak-meter::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: var(--streakPct, 0%);
  border-radius:999px;
  background: linear-gradient(90deg, rgba(59,130,246,.2), rgba(59,130,246,.9));
  box-shadow: 0 0 10px rgba(59,130,246, var(--streakGlow, .0));
}

.brighten-emoji-level-1 {
  filter: brightness(1.12) saturate(1.1);
}

.brighten-emoji-level-2 {
  filter: brightness(1.25) saturate(1.1);
}

.brighten-emoji-level-2-no-saturation {
  filter: brightness(1.25);
}

.brighten-emoji-level-2-more-saturation {
  filter: brightness(1.25) saturate(1.25);
}

.widen-this-emoji {
  display: inline-block;
  transform: scaleX(1.25);
}




#habit-popup-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100;
}

.habit-streak-popup-v1 {
    position: fixed;
    transform: translate(-50%, -50%);
    font-weight: 800;
    font-size: 30px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
    opacity: 0;
    animation: streakPopupFloat 2000ms ease-out forwards;
    white-space: nowrap;
    z-index: 16;
}

.habit-streak-popup-v2 {
    position: fixed;
    transform: translate(-50%, -50%);
    font-weight: 800;
    font-size: 30px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
    opacity: 0;
    animation: streakPopupFloatv2 2200ms ease-out forwards;
    white-space: nowrap;
    z-index: 16;
}

/*
@keyframes streakPopupFloat {
    0%   { transform: translate(-50%, -50%) translateY(6px) scale(0.98); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateY(-40px) scale(1.03); opacity: 0; }
}
*/

/*
@keyframes streakPopupFloat {
    0%   { transform: translate(-50%, -50%) translateY(-5px) scale(0.95); opacity: 0; }
    15%  { opacity: 1; }
    20%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateY(-35px) scale(1.10); opacity: 0; }
}
*/


@keyframes streakPopupFloat {
    0%   { transform: translate(-50%, -50%) translateY(-10px) scale(1); opacity: 0; }
    15%  { opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateY(-40px) scale(1.40); opacity: 0; }
}

@keyframes streakPopupFloatv2 {
    0%   { transform: translate(-50%, -50%) translateY(-10px) scale(1); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateY(-40px) scale(1.40); opacity: 0; }
}


@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --milestone-clr-0: #ffffff;
  --milestone-clr-1: #6420aa;
  --milestone-clr-2: #ff3ea5;
  --milestone-clr-3: #ff7ed4;
}



/* Big milestone popup overlay */
.habit-milestone-popup {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  /* start hidden, then fade in */
  opacity: 0;
  background: rgba(0, 0, 0, 0);               /* start clear */
  transition: opacity 700ms ease, background 700ms ease;
}

/* When we "activate" it, both overlay + dim background fade in */
.habit-milestone-popup.is-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.66); /* darkness overlay, to draw more attention to the dramatic achievement */
}

/* Fade-out state (same duration as fade-in) */
.habit-milestone-popup.is-fading-out {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
}



/* Outer wrapper: holds the neon border */
.habit-milestone-popup-inner {
  position: relative;
  isolation: isolate;
  z-index: 1;

  /* this is the “border thickness” area */
  padding: 10px;

  border-radius: 20px;

  /* keep your pop-in behavior */
  transform: translateY(10px) scale(0.96);
  opacity: 0;
  transition: transform 700ms ease, opacity 700ms ease;
}

.habit-milestone-popup.is-visible .habit-milestone-popup-inner {
  transform: translateY(0px) scale(1);
  opacity: 1;
}

.habit-milestone-popup.is-fading-out .habit-milestone-popup-inner {
  transform: translateY(6px) scale(0.985);
  opacity: 0;
}

/* Neon ring lives on the OUTER wrapper */
.habit-milestone-popup-inner::before,
.habit-milestone-popup-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
}

/* holographic ring border */
.habit-milestone-popup-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;

  /* HOLOGRAPHIC RING: stacked materials */
  background:
    /* moving specular “sheen band” */
    conic-gradient(
      from calc(var(--gradient-angle) + 180deg),
      rgba(255,255,255,0.00) 0deg,
      rgba(255,255,255,0.35) 18deg,
      rgba(255,255,255,0.00) 34deg,
      rgba(255,255,255,0.00) 360deg
    ),

    /* your color hologram layer */
    conic-gradient(
      from var(--gradient-angle),
      var(--milestone-clr-0),
      var(--milestone-clr-1),
      var(--milestone-clr-2),
      var(--milestone-clr-3),
      var(--milestone-clr-2),
      var(--milestone-clr-1),
      var(--milestone-clr-0)
    );

  /* IMPORTANT: make it look like light blending, not paint */
  background-blend-mode: screen, overlay, normal;

  /* keep it crisp */
  opacity: 1;

  /* your black separation behind ring (keep, but tune) */
  filter:
    drop-shadow(0 0 7px rgba(0,0,0,0.70))
    drop-shadow(0 0 2px rgba(0,0,0,0.95));

  animation: milestoneBorderRotate 2500ms linear infinite;
}


/* outer neon glow */
.habit-milestone-popup-inner::after {
  filter: blur(12px);
  opacity: 0.99;
  transform: scale(1.05);
  z-index: -2;

  background: 
  
  /* moving specular “sheen band” */
    conic-gradient(
      from calc(var(--gradient-angle) + 180deg),
      rgba(255,255,255,0.00) 0deg,
      rgba(255,255,255,0.35) 18deg,
      rgba(255,255,255,0.00) 34deg,
      rgba(255,255,255,0.00) 360deg
    ),
  
  conic-gradient(
    from var(--gradient-angle),
    var(--milestone-clr-0),
    var(--milestone-clr-1),
    var(--milestone-clr-2),
    var(--milestone-clr-3),
    var(--milestone-clr-2),
    var(--milestone-clr-1),
    var(--milestone-clr-0)
  );

  animation: milestoneBorderRotate 2500ms linear infinite;
}

@keyframes milestoneBorderRotate {
  0%   { --gradient-angle: 0deg; }
  100% { --gradient-angle: 360deg; }
}

/* Inner surface: the flat card face (THIS is what you were missing) */
.habit-milestone-popup-surface {
  background: #242424;
  border-radius: calc(20px - 10px); /* outer radius - padding */
  padding: 40px 50px;

  display: flex;
  align-items: center;
  gap: 28px;
}

/* Text styling */
.habit-milestone-text {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 0px 18px rgba(0,0,0,0.8);
}





.habit-milestone-badge-wrapper img {
  filter:
    drop-shadow(0 4px 4px rgba(0,0,0,0.80));
}

.habit-milestone-badge-wrapper .animated-emoji {
  filter:
    drop-shadow(0 4px 4px rgba(0,0,0,0.80));
}





.habit-milestone-badge-gif {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

/* Base emoji */
.habit-milestone-badge-emoji {
    font-size: 80px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* CRITICAL: lock to glyph box */
    width: 1em;
    height: 1em;

    position: relative;
    overflow: hidden;
}

/* Animated emoji (⭐, 👑) */
.habit-milestone-badge-emoji.animated-emoji {
    animation: milestoneBounce 900ms ease-in-out infinite;
    transform-origin: 50% 60%;
}

/* Shine sweep — now clipped to emoji ONLY */
.habit-milestone-badge-emoji.animated-emoji::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 35%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,0) 65%
    );

    mix-blend-mode: screen;
    filter: blur(1px);

    transform: translateX(-120%);
    opacity: 0;

    pointer-events: none;
}

/* Bounce */
@keyframes milestoneBounce {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-6px) scale(1.05); }
    60%  { transform: translateY(1px) scale(0.99); }
    100% { transform: translateY(0) scale(1); }
}



.neon-firework-container {
    position: fixed;
    pointer-events: none;
    z-index: 15;
}

.neon-firework-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--particle-color);
    box-shadow: 0 0 6px var(--particle-color),
                0 0 12px var(--particle-color);
    animation: neon-firework-burst forwards ease-out;
    transform-origin: center;
}

.neon-firework-flash {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8);
    animation: neon-flash 0.3s ease-out forwards;
    transform: translate(-50%, -50%);
}

@keyframes neon-firework-burst {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) scale(0);
        opacity: 0;
    }
}

.neon-firework-central-flash {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 
        0 0 15px 8px rgba(255, 255, 255, 0.9),
        0 0 25px 12px rgba(255, 255, 255, 0.6),
        0 0 35px 15px rgba(255, 255, 255, 0.3);
    animation: neon-central-flash 0.4s ease-out forwards;
    transform: translate(-50%, -50%);
}

@keyframes neon-central-flash {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0;
    }
}


.streak-number-glow-v0 {
    text-shadow:
        /* ===========================
           HARD INNER GLOW (CORE)
           Tight, fully opaque, thick
           =========================== */
        0 0 1px #FFCA28,
        0 0 2px #FFCA28,
        0 0 3px #FFCA28,
        0 0 4px #FFCA28,
        0 0 5px #FFCA28,
        0 0 6px #FFCA28,

        /* ===========================
           SOFT OUTER GLOW (AURA)
           Diffuse, fading outward
           =========================== */
        0 0 8px  rgba(255, 140, 0, 0.85),
        0 0 14px rgba(255, 140, 0, 0.55),
        0 0 22px rgba(255, 140, 0, 0.35);
}

.streak-number-glow-v1 {
    text-shadow:
        /* ===========================
           HARD INNER GLOW (CORE)
           Tight, fully opaque, thick
           =========================== */
        0 0 1px #ffffff,
        0 0 2px #ffffff,
        0 0 3px #ffffff,
        0 0 4px #ffffff,
        0 0 5px #ffffff,
        0 0 6px #ffffff,

        /* ===========================
           SOFT OUTER GLOW (AURA)
           Diffuse, fading outward
           =========================== */
        0 0 8px  rgba(255, 255, 255, 0.85),
        0 0 14px rgba(255, 255, 255, 0.55),
        0 0 22px rgba(255, 255, 255, 0.35);
}

.streak-number-glow-v2 {
    text-shadow:
        /* ===========================
           HARD INNER GLOW (CORE)
           Tight, fully opaque, thick
           =========================== */
        0 0 1px #000000,
        0 0 2px #000000,
        0 0 3px #000000,
        0 0 4px #000000,
        0 0 5px #000000,
        0 0 6px #000000,

        /* ===========================
           SOFT OUTER GLOW (AURA)
           Diffuse, fading outward
           =========================== */
        0 0 8px  rgba(0, 0, 0, 0.85),
        0 0 14px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(0, 0, 0, 0.35);
}



/*
.incomplete-habit-header {
  background: #fffb44 !important;
}

.incomplete-habit-cell {
  background: #fffb44 !important;
}
*/


.incomplete-habit-header {
  /* background: #365984 !important; */
  background: #2a4669 !important;
}

.incomplete-habit-cell {
  background: #365b89 !important;
  /* background: #4571a5 !important; */
  /* box-shadow: inset 0 0 0 1px #689ee0 !important; */
}


.incomplete-habit-cell:hover {
  background-color: #555 !important;
}



/* 
.incomplete-habit-header {
  background: #d7d732 !important;
  color: #0d1117 !important;
}

.incomplete-habit-cell {
  background: #d7d732 !important;
}

.incomplete-habit-cell:hover {
  background-color: #2e78b1 !important;
}
*/




/*
#habit-streak-tracker-table-scroll-container {
  position: relative;
  z-index: 0;
  background-color: #111827;
}

#habit-streak-tracker-table {
  position: relative;
  z-index: 3;
}

.all-habits-completed-row-glow {
  position: fixed;
  z-index: 2;
}
*/



#habit-streak-tracker-table-scroll-container.scrollbar-faded::-webkit-scrollbar,
#habit-quantity-tracker-table-scroll-container.scrollbar-faded::-webkit-scrollbar {
  opacity: 0;
}

#habit-streak-tracker-table-scroll-container::-webkit-scrollbar,
#habit-quantity-tracker-table-scroll-container::-webkit-scrollbar {
  transition: opacity 250ms ease;
}

#habit-streak-tracker-table-scroll-container,
#habit-quantity-tracker-table-scroll-container {
  scrollbar-color: rgba(148,163,184,.45) transparent;
  transition: scrollbar-color 250ms ease;
}

#habit-streak-tracker-table-scroll-container.scrollbar-faded,
#habit-quantity-tracker-table-scroll-container.scrollbar-faded {
  scrollbar-color: transparent transparent;
}


/*
#habit-streak-tracker-table-scroll-container {
  position: relative;
  z-index: 0;
  background-color: #111827;
}

#habit-streak-tracker-table {
  position: relative;
  z-index: 3;
}

.all-habits-completed-row-glow {
  position: absolute;
  z-index: 2;
}
*/



/* =========================
   HABIT TRACKER FX LAYERS
   ========================= */


#habit-streak-tracker-table-scroll-container, #habit-quantity-tracker-table-scroll-container {
  position: relative;
  background-color: #111827;
}

#habit-streak-tracker-table-outer-div {
  position: relative;
  margin-bottom: 100px;
}

#habit-quantity-tracker-table-outer-div {
  position: relative;
  margin-bottom: 300px;
}

#habit-streak-tracker-effects-underlay, #habit-quantity-tracker-effects-underlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#habit-streak-tracker-effects-overlay, #habit-quantity-tracker-effects-overlay {
  position: absolute;
  z-index: 10;
}

/* table plane is ABOVE that glow */
#habit-streak-tracker-table-holder-div, #habit-quantity-tracker-table-holder-div {
  position: relative;
}

#habit-streak-tracker-table, #habit-quantity-tracker-table {
  position: relative;
}


/* =========================
   ALL HABITS COMPLETED FX
   ========================= */

/* Both FX elements are absolutely positioned inside underlay/overlay containers */
.all-habits-completed-row-glow,
.all-habits-completed-row-explosion {
  position: absolute;
  pointer-events: none;
  border-radius: 2px;
}

/* ---- GLOW BAR (UNDERLAY) ---- */
.all-habits-completed-row-glow {
  background: rgba(80, 176, 255);

  box-shadow:
    0 0 10px rgba(120, 220, 255, 1),
    0 0 22px rgba(70, 190, 255, 0.98),
    0 0 45px rgba(40, 160, 255, 0.92),
    0 0 80px rgba(20, 130, 255, 0.75),
    0 0 120px rgba(10, 90, 255, 0.55);

  filter: saturate(1.15);
  opacity: 0.96;
}

/* Charging flash pattern (applied to the underlay glow bar) */
@keyframes electricApplyStrength {
  0%   { opacity: 0; }
  15%  { opacity: 0.66; }
  28%  { opacity: 0.10; }
  48%  { opacity: 0.80; }
  62%  { opacity: 0.10; }
  82%  { opacity: 0.99; }
  100% { opacity: 0; }
}

.all-habits-completed-row-glow.is-charging {
  animation: electricApplyStrength 1000ms ease-in-out forwards;
}

/* ---- CELL TEXT OVERLAY FLASHES (TABLE CELLS) ---- */

.all-habits-completed-today-cell {
  position: relative;
}

/* This pseudo-element displays the cell text with glow during charging/explosion */
.all-habits-completed-today-cell::after {
  content: attr(data-celltext);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 18px rgba(120, 220, 255, 0.75);

  opacity: 0;
  pointer-events: none;
  white-space: nowrap;

   font-variant-numeric: tabular-nums;

  z-index: 9999;
}



@keyframes textApplyStrength {
  0%   { opacity: 0; }
  15%  { opacity: 0.99; }
  82%  { opacity: 0.99; }
  100% { opacity: 0; }
}

.all-habits-completed-today-cell.is-charging::after {
  animation: textApplyStrength 1000ms ease-in-out forwards;
}

@keyframes textExplosionFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}

.all-habits-completed-today-cell.is-exploding::after {
  animation: textExplosionFlash 700ms ease-out forwards;
}

/* ---- EXPLOSION (OVERLAY) ---- */
/* Explosion visuals are tethered to .all-habits-completed-row-explosion */
.all-habits-completed-row-explosion.is-exploding::before,
.all-habits-completed-row-explosion.is-exploding::after {
  content: "";
  position: absolute;
  inset: -6px; /* start slightly outside the bar */
  border-radius: inherit;
  pointer-events: none;
}

/* Shockwave ring */
.all-habits-completed-row-explosion.is-exploding::before {
  border: 3px solid rgba(140, 235, 255, 0.95);
  box-shadow:
    0 0 18px rgba(80, 176, 255, 0.95),
    0 0 40px rgba(40, 160, 255, 0.75),
    0 0 80px rgba(10, 90, 255, 0.55);
  opacity: 0;
  transform: scale(1);
  animation: rowShockwave 650ms ease-out forwards;
}

/* Electric edge bloom blast */
.all-habits-completed-row-explosion.is-exploding::after {
  background: radial-gradient(
    closest-side,
    rgba(160, 245, 255, 0.95),
    rgba(80, 176, 255, 0.60),
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(10px) saturate(1.25);
  opacity: 0;
  transform: scale(1);
  animation: rowEdgeBloom 520ms ease-out forwards;
}

/* Bar itself fades in -> peaks -> fades out (this is what animationend fires on) */
.all-habits-completed-row-explosion.is-exploding {
  animation: rowBarExplosionOpacity 700ms ease-out forwards;
  opacity: 0; /* starting state */
}

@keyframes rowShockwave {
  0%   { opacity: 0; transform: scale(1); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.7); }
}

@keyframes rowEdgeBloom {
  0%   { opacity: 0; transform: scale(1); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.2); }
}

@keyframes rowBarExplosionOpacity {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- POPUP TEXT (OVERLAY) ---- */
.all-habits-completed-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  font-size: 48px;
  font-weight: 900;
  letter-spacing: 1px;
  font-family: Montserrat;
  color: black;

  z-index: 10; /* inside overlay layer; sits above explosion pseudo-elements */
  pointer-events: none;
  white-space: nowrap;
}

@keyframes glowFadeOut {
  from { opacity: 0.96; }
  to   { opacity: 0; }
}


.all-habits-completed-row-glow.is-fading-out {
  animation: glowFadeOut 700ms ease-out forwards;
}





@keyframes streakPulse {
  0% {
    transform: scale(1) translateY(0);
  }
  35% {
    transform: scale(15.5) translateY(-2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.habit-streak-number-pulse-clone {
  position: absolute;
  transform: translate(-50%, -50%); /* because JS sets left/top to CENTER */
  transform-origin: center center;
  pointer-events: none;
  z-index: 99;
  will-change: transform;
}

.habit-streak-number-pulse-clone.is-pulsing {
  animation: streakPulseOverlay 1400ms ease-out;
}

/*
@keyframes streakPulseOverlay {
  0%   { transform: translate(-50%, -50%) scale(1); }
  35%  { transform: translate(-50%, -50%) scale(10.0); }
  65%  { transform: translate(-50%, -50) scale(10.0); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
*/

/*
@keyframes streakPulseOverlay {
  0%   { transform: translate(-50%, -50%) scale(1);  
         text-shadow: 1px 1px 2px rgb(0, 0, 0), 1px 1px 4px rgb(0, 0, 0); }

  35%  { transform: translate(-50%, -50%) scale(9); 
         text-shadow: 1px 1px 2px rgb(0, 0, 0), 1px 1px 4px rgb(0, 0, 0); }

  75%  { transform: translate(-50%, -50%) scale(9); 
         text-shadow: 1px 1px 2px rgb(0, 0, 0), 1px 1px 4px rgb(0, 0, 0); }

  100% { transform: translate(-50%, -50%) scale(1);  
         text-shadow: 1px 1px 2px rgb(0, 0, 0), 1px 1px 4px rgb(0, 0, 0); }
}
*/

/*
@keyframes streakPulseOverlay {
  0% {
    transform: translate(-50%, -50%) scale(1);
    font-weight: 400;
  }

  25% {
    transform: translate(-50%, -50%) scale(9);
    font-weight: 400;
  }

  75% {
    transform: translate(-50%, -50%) scale(9);
    font-weight: 400;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    font-weight: 400;
  }
}
*/

@keyframes streakPulseOverlay {
  0% {
    transform: translate(-50%, -50%) scale(1);
    font-weight: 400;
  }

  75% {
    transform: translate(-50%, -50%) scale(9);
    font-weight: 400;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    font-weight: 400;
  }
}


/* make sure transforms apply cleanly to the number span */
.habit-streak-number {
  display: inline-block;
  transform-origin: center center;
}

/* ONLY animate the number */
.habit-streak-pulse .habit-streak-number {
  animation: streakPulse 1000ms ease-out;
}


/*
@keyframes streakPulse {
  0% {
    transform: scale(1) translateY(0);
    text-shadow:
      0 0 2px rgba(255,255,255,0.9),
      0 0 6px rgba(255,255,255,0.8),
      0 0 12px rgba(255,255,255,0.6),
      0 0 20px rgba(255,255,255,0.4);
  }

  35% {
    transform: scale(7.5) translateY(-2px);
    text-shadow:
      0 0 2px rgba(255,255,255,0.9),
      0 0 6px rgba(255,255,255,0.8),
      0 0 12px rgba(255,255,255,0.6),
      0 0 20px rgba(255,255,255,0.4);
  }

  100% {
    transform: scale(1) translateY(0);
    text-shadow: none;
  }
}
*/








#top-of-page-action-buttons-div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#focus-mode-toggle-button, #settings-toggle-button {
  border: 1px solid rgba(148, 163, 184, 0.25);
  background-color: #111827;
  color: #9aa3b2;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 8px;
  padding-bottom: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: 
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease;
}

#focus-mode-toggle-button:hover, #settings-toggle-button:hover {
  background-color: #0f1623;
  border-color: #3b82f6;
}

#ocus-mode-toggle-button:active, #settings-toggle-button:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#focus-mode-toggle-button:focus-visible, #settings-toggle-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(147, 197, 253, 0.75),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

#settings-toggle-button {
  margin-left: 10px;
}

/* default state (focus mode disabled): fully visible */
#left-side-action-buttons-div, #right-side-action-buttons-div,
#habit-streak-tracker-table-buttons-div, #habit-quantity-tracker-table-buttons-div {
  opacity: 1;
  transition: opacity 125ms ease;
}

/* focus mode enabled: hidden but still occupying layout space */
#left-side-action-buttons-div.focus-mode-hidden, #right-side-action-buttons-div.focus-mode-hidden,
#habit-streak-tracker-table-buttons-div.focus-mode-hidden, #habit-quantity-tracker-table-buttons-div.focus-mode-hidden {
  opacity: 0;
}

/* reveal on hover (even in focus mode) */
#left-side-action-buttons-div.focus-mode-hidden:hover, #right-side-action-buttons-div.focus-mode-hidden:hover,
#habit-streak-tracker-table-buttons-div.focus-mode-hidden:hover, #habit-quantity-tracker-table-buttons-div.focus-mode-hidden:hover {
  opacity: 1;
  pointer-events: auto;
}

/* Focus mode active — button looks engaged */
#focus-mode-toggle-button.focus-mode-active {
  color: rgb(114, 168, 255);
  box-shadow:
    0 0 0 2px rgba(53, 130, 255, 0.90),   /* crisp ring */
    0 0 5px 4px rgba(53, 130, 255, 0.50);
}





#left-side-action-buttons-div {
  padding-top: 16px;
  padding-left: 16px;
}

#right-side-action-buttons-div {
  padding-top: 16px;
  padding-right: 16px;
}


#sound-controller-holder-div {
  display: flex;
  width: 100%;
}

.sound-controller {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background-color: #111827;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  user-select: none;
}

.sound-mute-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  
  background: none;
  border: none;
  color: #e5e7eb;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sound-mute-toggle:hover {
  background-color: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.sound-mute-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.75);
}

.sound-icon {
  font-size: 18px;
  line-height: 1;
}

.hide-this {
  display: none;
}

.sound-volume-slider {
  cursor: pointer;

  width: 110px;
  height: 4px;
  appearance: none;
  background: rgba(148, 163, 184, 0.25);
  border-radius: 999px;
}

/* Optional: make the slider look more “clickable” with a round thumb */
.sound-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  margin-top: -6px; /* aligns thumb with track in webkit */

  width: 14px;
  height: 14px;
  background: #3b82f6;
  border-radius: 50%;
  border: none;
  transition: transform 0.1s ease, background-color 0.15s ease;
}

.sound-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px; 
  background: rgba(50, 50, 50, 0.25);
}

.sound-volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);

  background: #3b82f6;
  border: none;
}

.sound-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  background: #93c5fd;
}

.sound-volume-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(50, 50, 50, 0.25);
}

.sound-volume-value {
  width: 24px; /* a fixed width, big enough to hold all digits, keeps layout stable when 1–3 digits */
  text-align: right;
  font-size: 14px;
  color: #9aa3b2;
}


#habit-streak-tracker-table tr.extra-empty-row {
  pointer-events: none;
}






#add-new-habit-button-for-streak-table, #delete-habit-mode-button-for-streak-table,
#add-new-habit-button-for-quantity-table, #delete-habit-mode-button-for-quantity-table,
#edit-habit-button-for-quantity-table {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background-color: #111827;
  color: #e5e7eb;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: 
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease;
}

#add-new-habit-button-for-streak-table:hover, #delete-habit-mode-button-for-streak-table:hover,
#add-new-habit-button-for-quantity-table:hover, #delete-habit-mode-button-for-quantity-table:hover,
#edit-habit-button-for-quantity-table:hover {
  background-color: #0f1623;
  border-color: #3b82f6;
}

#add-new-habit-button-for-streak-table:active, #delete-habit-mode-button-for-streak-table:active,
#add-new-habit-button-for-quantity-table:active, #delete-habit-mode-button-for-quantity-table:active,
#edit-habit-button-for-quantity-table:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#add-new-habit-button-for-streak-table:focus-visible, #delete-habit-mode-button-for-streak-table:focus-visible,
#add-new-habit-button-for-quantity-table:focus-visible, #delete-habit-mode-button-for-quantity-table:focus-visible,
#edit-habit-button-for-quantity-table:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(147, 197, 253, 0.75),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

#delete-habit-mode-button-for-streak-table, #delete-habit-mode-button-for-quantity-table,
#edit-habit-button-for-quantity-table {
  margin-right: 12px;
}





/* IMPORTANT: the overlay needs a positioning context */
#habit-streak-tracker-table thead th.habit-header-cell.can-delete-habit,
#habit-quantity-tracker-table thead th.habit-header-cell.can-delete-habit {
  cursor: pointer;
}



/*
body.delete-habit-mode-for-streak-table #habit-streak-tracker-table thead th.habit-header-cell.can-delete-habit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, 0);
  box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
  pointer-events: none;
  z-index: 999;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

body.delete-habit-mode-for-quantity-table #habit-quantity-tracker-table thead th.habit-header-cell.can-delete-habit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, 0);
  box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
  pointer-events: none;
  z-index: 999;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

body.delete-habit-mode-for-streak-table #habit-streak-tracker-table thead th.habit-header-cell.can-delete-habit:hover::after {
  background: rgba(239, 68, 68, 0.36);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.55);
}

body.delete-habit-mode-for-quantity-table #habit-quantity-tracker-table thead th.habit-header-cell.can-delete-habit:hover::after {
  background: rgba(239, 68, 68, 0.36);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.55);
}

body.delete-habit-mode-for-streak-table #habit-streak-tracker-table thead th.habit-header-cell.can-delete-habit::after {
  background: rgba(239, 68, 68, 0.26);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.32);
}

body.delete-habit-mode-for-quantity-table #habit-quantity-tracker-table thead th.habit-header-cell.can-delete-habit::after {
  background: rgba(239, 68, 68, 0.26);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.32);
}

body.delete-habit-mode-for-streak-table #habit-streak-tracker-table thead th.habit-header-cell.can-delete-habit:hover::after {
  background: rgba(239, 68, 68, 0.16);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}

body.delete-habit-mode-for-quantity-table #habit-quantity-tracker-table thead th.habit-header-cell.can-delete-habit:hover::after {
  background: rgba(239, 68, 68, 0.16);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}
*/

/* Delete-habit overlay element (real DOM node, not a pseudo-element) */
.delete-habit-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* never blocks clicks */
  opacity: 0;           /* hidden by default */
  border-radius: 0;
  transition: opacity 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

/* ------------------------------------------------------------
   STREAK TABLE: ARMED (slightly tinted even before hover)
------------------------------------------------------------ */
body.delete-habit-mode-for-streak-table
#habit-streak-tracker-table thead th.habit-header-cell.can-delete-habit .delete-habit-overlay {
  opacity: 1;
  background: rgba(239, 68, 68, 0.26);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.32);
}

/* STREAK TABLE: HOVER (stronger tint + outline) */
body.delete-habit-mode-for-streak-table
#habit-streak-tracker-table thead th.habit-header-cell.can-delete-habit:hover .delete-habit-overlay {
  background: rgba(239, 68, 68, 0.36);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.55);
}

/* ------------------------------------------------------------
   QUANTITY TABLE: ARMED (slightly tinted even before hover)
------------------------------------------------------------ */
body.delete-habit-mode-for-quantity-table
#habit-quantity-tracker-table thead th.habit-header-cell.can-delete-habit .delete-habit-overlay {
  opacity: 1;
  background: rgba(239, 68, 68, 0.26);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.32);
}

/* QUANTITY TABLE: HOVER (stronger tint + outline) */
body.delete-habit-mode-for-quantity-table
#habit-quantity-tracker-table thead th.habit-header-cell.can-delete-habit:hover .delete-habit-overlay {
  background: rgba(239, 68, 68, 0.36);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.55);
}




/* Disable inner interactions so the whole cell behaves like one big delete button */
body.delete-habit-mode-for-streak-table .habit-header-cell.can-delete-habit .habit-drag-handle,
body.delete-habit-mode-for-streak-table .habit-header-cell.can-delete-habit .habit-header-text,
body.delete-habit-mode-for-streak-table .habit-header-cell.can-delete-habit .habit-header-elements {
  pointer-events: none;
  user-select: none;
}

body.delete-habit-mode-for-quantity-table .habit-header-cell.can-delete-habit .habit-drag-handle,
body.delete-habit-mode-for-quantity-table .habit-header-cell.can-delete-habit .habit-header-text,
body.delete-habit-mode-for-quantity-table .habit-header-cell.can-delete-habit .habit-header-elements {
  pointer-events: none;
  user-select: none;
}


/* When delete mode is active, make the button look "armed" */
body.delete-habit-mode-for-streak-table #delete-habit-mode-button-for-streak-table {
  border-color: rgba(239, 68, 68, 0.75);
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.25),
    0 10px 24px rgba(0, 0, 0, 0.35);
}

body.delete-habit-mode-for-quantity-table #delete-habit-mode-button-for-quantity-table {
  border-color: rgba(239, 68, 68, 0.75);
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.25),
    0 10px 24px rgba(0, 0, 0, 0.35);
}

body.delete-habit-mode-for-streak-table #delete-habit-mode-button-for-streak-table:hover {
  border-color: rgba(239, 68, 68, 0.95);
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.32),
    0 10px 28px rgba(0, 0, 0, 0.42);
}

body.delete-habit-mode-for-quantity-table #delete-habit-mode-button-for-quantity-table:hover {
  border-color: rgba(239, 68, 68, 0.95);
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.32),
    0 10px 28px rgba(0, 0, 0, 0.42);
}







.habit-streak-number {
  font-variant-numeric: tabular-nums;
}



#habit-streak-tracker-table-above-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 100px;
}

#habit-quantity-tracker-table-above-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0px;
}

#habit-streak-tracker-table-buttons-div, #habit-quantity-tracker-table-buttons-div {
  margin-top: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end; 
}


#habit-streak-tracker-table-headline-div, #habit-quantity-tracker-table-headline-div {
  position: relative;
  text-align: left;
  /* background-color: #111827; */
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 12px;
  padding-left: 14px;
  /* border: 1px solid rgba(148, 163, 184, .2); */
  /* border-radius: 12px 12px 12px 12px; */
}

.habit-streak-tracker-headline, .habit-quantity-tracker-headline {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #e5e7eb;
  font-size: 28px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 400;
}

.habit-streak-tracker-subheadline, .habit-quantity-tracker-subheadline {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #9aa3b2;
  font-size: 16px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 300;
}



#hide-headline-button-for-habit-streak-tracker, #hide-headline-button-for-habit-quantity-tracker {
  margin-left: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  filter: grayscale(1);
  font-size: 20px;
}

#habit-streak-tracker-table-headline-div:hover #hide-headline-button-for-habit-streak-tracker,
#habit-quantity-tracker-table-headline-div:hover #hide-headline-button-for-habit-quantity-tracker {
  opacity: 0.8;
  pointer-events: auto;
}

#hide-headline-button-for-habit-streak-tracker:hover,
#hide-headline-button-for-habit-quantity-tracker:hover {
  opacity: 1;
}





.terrible-performance {
    background-color: rgb(255 0 0 / 30%);
    box-shadow: inset 0 0 0 1px rgb(255 0 0 / 55%);
}

.excellent-performance {
  background-color: rgb(0 255 94 / 30%);
  box-shadow: inset 0 0 0 1px rgb(0 255 94 / 55%);
}







.add-habit-to-quantity-table-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999999;
  padding: 24px;
}

.add-habit-to-quantity-table-popup.is-open {
  display: flex;
}

.add-habit-to-quantity-table-modal {
  min-width: 20vw;
  max-width: 90vw;
  width: auto;
  height: auto;
  background: #111827;
  color: #e5e7eb;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.add-habit-to-quantity-table-modal-footer {
  /* border-top: 1px solid rgba(148,163,184,.14); */
  border-bottom: none;
  padding-left: 34px;
  padding-right: 34px;
  padding-top: 18px;
  padding-bottom: 18px;
  /* border-bottom: 1px solid rgba(148,163,184,.14); */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.add-habit-to-quantity-table-close-button {
  background: transparent;
  color: #e5e7eb;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  margin-right: 12px;
  font-size: 13px;
}

.add-habit-to-quantity-table-modal-body {
  padding-left: 34px;
  padding-right: 34px;
  padding-top: 36px;
}

.add-habit-to-quantity-table-input-label {
  font-size: 18px;
  font-weight: 600;
}

.add-habit-to-quantity-table-name-input {
  flex-grow: 1;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .75);
  color: #e5e7eb;
  min-height: 1.5em;
  margin-left: 12px;
  font-size: 15px;
  width: 20vw;
}

.add-habit-to-quantity-table-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,.12);
}

.add-habit-to-quantity-table-performance-range-section {
  margin-top: 18px;
  padding-top: 24px;
  padding-bottom: 14px;
  border-top: 1px solid rgba(148,163,184,.12);
  border-bottom: 1px solid rgba(148,163,184,.12);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.add-habit-to-quantity-table-subheading {
  font-weight: 700;
  margin-bottom: 10px;
}

.add-habit-to-quantity-table-save-button, .add-habit-to-quantity-table-update-button {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.2);
  background: rgba(59,130,246,.22);
  font-weight: 700;
  cursor: pointer;
  color: #e5e7eb;
  font-size: 13px;
}


.add-habit-to-quantity-table-close-button {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.2);
  background: rgba(59,130,246,.22);
  font-weight: 700;
  cursor: pointer;
  color: #e5e7eb;
}

.add-habit-to-quantity-table-name-div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.add-habit-to-quantity-table-unit-of-measurement-div, .add-habit-to-quantity-table-habit-objective-div {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-top: 4px;
}

.add-habit-to-quantity-table-radio-row {
  display: flex;
  flex-grow: 1;
  justify-content: space-evenly;
}

.add-habit-to-quantity-table-radio-label {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}

.add-habit-to-quantity-table-radio-label input[type="radio"] {
  transform: scale(1.12);
  transform-origin: center;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 6px;
  margin-left: 0px;
}

.unit-of-measurement-label-text {
  margin-right: 26px;
}

.add-habit-to-quantity-table-range-grid {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-grow: 1;
}

.add-habit-to-quantity-table-range-input-div {
  display: flex;
  flex-direction: row;
  margin-bottom: 12px;
  align-items: center;
}

.add-habit-to-quantity-table-range-label {
  text-align: right;
  justify-self: end;
  font-size: 17px;
  margin-right: 12px;
}

.add-habit-to-quantity-table-range-input {
  width: 70px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.75);
  color: #e5e7eb;
  font-size: 14px;
}

.add-habit-to-quantity-table-range-div-holder{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.target-performance-range-text {
  margin-top: 0px;
}




.terrible-performance-input {
  background-color: rgb(255 0 0 / 45%);
  box-shadow: inset 0 0 0 1px rgb(255 0 0 / 70%);
}

.bad-performance-input {
  background-color: rgb(255 0 0 / 27.5%);
  box-shadow: inset 0 0 0 1px rgb(255 0 0 / 40%);
}

.acceptable-performance-input {
  background-color: rgb(0 255 94 / 20%);
  box-shadow: inset 0 0 0 1px rgb(0 255 94 / 40%);
}

.good-performance-input {
  background-color: rgb(0 255 94 / 35%);
  box-shadow: inset 0 0 0 1px rgb(0 255 94 / 55%);
}

.excellent-performance-input {
  background-color: rgb(0 255 94 / 50%);
  box-shadow: inset 0 0 0 1px rgb(0 255 94 / 70%);
}



/*
.select-habit-to-edit-for-quantity-table-div {
  display: flex;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  margin-bottom: 18px;
}

.select-habit-to-edit-for-quantity-table-div .add-habit-to-quantity-table-input-label {
  white-space: nowrap;
}

.select-habit-to-edit-for-quantity-table-dropdown {
  flex-grow: 1;
  height: 44px;
  padding: 10px 44px 10px 16px;
  margin-left: 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.75);
  color: #e5e7eb;
  font-size: 15px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.08);
}

.select-habit-to-edit-for-quantity-table-dropdown:focus {
  border-color: rgba(96,165,250,.55);
  box-shadow:
    inset 0 0 0 1px rgba(96,165,250,.25),
    0 0 0 3px rgba(96,165,250,.12);
}

.select-habit-to-edit-for-quantity-table-div {
  position: relative;
}

.select-habit-to-edit-for-quantity-table-dropdown {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(229,231,235,.85) 50%),
    linear-gradient(135deg, rgba(229,231,235,.85) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
}

.select-habit-to-edit-for-quantity-table-dropdown:invalid {
  color: rgba(229,231,235,.55);
}




.select-habit-to-edit-for-quantity-table-dropdown {
  color-scheme: dark;
}

.select-habit-to-edit-for-quantity-table-dropdown option {
  background: #111827;
  color: #e5e7eb;
  border: none;
  outline: 0px;
}

.select-habit-to-edit-for-quantity-table-dropdown option:disabled {
  color: rgba(229,231,235,.55);
}

.select-habit-to-edit-for-quantity-table-dropdown option:checked {
  background: rgba(96,165,250,.25);
}
*/




.select-habit-to-edit-for-quantity-table-div {
  display: flex;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  margin-bottom: 18px;
  position: relative;
}

.select-habit-to-edit-for-quantity-table-div .add-habit-to-quantity-table-input-label {
  white-space: nowrap;
}

/* Wrapper takes the old <select>'s place */
.select-habit-to-edit-for-quantity-table-custom-select {
  flex-grow: 1;
  margin-left: 12px;
  position: relative;
}

/* Trigger button styled like your inputs */
.select-habit-to-edit-for-quantity-table-trigger {
  width: 100%;
  height: 44px;
  padding: 10px 16px 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.75);
  color: #e5e7eb;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-habit-to-edit-for-quantity-table-trigger:focus {
  border-color: rgba(96,165,250,.55);
  box-shadow:
    inset 0 0 0 1px rgba(96,165,250,.25),
    0 0 0 3px rgba(96,165,250,.12);
}

/* Placeholder style when nothing selected */
.select-habit-to-edit-for-quantity-table-custom-select[data-selected_habit_index=""] 
  .select-habit-to-edit-for-quantity-table-trigger-text {
  color: rgba(229,231,235,.55);
}

/* Caret (pure CSS) */
.select-habit-to-edit-for-quantity-table-caret {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(229,231,235,.85);
  margin-left: 12px;
}

/* Dropdown list panel */
.select-habit-to-edit-for-quantity-table-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: #111827;
  box-shadow:
    0 18px 42px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(148,163,184,.08);
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 99999;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}

/* Open state */
.select-habit-to-edit-for-quantity-table-custom-select.is-open
  .select-habit-to-edit-for-quantity-table-list {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Option rows */
.select-habit-to-edit-for-quantity-table-option {
  padding: 10px 12px;
  border-radius: 10px;
  color: #e5e7eb;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  line-height: 1.1;
}

.select-habit-to-edit-for-quantity-table-option:hover {
  background: rgba(96,165,250,.16);
}

.select-habit-to-edit-for-quantity-table-option.is-active {
  background: rgba(96,165,250,.22);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.25);
}

.select-habit-to-edit-for-quantity-table-option.is-selected {
  background: rgba(96,165,250,.28);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.32);
}

/* Scrollbar polish (Chromium) */
.select-habit-to-edit-for-quantity-table-list::-webkit-scrollbar {
  width: 10px;
}
.select-habit-to-edit-for-quantity-table-list::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.28);
  border-radius: 999px;
  border: 2px solid rgba(17,24,39,1);
}
.select-habit-to-edit-for-quantity-table-list::-webkit-scrollbar-track {
  background: rgba(15,23,42,.55);
  border-radius: 999px;
}




/* =========================================================
   Quantity Table Analytics Dropdown (Sticky Header)
   Matches the styling/behavior of the existing custom select,
   but uses the NEW class/id names from the analytics widget.
   ========================================================= */

/* The TH cell that contains the analytics dropdown */
.quantity-table-analytics-dropdown-header-cell {
  position: relative;
  padding: 0;
  vertical-align: middle;
  /* keep it visually consistent with header cells */
  /* border-right: 1px solid rgba(148, 163, 184, .14); */
}

/* Wrapper takes the old <select>'s place */
.quantity-table-analytics-custom-select {
  position: relative;
  width: 100%;
  /* min-width: 170px; */
}

/* Trigger button styled similarly to your existing inputs, but compact for header */
.quantity-table-analytics-trigger {
  width: 100%;
  /* height: 34px; */
  padding: 6px 10px 6px 10px;
  border-radius: 0px;
  border: 1px solid rgba(148, 163, 184, 0); /* functionally removes the border including the weird ugly default one */
  background: #111827;
  color: #e5e7eb;
  font-size: 14px;
  font-weight: 300;
  outline: none;
  cursor: pointer;
  text-align: left;
  /* box-shadow: inset 0 0 0 1px rgba(148,163,184,.08); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Slightly subdued text for dense header usage */
.quantity-table-analytics-trigger-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 4px;
}

/* Focus ring (matches your current style language) */
.quantity-table-analytics-trigger:focus {
  border-color: rgba(96,165,250,.55);
  box-shadow:
    inset 0 0 0 1px rgba(96,165,250,.25),
    0 0 0 3px rgba(96,165,250,.12);
}

/* Caret (pure CSS triangle) */
.quantity-table-analytics-caret {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(229,231,235,.85);
  flex: 0 0 auto;
}

/* Dropdown list panel */
.quantity-table-analytics-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: #111827;
  box-shadow:
    0 18px 42px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(148,163,184,.08);
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;

  /* Above sticky header/table content */
  z-index: 99999;

  /* Closed state */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}

/* Open state (JS toggles .is-open on the wrapper div) */
.quantity-table-analytics-custom-select.is-open .quantity-table-analytics-list {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Option rows */
.quantity-table-analytics-option {
  padding: 10px 12px;
  border-radius: 10px;
  color: #e5e7eb;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  line-height: 1.1;
}

.quantity-table-analytics-option:hover {
  background: rgba(96,165,250,.16);
}

/* Active/selected states (your JS can add these classes) */
.quantity-table-analytics-option.is-active {
  background: rgba(96,165,250,.22);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.25);
}

.quantity-table-analytics-option.is-selected {
  background: rgba(96,165,250,.28);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.32);
}

/* Scrollbar polish (Chromium) */
.quantity-table-analytics-list::-webkit-scrollbar {
  width: 10px;
}
.quantity-table-analytics-list::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.28);
  border-radius: 999px;
  border: 2px solid rgba(17,24,39,1);
}
.quantity-table-analytics-list::-webkit-scrollbar-track {
  background: rgba(15,23,42,.55);
  border-radius: 999px;
}

/*
.quantity-table-analytics-header-row {
  box-shadow: inset 0 -1px 0 #2C3444;
}
*/



.quantity-table-analytics-dropdown-header-cell {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* Ensure header cells can host pseudo-elements */
#habit-streak-tracker-table thead th,
#habit-quantity-tracker-table thead th {
  position: relative;
  border: 1px solid #2C3444;
  /* box-shadow: inset 0 -1px 0 #2C3444; */
}

/* TOP cover strip */
#habit-streak-tracker-table thead th::before,
#habit-quantity-tracker-table thead th::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #111827;
  z-index: 3;
  pointer-events: none;
}

/* BOTTOM cover strip */
#habit-streak-tracker-table thead th::after,
#habit-quantity-tracker-table thead th::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #111827;
  /* border-bottom: 1px solid #2C3444; */
  z-index: 3;
  pointer-events: none;
}


/* Incomplete-header override (top + bottom) */
#habit-streak-tracker-table thead th.incomplete-habit-header::before,
#habit-quantity-tracker-table thead th.incomplete-habit-header::before,
#habit-streak-tracker-table thead th.incomplete-habit-header::after,
#habit-quantity-tracker-table thead th.incomplete-habit-header::after {
  background: #2a4669;
}

#habit-quantity-tracker-table thead tr.quantity-table-habit-names-header-row {
  position: relative;
}

#habit-quantity-tracker-table thead tr.quantity-table-habit-names-header-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 0.7px;
  background: #2C3444;
  z-index: 6; /* above sticky backgrounds */
  pointer-events: none;
}



#habit-quantity-tracker-table thead tr.quantity-table-analytics-header-row {
  position: relative;
}

#habit-quantity-tracker-table thead tr.quantity-table-analytics-header-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 0.7px;
  background: #2C3444;
  z-index: 6; /* above sticky backgrounds */
  pointer-events: none;
}


#habit-streak-tracker-table thead tr.streak-table-habit-names-header-row {
  position: relative;
}

#habit-streak-tracker-table thead tr.streak-table-habit-names-header-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 0.7px;
  background: #2C3444;
  z-index: 6; /* above sticky backgrounds */
  pointer-events: none;
}



#habit-quantity-tracker-table td::selection {
  background: rgba(0, 0, 0, 0.9);
  color: #e5e7eb;
}

/* Firefox uses a different pseudo-element name */
#habit-quantity-tracker-table td::-moz-selection {
  background: rgba(0, 0, 0, 0.9);
  color: #e5e7eb;
}




.footer-section-resources {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  border-top: 1px solid gray;
  padding-top: 25px;
}

.footer-section-resources  a {
  text-transform: none;
  font-size: 14px;
}

.left-arrow-promo, .right-arrow-promo {
  font-family: u2000;
  color: white;
  font-size: 16px;
  margin-left: 6px;
  margin-right: 6px;
}

.recommended-reading-text {
  color: white;
  display: flex;
  align-items: flex-end;
  font-size: 17px;
}



.animated-fire-emoji-left {
  height: 20px;
  margin-right: 4px;
}

.animated-fire-emoji-right {
  height: 20px;
  margin-left: 4px;
}



#settings-popup-div {
  display: none; /* Initially hidden */
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  min-width: 20vw;
  max-width: 90vw;
  width: 560px;       /* sensible default */
  height: auto;
  background: #111827;
  /* background: radial-gradient(900px 500px at 120% -10%, rgba(59, 130, 246, .1), transparent), radial-gradient(800px 500px at -20% -20%, rgba(147, 197, 253, .08), transparent), linear-gradient(180deg, #0b0e13, #0d1117); */
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 28px 44px 26px 44px;
  z-index: 1001; /* Higher than the overlay */
  flex-direction: column;
}

.settings-popup-headline {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  margin-top: 10px;
}

.habit-streak-tracker-settings-headline, .habit-quantity-tracker-settings-headline {
  font-size: 20px;
}

.habit-streak-tracker-settings-div {
  border-top: 1px solid rgba(148, 163, 184, .12);
  padding-top: 20px;
  padding-bottom: 20px;
}

.habit-quantity-tracker-settings-div {
  border-top: 1px solid rgba(148, 163, 184, .12);
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  padding-top: 20px;
  padding-bottom: 20px;
}

.change-settings-div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
}

.settings-bottom-action-buttons-div {
  padding-top: 18px;
  padding-bottom: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.settings-popup-cancel-button, .settings-popup-save-button {
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.2);
  background: rgba(59,130,246,.22);
  font-weight: 700;
  cursor: pointer;
  color: #e5e7eb;
}

.settings-popup-cancel-button {
  margin-right: 12px;
}

.settings-input-label {
  font-size: 19px;
  font-weight: 600;
}

.settings-name-input {
  flex-grow: 1;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .75);
  color: #e5e7eb;
  min-height: 1.5em;
  margin-left: 12px;
  font-size: 15px;
  width: 20vw;
}



/* v1 RESPONSIVE CSS ADJUSTMENTS */

/* Anything LARGER than the below items use the default CSS styling, specified above */

/* NOTE: My personal main computer is a 1920x1080 resolution, BUT has 120% custom scaling applied at the level of Windows.
This effectively means that the ACTUAL CSS viewport dimensions, as per Chrome Dev tools, are right around 1603 x 813px.
Thus, when I test on my screen resolution at this scaling, I'm basically testing at what a 1600px laptop at 100% scaling would see at 100% browser zoom. */




/* Larger laptops/desktops */
@media (max-width: 1600px) { /* My de-facto browser CSS resolution width is 1603px, so this is the cutoff for anything JUST smaller than my settings */
  
  #habit-streak-tracker-table thead th, #habit-quantity-tracker-table thead th {
    font-size: 15px;
  }
  
  #habit-streak-tracker-table td, #habit-quantity-tracker-table td {
    font-size: 15px;
  }

  #add-new-habit-button-for-streak-table, #delete-habit-mode-button-for-streak-table, 
  #add-new-habit-button-for-quantity-table, #delete-habit-mode-button-for-quantity-table, #edit-habit-button-for-quantity-table {
    font-size: 12.5px;
  }

  #focus-mode-toggle-button, #settings-toggle-button {
    font-size: 12.5px;
  }

  .sound-mute-toggle {
    width: 32px;
    height: 32px;
  }

  .sound-icon {
    font-size: 16px;
  }

  .sound-volume-value {
    font-size: 13px;
  }

  .habit-streak-tracker-headline, .habit-quantity-tracker-headline {
    font-size: 26px;
  }

  .habit-streak-tracker-subheadline, .habit-quantity-tracker-subheadline {
    font-size: 14px;
  }

  #hide-headline-button-for-habit-streak-tracker, #hide-headline-button-for-habit-quantity-tracker {
    font-size: 19px;
  }

  .quantity-table-analytics-trigger {
    font-size: 13px;
  }

  .quantity-table-analytics-option {
    font-size: 13px;
  }

  .add-habit-to-quantity-table-input-label, .add-habit-to-quantity-table-input-label, 
  .add-habit-to-quantity-table-input-label, .add-habit-to-quantity-table-input-label {
    font-size: 16px;
  }

  .add-habit-to-quantity-table-name-input {
    font-size: 14px;
  }

  .add-habit-to-quantity-table-range-input {
    font-size: 13px;
  }

  .add-habit-to-quantity-table-radio-label {
    font-size: 14px;
  }

  .add-habit-to-quantity-table-range-label {
    font-size: 15px;
  }

  .add-habit-to-quantity-table-close-button, .add-habit-to-quantity-table-save-button, 
  .add-habit-to-quantity-table-update-button {
    font-size: 12.5px;
  }

  .select-habit-to-edit-for-quantity-table-trigger {
    font-size: 14px;
  }

  .select-habit-to-edit-for-quantity-table-option {
    font-size: 14px;
  }

  .sound-volume-slider::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px; /* aligns thumb with track in webkit */
  }

  .sound-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
  }

  .website-header-logo-image {
    height: 34px;
  }

  .website-header-company-name {
    font-size: 18px;
  }

  .habit-milestone-text {
    font-size: 48px;
  }

  .habit-milestone-badge-gif {
    width: 82px;
    height: 82px;
  }

  .habit-milestone-badge-emoji {
    font-size: 72px;
  }

  .all-habits-completed-popup {
    font-size: 44px;
  }

  #login-popup-headline {
    font-size: 24px;
  }

  #login-popup-div input[type="text"], #login-popup-div input[type="password"] {
    font-size: 14px;
  }

  #login-button, #create-account-button, #submit-onboarding-info-button, #submit-unsubscribe-info-button, 
  #send-reset-password-link-button, #change-password-button {
    font-size: 14px;
  }

  #forgot-email-address-text, #forgot-password-text {
    font-size: 15px;
  }

  .login-capture-subtext {
    font-size: 14.5px;
  }

  #capture-onboarding-popup-headline, #capture-unsubscribe-popup-headline {
    font-size: 24px;
  }

  #capture-onboarding-info-popup-div, #capture-unsubscribe-info-popup-div {
    padding: 22px 30px 22px 30px;
    width: 50vw;
  }

  #onboarding-radio-option-div span, #unsubscribe-radio-option-div span {
    margin-left: 44px;
    margin-right: 6px;
  }

  #onboarding-radio-option-div, #unsubscribe-radio-option-div {
    font-size: 16px;
  }

  #onboarding-radio-option-div input[type="text"], #unsubscribe-radio-option-div input[type="text"] {
    font-size: 14px;
  }

  #onboarding-radio-option-div input[type="radio"], #unsubscribe-radio-option-div input[type="radio"] {
    width: 15px;
    height: 15px;
  }

  #x-button-to-close-login-popup, #x-button-to-close-account-popup, #x-button-to-close-capture-payment-popup, 
  #x-button-to-close-reset-password-popup, #x-button-to-close-change-password-popup, #x-button-to-close-paddle-checkout-popup, 
  #x-button-to-close-unsubscribe-info-popup {
    font-size: 24px;
  }

  #capture-payment-popup-headline {
    font-size: 24px;
  }

  #capture-payment-popup-headline-subtext {
    font-size: 22px;
  }

  #capture-payment-popup-CTA-button-green, #upgrade-subscription-button,
  #capture-payment-popup-CTA-button-red, #decline-upgrade-subscription-button {
    font-size: 14px;
  }

  #money-back-guarantee-div {
    font-size: 16px;
  }

  #capture-payment-popup-value-proposition-div-1, #capture-payment-popup-value-proposition-div-2 {
    font-size: 17.5px;
  }

  .green-checkmark-span, .red-heavy-X-emoji {
    font-size: 19.5px;
  }

  #capture-payment-popup-customer-support-text, #capture-payment-popup-other-product-text {
    font-size: 14px;
  }

  .checkout-title {
    font-size: 18.2px;
  }

  .checkout-main-price-title {
    font-size: 26.8px;
  }

  .checkout-subtext {
    font-size: 15.8px;
  }

  .checkout-logo {
    width: 44px;
  }

  .item-title {
    font-size: 15.8px;
  }

  .item-description {
    font-size: 13.0px;
  }

  .item-price {
    font-size: 15.8px;
  }

  .checkout-summary p {
    font-size: 15.8px;
  }

  .checkout-summary-2 p {
    font-size: 15.8px;
  }

  .website-header a, .website-footer a, .user-account-link {
    font-size: 11.5px;
  }
  
  .footer-text-1 {
    font-size: 15.5px;
  }

  .footer-product-summary {
    font-size: 15.5px;
  }

  .footer-section-resources  a {
    font-size: 14px;
  }

  .left-arrow-promo, .right-arrow-promo {
    font-size: 16px;
    margin-left: 6px;
    margin-right: 6px;
  }

  .recommended-reading-text {
    font-size: 17px;
  }

  .animated-fire-emoji-left {
    height: 20px;
    margin-right: 4px;
  }

  .animated-fire-emoji-right {
    height: 20px;
    margin-left: 4px;
  }



  .account-popup-headline {
    font-size: 20px;
  }

  #user-email-address-text {
    font-size: 16px;
  }

  .button-13 {
    font-size: 13px;
  }



  .settings-popup-headline {
    font-size: 23px;
  }

  .habit-streak-tracker-settings-headline, .habit-quantity-tracker-settings-headline {
    font-size: 18px;
  }

  .settings-input-label {
    font-size: 18px;
  }

  .settings-name-input {
    font-size: 14.5px;
  }

  .settings-popup-cancel-button, .settings-popup-save-button {
    font-size: 13px;
  }


}




/* Normal laptops */
@media (max-width: 1440px) {
  #habit-streak-tracker-table thead th, #habit-quantity-tracker-table thead th {
    font-size: 14px;
  }
  
  #habit-streak-tracker-table td, #habit-quantity-tracker-table td {
    font-size: 14px;
  }

  #add-new-habit-button-for-streak-table, #delete-habit-mode-button-for-streak-table, 
  #add-new-habit-button-for-quantity-table, #delete-habit-mode-button-for-quantity-table, #edit-habit-button-for-quantity-table {
    font-size: 12.0px;
  }

  #focus-mode-toggle-button, #settings-toggle-button {
    font-size: 12.0px;
  }

  .sound-mute-toggle {
    width: 30px;
    height: 30px;
  }

  .sound-icon {
    font-size: 15px;
  }

  .sound-volume-value {
    font-size: 12px;
  }

  .habit-streak-tracker-headline, .habit-quantity-tracker-headline {
    font-size: 24px;
  }

  .habit-streak-tracker-subheadline, .habit-quantity-tracker-subheadline {
    font-size: 13px;
  }

  #hide-headline-button-for-habit-streak-tracker, #hide-headline-button-for-habit-quantity-tracker {
    font-size: 18px;
  }

  .quantity-table-analytics-trigger {
    font-size: 12px;
  }

  .quantity-table-analytics-option {
    font-size: 12px;
  }

  .add-habit-to-quantity-table-input-label, .add-habit-to-quantity-table-input-label, 
  .add-habit-to-quantity-table-input-label, .add-habit-to-quantity-table-input-label {
    font-size: 15px;
  }

  .add-habit-to-quantity-table-name-input {
    font-size: 13px;
  }

  .add-habit-to-quantity-table-range-input {
    font-size: 12px;
  }

  .add-habit-to-quantity-table-radio-label {
    font-size: 13px;
  }

  .add-habit-to-quantity-table-range-label {
    font-size: 14px;
  }

  .add-habit-to-quantity-table-close-button, .add-habit-to-quantity-table-save-button, 
  .add-habit-to-quantity-table-update-button {
    font-size: 12.0px;
  }

  .select-habit-to-edit-for-quantity-table-trigger {
    font-size: 13px;
  }

  .select-habit-to-edit-for-quantity-table-option {
    font-size: 13px;
  }

  .sound-volume-slider::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    margin-top: -4px; /* aligns thumb with track in webkit */
  }

  .sound-volume-slider::-moz-range-thumb {
    width: 13px;
    height: 13px;
  }

  .website-header-logo-image {
    height: 33px;
  }

  .website-header-company-name {
    font-size: 17px;
  }

  .habit-milestone-text {
    font-size: 44px;
  }

  .habit-milestone-badge-gif {
    width: 76px;
    height: 76px;
  }

  .habit-milestone-badge-emoji {
    font-size: 68px;
  }

  .all-habits-completed-popup {
    font-size: 40px;
  }

  #login-popup-headline {
    font-size: 24px;
  }

  #login-popup-div input[type="text"], #login-popup-div input[type="password"] {
    font-size: 13px;
  }

  #login-button, #create-account-button, #submit-onboarding-info-button, #submit-unsubscribe-info-button, 
  #send-reset-password-link-button, #change-password-button {
    font-size: 13px;
  }

  #forgot-email-address-text, #forgot-password-text {
    font-size: 15px;
  }

  .login-capture-subtext {
    font-size: 14px;
  }

  #capture-onboarding-popup-headline, #capture-unsubscribe-popup-headline {
    font-size: 23px;
  }

  #capture-onboarding-info-popup-div, #capture-unsubscribe-info-popup-div {
    padding: 22px 30px 22px 30px;
    width: 50vw;
  }

  #onboarding-radio-option-div span, #unsubscribe-radio-option-div span {
    margin-left: 36px;
    margin-right: 6px;
  }

  #onboarding-radio-option-div, #unsubscribe-radio-option-div {
    font-size: 15px;
  }

  #onboarding-radio-option-div input[type="text"], #unsubscribe-radio-option-div input[type="text"] {
    font-size: 13px;
  }

  #onboarding-radio-option-div input[type="radio"], #unsubscribe-radio-option-div input[type="radio"] {
    width: 14px;
    height: 14px;
  }

  #x-button-to-close-login-popup, #x-button-to-close-account-popup, #x-button-to-close-capture-payment-popup, 
  #x-button-to-close-reset-password-popup, #x-button-to-close-change-password-popup, #x-button-to-close-paddle-checkout-popup, 
  #x-button-to-close-unsubscribe-info-popup {
    font-size: 23px;
  }

  #capture-payment-popup-headline {
    font-size: 23px;
  }

  #capture-payment-popup-headline-subtext {
    font-size: 21px;
  }

  #capture-payment-popup-CTA-button-green, #upgrade-subscription-button,
  #capture-payment-popup-CTA-button-red, #decline-upgrade-subscription-button {
    font-size: 13px;
  }

  #money-back-guarantee-div {
    font-size: 15px;
  }

  #capture-payment-popup-value-proposition-div-1, #capture-payment-popup-value-proposition-div-2 {
    font-size: 17.0px;
  }

  .green-checkmark-span, .red-heavy-X-emoji {
    font-size: 19.0px;
  }

  #capture-payment-popup-customer-support-text, #capture-payment-popup-other-product-text {
    font-size: 13px;
  }

  .checkout-title {
    font-size: 17.7px;
  }

  .checkout-main-price-title {
    font-size: 26.3px;
  }

  .checkout-subtext {
    font-size: 15.3px;
  }

  .checkout-logo {
    width: 42px;
  }

  .item-title {
    font-size: 15.3px;
  }

  .item-description {
    font-size: 12.5px;
  }

  .item-price {
    font-size: 15.3px;
  }

  .checkout-summary p {
    font-size: 15.3px;
  }

  .checkout-summary-2 p {
    font-size: 15.3px;
  }

  .website-header a, .website-footer a, .user-account-link {
    font-size: 11.0px;
  }
  
  .footer-text-1 {
    font-size: 15.0px;
  }

  .footer-product-summary {
    font-size: 15.0px;
  }

  .footer-section-resources  a {
    font-size: 13.5px;
  }

  .left-arrow-promo, .right-arrow-promo {
    font-size: 15px;
    margin-left: 6px;
    margin-right: 6px;
  }

  .recommended-reading-text {
    font-size: 16px;
  }

  .animated-fire-emoji-left {
    height: 19px;
    margin-right: 3px;
  }

  .animated-fire-emoji-right {
    height: 19px;
    margin-left: 3px;
  }


  .account-popup-headline {
    font-size: 19px;
  }

  #user-email-address-text {
    font-size: 15.5px;
  }

  .button-13 {
    font-size: 12px;
  }




  .settings-popup-headline {
    font-size: 22px;
  }

  .habit-streak-tracker-settings-headline, .habit-quantity-tracker-settings-headline {
    font-size: 17px;
  }

  .settings-input-label {
    font-size: 17px;
  }

  .settings-name-input {
    font-size: 14px;
  }

  .settings-popup-cancel-button, .settings-popup-save-button {
    font-size: 12px;
  }



}




/* Smaller laptops / large tablets */
@media (max-width: 1280px) { 
  #habit-streak-tracker-table thead th, #habit-quantity-tracker-table thead th {
    font-size: 12.5px;
  }
  
  #habit-streak-tracker-table td, #habit-quantity-tracker-table td {
    font-size: 12.5px;
  }

  #add-new-habit-button-for-streak-table, #delete-habit-mode-button-for-streak-table, 
  #add-new-habit-button-for-quantity-table, #delete-habit-mode-button-for-quantity-table, #edit-habit-button-for-quantity-table {
    font-size: 11.0px;
  }

  #focus-mode-toggle-button, #settings-toggle-button {
    font-size: 11.0px;
  }

  .sound-mute-toggle {
    width: 28px;
    height: 28px;
  }

  .sound-icon {
    font-size: 14px;
  }

  .sound-volume-value {
    font-size: 11px;
  }

  .habit-streak-tracker-headline, .habit-quantity-tracker-headline {
    font-size: 22px;
  }

  .habit-streak-tracker-subheadline, .habit-quantity-tracker-subheadline {
    font-size: 13px;
  }

  #hide-headline-button-for-habit-streak-tracker, #hide-headline-button-for-habit-quantity-tracker {
    font-size: 17px;
  }

  .quantity-table-analytics-trigger {
    font-size: 11px;
  }

  .quantity-table-analytics-option {
    font-size: 11px;
  }

  .add-habit-to-quantity-table-input-label, .add-habit-to-quantity-table-input-label, 
  .add-habit-to-quantity-table-input-label, .add-habit-to-quantity-table-input-label {
    font-size: 14px;
  }

  .add-habit-to-quantity-table-name-input {
    font-size: 12px;
  }

  .add-habit-to-quantity-table-range-input {
    font-size: 11px;
  }

  .add-habit-to-quantity-table-radio-label {
    font-size: 12px;
  }

  .add-habit-to-quantity-table-range-label {
    font-size: 13px;
  }

  .add-habit-to-quantity-table-close-button, .add-habit-to-quantity-table-save-button, 
  .add-habit-to-quantity-table-update-button {
    font-size: 11.0px;
  }

  .select-habit-to-edit-for-quantity-table-trigger {
    font-size: 12px;
  }

  .select-habit-to-edit-for-quantity-table-option {
    font-size: 12px;
  }

  .sound-volume-slider::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px; /* aligns thumb with track in webkit */
  }

  .sound-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
  }

  .website-header-logo-image {
    height: 30px;
  }

  .website-header-company-name {
    font-size: 16px;
  }

  .habit-milestone-text {
    font-size: 42px;
  }

  .habit-milestone-badge-gif {
    width: 70px;
    height: 70px;
  }

  .habit-milestone-badge-emoji {
    font-size: 62px;
  }

  .all-habits-completed-popup {
    font-size: 36px;
  }

  #login-popup-headline {
    font-size: 23px;
  }

  #login-popup-div input[type="text"], #login-popup-div input[type="password"] {
    font-size: 13px;
  }

  #login-button, #create-account-button, #submit-onboarding-info-button, #submit-unsubscribe-info-button, 
  #send-reset-password-link-button, #change-password-button {
    font-size: 13px;
  }

  #forgot-email-address-text, #forgot-password-text {
    font-size: 14px;
  }

  .login-capture-subtext {
    font-size: 13.8px;
  }

  #capture-onboarding-popup-headline, #capture-unsubscribe-popup-headline {
    font-size: 23px;
  }

  #capture-onboarding-info-popup-div, #capture-unsubscribe-info-popup-div {
    padding: 22px 30px 22px 30px;
    width: 60vw;
  }

  #onboarding-radio-option-div span, #unsubscribe-radio-option-div span {
    margin-left: 30px;
    margin-right: 6px;
  }

  #onboarding-radio-option-div, #unsubscribe-radio-option-div {
    font-size: 14.0px;
  }

  #onboarding-radio-option-div input[type="text"], #unsubscribe-radio-option-div input[type="text"] {
    font-size: 13px;
  }

  #onboarding-radio-option-div input[type="radio"], #unsubscribe-radio-option-div input[type="radio"] {
    width: 13.5px;
    height: 13.5px;
  }

  #x-button-to-close-login-popup, #x-button-to-close-account-popup, #x-button-to-close-capture-payment-popup, 
  #x-button-to-close-reset-password-popup, #x-button-to-close-change-password-popup, #x-button-to-close-paddle-checkout-popup, 
  #x-button-to-close-unsubscribe-info-popup {
    font-size: 22px;
  }

  #capture-payment-popup-headline {
    font-size: 22.5px;
  }

  #capture-payment-popup-headline-subtext {
    font-size: 20.5px;
  }

  #capture-payment-popup-CTA-button-green, #upgrade-subscription-button,
  #capture-payment-popup-CTA-button-red, #decline-upgrade-subscription-button {
    font-size: 13px;
  }

  #money-back-guarantee-div {
    font-size: 14px;
  }

  #capture-payment-popup-value-proposition-div-1, #capture-payment-popup-value-proposition-div-2 {
    font-size: 16.0px;
  }

  .green-checkmark-span, .red-heavy-X-emoji {
    font-size: 18.0px;
  }

  #capture-payment-popup-customer-support-text, #capture-payment-popup-other-product-text {
    font-size: 12.5px;
  }

  .checkout-title {
    font-size: 17.7px;
  }

  .checkout-main-price-title {
    font-size: 26.3px;
  }

  .checkout-subtext {
    font-size: 15.3px;
  }

  .checkout-logo {
    width: 42px;
  }

  .item-title {
    font-size: 15.3px;
  }

  .item-description {
    font-size: 12.5px;
  }

  .item-price {
    font-size: 15.3px;
  }

  .checkout-summary p {
    font-size: 15.3px;
  }

  .checkout-summary-2 p {
    font-size: 15.3px;
  }

  .website-header a, .website-footer a, .user-account-link {
    font-size: 10.5px;
  }
  
  .footer-text-1 {
    font-size: 14.0px;
  }

  .footer-product-summary {
    font-size: 14.0px;
  }

  .footer-section-resources  a {
    font-size: 13.5px;
  }

  .left-arrow-promo, .right-arrow-promo {
    font-size: 15px;
    margin-left: 6px;
    margin-right: 6px;
  }

  .recommended-reading-text {
    font-size: 16px;
  }

  .animated-fire-emoji-left {
    height: 19px;
    margin-right: 3px;
  }

  .animated-fire-emoji-right {
    height: 19px;
    margin-left: 3px;
  }



  .account-popup-headline {
    font-size: 18px;
  }

  #user-email-address-text {
    font-size: 15px;
  }

  .button-13 {
    font-size: 11.5px;
  }



  .settings-popup-headline {
    font-size: 21px;
  }

  .habit-streak-tracker-settings-headline, .habit-quantity-tracker-settings-headline {
    font-size: 16px;
  }

  .settings-input-label {
    font-size: 16px;
  }

  .settings-name-input {
    font-size: 13px;
  }

  .settings-popup-cancel-button, .settings-popup-save-button {
    font-size: 11.5px;
  }


}




/* Tablets portrait and smaller */
@media (max-width: 1024px) {
  #capture-onboarding-info-popup-div, #capture-unsubscribe-info-popup-div {
    padding: 22px 30px 22px 30px;
    width: 80vw;
  }
}

/* Mobile screens? */
@media (max-width: 768px) { 

  #capture-payment-popup-headline {
    white-space: normal; /* reverts it back to allowing it to spill onto second lines for very small screen sizes */
  }

}




.hamburger-button {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
  color: #ececec;
  font-weight: 700;
  padding-left: 0px;
  padding-right: 0px;
}

/* Mobile menu (hidden by default) */
.mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 60px;
  right: 0;
  background-color: #343434;
  border: 1px solid #000000;
  width: 200px;
  z-index: 1000;
}

.mobile-menu a, .mobile-menu span {
  padding: 12px;
  text-decoration: none;
  color: rgb(255, 255, 255);
  border-bottom: 1px solid #000000;
}

/* ===== NEW: mobile combined image defaults (hidden on desktop) ===== */
.mobile-company-image-link {
  display: none; /* shown only on mobile */
  min-width: 0;
  text-decoration: none;
}

.company-logo-and-name-image {
  display: block;
  width: 100%;      /* fill available width */
  height: auto;     /* keep aspect ratio */
  max-height: 44px; /* prevents it from getting huge; adjust */
  object-fit: contain;
}

.company-logo-and-name-image-footer {
  display: none;
  width: auto;
  padding-left: 16px;
  padding-right: 16px;
  max-height: 44px;
  object-fit: contain;
  margin-bottom: 30px;
}

/* Ensure dropdown anchors correctly to header */
.website-header {
  position: relative; /* IMPORTANT because .mobile-menu is position:absolute */
}



#extra-settings-div {
  display: flex;
  flex-direction: row;
}




@media (max-width: 900px) {


  #account-popup-div {
    top: 50%;
    left: 50%;
    width: 90vw;
    max-height: 94vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  #user-account-button-div {
    margin-top: 20px;
  }

  

  #settings-popup-div {
    top: 50%;
    left: 50%;
    width: 90vw;
    max-height: 94vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
  }



  #capture-payment-popup-div {
    width: 90vw;
    box-sizing: border-box;
    max-height: 96vh;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 6px;
    padding-bottom: 20px;
  }

  #x-button-to-close-capture-payment-popup {
    display: none;
  }

  #capture-payment-popup-headline-div {
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
  }

  #capture-payment-popup-headline {
    font-size: 20px;
  }

  #capture-payment-popup-headline-subtext {
    font-size: 18px;
  }

  #capture-payment-popup-CTA-button-div {
    flex-direction: column;
    gap: 0px;
  }

  #capture-payment-popup-CTA-button-green, #upgrade-subscription-button, 
  #capture-payment-popup-CTA-button-red, #decline-upgrade-subscription-button {
    font-size: 12.5px;
  }

  #money-back-guarantee-div {
    font-size: 13px;
    text-wrap: wrap;
    text-align: center;
    margin-bottom: 32px;
  }

  #capture-payment-popup-value-proposition-div-1, #capture-payment-popup-value-proposition-div-2 {
    text-wrap: wrap;
    font-size: 15px;
  }



  #paddle-checkout-popup-div {
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    transform: scale(0.9);
    width: 100vw;
    height: 100vh;
  }

  
  .paddle-checkout-line-items {
    display: none;
    width: 100%;
  }

  .paddle-checkout-container {
    width: 100%;
    height: 90%;
    min-height: 90%;
    max-height: 90%;
    box-shadow: none;
  }

}




/* ===== MOBILE STYLES ===== */
@media (max-width: 600px) {

  /* Hide desktop elements */
  .desktop-nav {
    display: none;
  }

  .header-div-left {
    display: none;
  }

  /* Turn header into 2-column row: image takes leftover space, hamburger fixed */
  .website-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0px;
    padding-left: 10px;
  }

  /* Show the mobile image + hamburger */
  .mobile-company-image-link {
    display: block;
  }

  .hamburger-button {
    display: block;
  }

  /* Optional: make the hamburger easier to tap */
  .hamburger-button {
    padding-right: 10px;
    padding-left: 10px;
  }

  /* Keep dropdown aligned with hamburger area */
  .mobile-menu {
    top: 100%;   /* directly below header */
  }




  .footer-section-top {
    flex-direction: column;
  }

  .footer-section-left {
    text-align: center;
    width: 100%;
  }

  .footer-section-right {
    margin-right: 0px;
    margin-top: 30px;
    gap: 4px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .footer-text-1 {
    margin-left: 0px;
    margin-top: 20px;
  }

  .footer-section-bottom {
    flex-direction: column;
  }

  .footer-website-logo-div {
    width: 100%;
    margin-left: 0px;
  }

  .footer-product-summary-div {
    width: 100%;
  }
  
  .footer-product-summary {
    margin-right: 30px;
    margin-left: 30px;
  }

  .footer-website-logo-div {
    display: none;
  }

  .company-logo-and-name-image-footer {
    display: block;
  }



  .right-arrow-promo {
    display: none;
  }

  .recommended-reading-text {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .animated-fire-emoji-left, .animated-fire-emoji-right {
    display: none;
  }



  #habit-streak-tracker-table-above-section, #habit-quantity-tracker-table-above-section {
    flex-direction: column;
    align-items: flex-end;
  }

  #habit-streak-tracker-table-headline-div, #habit-quantity-tracker-table-headline-div {
    position: relative;
    text-align: left;
    padding-top: 0px;
    padding-bottom: 14px;
    padding-right: 0px;
    padding-left: 0px;
  }




  #login-popup-div {
    width: 90vw;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
  }

  #login-popup-div input[type="text"], #login-popup-div input[type="password"] {
    width: 90%;
  }

  #login-button, #create-account-button {
    width: 90%;
  }

  #login-popup-headline {
    font-size: 18.5px;
  }

  #login-popup-div input[type="text"], #login-popup-div input[type="password"] {
    font-size: 11.5px;
  }

  #login-button, #create-account-button, #submit-onboarding-info-button, #submit-unsubscribe-info-button, 
  #send-reset-password-link-button, #change-password-button {
    font-size: 12.5px;
  }

  .login-capture-subtext {
    font-size: 12px;
    width: 90%;
  }

  #forgot-email-address-text, #forgot-password-text {
    font-size: 13px;
  }




  .add-habit-to-quantity-table-modal {
    width: 90vw;
    max-height: 94vh;
    overflow-y: auto;
  }

  .add-habit-to-quantity-table-modal-body {
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 26px;
  }

  .add-habit-to-quantity-table-unit-of-measurement-div, .add-habit-to-quantity-table-habit-objective-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
  }

  .add-habit-to-quantity-table-radio-label {
    font-size: 14px;
  }

  .add-habit-to-quantity-table-radio-row {
    display: flex;
    flex-grow: 1;
    gap: 14px;
    justify-content: space-evenly;
    margin-top: 4px;
  }

  .add-habit-to-quantity-table-input-label, .add-habit-to-quantity-table-input-label, 
  .add-habit-to-quantity-table-input-label, .add-habit-to-quantity-table-input-label {
    font-size: 15px;
  }

  .add-habit-to-quantity-table-section {
    margin-top: 12px;
    padding-top: 8px;
  }

  .add-habit-to-quantity-table-performance-range-section {
    margin-top: 12px;
    padding-top: 14px;
    padding-bottom: 3px;
  }

  .select-habit-to-edit-for-quantity-table-div {
    margin-bottom: 13px;
    padding-bottom: 14px;
  }

  .add-habit-to-quantity-table-modal-footer {
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .target-performance-range-text {
    max-width: 5%; /* a tiny width here forces each word of text to flow onto a new line */
    white-space: normal;   /* allow wrapping */
    word-break: keep-all;  /* prevent letter breaks */
    overflow-wrap: normal;
  }



  .habit-milestone-popup {
    display: none;
  }

  .all-habits-completed-popup {
    display: none;
  }




  #capture-payment-popup-div {
    width: 90vw;
    box-sizing: border-box;
    max-height: 96vh;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 6px;
    padding-bottom: 20px;
  }

  #x-button-to-close-capture-payment-popup {
    display: none;
  }

  #capture-payment-popup-headline-div {
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
  }

  #capture-payment-popup-headline {
    font-size: 20px;
  }

  #capture-payment-popup-headline-subtext {
    font-size: 18px;
  }

  #capture-payment-popup-CTA-button-div {
    flex-direction: column;
    gap: 0px;
  }

  #capture-payment-popup-CTA-button-green, #upgrade-subscription-button, 
  #capture-payment-popup-CTA-button-red, #decline-upgrade-subscription-button {
    font-size: 12.5px;
  }

  #money-back-guarantee-div {
    font-size: 13px;
    text-wrap: wrap;
    text-align: center;
    margin-bottom: 32px;
  }

  #capture-payment-popup-value-proposition-div-1, #capture-payment-popup-value-proposition-div-2 {
    text-wrap: wrap;
    font-size: 15px;
  }



  #account-popup-div {
    top: 50%;
    left: 50%;
    width: 90vw;
    max-height: 94vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  #user-account-button-div {
    margin-top: 20px;
  }



  #settings-popup-div {
    top: 50%;
    left: 50%;
    width: 90vw;
    max-height: 94vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
  }


  

  #capture-onboarding-info-popup-div, #capture-unsubscribe-info-popup-div {
    padding: 0px 0px 0px 0px;
    width: 90vw;
    max-height: 94vh;
    overflow-y: auto;
    top: 50%;
    left: 50%;
    padding-bottom: 30px;
    padding-top: 20px;
    box-sizing: border-box;
  }
  
  #onboarding-radio-option-div span, #unsubscribe-radio-option-div span {
    margin-left: 0px;
    margin-right: 2px;
  }

  #onboarding-radio-option-div, #unsubscribe-radio-option-div {
    flex-direction: column;
    margin-bottom: 22px;
  }

  #submit-onboarding-info-button, #submit-unsubscribe-info-button {
    margin-top: 20px;
  }

  #capture-onboarding-popup-headline {
    margin-top: 10px;
  }

 #capture-unsubscribe-popup-headline {
    margin-top: 20px;
  }

  #onboarding-radio-option-div label, #unsubscribe-radio-option-div label {
    font-size: 15px;
  }



  
  #paddle-checkout-popup-div {
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    transform: scale(0.9);
    width: 100vw;
    height: 100vh;
  }

  
  .paddle-checkout-line-items {
    display: none;
    width: 100%;
  }

  .paddle-checkout-container {
    width: 100%;
    height: 90%;
    min-height: 90%;
    max-height: 90%;
    box-shadow: none;
  }



  #x-button-to-close-login-popup, #x-button-to-close-account-popup, #x-button-to-close-capture-payment-popup, 
  #x-button-to-close-reset-password-popup, #x-button-to-close-change-password-popup, #x-button-to-close-paddle-checkout-popup, 
  #x-button-to-close-unsubscribe-info-popup {
    font-size: 24px;
  }




  #extra-settings-div {
    flex-direction: column;
    gap: 10px;
  }

  #settings-toggle-button {
    margin-left: 0px;
  }

}