:root{
  --tc-bg: #f7f4ff;
  --tc-text: #24173a;
  --tc-muted: rgba(36,23,58,.62);

  --tc-primary: #6d4dff;
  --tc-primary-2: #8b5cf6;
  --tc-primary-soft: #efe8ff;

  --tc-surface: rgba(255,255,255,.86);
  --tc-surface-2: rgba(255,255,255,.94);

  --tc-stroke: rgba(109,77,255,.12);
  --tc-stroke-2: rgba(109,77,255,.18);

  --tc-shadow: 0 20px 50px rgba(44,25,84,.08);
  --tc-shadow-2: 0 12px 28px rgba(44,25,84,.06);
  --tc-shadow-3: 0 8px 20px rgba(44,25,84,.05);

  --tc-r1: 16px;
  --tc-r2: 22px;
  --tc-r3: 28px;

  --tc-gap: 22px;
  --tc-page: 24px;
}

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

body{
  background:
    radial-gradient(1200px 520px at 30% 0%, rgba(161,123,255,.18), transparent 60%),
    radial-gradient(900px 420px at 100% 24%, rgba(109,77,255,.12), transparent 55%),
    radial-gradient(900px 520px at 0% 100%, rgba(161,123,255,.10), transparent 55%),
    var(--tc-bg);
  color: var(--tc-text);
}

.tcSettingsPage{
  width: 100%;
  padding: var(--tc-page);
}

.tcSettingsLayout{
  width: 100%;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 330px;
  gap: var(--tc-gap);
  align-items: start;
}

.tcSettingsSidebar,
.tcSettingsCard,
.tcAsideCard,
.tcSettingsHero{
  background: var(--tc-surface);
  border: 1px solid var(--tc-stroke);
  border-radius: var(--tc-r3);
  box-shadow: var(--tc-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tcSettingsSidebar{
  padding: 16px;
  position: sticky;
  top: 100px;
}

.tcSettingsSidebar__head{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 18px;
  border-bottom: 1px solid rgba(109,77,255,.10);
  margin-bottom: 12px;
}

.tcSettingsSidebar__icon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--tc-primary-soft);
  font-size: 20px;
}

.tcSettingsSidebar__title{
  font-size: 28px;
  font-weight: 950;
}

.tcSettingsNav{
  display: grid;
  gap: 8px;
}

.tcSettingsNav__item{
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 16px;
  font-weight: 850;
  color: rgba(36,23,58,.84);
  transition: .2s ease;
}

.tcSettingsNav__item:hover{
  background: rgba(255,255,255,.72);
}

.tcSettingsNav__item.is-active{
  background: var(--tc-primary-soft);
  color: var(--tc-primary);
}

.tcSettingsNav__item.is-danger{
  color: #c2456d;
}

.tcSettingsMain{
  min-width: 0;
  display: grid;
  gap: 20px;
  margin-top: 80px;
}
.tcSettingsHero{
  padding: 24px;
}

.tcSettingsHero h1{
  margin: 0 0 8px;
  font-size: 38px;
  line-height: 1.08;
  font-weight: 950;
}

.tcSettingsHero p{
  margin: 0;
  color: var(--tc-muted);
  font-weight: 700;
}

.tcFlash{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 800;
}

.tcFlash.is-success{
  background: rgba(24,169,87,.10);
  color: #167345;
  border: 1px solid rgba(24,169,87,.18);
}

.tcFlash.is-error{
  background: rgba(211,61,99,.10);
  color: #b13658;
  border: 1px solid rgba(211,61,99,.18);
}

.tcSettingsCard{
  padding: 22px;
}

.tcSettingsCard__head{
  margin-bottom: 18px;
}

.tcSettingsCard__head h2{
  margin: 0;
  font-size: 20px;
  font-weight: 950;
}

.tcProfileTop{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.tcProfileTop__avatar{
  width: 98px;
  height: 98px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--tc-stroke-2);
  box-shadow: var(--tc-shadow-3);
}

.tcProfileTop__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tcProfileTop__name{
  font-size: 34px;
  line-height: 1.1;
  font-weight: 950;
}

.tcProfileTop__pseudo{
  margin-top: 6px;
  color: var(--tc-muted);
  font-weight: 700;
}

.tcFormGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.tcField{
  display: grid;
  gap: 8px;
}

.tcField--full{
  grid-column: 1 / -1;
}

.tcField label{
  font-weight: 850;
  color: rgba(36,23,58,.84);
}

