/* My memoir library: the saved-memory controls stay live, with the same warm family-room appearance. */
#app-root > div > div:has(> main > div > div.relative.mb-6 > input) {
  min-height: 100svh !important;
  background-color: #fff8e8 !important;
  background-image: linear-gradient(rgba(255,248,232,.62), rgba(255,250,240,.76)), url("/assets/memoir-gallery-room.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
  background-attachment: fixed, fixed !important;
}

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) > header {
  min-height: 5.25rem !important;
  background: rgba(255,253,247,.95) !important;
  border-bottom: 1px solid rgba(173,98,29,.20) !important;
  box-shadow: 0 3px 12px rgba(112,70,29,.10) !important;
}

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) > header h2 {
  color: #783b18 !important;
  font-size: clamp(1.65rem,2.3vw,2.25rem) !important;
  font-weight: 900 !important;
}

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) > header > button {
  border: 1px solid #f1d295 !important;
  border-radius: 1.45rem !important;
  background: linear-gradient(180deg,#fff9de,#ffedb8) !important;
  color: #9a4b17 !important;
  box-shadow: 0 .3rem .75rem rgba(129,81,27,.12) !important;
}

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) > main {
  max-width: 70rem !important;
  padding: 2rem 1.2rem 2.5rem !important;
}

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) > main > div {
  padding: clamp(1.4rem,2.5vw,2.15rem) !important;
  border: 2px solid rgba(255,255,255,.94) !important;
  border-radius: 1.8rem !important;
  background: rgba(255,253,248,.95) !important;
  box-shadow: 0 18px 38px rgba(101,59,26,.16) !important;
}

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main > div > div.flex.flex-wrap > button {
  min-height: 5.3rem !important;
  border-radius: 1.35rem !important;
  background: #fff9ec !important;
  border-color: #efd6a4 !important;
  color: #8e511e !important;
  box-shadow: 0 .45rem 1rem rgba(112,70,29,.08) !important;
}

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main > div > div.flex.flex-wrap > button:nth-child(1) { background: linear-gradient(135deg,#f5f9ff,#e8f2ff) !important; color:#196ad5 !important; }
#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main > div > div.flex.flex-wrap > button:nth-child(2) { background: linear-gradient(135deg,#f1fff5,#e2f8e9) !important; color:#15924c !important; }
#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main > div > div.flex.flex-wrap > button:nth-child(3) { background: linear-gradient(135deg,#fff7eb,#ffeedb) !important; color:#e15e17 !important; }

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main input {
  border-color: #efd7a4 !important;
  background: #fffdf8 !important;
  color: #633615 !important;
  box-shadow: inset 0 1px 3px rgba(105,61,22,.06) !important;
}

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main input::placeholder { color: #bb9877 !important; }
#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main input:focus { border-color:#f39a29 !important; box-shadow:0 0 0 3px rgba(245,163,53,.22) !important; }

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main p,
#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main h3 { color: #85502b !important; }

#app-root > div > div:has(> main > div > div.relative.mb-6 > input) main svg { color: #ec8d1e !important; }