/* Real DOM styling for the memoir library. Decorative art never replaces controls. */
#app-root > div > div:has(> main input[placeholder="搜索回忆录内容..."]) {
  min-height: 100svh !important;
  background:
    linear-gradient(rgba(255, 248, 231, .08), rgba(255, 248, 231, .14)),
    url("/assets/memoir-home-original.png") center / cover fixed !important;
}

#app-root > div > div.memoir-shelf {
  min-height: 100svh !important;
  background:
    linear-gradient(rgba(255, 248, 231, .08), rgba(255, 248, 231, .14)),
    url("/assets/memoir-home-original.png") center / cover fixed !important;
}

/* Old decorative collage is intentionally disabled: this page uses one original room scene. */
#app-root > div > div.memoir-shelf::before,
#app-root > div > div.memoir-shelf::after {
  display: none !important;
}

#app-root > div > div.memoir-shelf > header {
  position: relative !important;
  min-height: 5.7rem !important;
  padding: .85rem clamp(1.5rem, 4vw, 3.4rem) !important;
  background: rgba(255, 253, 247, .92) !important;
  border-bottom: 1px solid rgba(174, 104, 33, .22) !important;
  box-shadow: 0 3px 13px rgba(112, 70, 29, .1) !important;
  z-index: 2;
}

#app-root > div > div.memoir-shelf > header h2 {
  position: absolute !important;
  top: .7rem !important;
  left: 50% !important;
  margin: 0 !important;
  color: #783b18 !important;
  font-size: clamp(1.65rem, 2.5vw, 2.4rem) !important;
  font-weight: 900 !important;
  transform: translateX(-50%) !important;
}

#app-root > div > div.memoir-shelf > header h2::after {
  display: block;
  margin-top: .2rem;
  color: #b06532;
  content: "\73CD\85CF\6BCF\4E00\6BB5\65F6\5149\00A0\00B7\00A0\8BA9\56DE\5FC6\66F4\6E29\6696";
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

#app-root > div > div.memoir-shelf > main {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: flex-start !important;
  max-width: 68rem !important;
  min-height: calc(100svh - 5.7rem) !important;
  padding: 1.7rem 1.4rem !important;
  overflow-y: auto !important;
}

#app-root > div > div.memoir-shelf > main > div {
  width: 100% !important;
  max-width: none !important;
  min-height: 41rem !important;
  margin: 0 auto !important;
  padding: 2.2rem 2.45rem !important;
  border: 2px solid rgba(255, 255, 255, .94) !important;
  border-radius: 2rem !important;
  background: rgba(255, 253, 248, .92) !important;
  box-shadow: 0 18px 38px rgba(108, 63, 23, .15) !important;
}

#app-root > div > div.memoir-shelf > main > div > div:first-child {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.15rem !important;
}

#app-root > div > div.memoir-shelf > main > div > div:first-child button {
  position: relative !important;
  min-height: 6.5rem !important;
  padding: 1.15rem 3.1rem 1.1rem 1.25rem !important;
  border: 1px solid !important;
  border-radius: 1.15rem !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  text-align: left !important;
  box-shadow: 0 6px 15px rgba(118, 72, 30, .09) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

#app-root > div > div.memoir-shelf > main > div > div:first-child button::after {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  color: currentColor;
  content: "\203A";
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-55%);
}

#app-root > div > div.memoir-shelf > main > div > div:first-child button:nth-child(1) { color: #8a5321 !important; border-color: #e7c089 !important; background: linear-gradient(135deg, #fff7ec, #ffeccf) !important; }
#app-root > div > div.memoir-shelf > main > div > div:first-child button:nth-child(2) { color: #7a5a2a !important; border-color: #e3d2b0 !important; background: linear-gradient(135deg, #fdf6ea, #f6ecd8) !important; }
#app-root > div > div.memoir-shelf > main > div > div:first-child button:nth-child(3) { color: #9a5a2a !important; border-color: #e6c39c !important; background: linear-gradient(135deg, #fff1e6, #ffe6d2) !important; }
#app-root > div > div.memoir-shelf > main > div > div:first-child button:hover { transform: translateY(-3px) !important; box-shadow: 0 11px 21px rgba(118, 72, 30, .16) !important; }

#app-root > div > div.memoir-shelf > main input {
  height: 4.1rem !important;
  margin: 1.7rem 0 .45rem !important;
  padding-left: 4rem !important;
  border: 1px solid #f2dfbb !important;
  border-radius: 2rem !important;
  background: #fffdf7 !important;
  color: #73411f !important;
  font-size: 1.15rem !important;
  box-shadow: inset 0 1px 2px rgba(129, 72, 28, .04) !important;
}

