/* ── Auth Screen ── */
.auth-overlay {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
}
.auth-logo { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--acc); text-align: center; margin-bottom: 6px; }
.auth-logo span { color: var(--acc2); }
.auth-sub { font-size: 13px; color: var(--mut); text-align: center; margin-bottom: 28px; }

.auth-tabs { display: flex; gap: 0; background: var(--surf2); border-radius: 9px; padding: 3px; margin-bottom: 22px; }
.auth-tab {
  flex: 1; padding: 7px; border-radius: 7px; border: none;
  background: transparent; color: var(--mut);
  font-family: var(--body); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s;
}
.auth-tab.active { background: var(--surf); color: var(--txt); }

.auth-err {
  background: #ff6b9d18; border: 1px solid #ff6b9d44;
  border-radius: 7px; padding: 9px 12px;
  font-size: 12px; color: var(--acc2);
  margin-bottom: 12px; display: none;
}
.auth-btn {
  width: 100%; padding: 11px; border-radius: 9px;
  background: var(--acc); border: none; color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: var(--body); margin-top: 6px; transition: opacity .2s;
}
.auth-btn:hover { opacity: .88; }

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0; color: var(--mut); font-size: 12px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--bdr); }

.oauth-btn {
  width: 100%; padding: 10px; border-radius: 8px;
  background: transparent; border: 1px solid var(--bdr);
  color: var(--txt); font-size: 13px; cursor: pointer;
  font-family: var(--body); margin-bottom: 8px; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.oauth-btn:hover { border-color: var(--acc); background: var(--surf2); }
.auth-hint { font-size: 11px; color: var(--mut); text-align: center; margin-top: 14px; }

.strength-bar { height: 3px; background: var(--bdr); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.strength-fill { height: 100%; border-radius: 2px; transition: all .3s; width: 0%; }

/* Profile settings */
.profile-pg { padding: 18px; max-width: 700px; margin: 0 auto; }
.profile-header {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 20px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.profile-av-lg {
  width: 64px; height: 64px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; font-family: var(--mono); flex-shrink: 0;
}
.profile-name { font-size: 18px; font-weight: 600; margin-bottom: 3px; }
.profile-joined { font-size: 12px; color: var(--mut); }

.ps-card { background: var(--surf2); border-radius: 8px; padding: 10px 12px; text-align: center; }
.ps-num { font-size: 20px; font-weight: 700; font-family: var(--mono); }
.ps-lbl { font-size: 10px; color: var(--mut); margin-top: 2px; }

.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--bdr);
}
.setting-row:last-child { border-bottom: none; }
.setting-lbl { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.setting-sub { font-size: 11px; color: var(--mut); }

.toggle {
  width: 36px; height: 20px; border-radius: 10px; border: none;
  cursor: pointer; position: relative; transition: background .2s; flex-shrink: 0;
}
.toggle.on { background: var(--acc); }
.toggle.off { background: var(--bdr); }
.toggle::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; top: 3px; transition: left .2s;
}
.toggle.on::after { left: 19px; }
.toggle.off::after { left: 3px; }

.danger-zone {
  background: #ff6b9d12; border: 1px solid #ff6b9d33;
  border-radius: 9px; padding: 14px 16px; margin-top: 14px;
}