.signInOptions{
    display: flex;
    align-items: center;
    flex-direction: column;

    height: 70%;
    width: 100%;
}

.signInOptions #greetingMessage{
    width: 90%;
    text-align: center;

    font-size: x-large;
}

.signInOptions .signIn .seperator{
    height: 0.5%;   
    width: 90%;
    background-color: black;
    border-radius: 20%;
}

.signInOptions .signIn{
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    height: 57%;
    width: 90%;
    margin-top: 10%;
}

.signInOptions .signIn input{
    width: 90%;
    height: 12%;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
    font-size: 20px;
    border: 2px solid var(--color-btn-secondary-border);
    border-radius: 0.7rem;
    -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11); 
    box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11);
    transition: all 0.1s ease-in;
    cursor: text;

    padding: 5px;   
}

.signInOptions .signIn button{
    width: 93%;
    height: 18%;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
    font-size: 20px;
    border: 2px solid var(--color-btn-secondary-border);
    border-radius: 0.7rem;
    -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11); 
    box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11);
    transition: all 0.1s ease-out;
    cursor: pointer;

    padding: 5px;
}

.signInOptions .signIn a, .signInOptions .signUp a{
  color: rgb(50, 8, 167);
  text-decoration: underline;
  cursor: pointer;
}


.signInOptions .signIn #login{
    height: 15%;
    width: 94%;
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    font-size: 20px;
    border: 2px solid var(--color-btn-primary-border);
    border-radius: 1rem;
    -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51); 
    box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51);
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease-out;
}

.signInOptions .signIn button:active{
    transform: scale(0.95);
}

.signInOptions .signIn button#apple{
    background-color: black;
    color: white;
}

.signInOptions .signUp{
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    height: 65%;
    width: 90%;
    margin-top: 10%;
}

.signInOptions .signUp .signUpTos{
  /* color: blue; */
  width: 90%;
  text-align: center;
  margin: 0;
}

.signInOptions .signUp input{
    width: 90%;
    height: 12%;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
    font-size: 20px;
    border: 2px solid var(--color-btn-secondary-border);
    border-radius: 0.7rem;
    -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11); 
    box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11);
    transition: all 0.1s ease-in;
    cursor: text;

    padding: 5px;   
}

.signInOptions .signUp button{
    width: 94%;
    height: 100%;
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    font-size: 20px;
    border: 2px solid var(--color-btn-primary-border);
    border-radius: 1rem;
    -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51); 
    box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51);
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease-out;
}

.signInOptions .signUp #sign_up{
    height: 12%;
}

.signInOptions .signUp button:active{
    transform: scale(0.95);
}

.signInOptions .signUp .input-row{
  width: 94%;
  height: 15%;

  display: flex;
  align-items: row;
  justify-content: space-between;
}

.signInOptions .signUp .input-row input{
  width: 45%;
  height: 80%;
  background-color: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  font-size: 20px;
  border: 2px solid var(--color-btn-secondary-border);
  border-radius: 0.7rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11);
  transition: all 0.1s ease-in;
  cursor: text;
}

.signInOptions .signUp input::placeholder {
    color: inherit;
}

.signInOptions .dualfa{
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  height: 35%;
  width: 90%;
  margin-top: 10%;
}

.signInOptions .dualfa .s-info{
  font-size: x-large;
  text-align: center;

  font-weight: 600;

  margin: 0;
  width: 100%;
  height: 50%;
}

.signInOptions .dualfa input{
  width: 95%;
  height: 30%;
  background-color: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  font-size: 20px;
  border: 2px solid var(--color-btn-secondary-border);
  border-radius: 0.7rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11);
  transition: all 0.1s ease-in;
  cursor: text;
}

.signInOptions .dualfa button{
    width: 95%;
    height: 40%;
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    font-size: 20px;
    border: 2px solid var(--color-btn-primary-border);
    border-radius: 1rem;
    -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51); 
    box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51);
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease-out;
}

.signInOptions .dualfa a{
  color: rgb(28, 19, 153);
  text-decoration: underline;
  cursor: pointer;
}

