/* Personal settings: presentation only. The existing inputs and click handlers remain intact. */
.memoir-settings-polish {
  min-height: 100svh !important;
  background: linear-gradient(rgba(255, 249, 235, .12), rgba(255, 249, 235, .18)), url("/assets/settings-warm-study.png") center / cover fixed !important;
}

.memoir-settings-polish > header {
  position: relative !important;
  z-index: 2;
  min-height: 5.65rem !important;
  padding: .8rem clamp(1.4rem, 4vw, 3.2rem) !important;
  background: rgba(255, 253, 247, .93) !important;
  border-bottom: 1px solid rgba(173, 98, 29, .20) !important;
  box-shadow: 0 3px 13px rgba(112, 70, 29, .10) !important;
}

.memoir-settings-polish > header h2 {
  position: absolute !important;
  top: 1.42rem;
  left: 50%;
  margin: 0 !important;
  color: #783b18 !important;
  font-size: clamp(1.65rem, 2.35vw, 2.35rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  transform: translateX(-50%);
}

.memoir-settings-polish > header > button:first-child {
  min-width: 7.3rem !important;
  min-height: 3.25rem !important;
  padding: .55rem 1.15rem !important;
  border: 1px solid #f1d295 !important;
  border-radius: 1.65rem !important;
  background: linear-gradient(180deg, #fff9de, #ffedb8) !important;
  color: #9a4b17 !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  box-shadow: 0 .35rem .8rem rgba(129, 81, 27, .12) !important;
}
.memoir-settings-polish > header > button:first-child:hover { transform: translateY(-1px) !important; filter: brightness(1.02); }

.memoir-settings-polish > header > button:last-child {
  width: 3.45rem !important;
  height: 3.45rem !important;
  min-width: 3.45rem !important;
  padding: .15rem !important;
  border: 2px solid #ffd462 !important;
  border-radius: 50% !important;
  background: #fff6db !important;
  box-shadow: 0 .3rem .8rem rgba(129, 81, 27, .14) !important;
}

.memoir-settings-polish > main {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: calc(100svh - 5.65rem) !important;
  padding: clamp(1.55rem, 3.2vh, 3.1rem) 1.15rem !important;
  overflow-y: auto !important;
}

.memoir-settings-polish > main > div {
  width: min(100%, 54rem) !important;
  margin: 0 auto !important;
  padding: clamp(1.55rem, 2.7vw, 2.7rem) !important;
  border: 2px solid rgba(255, 255, 255, .96) !important;
  border-radius: 1.8rem !important;
  background: rgba(255, 253, 248, .95) !important;
  box-shadow: 0 1.2rem 2.6rem rgba(104, 63, 26, .18) !important;
}
.memoir-settings-polish > main > div > p:first-of-type { display: none !important; }

.settings-welcome {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.55rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid #f5e7c8;
  border-radius: 1.2rem;
  background: linear-gradient(110deg, #fff8e8, #fffdf7 58%, #fff6e4);
}
.settings-welcome-icon {
  position: relative;
  width: 3.15rem;
  height: 3.15rem;
  border: .26rem solid #f59a16;
  border-radius: 50%;
}
.settings-welcome-icon::before { position: absolute; top: .34rem; left: 50%; width: .8rem; height: .8rem; border: .2rem solid #f59a16; border-radius: 50%; content: ""; transform: translateX(-50%); }
.settings-welcome-icon::after { position: absolute; right: .4rem; bottom: .18rem; left: .4rem; height: .95rem; border: .2rem solid #f59a16; border-bottom: 0; border-radius: 1rem 1rem 0 0; content: ""; }
.settings-welcome h3 { margin: 0; color: #7a3b19; font-size: 1.55rem; font-weight: 900; letter-spacing: 0; }
.settings-welcome p { margin: .23rem 0 0; color: #a77c58; font-size: 1rem; }
.settings-welcome-note { color: #bb7745; font-size: .82rem; font-weight: 700; line-height: 1.55; text-align: right; }

.memoir-settings-polish .space-y-6 { display: grid !important; gap: 1.25rem !important; }
.memoir-settings-polish label { display: flex !important; align-items: center; gap: .5rem; color: #843b18 !important; font-size: 1.08rem !important; font-weight: 900 !important; }
.memoir-settings-polish label::before { width: .54rem; height: .54rem; border: 2px solid #ed8a16; border-radius: 50%; content: ""; }
.memoir-settings-polish input {
  min-height: 4.1rem !important;
  padding: .85rem 1.28rem !important;
  border: 1px solid #f1dba7 !important;
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #684126 !important;
  font-size: 1.12rem !important;
  box-shadow: inset 0 1px 2px rgba(129, 72, 28, .04) !important;
}
.memoir-settings-polish input:focus { border-color: #f29b21 !important; box-shadow: 0 0 0 3px rgba(242, 155, 33, .13) !important; }

.memoir-settings-polish .space-y-6 > button {
  position: relative !important;
  min-height: 4.25rem !important;
  margin-top: .45rem !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, .82) !important;
  border-radius: 2.1rem !important;
  background: linear-gradient(135deg, #ffb43d, #ff7418) !important;
  color: #fff !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  box-shadow: 0 .72rem 1.35rem rgba(211, 103, 17, .25) !important;
}
.memoir-settings-polish .space-y-6 > button::after { position: absolute; top: 0; left: -16%; width: 32%; height: 100%; background: rgba(255, 255, 255, .18); content: ""; transform: skewX(-25deg); }
.memoir-settings-polish .space-y-6 > button:hover { filter: brightness(1.03); transform: translateY(-1px) !important; }
.memoir-settings-polish .space-y-6 > button:disabled { opacity: .72; transform: none !important; }

.settings-privacy-note { margin: 1.25rem 0 0 !important; color: #ad9177 !important; font-size: .88rem !important; text-align: center; }
.settings-privacy-note::before { display: inline-block; width: .66rem; height: .66rem; margin-right: .42rem; border: 2px solid #b18b67; border-radius: 2px; content: ""; vertical-align: -1px; }

@media (max-width: 760px) {
  .memoir-settings-polish > header h2 { font-size: 1.4rem !important; }
  .memoir-settings-polish > main { padding: 1rem !important; }
  .memoir-settings-polish > main > div { padding: 1.2rem !important; }
  .settings-welcome { grid-template-columns: 3rem 1fr; padding: 1rem; }
  .settings-welcome-note { display: none; }
}