/* =========================================================
   Page Background Reset
   ========================================================= */

body.settings-page-active,
body.settings-page-active html{
  background: transparent !important;
}

body.settings-page-active main.site-container{
  background: transparent !important;
}


/* =========================================================
   Theme Tokens
   ========================================================= */

body.theme-dark{
  --panel: rgba(15, 15, 15, .74);
  --panel-border: rgba(255,255,255,.10);
  --text: #ffffff;
  --muted: rgba(255,255,255,.72);

  --input-bg: rgba(255,255,255,.06);
  --input-border: rgba(255,255,255,.16);

  --btn-surface: rgba(0,0,0,.34);
  --btn-surface-hover: rgba(0,0,0,.50);
  --btn-border: rgba(255,255,255,.16);

  --success-bg: rgba(21,128,61,.14);
  --success-border: rgba(21,128,61,.30);
  --success-text: #86efac;

  --error-bg: rgba(220,38,38,.12);
  --error-border: rgba(220,38,38,.26);
  --error-text: #fca5a5;
}

body.theme-light{
  --panel: rgba(255,255,255,.86);
  --panel-border: rgba(0,0,0,.12);
  --text: #111111;
  --muted: rgba(0,0,0,.65);

  --input-bg: rgba(255,255,255,.94);
  --input-border: rgba(0,0,0,.14);

  --btn-surface: #ffffff;
  --btn-surface-hover: #f2f2f2;
  --btn-border: rgba(0,0,0,.14);

  --success-bg: rgba(21,128,61,.10);
  --success-border: rgba(21,128,61,.22);
  --success-text: #15803d;

  --error-bg: rgba(220,38,38,.08);
  --error-border: rgba(220,38,38,.16);
  --error-text: #b91c1c;
}


/* =========================================================
   Background Layer
   ========================================================= */

.settings-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.settings-bg::before,
.settings-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  filter: brightness(.85);
}

.settings-bg::before{
  background-image: url("/static/main_img/settings/settings_bg_LIGHT.webp");
}

.settings-bg::after{
  background-image: url("/static/main_img/settings/settings_bg_NIGHT.webp");
}

body.theme-light .settings-bg::before{
  opacity: 1;
}

body.theme-dark .settings-bg::after{
  opacity: 1;
}


/* =========================================================
   Foreground Layers
   ========================================================= */

.profile-settings-wrapper,
.settings-top-links{
  position: relative;
  z-index: 2;
}


/* =========================================================
   Top Navigation
   ========================================================= */

.settings-top-links{
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  display: flex;
  gap: 10px;
}

.top-link-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  color: var(--text, #111);
  background: var(--btn-surface, #fff);
  border: 1px solid var(--btn-border, rgba(0,0,0,.14));
  backdrop-filter: blur(6px);
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .08s ease;
}

.top-link-btn:hover{
  background: var(--btn-surface-hover, #f2f2f2);
}

.top-link-btn:active{
  transform: translateY(1px);
}


/* =========================================================
   Main Wrapper
   ========================================================= */

.profile-settings-wrapper{
  width: min(900px, 94vw);
  margin: 78px auto 28px;
}

.profile-settings-card{
  padding: 18px 18px 16px;
  border-radius: 22px;
  color: var(--text, #111);
  background: var(--panel, rgba(255,255,255,.86));
  border: 1px solid var(--panel-border, rgba(0,0,0,.12));
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}


/* =========================================================
   Header
   ========================================================= */

.support-header{
  margin-bottom: 10px;
}

.profile-settings-title{
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.1;
  font-weight: 900;
  color: var(--text, #111);
}

.support-subtitle{
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, rgba(0,0,0,.65));
}


/* =========================================================
   Feedback Messages
   ========================================================= */

.support-success,
.support-errors{
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
}

.support-success{
  background: var(--success-bg, rgba(21,128,61,.10));
  border: 1px solid var(--success-border, rgba(21,128,61,.22));
  color: var(--success-text, #15803d);
  font-weight: 800;
}

.support-errors{
  background: var(--error-bg, rgba(220,38,38,.08));
  border: 1px solid var(--error-border, rgba(220,38,38,.16));
  color: var(--error-text, #b91c1c);
  font-weight: 700;
}

.support-errors ul{
  margin: 0;
  padding-left: 18px;
}

.support-errors li + li{
  margin-top: 4px;
}


/* =========================================================
   Form Layout
   ========================================================= */

.support-form{
  margin: 0;
}

.support-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.support-col{
  min-width: 0;
}


/* =========================================================
   Form Sections
   ========================================================= */

.settings-field{
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

body.theme-dark .settings-field{
  border-top-color: rgba(255,255,255,.08);
}

.settings-field:first-of-type{
  padding-top: 6px;
  border-top: 0;
}

.settings-label{
  display: block;
  margin-bottom: 8px;
  font-size: .92rem;
  font-weight: 800;
  color: var(--text, #111);
}

.settings-hint{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted, rgba(0,0,0,.65));
}


/* =========================================================
   Input Controls
   ========================================================= */

.profile-settings-card input[type="text"],
.profile-settings-card input[type="email"],
.profile-settings-card select,
.profile-settings-card textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--text, #111);
  background: var(--input-bg, #fff);
  border: 1px solid var(--input-border, rgba(0,0,0,.14));
  outline: none;
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.profile-settings-card textarea{
  min-height: 140px;
  resize: vertical;
}

.profile-settings-card input[type="text"]:focus,
.profile-settings-card input[type="email"]:focus,
.profile-settings-card select:focus,
.profile-settings-card textarea:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}


/* =========================================================
   Checkbox Row
   ========================================================= */

.support-inline{
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-inline input[type="checkbox"]{
  margin: 0;
}

.support-inline-label{
  user-select: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #111);
}


/* =========================================================
   File Input
   ========================================================= */

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

.profile-settings-card input[type="file"]{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--text, #111);
  background: var(--input-bg, #fff);
  border: 1px solid var(--input-border, rgba(0,0,0,.14));
}

.filebox-hint{
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted, rgba(0,0,0,.65));
}


/* =========================================================
   Auth Note
   ========================================================= */

.support-auth-note{
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted, rgba(0,0,0,.65));
}


/* =========================================================
   Actions
   ========================================================= */

.support-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  color: var(--text, #111);
  background: var(--btn-surface, #fff);
  border: 1px solid var(--btn-border, rgba(0,0,0,.14));
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .08s ease;
}

.btn:hover{
  background: var(--btn-surface-hover, #f2f2f2);
}

.btn:active{
  transform: translateY(1px);
}

.btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.btn-primary{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 6px 18px rgba(37,99,235,.10);
}

.btn-primary:hover{
  border-color: rgba(37,99,235,.70);
  box-shadow: 0 8px 22px rgba(37,99,235,.14);
}

.btn-ghost{
  background: transparent;
}

.btn-ghost:hover{
  background: rgba(0,0,0,.06);
}

body.theme-dark .btn-ghost:hover{
  background: rgba(255,255,255,.08);
}


/* =========================================================
   Responsive
   ========================================================= */

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

@media (max-width: 760px){
  .settings-top-links{
    top: 12px;
    left: 12px;
  }

  .profile-settings-wrapper{
    width: min(96vw, 900px);
    margin-top: 72px;
  }

  .profile-settings-card{
    padding: 16px 14px 14px;
    border-radius: 18px;
  }

  .support-actions{
    justify-content: stretch;
  }

  .support-actions .btn{
    width: 100%;
  }
}