@keyframes shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-6px); }
    50%  { transform: translateX(6px); }
    75%  { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

.account {
  position: relative;
  width: 100%;
  margin-top: 30%;
  height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4% 4%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: none;
}

.account .profile-card {
  width: 80%;
  background: rgba(10, 7, 131, 0.158);
  border-radius: 1rem;
  padding: 4% 4% 3%;
  margin-bottom: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 30%;
}

.account .avatar {
  width: auto;
  height: 50%;
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--color-feed-ctrl-border);
  margin-bottom: 3%;
}

.account .profile-card .name {
  font-size: larger;
  font-weight: 600;
  margin: 0 0 1% 0;
  color: var(--color-feed-sel-selected-text);
}

.account .email {
  font-size: small;
  color: var(--color-feed-sel-active-text);
  margin: 0 0 2% 0;
}

.account .plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 1%;
  font-size: smaller;
  font-weight: 600;
  padding: 1% 3%;
  border-radius: 20px;
  background: var(--color-feed-ctrl-bg);
  color: var(--color-feed-sel-selected-text);
  border: 1px solid var(--color-feed-ctrl-border-dim);
}

.account .plan-badge.pro{
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
  font-size: medium;
}

.account .section-label {
  width: 80%;
  font-size: smaller;
  font-weight: 600;
  color: rgb(85, 55, 0);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 1%;
  margin: 0 0 2% 0;
}

.account .menu-card {
  width: 80%;
  background: rgba(10, 7, 131, 0.158);
  border: 1px solid var(--color-feed-ctrl-border-dim);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 3%;
  height: auto;
}

.account .menu-row {
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 4% 4%;
  cursor: pointer;
  border-bottom: 1px solid var(--color-feed-sel-border-dim);
  transition: background 0.12s;
  width: 100%;
  box-sizing: border-box;
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0px 0px rgba(139, 92, 246, 0); }
  50%       { box-shadow: 0 0 10px 2px rgba(139, 92, 246, 0.18); }
}

@keyframes float-arrow {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(3px); }
}

.account .menu-row#subscription {
  position: relative;
  overflow: hidden;
  animation: pulse-glow 3s ease-in-out infinite;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.07) 0%,
    rgba(99, 60, 220, 0.04) 50%,
    rgba(139, 92, 246, 0.07) 100%
  );
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.account .menu-row#subscription::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}

.account .menu-row#subscription .m-icon.purple {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}

.account .menu-row#subscription .m-label {
  background: linear-gradient(90deg, #7c3aed, #a855f7, #c084fc);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3.5s ease-in-out infinite;
  font-weight: 700;
}

.account .menu-row#subscription .m-desc {
  color: rgba(139, 92, 246, 0.7);
}

.account .menu-row#subscription .m-arrow {
  color: #a855f7;
  animation: float-arrow 1.8s ease-in-out infinite;
}

.account .menu-row#subscription:active {
  background: rgba(139, 92, 246, 0.15);
}

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

.account .menu-row:active {
  background: var(--color-feed-sel-bg);
}

.account .m-icon {
  width: 9%;
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4%;
  flex-shrink: 0;
  background: var(--color-feed-sel-bg);
  color: var(--color-feed-sel-selected-text);
}

.account .m-text { flex: 1; }

.account .m-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-feed-sel-selected-text);
  margin: 0;
}

.account .m-desc {
  font-size: 11px;
  color: var(--color-feed-sel-active-text);
  margin: 0;
}

.account .m-arrow {
  font-size: 20px;
  color: var(--color-feed-ctrl-border-dim);
  line-height: 1;
}

.account .signout-row {
  display: flex;
  width: 70%;
  background: rgba(226, 3, 3, 0.493);
  border: 1px solid var(--color-feed-ctrl-border-dim);
  border-radius: 16px;
  margin-bottom: 2%;
  border-bottom: none;
}

.account .signout-row:active {
  background: var(--color-btn-primary-active-bg-red);
  border-color: var(--color-btn-primary-border-red);
}

.account .signout-row:active .so-label,
.account .signout-row:active .so-icon {
  color: var(--color-btn-primary-text-red);
}

.account .so-icon {
  font-size: 16px;
  color: var(--color-feed-sel-active-text);
}

.account .so-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-feed-sel-active-text);
  margin: 0;
}

