/* Memory Lane owns its visual system here so older app experiments cannot compete. */
html body .app-shell .map-stage.memories-focus .memory-database-page.side-panel,
html body main.app-shell section.map-stage.memories-focus .memory-database-page.side-panel {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100dvh !important;
  padding: clamp(96px, 10vw, 118px) clamp(18px, 4vw, 52px) 128px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #123640 !important;
  background: linear-gradient(180deg, #e7f3f0 0%, #f8fbf8 48%, #eaf3f6 100%) !important;
  scrollbar-gutter: stable !important;
}

html body .app-shell .map-stage.memories-focus .memory-lane-toolbar,
html body main.app-shell section.map-stage.memories-focus .memory-lane-toolbar {
  display: grid !important;
  gap: 20px !important;
  width: min(100%, 1420px) !important;
  margin: 0 auto 22px !important;
  padding: 0 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(14, 76, 78, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .map-stage.memories-focus .memory-hub-heading,
html body main.app-shell section.map-stage.memories-focus .memory-hub-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .app-shell .map-stage.memories-focus .memory-hub-title,
html body main.app-shell section.map-stage.memories-focus .memory-hub-title {
  display: grid !important;
  gap: 5px !important;
}

html body .app-shell .map-stage.memories-focus .memory-hub-kicker,
html body main.app-shell section.map-stage.memories-focus .memory-hub-kicker {
  color: #16806f !important;
  font-size: 0.69rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}

html body .app-shell .map-stage.memories-focus .memory-hub-heading h2,
html body main.app-shell section.map-stage.memories-focus .memory-hub-heading h2 {
  margin: 0 !important;
  color: #082f3a !important;
  font-size: clamp(2rem, 4vw, 3.1rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html body .app-shell .map-stage.memories-focus .memory-hub-heading p,
html body main.app-shell section.map-stage.memories-focus .memory-hub-heading p {
  max-width: 700px !important;
  margin: 3px 0 0 !important;
  color: rgba(18, 54, 64, 0.64) !important;
  font-size: 0.94rem !important;
  line-height: 1.5 !important;
}

html body .app-shell .map-stage.memories-focus .memory-hub-actions,
html body main.app-shell section.map-stage.memories-focus .memory-hub-actions {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

html body .app-shell .map-stage.memories-focus .memory-hub-actions #memoryCount,
html body main.app-shell section.map-stage.memories-focus .memory-hub-actions #memoryCount {
  display: grid !important;
  place-items: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(11, 91, 87, 0.12) !important;
  border-radius: 999px !important;
  color: #0c635e !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}

html body .app-shell .map-stage.memories-focus .memory-hub-actions #closeMemoriesButton,
html body main.app-shell section.map-stage.memories-focus .memory-hub-actions #closeMemoriesButton {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(9, 72, 75, 0.12) !important;
  border-radius: 999px !important;
  color: #123d47 !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 8px 18px rgba(8, 52, 58, 0.07) !important;
}

html body .app-shell .map-stage.memories-focus .memory-lane-search,
html body main.app-shell section.map-stage.memories-focus .memory-lane-search {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 17px !important;
  border: 1px solid rgba(9, 75, 76, 0.12) !important;
  border-radius: 16px !important;
  color: #2c6e72 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 12px 28px rgba(10, 57, 63, 0.06) !important;
}

html body .app-shell .map-stage.memories-focus .memory-lane-search input,
html body main.app-shell section.map-stage.memories-focus .memory-lane-search input {
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  color: #0d3540 !important;
  background: transparent !important;
  font-size: 0.96rem !important;
}

html body .app-shell .map-stage.memories-focus .memory-lane-view-tabs,
html body main.app-shell section.map-stage.memories-focus .memory-lane-view-tabs {
  display: none !important;
}

html body .app-shell .map-stage.memories-focus #memoryList,
html body main.app-shell section.map-stage.memories-focus #memoryList {
  display: grid !important;
  gap: 18px !important;
  width: min(100%, 1420px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
  padding: clamp(18px, 2.5vw, 25px) !important;
  border: 1px solid rgba(213, 249, 239, 0.18) !important;
  border-radius: 18px !important;
  color: #f6fffb !important;
  background: linear-gradient(135deg, #073d4b 0%, #0a686a 57%, #138b70 100%) !important;
  box-shadow: 0 18px 40px rgba(6, 46, 53, 0.13) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-top,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 18px !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-copy,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-copy {
  display: grid !important;
  gap: 5px !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-copy > span,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-copy > span {
  color: rgba(219, 255, 245, 0.72) !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-copy strong,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-copy strong {
  color: #ffffff !important;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem) !important;
  line-height: 1.08 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-copy p,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-copy p {
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(235, 255, 250, 0.72) !important;
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-actions,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-create-button,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-create-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 44px !important;
  padding: 10px 15px !important;
  border-radius: 14px !important;
  color: #073a43 !important;
  background: #e8fff5 !important;
  box-shadow: none !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stats,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  border-top: 1px solid rgba(226, 255, 247, 0.13) !important;
  border-bottom: 1px solid rgba(226, 255, 247, 0.13) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stat,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stat {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 12px clamp(8px, 2vw, 18px) !important;
  border: 0 !important;
  border-right: 1px solid rgba(226, 255, 247, 0.13) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stat:last-child,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stat:last-child {
  border-right: 0 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stat strong,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stat strong {
  color: #ffffff !important;
  font-size: 1.12rem !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stat span,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-stats .memory-lane-stat span {
  color: rgba(228, 255, 248, 0.64) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-footer,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-footer {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-archive-status,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-archive-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(233, 255, 249, 0.72) !important;
  font-size: 0.75rem !important;
  font-weight: 760 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-archive-status i,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-archive-status i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #8ee8bc !important;
  box-shadow: 0 0 0 4px rgba(142, 232, 188, 0.12) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-tools,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-tools {
  position: relative !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-tools summary,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-tools summary {
  padding: 7px 0 !important;
  color: rgba(236, 255, 250, 0.72) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  list-style: none !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-tools summary::-webkit-details-marker {
  display: none !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-tools-panel,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-tools-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  gap: 12px !important;
  width: min(560px, calc(100vw - 48px)) !important;
  padding: 16px !important;
  border: 1px solid rgba(13, 76, 79, 0.12) !important;
  border-radius: 16px !important;
  color: #123b45 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 22px 50px rgba(4, 37, 44, 0.2) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-tool-status,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-tool-status {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 12px !important;
  color: rgba(18, 59, 69, 0.66) !important;
  font-size: 0.7rem !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-tool-actions,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-tool-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .pin-database-list.memory-journal-list,
html body main.app-shell section.map-stage.memories-focus #memoryList .pin-database-list.memory-journal-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  align-items: start !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(12, 77, 79, 0.1) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 252, 0.94) !important;
  box-shadow: 0 12px 28px rgba(7, 50, 56, 0.08) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card:hover,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--memory-accent, #18a978) 28%, rgba(12, 77, 79, 0.1)) !important;
  box-shadow: 0 18px 36px rgba(7, 50, 56, 0.11) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-main,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-main {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 12px 14px !important;
  width: 100% !important;
  height: auto !important;
  padding: 12px !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover {
  position: relative !important;
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  min-height: 112px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #0a4e5b, #199471) !important;
  box-shadow: none !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-image,
html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-empty,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-image,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-empty {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-empty {
  display: grid !important;
  place-items: center !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-empty span,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-empty span {
  font-size: 1.7rem !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-empty strong,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-empty strong {
  display: none !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-meta,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover-meta {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  z-index: 3 !important;
  max-width: calc(100% - 14px) !important;
  padding: 5px 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: rgba(4, 34, 42, 0.72) !important;
  font-size: 0.59rem !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  backdrop-filter: blur(7px) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-copy,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-copy {
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-feeling,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-feeling {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: fit-content !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(20, 69, 77, 0.62) !important;
  background: transparent !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-feeling i,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-feeling i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--mood-color, var(--memory-accent, #18a978)) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-copy > strong,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-copy > strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #0a303a !important;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-copy > small,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-copy > small {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(18, 54, 64, 0.58) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-saved-label,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-saved-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: fit-content !important;
  min-height: 0 !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: rgba(18, 75, 73, 0.54) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.63rem !important;
  font-weight: 760 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-action-dock,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-action-dock {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-actions,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 0.8fr)) !important;
  gap: 7px !important;
  width: 100% !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action {
  grid-column: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(10, 76, 78, 0.1) !important;
  border-radius: 12px !important;
  color: #164a52 !important;
  background: #f2f8f6 !important;
  box-shadow: none !important;
  font-size: 0.75rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action svg,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action svg {
  width: 15px !important;
  height: 15px !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .relive-memory-action,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .relive-memory-action {
  grid-column: auto !important;
  display: inline-flex !important;
  min-height: 42px !important;
  border-color: transparent !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #075467, #0b7f7e 56%, #16976e) !important;
  box-shadow: 0 8px 18px rgba(9, 110, 101, 0.15) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .relive-memory-action small,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .relive-memory-action small {
  display: none !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .delete-memory-action,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .delete-memory-action {
  color: #98424c !important;
  background: #fff7f6 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action.needs-location,
html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action.needs-location {
  grid-column: 1 / -1 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 28px !important;
  width: min(100%, 820px) !important;
  margin: clamp(24px, 7vh, 70px) auto 0 !important;
  padding: clamp(24px, 4vw, 38px) !important;
  border: 1px solid rgba(11, 83, 81, 0.1) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 252, 0.86) !important;
  box-shadow: 0 18px 42px rgba(7, 54, 59, 0.09) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-art,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-art {
  display: grid !important;
  place-items: center !important;
  width: 150px !important;
  height: 150px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #073e50, #169a76) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-art img,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-art img {
  width: 90% !important;
  height: 90% !important;
  object-fit: contain !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-copy,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-copy {
  display: grid !important;
  justify-items: start !important;
  gap: 9px !important;
  min-width: 0 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-copy > span,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-copy > span {
  color: #16806f !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-copy strong,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-copy strong {
  color: #0a3340 !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  line-height: 1.08 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-copy p,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-copy p {
  max-width: 520px !important;
  margin: 0 0 5px !important;
  color: rgba(18, 54, 64, 0.64) !important;
  line-height: 1.5 !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-recovery,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-recovery {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(11, 83, 81, 0.08) !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-recovery summary,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-recovery summary {
  padding-top: 12px !important;
  color: rgba(18, 54, 64, 0.58) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-recovery-panel,
html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-recovery-panel {
  display: grid !important;
  gap: 12px !important;
  padding-top: 14px !important;
}

@media (max-width: 760px) {
  html body .app-shell .map-stage.memories-focus .memory-database-page.side-panel,
  html body main.app-shell section.map-stage.memories-focus .memory-database-page.side-panel {
    padding: calc(env(safe-area-inset-top) + 78px) 12px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  html body .app-shell .map-stage.memories-focus .memory-lane-toolbar,
  html body main.app-shell section.map-stage.memories-focus .memory-lane-toolbar {
    gap: 16px !important;
    margin-bottom: 16px !important;
    padding-bottom: 18px !important;
  }

  html body .app-shell .map-stage.memories-focus .memory-hub-heading,
  html body main.app-shell section.map-stage.memories-focus .memory-hub-heading {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html body .app-shell .map-stage.memories-focus .memory-hub-heading h2,
  html body main.app-shell section.map-stage.memories-focus .memory-hub-heading h2 {
    font-size: 2rem !important;
  }

  html body .app-shell .map-stage.memories-focus .memory-hub-heading p,
  html body main.app-shell section.map-stage.memories-focus .memory-hub-heading p {
    font-size: 0.8rem !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-top,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-top {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-actions,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-actions {
    justify-content: flex-start !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview-footer,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview-footer {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-tools-panel,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-tools-panel {
    position: static !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .pin-database-list.memory-journal-list,
  html body main.app-shell section.map-stage.memories-focus #memoryList .pin-database-list.memory-journal-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-main,
  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-flashcard-main {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    padding: 10px !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover,
  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-lane-cover {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action,
  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action {
    min-height: 44px !important;
    padding-inline: 7px !important;
    font-size: 0.72rem !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 18px !important;
    margin-top: 18px !important;
    padding: 22px 18px !important;
    text-align: center !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-art,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-art {
    width: 118px !important;
    height: 118px !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-copy,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-copy {
    justify-items: center !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-empty-recovery,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-empty-recovery {
    grid-column: auto !important;
  }
}

@media (max-width: 420px) {
  html body .app-shell .map-stage.memories-focus .memory-hub-actions #memoryCount,
  html body main.app-shell section.map-stage.memories-focus .memory-hub-actions #memoryCount {
    display: none !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-overview,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-overview {
    padding: 16px !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-actions,
  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-actions {
    grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 0.82fr)) !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action,
  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-lane-card .memory-card-action {
    gap: 4px !important;
    padding-inline: 5px !important;
    font-size: 0.68rem !important;
  }

  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-tool-status,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-tool-status,
  html body .app-shell .map-stage.memories-focus #memoryList .memory-lane-tool-actions,
  html body main.app-shell section.map-stage.memories-focus #memoryList .memory-lane-tool-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .map-stage.memories-focus #memoryList article.memory-lane-card {
    transition: none !important;
  }
}

/* Final archive canvas: outrank the older dark Memory Lane theme. */
html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel {
  color: #123640 !important;
  background: linear-gradient(180deg, #e7f3f0 0%, #f8fbf8 48%, #eaf3f6 100%) !important;
}

html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel > .panel-section.memory-lane-toolbar {
  border: 0 !important;
  border-bottom: 1px solid rgba(14, 76, 78, 0.12) !important;
  border-radius: 0 !important;
  color: #123640 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .memory-hub-heading h2 {
  color: #082f3a !important;
}

html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .memory-hub-heading p {
  color: rgba(18, 54, 64, 0.64) !important;
}

html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .search-wrap.memory-lane-search {
  border-color: rgba(9, 75, 76, 0.12) !important;
  color: #2c6e72 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 12px 28px rgba(10, 57, 63, 0.06) !important;
}

html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .search-wrap.memory-lane-search input,
html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .search-wrap.memory-lane-search input::placeholder {
  color: #0d3540 !important;
}