.tcInput{
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(109,77,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  padding: 0 14px;
  color: var(--tc-text);
  box-shadow: var(--tc-shadow-3);
  outline: none;
}

textarea.tcInput{
  min-height: 130px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.tcInput:focus{
  border-color: rgba(109,77,255,.28);
  box-shadow: 0 14px 28px rgba(109,77,255,.10);
}

.tcFormActions{
  display: flex;
  justify-content: flex-start;
  padding-top: 6px;
}

.tcButton{
  min-height: 48px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid var(--tc-stroke-2);
  background: rgba(255,255,255,.88);
  color: var(--tc-text);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--tc-shadow-3);
  transition: .2s ease;
}

.tcButton:hover{
  transform: translateY(-1px);
}

.tcButton--primary{
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--tc-primary), var(--tc-primary-2));
  box-shadow: 0 16px 30px rgba(109,77,255,.22);
}

.tcButton--full{
  width: 100%;
}

.tcInfoList{
  display: grid;
  gap: 14px;
}

.tcInfoRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(109,77,255,.10);
}

.tcInfoRow__label{
  color: var(--tc-muted);
  font-weight: 800;
}

.tcInfoRow__value{
  font-weight: 900;
  text-align: right;
}

.tcToggleList{
  display: grid;
  gap: 16px;
}

.tcToggleRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(109,77,255,.10);
  font-weight: 850;
}

.tcToggleRow input{
  display: none;
}

.tcSwitch{
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: rgba(36,23,58,.12);
  transition: .2s ease;
  flex: 0 0 auto;
}

.tcSwitch::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
  transition: .2s ease;
}

.tcToggleRow input:checked + .tcSwitch{
  background: linear-gradient(135deg, var(--tc-primary), var(--tc-primary-2));
}

.tcToggleRow input:checked + .tcSwitch::after{
  transform: translateX(22px);
}

.tcSettingsAside{
  min-width: 0;
  display: grid;
  gap: 20px;
    margin-top: 80px;
}

.tcAsideCard{
  padding: 22px;
}

.tcAsideCard__head{
  margin-bottom: 16px;
}

.tcAsideCard__head h3{
  margin: 0;
  font-size: 18px;
  font-weight: 950;
}

.tcPublicProfile{
  display: grid;
  gap: 14px;
}

.tcPublicProfile__avatar{
  width: 86px;
  height: 86px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--tc-stroke-2);
}

.tcPublicProfile__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tcPublicProfile__name{
  font-size: 28px;
  font-weight: 950;
  line-height: 1.1;
}

.tcPublicProfile__pseudo{
  color: var(--tc-muted);
  font-weight: 700;
}

.tcPublicProfile__stats{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--tc-muted);
  font-weight: 700;
}

.tcPublicProfile__stats strong{
  color: var(--tc-text);
}

.tcMiniInfo{
  display: grid;
  gap: 12px;
}

.tcMiniInfo__row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(109,77,255,.10);
}

.tcMiniInfo__row span{
  color: var(--tc-muted);
  font-weight: 800;
}

.tcMiniInfo__row strong{
  font-weight: 900;
  text-align: right;
}

/* ==========================
   Responsive
   ========================== */
@media (max-width: 1380px){
  .tcSettingsLayout{
    grid-template-columns: 260px minmax(0, 1fr) 300px;
  }

  .tcProfileTop__name{
    font-size: 30px;
  }
}

@media (max-width: 1120px){
  .tcSettingsLayout{
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .tcSettingsAside{
    display: none;
  }
}

@media (max-width: 860px){
  .tcSettingsPage{
    padding: 14px;
  }

  .tcSettingsLayout{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tcSettingsSidebar{
    position: static;
  }

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

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

  .tcField--full{
    grid-column: auto;
  }

  .tcProfileTop{
    flex-direction: column;
    align-items: flex-start;
  }

  .tcProfileTop__name{
    font-size: 26px;
  }

  .tcSettingsHero h1{
    font-size: 30px;
  }
}

@media (max-width: 560px){
  .tcSettingsNav{
    grid-template-columns: 1fr;
  }

  .tcSettingsHero,
  .tcSettingsCard,
  .tcAsideCard,
  .tcSettingsSidebar{
    border-radius: 22px;
  }

  .tcSettingsHero h1{
    font-size: 26px;
  }

  .tcProfileTop__avatar{
    width: 82px;
    height: 82px;
    border-radius: 22px;
  }

  .tcPublicProfile__name{
    font-size: 24px;
  }

  .tcInfoRow,
  .tcMiniInfo__row{
    flex-direction: column;
    align-items: flex-start;
  }

  .tcInfoRow__value,
  .tcMiniInfo__row strong{
    text-align: left;
  }
}