.account .security {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 20px;
  
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;   
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* .account .security::after{
  content: '';
  position: sticky;
  bottom: -5%;
  left: 0;
  right: 0;
  display: block;
  height: 20px;
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
  background: linear-gradient(
      to bottom,
      transparent,
      var(--color-results-panel-bg)
  );
  pointer-events: none;
}
*/

.account .security .seperator-label{
  width: 100%;
  color: rgb(99, 99, 99);
  text-transform: capitalize;
  font-weight: 800;
  margin: 0;
  font-size: larger;
}

.account .security .seperator-label.danger{
  color: rgb(226, 0, 0);
}

.account .security .seperator-description{
  width: 100%;
  color: gray;
  font-weight: 500;
  margin: 0;
  margin-top: -20px;
  margin-bottom: 0;
}

.account .security .seperator-description.danger{
  color: gray;
}

.account .security .section {
  width: 100%;
  max-width: 600px;
  flex-shrink: 0;          /* stop squishing */
  /* remove height, min-height, % values */
}

.account .security .section.verification_warning {
  width: 100%;
  background: #E6F1FB;
  border: 0.5px solid #378ADD;
  border-left: 3px solid #185FA5;
  border-radius: 0.75rem;
  padding: 14px 16px;
  box-sizing: border-box;

  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.account .security .section.verification_warning .s-icon {
  flex-shrink: 0;
  width: 36px;
  height: 100%;
  background: #B5D4F4;
  border-radius: 0.5rem;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #0C447C;
}

.account .security .section.verification_warning .s-content {
  flex: 1;
  min-width: 0;
}

.account .security .section.verification_warning .s-label {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 500;
  color: #0C447C;
}

.account .security .section.verification_warning .s-desc {
  margin: 0;
  font-size: 13px;
  color: #185FA5;
  line-height: 1.5;
}

.account .security .section.verification_warning .s-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: #185FA5;
  display: flex;
  align-items: center;
}

.account .security .section.credential_change {
  display: flex;
  flex-direction: column;
  background: linear-gradient(158deg, rgba(0,0,50,0.59) 20%, rgba(12,19,48,0.83) 69%);
  border-radius: 1rem;
  padding: 10px;
  height: auto !important; /* override any inline/styles */

  user-select: none;
  max-height: 50%;
}
.account .security .section.credential_change .top{
  width: 100%;
  height: 33%;
  border-bottom: 1px solid rgb(124, 125, 131);

  box-sizing: border-box;
  padding: 5px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
}

.account .security .section.credential_change .mid{
  width: 100%;
  height: 33%;
  border-bottom: 1px solid rgb(124, 125, 131);

  box-sizing: border-box;
  padding: 5px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
}

.account .security .section.credential_change .bottom{
  width: 100%;
  height: 33%;
  
  box-sizing: border-box;
  padding: 5px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;

  margin: 0;
}


.account .security .section.credential_change .top,
.account .security .section.credential_change .mid,
.account .security .section.credential_change .bottom {
  position: relative;
}

.account .security .section.section.credential_change .top .s-detail, 
.account .security .section.section.credential_change .mid .s-detail, 
.account .security .section.section.credential_change .bottom .s-detail {
  width: 80%;
  height: 80%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
} 

.account .security .section.section.credential_change .top .s-detail .s-label, 
.account .security .section.section.credential_change .mid .s-detail .s-label, 
.account .security .section.section.credential_change .bottom .s-detail .s-label {
  color: rgba(233, 233, 233, 0.562);
  text-transform: uppercase;
  height: 20%;
  width: 100%;

  font-weight: 600;

  margin: 0;
} 

.account .security .section.section.credential_change .top .s-detail .s-preview, 
.account .security .section.section.credential_change .mid .s-detail .s-preview, 
.account .security .section.section.credential_change .bottom .s-detail .s-preview {
  font-weight: 400;

  color: rgba(255, 255, 255, 0.774);

  font-size: larger;

  width: 98%;
  margin: 0;
} 

.account .security .section.credential_change .top,
.account .security .section.credential_change .mid,
.account .security .section.credential_change .bottom {
  flex: 1;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid rgb(124,125,131);
  height: auto !important;
}

.account .security .section.credential_change .bottom {
  border-bottom: none;
}

.account .security .section.credential_change .top .s-change,
.account .security .section.credential_change .mid .s-change,
.account .security .section.credential_change .bottom .s-change {
  width: 15%;
  height: 100%;
  background-color: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  font-size: small;
  border: 2px solid var(--color-btn-secondary-border);
  border-radius: 0.7rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11);
  transition: all 0.15s ease-out;
  cursor: pointer;
  
  text-align: center;

  padding: 5px;
}