#app-root > div > div.memoir-shelf > main > div > div.flex-1.flex.flex-col {
  position: relative !important;
  min-height: 24rem !important;
  padding-top: 15rem !important;
  color: #9a8269 !important;
}

#app-root > div > div.memoir-shelf > main > div > div.flex-1.flex.flex-col > svg { display: none !important; }

.memoir-empty-art {
  position: absolute;
  top: 2.2rem;
  left: 50%;
  width: 16rem;
  height: 10rem;
  border: .5rem solid #805536;
  border-radius: .7rem 1.4rem 1.4rem .7rem;
  background:
    linear-gradient(90deg, transparent 49%, #cfaa7a 49% 51%, transparent 51%),
    repeating-linear-gradient(0deg, #fff7e7, #fff7e7 1.35rem, #f1d7aa 1.4rem);
  box-shadow: 0 12px 21px rgba(117, 73, 31, .17), inset 0 0 0 .5rem rgba(255, 249, 235, .9);
  transform: translateX(-50%) rotate(-3deg);
}

.memoir-empty-art::before,
.memoir-empty-art::after {
  position: absolute;
  width: 3rem;
  height: 2.45rem;
  border: .22rem solid #fffdf6;
  background: linear-gradient(135deg, #f4ba75, #ffe6a7 55%, #8db1a2);
  box-shadow: 0 3px 6px rgba(116, 70, 29, .22);
  content: "";
}
.memoir-empty-art::before { top: 1.7rem; left: 1.35rem; transform: rotate(-6deg); }
.memoir-empty-art::after { right: 1.35rem; bottom: 1.45rem; transform: rotate(6deg); }

#app-root > div > div.memoir-shelf > main > div > div.flex-1.flex.flex-col p:first-of-type {
  color: #813d18 !important;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
}

#app-root > div > div.memoir-shelf > main > div > div.flex-1.flex.flex-col p:nth-of-type(2) { color: #a68c72 !important; font-size: 1.08rem !important; }

.memoir-record-start {
  min-width: 19rem;
  min-height: 4.15rem;
  margin: 1.45rem auto 0;
  padding: .85rem 1.8rem !important;
  border: 0 !important;
  border-radius: 2rem !important;
  background: linear-gradient(135deg, #ffb33e, #ff7918) !important;
  color: #fff !important;
  font-size: 1.22rem !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 18px rgba(211, 103, 17, .25) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}
.memoir-record-start::before { margin-right: .6rem; content: "+"; font-size: 1.7rem; vertical-align: -1px; }
.memoir-record-start:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 22px rgba(211, 103, 17, .31) !important; }

@media (max-width: 760px) {
  #app-root > div > div.memoir-shelf::before,
  #app-root > div > div.memoir-shelf::after { display: none; }
  #app-root > div > div.memoir-shelf > header h2 { font-size: 1.45rem !important; }
  #app-root > div > div.memoir-shelf > header h2::after { display: none; }
  #app-root > div > div.memoir-shelf > main { padding: 1rem !important; }
  #app-root > div > div.memoir-shelf > main > div { min-height: 39rem !important; padding: 1.2rem !important; }
  #app-root > div > div.memoir-shelf > main > div > div:first-child { grid-template-columns: 1fr !important; }
  .memoir-record-start { min-width: 16rem; }
}

/* A laptop-height layout keeps the real empty-state action in one view. */
@media (min-width: 761px) and (max-height: 820px) {
  #app-root > div > div.memoir-shelf > main {
    min-height: calc(100svh - 5.7rem) !important;
    padding: .85rem 1.25rem !important;
  }

  #app-root > div > div.memoir-shelf > main > div {
    min-height: 0 !important;
    padding: 1.25rem 2.1rem !important;
  }

  #app-root > div > div.memoir-shelf > main > div > div:first-child button {
    min-height: 5.2rem !important;
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
  }

  #app-root > div > div.memoir-shelf > main input {
    height: 3.35rem !important;
    margin: 1rem 0 .1rem !important;
  }

  #app-root > div > div.memoir-shelf > main > div > div.flex-1.flex.flex-col {
    min-height: 18.5rem !important;
    padding-top: 10.9rem !important;
  }

  .memoir-empty-art {
    top: 1.15rem;
    width: 12.8rem;
    height: 7.9rem;
  }

  .memoir-empty-art::before { top: 1.1rem; left: .85rem; }
  .memoir-empty-art::after { right: .85rem; bottom: .9rem; }

  #app-root > div > div.memoir-shelf > main > div > div.flex-1.flex.flex-col p:first-of-type {
    font-size: 1.5rem !important;
  }

  .memoir-record-start {
    min-height: 3.55rem;
    margin-top: .75rem;
  }
}