.account .security .section.credential_change .top .s-change.disabled{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: small;
  cursor: not-allowed;
  -webkit-filter: grayscale(20%);
  background-color: var(--color-btn-disabled-bg, #e0e0e0);
  color: var(--color-btn-disabled-text, #9e9e9e);
  border: 2px solid var(--color-btn-disabled-border, #bdbdbd);
  border-radius: 0.7rem;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: all 0.15s ease-out;
  cursor: not-allowed;
  text-align: center;
  padding: 5px;
  opacity: 0.6;
  -webkit-border-radius: 0.7rem;
  -moz-border-radius: 0.7rem;
  -ms-border-radius: 0.7rem;
  -o-border-radius: 0.7rem;
}

.account .security .section.credential_change .top .s-change:not(.disabled):active,
.account .security .section.credential_change .mid .s-change:not(.disabled):active,
.account .security .section.credential_change .bottom .s-change:not(.disabled):active {
  transform: scale(0.9);
  border-radius: 1rem;
}

.account .security .section.credential_change .full{
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  flex-direction: column;
}

.account .security .section.section.credential_change .full .cont,
.account .security .section.section.credential_change .full .first{
  width: 100%;
  height: 100%;
  
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.account .security .section.credential_change .full .s-label{
  color: rgba(233, 233, 233, 0.562);
  text-transform: uppercase;
  height: 20%;
  width: 100%;

  font-weight: 600;

  margin: 2px 0px 5px; 
}

.account .security .section.credential_change .full .s-info{
  color: rgba(224, 224, 224, 0.459);
  height: 20%;
  width: 100%;

  font-weight: 600;

  font-size: larger;

  margin: 0 0 20px; 
}

.account .security .section.credential_change .full input{
  width: 95%;
  margin-left: 2%;
  background-color: rgba(4, 5, 15, 0.336);
  border: 0px solid transparent;
  padding: 8px 3px 5px;

  font-size: large;

  border-radius: 0.4rem;
  color: white;

  margin-bottom: 2%;
}

.account .security .section.credential_change .full .row{
  width: 95%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-left: 2.5%;
  margin-bottom: 2%;
}

.account .security .section.credential_change .full .complete{
  width: 82%;

  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  font-size: 20px;
  border: 2px solid var(--color-btn-primary-border);
  border-radius: 0.7rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51);
  text-align: center;
  cursor: pointer;
  transition: all 0.1s ease-out;
  padding: 10px 5px 10px;
  margin-top: 2%;
}

.account .security .section.credential_change .full .cancel{
  width: 15%;

  background-color: var(--color-btn-primary-bg-red);
  color: var(--color-btn-primary-text-red);
  font-size: 20px;
  border: 2px solid var(--color-btn-primary-border-red);
  border-radius: 0.7rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51);
  text-align: center;
  cursor: pointer;
  transition: all 0.1s ease-out;
  padding: 10px 5px 10px;
  margin-top: 2%;
}


.account .security .section.credential_change .full button:active{
  transform: scale(0.95);
}

.account .security .section.dualfa {
  display: flex;
  flex-direction: column;
  background: linear-gradient(158deg, rgba(0,0,50,0.59) 20%, rgba(12,19,48,0.83) 69%);
  border-radius: 1rem;
  padding: 10px;
  height: auto !important; /* override any inline/styles */

  user-select: none;
}

.account .security .section.dualfa .s-label{
  color: rgba(182, 182, 182, 0.801);
  font-size: larger;
  font-weight: 600;
}

.account .security .section.dualfa #method{
  color: rgba(206, 206, 206, 0.74);
  font-weight: 700;
}

.account .security .section.dualfa #method.none{
  color: red;
}

.account .security .section.dualfa #method.activated{
  color: rgb(15, 192, 15);
}

.account .security .section.dualfa .toggle2fa{
  height: 100%; 
  width: 100%;
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  font-size: medium;
  border: 2px solid var(--color-btn-primary-border);
  border-radius: 0.7rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11);
  transition: all 0.1s ease-out;
  cursor: pointer;

  margin-top: 2.5%;
  padding: 5px;
}

.account .security .section.dualfa .toggle2fa.disable{
  background-color: var(--color-btn-primary-bg-red);
  color: var(--color-btn-primary-text-red);
  border: 2px solid var(--color-btn-primary-border-red);
}

.account .security .section.dualfa .toggle2fa:active{
  transform: scale(0.95);
  border-radius: 0.8rem;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
}

.account .security .section.dualfa .first{
  width: 100%;
  height: 100%;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.account .security .section.dualfa .cont{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.account .security .section.dualfa .cont .s-label{
  color: rgba(233, 233, 233, 0.562);
  text-transform: uppercase;
  height: 20%;
  width: 100%;

  font-weight: 600;

  margin: 2px 0px 5px; 
}

.account .security .section.dualfa .cont .s-info{
  color: rgba(224, 224, 224, 0.459);
  height: 20%;
  width: 100%;

  font-weight: 600;

  font-size: larger;

  margin: 0 0 20px; 
}

.account .security .section.dualfa .cont input{
  width: 95%;
  margin-left: 2%;
  background-color: rgba(4, 5, 15, 0.336);
  border: 0px solid transparent;
  padding: 8px 3px 5px;

  font-size: large;

  border-radius: 0.4rem;
  color: white;

  margin-bottom: 2%;
}

.account .security .section.dualfa .cont .row{
  width: 95%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 2%;
}

.account .security .section.dualfa .cont .complete{
  width: 82%;

  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  font-size: 20px;
  border: 2px solid var(--color-btn-primary-border);
  border-radius: 0.7rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51);
  text-align: center;
  cursor: pointer;
  transition: all 0.1s ease-out;
  padding: 10px 5px 10px;
  margin-top: 2%;
}

.account .security .section.dualfa .cont .cancel{
  width: 15%;

  background-color: var(--color-btn-primary-bg-red);
  color: var(--color-btn-primary-text-red);
  font-size: 20px;
  border: 2px solid var(--color-btn-primary-border-red);
  border-radius: 0.7rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.51);
  text-align: center;
  cursor: pointer;
  transition: all 0.1s ease-out;
  padding: 10px 5px 10px;
  margin-top: 2%;
}

.account .security .section.dualfa .cont button:active{
  transform: scale(0.95);
}

.account .security .section.active_sessions{
  width: 100%;
  min-height: 15%;
  max-height: 85%;

  background: #000032;
  background: linear-gradient(158deg, rgba(0, 0, 50, 0.59) 20%, rgba(12, 19, 48, 0.83) 69%);

  border-radius: 1rem;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  padding: 10px;

  user-select: none;
}

.account .security .section.active_sessions .session{
  width: 100%;
  border-bottom: 1px solid rgb(124, 125, 131);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;

  margin-bottom: 5px;
  margin-top: 5px;
}

.account .security .section.active_sessions .session:only-child{
  border-bottom: 0px solid rgb(124, 125, 131);
  padding: 0px 10px 10px;
  margin-bottom: 0;
}

.account .security .section.active_sessions .session:last-child{
  border-bottom: 0px solid rgb(124, 125, 131);
}

.account .security .section.active_sessions .session .info{
  width: 80%;
  height: 100%;
  margin-bottom: 5px;
}

.account .security .section.active_sessions .session .info p{
  margin: 0;
  width: 100%;
}

.account .security .section.active_sessions .session .info .s-session-UA{
  width: 100%;
  color: rgba(255, 255, 255, 0.898);
  font-size: medium;
}

.account .security .section.active_sessions .session #thisDevice{
  padding: 2px 5px 2px;
  background-color: rgba(95, 137, 95, 0.556);
  border: 1px solid rgb(11, 46, 0);
  border-radius: 0.5rem;
  margin: 0;
  color: rgb(229, 229, 229);
}

.account .security .section.active_sessions .session .info .s-session-location,
.account .security .section.active_sessions .session .info .s-session-time{
  width: 95%;
  margin-left: 1%;
  color: rgba(235, 235, 235, 0.774);
  font-size: large;
}

.account .security .section.active_sessions .session .s-kick{
  height: 95%; 
  width: 15%;
  background-color: var(--color-btn-primary-bg-red);
  color: var(--color-btn-primary-text-red);
  font-size: medium;
  border: 2px solid var(--color-btn-primary-border-red);
  border-radius: 0.7rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11);
  transition: all 0.1s ease-out;
  cursor: pointer;

  padding: 5px;
}

.account .security .section.active_sessions .session .s-kick:active{
  transform: scale(0.90);
  border-radius: 1rem;
  background-color: var(--color-btn-primary-active-bg-red);
  border: 1px solid var(--color-btn-primary-active-border-red);
}

.account .security .section.active_sessions .kickAll{
  height: 20%; 
  width: 100%;
  background-color: var(--color-btn-primary-bg-red);
  color: var(--color-btn-primary-text-red);
  font-size: medium;
  border: 2px solid var(--color-btn-primary-border-red);
  border-radius: 0.8rem;
  -webkit-box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11); 
  box-shadow: 5px 5px 18px -3px rgba(0,0,0,0.11);
  transition: all 0.1s ease-out;
  cursor: pointer;

  padding: 5px;

  margin-top: 0%;
}

.account .security .sec-btn.red{
  width: 100%;
  height: 25%; 
  font-size: medium;
  border-radius: 0.8rem;
  background-color: var(--color-btn-primary-bg-red);
  color: var(--color-btn-primary-text-red);
  border: 3px solid var(--color-btn-primary-border-red);
  padding: 8px 0 8px;
  
  transition: 0.15s ease all;
}

.account .security .sec-btn.red:active{
  transform: scale(0.93);
  background-color: var(--color-btn-primary-active-bg-red);
  border: 3px solid var(--color-btn-primary-active-border-red);
}

.account .security .sec-btn#disable{
  margin: -2%;
  padding: 10px 0 10px;
  font-size: larger;
}

.account .security .sec-btn#delete{
  margin: -2%;
  padding: 10px 0 10px;
  font-size: larger;
}


.account .security .kickAll:active{
  transform: scaleX(0.97) scaleY(0.90);
  border-radius: 0.9rem;
  background-color: var(--color-btn-primary-active-bg-red);
  border: 1px solid var(--color-btn-primary-active-border-red);
}

.account .personal_info{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: flex-start;
  flex-direction: column;

  position:absolute;
  top: 0;
  left: 0;

  overflow-x: none;
}

.account .personal_info .seperator-label{
  width: 92%;
  color: rgb(99, 99, 99);
  text-transform: capitalize;
  font-weight: 800;
  margin-top: 30px;
  margin-bottom: 0;
  font-size: larger;
}

.account .personal_info .seperator-description{
  width: 91%;
  color: gray;
  font-weight: 500;
  margin: 0;
  margin-bottom: 0;
}

.account .personal_info .section{
  width: 100%;
}

.account .personal_info .section.pfp-change{
  display: flex;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(158deg, rgba(0,0,50,0.59) 20%, rgba(12,19,48,0.83) 69%);
  border-radius: 1rem;
  padding: 10px;
  height: auto !important; /* override any inline/styles */

  user-select: none;

  width: 90%;

  margin-top: 5%;

  gap: 20px;
}

.account .personal_info .section.pfp-change img{
  width: 30%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

.account .personal_info .section.pfp-change #changePfp{
  width: 35%;
  padding: 6px 0 6px;
  font-size: larger;

  color: var(--color-btn-secondary-text);
  background-color: var(--color-btn-secondary-bg);
  border: 2px solid var(--color-btn-secondary-border);

  border-radius: 0.6rem;

  transition: all 0.15s ease;

  cursor: pointer;
}

.account .personal_info .section.pfp-change #changePfp:active{
  transform: scale(0.9);
}

.account .personal_info .section.name-change{
  display: flex;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(158deg, rgba(0,0,50,0.59) 20%, rgba(12,19,48,0.83) 69%);
  border-radius: 1rem;
  padding: 10px;
  height: auto !important; /* override any inline/styles */

  user-select: none;

  width: 90%;

  margin-top: 3%;
}

.account .personal_info .section.name-change .row1 {
  width: 95%;
  height: 10%;
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
  border-radius: 0.4rem;
  font-weight: 500;
  cursor: not-allowed;
  color: #a0a0a0;
  opacity: 0.7;
}

.account .personal_info .section.name-change .row1 p{
  margin: 0;
  width: 90%;
  padding: 10px;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: large;
}

.account .personal_info .section.name-change .row2{
  width: 95%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account .personal_info .section.name-change .row2 p{
  width: 40%;
  background-color: blue;
  height: 100%;
  padding: 10px;
  font-size: large;
  background-color: rgba(246, 246, 246, 0.942);
  border: 2px solid whitesmoke;
  border-radius: 0.4rem;
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── subscription.css ── */

.account .subscription {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  margin-top: 0; /* kill the old -5% hack */
}

.account .subscription {
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 all at once */
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 0;
}

.sub-root {
  font-family: 'Quicksand', sans-serif;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 5% 3rem;
  box-sizing: border-box;
  position: relative;
  /* Remove overflow-y: hidden — let .subscription handle scrolling */
  overflow: visible;
  /* Remove margin-top: -10% */
  margin-top: 0;
}

.sub-root {
  margin-top: 0;
  padding-top:  0%; /* tweak this value to clear your header */
}

.sub-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── orbs ── */
.s-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.s-orb1 {
  width: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.5) 0%, transparent 70%);
  top: -10%;
  left: -10%;
}
.s-orb2 {
  width: 40%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.24) 0%, transparent 70%);
  bottom: -5%;
  right: -5%;
}

/* ── logo ── */
.s-logo {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  font-weight: 900;
  color: #0d2456;
  letter-spacing: -0.02em;
  align-self: flex-start;
  margin-bottom: 1.75rem;
  position: relative;
  z-index: 1;
}
.s-logo span { color: #f59e0b; }

/* ── header ── */
.s-head {
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
  width: 100%;
}
.s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: clamp(0.55rem, 2vw, 0.65rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6ba3f7;
  margin-bottom: 0.65rem;
}
.s-eyebrow::before,
.s-eyebrow::after {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: #6ba3f7;
  opacity: 0.7;
}
.s-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 6vw, 1.85rem);
  font-weight: 900;
  line-height: 1.1;
  color: #0d2456;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.s-h1 em { font-style: italic; color: #7a4e00; }
.s-sub {
  font-size: clamp(0.75rem, 3vw, 0.85rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(15, 45, 110, 0.55);
}
.s-sub strong { color: #1a3570; font-weight: 600; }

/* ── toggle row ── */
.s-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 1.1rem 0 1.35rem;
  position: relative;
  z-index: 1;
  width: 100%;
}
.s-tlabel {
  font-size: clamp(0.75rem, 3vw, 0.85rem);
  font-weight: 500;
  color: rgba(15, 45, 110, 0.4);
  transition: color 0.2s, font-weight 0.2s;
  cursor: pointer;
}
.s-tlabel.on {
  color: #0d2456;
  font-weight: 700;
}

/* toggle switch */
.s-sw {
  position: relative;
  width: 2.9rem;
  height: 1.55rem;
  cursor: pointer;
  flex-shrink: 0;
}
.s-sw:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 999px; }
.s-track {
  position: absolute;
  inset: 0;
  background: rgba(59, 130, 246, 0.14);
  border: 1.5px solid rgba(59, 130, 246, 0.28);
  border-radius: 999px;
  transition: background 0.25s, border-color 0.25s;
}
.s-sw.on .s-track {
  background: #3b82f6;
  border-color: #3b82f6;
}

.s-thumb {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.15rem;
  height: 1.15rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.s-sw.on .s-thumb { transform: translateX(1.35rem); }

.s-save-badge {
  font-size: clamp(0.58rem, 2vw, 0.65rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #854f0b;
  background: #fef3c7;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

/* ── plans grid ── */
.s-plans {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ── card ── */
.s-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1.5px solid rgba(59, 130, 246, 0.22);
  border-radius: 1.4rem;
  padding: 1.4rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s;
}
.s-card:active { transform: scale(0.99); }

.s-card-featured {
  background: linear-gradient(160deg, #0d2456 0%, #1b3a8f 100%);
  border-color: rgba(93, 155, 247, 0.4);
}

/* best value tag */
.s-pop-tag {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #f59e0b, #f97316);
  color: #0a1f44;
  font-size: clamp(0.52rem, 2vw, 0.6rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.9rem;
  border-radius: 0 0 0.65rem 0.65rem;
  white-space: nowrap;
  font-family: 'Quicksand', sans-serif;
}

.s-plan-name {
  font-size: clamp(0.58rem, 2vw, 0.65rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6ba3f7;
  margin-bottom: 0.75rem;
}
.s-card-featured .s-plan-name { color: #93c5fd; }

/* price */
.s-price-row {
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  margin-bottom: 0.2rem;
}
.s-price {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 10vw, 3rem);
  font-weight: 900;
  line-height: 1;
  color: #0d2456;
  letter-spacing: -0.03em;
  transition: opacity 0.15s;
}
.s-card-featured .s-price { color: #f8faff; }
.s-unit {
  font-size: clamp(0.8rem, 3vw, 0.9rem);
  font-weight: 500;
  color: rgba(15, 45, 110, 0.45);
  margin-bottom: 0.3rem;
  padding-left: 0.15rem;
}
.s-card-featured .s-unit { color: rgba(191, 219, 254, 0.6); }

.s-note {
  font-size: clamp(0.7rem, 2.5vw, 0.78rem);
  color: rgba(15, 45, 110, 0.38);
  margin-bottom: 0.5rem;
  min-height: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.s-card-featured .s-note { color: rgba(191, 219, 254, 0.5); }

.s-orig { text-decoration: line-through; opacity: 0.65; }
.s-ann-badge {
  font-size: clamp(0.58rem, 2vw, 0.65rem);
  font-weight: 700;
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.2);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

.s-desc {
  font-size: clamp(0.72rem, 2.5vw, 0.8rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(15, 45, 110, 0.5);
  margin: 0.65rem 0 0.9rem;
}
.s-card-featured .s-desc { color: rgba(191, 219, 254, 0.65); }

.s-hr {
  border: none;
  border-top: 1px solid rgba(59, 130, 246, 0.12);
  margin-bottom: 0.9rem;
}
.s-card-featured .s-hr { border-color: rgba(255, 255, 255, 0.09); }

/* ── benefits ── */
.s-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  flex: 1;
}
.s-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.s-chk {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.35rem;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.08rem;
}
.s-chk svg { width: 55%; height: 55%; }
.s-card-featured .s-chk {
  background: rgba(59, 130, 246, 0.28);
  color: #93c5fd;
}
.s-blabel {
  font-size: clamp(0.75rem, 2.8vw, 0.83rem);
  font-weight: 600;
  color: #0d2456;
  display: block;
  margin-bottom: 0.08rem;
}
.s-card-featured .s-blabel { color: #f0f6ff; }
.s-bdesc {
  font-size: clamp(0.65rem, 2.3vw, 0.73rem);
  font-weight: 400;
  color: rgba(15, 45, 110, 0.48);
  line-height: 1.45;
  display: block;
}
.s-card-featured .s-bdesc { color: rgba(191, 219, 254, 0.55); }

/* ── buttons ── */
.s-btn {
  width: 100%;
  border: none;
  border-radius: 0.85rem;
  padding: 0.9rem 1.25rem;
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.78rem, 3vw, 0.88rem);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  letter-spacing: 0.01em;
}
.s-btn:active { transform: scale(0.97); }
.s-btn:disabled { opacity: 0.65; cursor: not-allowed; }

.s-btn-amber {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #0a1f44;
}
.s-btn-amber:hover { opacity: 0.9; }

.s-btn-ghost {
  background: rgba(59, 130, 246, 0.08);
  color: #1a3570;
  border: 1.5px solid rgba(59, 130, 246, 0.24);
}
.s-btn-ghost:hover { background: rgba(59, 130, 246, 0.14); }

/* ── guarantee ── */
.s-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: clamp(0.65rem, 2.3vw, 0.73rem);
  color: rgba(15, 45, 110, 0.42);
  margin-top: 1.1rem;
  text-align: center;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}