:root {
  color-scheme: dark;
  --text: #f8f9fb;
  --muted: rgba(248, 249, 251, 0.72);
  --line: rgba(255, 255, 255, 0.17);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-height: 100dvh;
  --app-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  --widget-text-color: #f8f9fb;
  --widget-glass-color: rgba(255, 255, 255, 0.18);
  font-family: var(--app-font-family);
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 205, 99, 0.75), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(77, 192, 255, 0.8), transparent 26%),
    linear-gradient(145deg, #111318 0%, #2a2431 42%, #202f38 100%);
  color: var(--text);
  font-family: var(--app-font-family);
}

body {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--app-height);
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.device-shell {
  width: 100vw;
  height: var(--app-height);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.phone {
  position: relative;
  width: 100%;
  height: var(--app-height);
  overflow: hidden;
  background: #101216;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  background: #171a20 var(--wallpaper-image, url("../img/image-aea739b273b7.webp")) center / cover no-repeat;
}

.screen.active {
  display: block;
}

.home-screen {
  padding: calc(54px + var(--safe-top)) 18px calc(20px + var(--safe-bottom));
  flex-direction: column;
}

.home-screen.active {
  display: flex;
}

.home-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.clock-hero {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
}

.clock-greeting,
.clock-date {
  display: block;
  font-size: 14px;
  font-weight: 800;
  opacity: 0.86;
}

.clock-time {
  display: block;
  font-size: clamp(52px, 18vw, 82px);
  line-height: 0.95;
  letter-spacing: 0;
}

.app-grid {
  min-height: 0;
  display: grid;
  gap: 18px;
  padding: 4px 2px;
}

.desktop-pages-viewport {
  min-height: 0;
  overflow: hidden;
}

.desktop-pages-track {
  display: flex;
  width: 100%;
  transform: translateX(calc(var(--desktop-page, 0) * -100%));
  transition: transform 0.28s ease;
}

.desktop-page {
  width: 100%;
  flex: 0 0 100%;
}

.home-widget-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-status-card,
.notes-widget-tile,
.auto-status-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--widget-glass-color);
  color: var(--widget-text-color);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.13);
}

.home-status-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  text-align: left;
}

.home-status-card p,
.home-status-card em {
  grid-column: 1 / -1;
  margin: 0;
}

.home-status-card strong,
.home-status-card small,
.home-status-card p,
.home-status-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-status-avatar,
.avatar,
.image-avatar {
  width: 54px;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.24);
}

.avatar img,
.image-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.notes-widget-tile {
  grid-column: auto;
  min-height: 118px;
  padding: 14px;
}

.notes-widget-title {
  padding: 0;
  background: transparent;
  color: inherit;
  font-weight: 900;
}

.notes-widget-preview strong,
.notes-widget-preview p {
  display: block;
  margin: 8px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes-widget-preview p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.auto-status-panel {
  grid-column: auto;
  min-height: 118px;
}

.apps-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
}

.app-tile,
.app-icon {
  display: grid;
  place-items: center;
  gap: 7px;
  color: var(--text);
  background: transparent;
}

.icon-face {
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.34), 0 8px 20px rgba(0, 0, 0, 0.22);
}

.app-tile small {
  max-width: 76px;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.chat-gradient { background: linear-gradient(145deg, #31d47b, #0a9cff); }
.settings-gradient { background: linear-gradient(145deg, #8b98a8, #303741); }
.notes-gradient { background: linear-gradient(145deg, #ffdf5b, #f0902f); color: #2b2111; }
.world-gradient { background: linear-gradient(145deg, #2f4052, #30c7a0); }
.forum-gradient { background: linear-gradient(145deg, #f45b69, #f6b44b 54%, #2cb3a3); }
.preset-gradient { background: linear-gradient(145deg, #6c5ce7, #00b894 54%, #fdcb6e); }
.memory-gradient { background: linear-gradient(145deg, #2d3436, #74b9ff 55%, #a29bfe); }
.phonecheck-gradient { background: linear-gradient(145deg, #111827, #35d0a7 55%, #7dd3fc); }
.diary-gradient { background: linear-gradient(145deg, #8e735b, #c9a46b 52%, #f5e8c8); color: #251a12; }
.period-gradient { background: linear-gradient(145deg, #ff8fab, #ffd1dc); color: #3c1724; }
.date-gradient { background: linear-gradient(145deg, #ff7675, #fd79a8 50%, #55efc4); }
.theater-gradient { background: linear-gradient(145deg, #5347a8, #ec6f8f 52%, #f4c76d); }
.weather-gradient { background: linear-gradient(145deg, #7fd5ff, #246bff); }
.gallery-gradient { background: linear-gradient(145deg, #ff719d, #7b69ff 55%, #33d6ad); }
.map-gradient { background: linear-gradient(145deg, #67d87a, #3b8cff 52%, #f8d64e); }

.desktop-page-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.desktop-page-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.46);
}

.desktop-page-dot.active {
  width: 10px;
  height: 10px;
  background: #fff;
}

.dock {
  margin-top: auto;
  height: 78px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}

.dock-icon .icon-face {
  width: 50px;
  height: 50px;
}

.app-screen {
  padding-top: calc(60px + var(--safe-top));
  background: #f4f6fa;
  color: #17181c;
}

.app-topbar {
  position: absolute;
  top: max(12px, calc(8px + var(--safe-top)));
  left: 14px;
  right: 14px;
  z-index: 10;
  height: 42px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  color: #f8f9fb;
}

.app-topbar span {
  justify-self: center;
  font-weight: 800;
}

.back-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  font-size: 34px;
  line-height: 30px;
}

.app-body {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(54px + var(--safe-top)) 0 0;
}

.runtime-loading {
  padding: 18px;
  color: #4b5563;
  font-weight: 900;
}

.hidden-file-input {
  display: none;
}

:root {
  color-scheme: dark;
  --glass: rgba(255, 255, 255, 0.16);
  --glass-strong: rgba(255, 255, 255, 0.25);
  --text: #f8f9fb;
  --muted: rgba(248, 249, 251, 0.72);
  --ink: #17181c;
  --line: rgba(255, 255, 255, 0.17);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-height: 100dvh;
  --standalone-full-height: 100dvh;
  --app-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  --global-font-size: 16px;
  --app-font-color: #17181c;
  --widget-text-color: #f8f9fb;
  --widget-glass-color: rgba(255, 255, 255, 0.18);
  font-family: var(--app-font-family);
}

* {
  box-sizing: border-box;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 205, 99, 0.75), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(77, 192, 255, 0.8), transparent 26%),
    linear-gradient(145deg, #111318 0%, #2a2431 42%, #202f38 100%);
  color: var(--app-font-color);
  font-size: var(--global-font-size);
  font-family: var(--app-font-family);
}

body {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--app-height);
  min-height: var(--app-height);
}



body.theme-aurora {
  background:
    radial-gradient(circle at 24% 16%, rgba(96, 225, 170, 0.62), transparent 30%),
    radial-gradient(circle at 86% 24%, rgba(254, 203, 94, 0.58), transparent 25%),
    linear-gradient(145deg, #0d1418, #233742);
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.device-shell {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  height: var(--app-height);
  min-height: var(--app-height);
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.phone {
  position: relative;
  width: 100%;
  max-width: none;
  height: var(--app-height);
  min-height: var(--app-height);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #101216;
  box-shadow: none;
}

.dynamic-island {
  position: absolute;
  z-index: 20;
  top: max(10px, var(--safe-top));
  left: 50%;
  width: 118px;
  height: 33px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050608;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  overscroll-behavior: contain;
  background: #171a20 var(--wallpaper-image, url("../img/image-aea739b273b7.webp")) center / cover no-repeat;
}

.screen.active {
  display: block;
}

.home-screen {
  padding: calc(54px + var(--safe-top)) 18px calc(20px + var(--safe-bottom));
  flex-direction: column;
}
.home-screen.active {
  display: flex;
}

.status-bar {
  position: absolute;
  top: max(16px, calc(8px + var(--safe-top)));
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
}

.signal {
  display: inline-flex;
  align-items: end;
  gap: 3px;
}

.signal span {
  width: 4px;
  border-radius: 5px;
  background: var(--text);
}

.signal span:nth-child(1) { height: 7px; }
.signal span:nth-child(2) { height: 10px; }
.signal span:nth-child(3) { height: 13px; }

.home-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.widget {
  min-height: 112px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px;
  color: var(--widget-text-color);
  background: var(--widget-glass-color);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.widget-label,
.chat-header span,
.field span {
  display: block;
  color: inherit;
  opacity: 0.78;
  font-size: 13px;
}

.hint-text {
  margin: 8px 0 0;
  color: rgba(31, 41, 55, 0.66);
  font-size: 13px;
  line-height: 1.45;
}

.widget strong {
  display: block;
  margin-top: 4px;
  font-size: 30px;
  line-height: 1;
}

.tiny-button,
.ghost-button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text);
  background: var(--glass);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
  padding: 4px 2px;
}

.notes-widget-tile {
  grid-column: span 4;
  min-height: 132px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--widget-glass-color);
  color: var(--widget-text-color);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.13);
}

.notes-widget-tile label {
  font-weight: 900;
}

.notes-widget-tile textarea {
  width: 100%;
  min-height: 82px;
  border: 0;
  outline: 0;
  resize: none;
  color: var(--widget-text-color);
  background: transparent;
  line-height: 1.5;
}

.app-tile,
.app-icon {
  display: grid;
  place-items: center;
  gap: 7px;
  color: var(--text);
  background: transparent;
}

.icon-face {
  width: var(--icon-size, 58px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.34), 0 8px 20px rgba(0, 0, 0, 0.22);
}

.custom-icon {
  background-position: center;
  background-size: cover;
}

.image-avatar {
  background-color: #f4f6fb;
  overflow: hidden;
  color: transparent;
}

.image-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.image-hotspot {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 16px;
  background: transparent;
}

.hidden-file-input {
  display: none;
}

.app-tile small {
  max-width: 76px;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.chat-gradient { background: linear-gradient(145deg, #31d47b, #0a9cff); }
.people-gradient { background: linear-gradient(145deg, #ffba3a, #ff5a79); }
.settings-gradient { background: linear-gradient(145deg, #8b98a8, #303741); }
.notes-gradient { background: linear-gradient(145deg, #ffdf5b, #f0902f); color: #2b2111; }
.gallery-gradient { background: linear-gradient(145deg, #ff719d, #7b69ff 55%, #33d6ad); }
.music-gradient { background: linear-gradient(145deg, #ff365e, #b030ff); }
.map-gradient { background: linear-gradient(145deg, #67d87a, #3b8cff 52%, #f8d64e); }
.weather-gradient { background: linear-gradient(145deg, #7fd5ff, #246bff); }
.world-gradient { background: linear-gradient(145deg, #2f4052, #30c7a0); }
.beauty-gradient { background: linear-gradient(145deg, #ff8bb4, #f5c44f 55%, #55d4df); }
.moments-gradient { background: linear-gradient(145deg, #253047, #61ca8b); }
.forum-gradient { background: linear-gradient(145deg, #f45b69, #f6b44b 54%, #2cb3a3); }
.preset-gradient { background: linear-gradient(145deg, #6c5ce7, #00b894 54%, #fdcb6e); }
.memory-gradient { background: linear-gradient(145deg, #2d3436, #74b9ff 55%, #a29bfe); }
.phonecheck-gradient { background: linear-gradient(145deg, #111827, #35d0a7 55%, #7dd3fc); }
.diary-gradient { background: linear-gradient(145deg, #8e735b, #c9a46b 52%, #f5e8c8); color: #251a12; }
.period-gradient { background: linear-gradient(145deg, #ff8fab, #ffd1dc); color: #3c1724; }
.date-gradient { background: linear-gradient(145deg, #ff7675, #fd79a8 50%, #55efc4); }
.theater-gradient { background: linear-gradient(145deg, #5347a8, #ec6f8f 52%, #f4c76d); }

.dock {
  margin-top: auto;
  height: 78px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(26px);
}

.dock-icon .icon-face {
  width: 50px;
  height: 50px;
}

.app-screen {
  padding-top: calc(60px + var(--safe-top));
  background: #f4f6fa;
  color: var(--app-font-color);
}

.app-topbar {
  position: absolute;
  top: max(12px, calc(8px + var(--safe-top)));
  left: 14px;
  right: 14px;
  z-index: 10;
  height: 42px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  color: #f8f9fb;
}

.ghost-button:empty {
  display: none;
}

.app-topbar span {
  justify-self: center;
  font-weight: 800;
}

.back-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  font-size: 34px;
  line-height: 30px;
}

.app-body {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(54px + var(--safe-top)) 0 0;
}

.chat-layout {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  --chat-bubble-user: #95ec69;
  --chat-bubble-assistant: #ffffff;
  --chat-bubble-text: #1b1d22;
  background-color: #ededed;
  background-position: center;
  background-size: cover;
}

.chat-layout.bubble-glass {
  --chat-bubble-user: rgba(149, 236, 105, 0.58);
  --chat-bubble-assistant: rgba(255, 255, 255, 0.56);
  --chat-bubble-text: #111318;
}

.wechat-chat-topbar {
  min-height: 52px;
  display: grid;
  grid-template-columns: 48px 1fr 56px;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(242, 242, 242, 0.94);
  color: #111318;
}

.wechat-chat-topbar strong {
  justify-self: center;
  font-size: 18px;
}

.wechat-top-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #111318;
  background: transparent;
  font-size: 34px;
  line-height: 1;
}

.wechat-top-icon.dots {
  font-size: 20px;
  letter-spacing: 2px;
}

.chat-header,
.panel {
  border: 1px solid rgba(20, 23, 30, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 26px rgba(26, 31, 45, 0.08);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.chat-header > div {
  min-width: 0;
  flex: 1;
}

.chat-settings-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0a84ff;
  background: #eef1f6;
  font-weight: 800;
}

.avatar {
  width: 46px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #22b872, #2e7cf7);
  font-weight: 900;
}

.messages {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px;
}

.messages.multi-selecting {
  padding-bottom: calc(180px + var(--safe-bottom)) !important;
  scroll-padding-bottom: calc(180px + var(--safe-bottom));
}

.message-bottom-spacer {
  height: calc(150px + var(--safe-bottom));
  flex: 0 0 auto;
}

.message-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.message-row.user {
  justify-content: flex-end;
}

.message-stack {
  max-width: 84%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.message-stack.user {
  align-items: flex-end;
}

.message-avatar {
  width: 42px;
  border-radius: 8px;
}

.bubble {
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 18px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

.message-time-divider {
  align-self: center;
  margin: 2px auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.08);
  font-size: 11px;
  color: rgba(17, 19, 24, 0.42);
}

.chat-list-time {
  margin-left: auto;
  align-self: flex-start;
  white-space: nowrap;
  font-size: 11px;
  font-style: normal;
  color: rgba(17, 19, 24, 0.42);
}

.bubble.assistant {
  color: var(--chat-bubble-text);
  background: var(--chat-bubble-assistant);
  border-radius: 6px;
}

.bubble.user {
  color: var(--chat-bubble-text);
  background: var(--chat-bubble-user);
  border-radius: 6px;
}

.transfer-card {
  width: min(220px, 72vw);
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #f0a13a, #d06b2c);
  text-align: left;
  box-shadow: 0 10px 24px rgba(120, 65, 20, 0.18);
}

.transfer-card span {
  font-size: 13px;
  opacity: 0.9;
}

.transfer-card strong {
  font-size: 28px;
  line-height: 1.1;
}

.transfer-card small {
  color: rgba(255, 255, 255, 0.78);
}

.location-card,
.forum-share-card {
  width: min(238px, 72vw);
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  text-align: left;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  border: 1px solid var(--skin-border);
  box-shadow: 0 10px 24px rgba(20, 24, 30, 0.12);
}

.location-card span,
.forum-share-card span {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 900;
}

.location-card strong,
.forum-share-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.location-card small,
.forum-share-card small {
  color: var(--skin-muted);
  line-height: 1.45;
}

.location-card {
  border-left: 4px solid #2f9bff;
}

.forum-share-card {
  border-left: 4px solid #f45b69;
}

.forwarded-chat-card {
  width: min(252px, 74vw);
  display: grid;
  gap: 7px;
  padding: 13px;
  border-radius: 14px;
  text-align: left;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  border: 1px solid var(--skin-border);
  border-left: 4px solid #b37a35;
  box-shadow: 0 10px 24px rgba(20, 24, 30, 0.12);
}

.forwarded-chat-card span {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 900;
}

.forwarded-chat-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.forwarded-chat-scroll {
  max-height: 132px;
  overflow-y: auto;
  display: grid;
  gap: 7px;
  padding-right: 3px;
  -webkit-overflow-scrolling: touch;
}

.forwarded-chat-scroll p {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--skin-border) 70%, transparent);
}

.forwarded-chat-scroll p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.forwarded-chat-scroll b {
  display: block;
  margin-bottom: 2px;
  color: var(--skin-text);
  font-size: 12px;
}

.forwarded-chat-scroll em {
  display: block;
  color: var(--skin-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.forward-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  align-items: end;
  padding: 18px;
  background: rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.forward-picker-sheet {
  display: grid;
  gap: 12px;
  width: min(100%, 460px);
  max-height: min(72vh, 620px);
  margin: 0 auto;
  padding: 16px;
  border-radius: 24px;
  background: var(--surface-strong, #fff);
  color: var(--skin-text, #17181c);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.forward-picker-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.forward-picker-sheet header button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--skin-muted) 14%, transparent);
  color: inherit;
  font-size: 22px;
}

.forward-picker-list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
}

.forward-picker-char {
  display: grid;
  grid-template-columns: auto 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--phone-bg) 72%, transparent);
}

.forward-picker-char input {
  width: 20px;
  height: 20px;
  accent-color: var(--skin-accent, #b47a35);
}

.forward-picker-avatar {
  width: 46px;
  height: 46px;
}

.forward-picker-char span {
  min-width: 0;
}

.forward-picker-char small {
  display: block;
  overflow: hidden;
  color: var(--skin-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forward-picker-confirm {
  min-height: 46px;
  border: 0;
  border-radius: 18px;
  background: #171b22;
  color: #fff;
  font-weight: 900;
}

.chat-image-card {
  width: min(220px, 68vw);
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.56);
  text-align: left;
  box-shadow: 0 10px 24px rgba(20, 24, 30, 0.12);
}

.chat-image-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(17, 19, 24, 0.08);
}

.chat-image-card small {
  color: rgba(17, 19, 24, 0.58);
  font-size: 12px;
  line-height: 1.35;
}

.chat-image-card.sticker-message-card {
  width: min(156px, 46vw);
  padding: 4px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.chat-image-card.sticker-message-card img {
  aspect-ratio: auto;
  max-height: 154px;
  object-fit: contain;
  background: transparent;
}

.chat-layout.bubble-glass .bubble {
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 10px 28px rgba(20, 24, 30, 0.12);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.bubble.error {
  align-self: center;
  max-width: 96%;
  color: #7c1d1d;
  background: #ffe6e6;
}

.composer {
  display: grid;
  grid-template-columns: 42px 1fr 42px 42px auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px calc(8px + var(--safe-bottom));
  border-radius: 0;
  background: #f6f6f6;
}

.composer-input-wrap {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  border-radius: 6px;
  background: #fff;
}

.composer textarea,
.field input,
.field textarea,
.notes-app textarea {
  width: 100%;
  border: 1px solid rgba(23, 24, 28, 0.12);
  border-radius: 16px;
  outline: 0;
  background: #f6f7fa;
  color: #17181c;
}

.composer textarea {
  max-height: 120px;
  min-height: 38px;
  border: 0;
  resize: none;
  padding: 9px 10px;
  background: transparent;
}

.composer-icon,
.composer-mic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #111318;
  background: transparent;
  font-size: 26px;
}

.composer-mic {
  font-size: 20px;
}

.composer-send {
  min-width: 50px;
  min-height: 34px;
  border-radius: 6px;
  color: #fff;
  background: #07c160;
  font-weight: 800;
}

#chatName {
  cursor: pointer;
}

.message-row.selecting {
  align-items: center;
}

.message-select-box {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-self: center;
  border: 1.5px solid var(--skin-muted);
  border-radius: 6px;
  color: var(--phone-bg);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.message-select-box.checked {
  border-color: var(--skin-accent);
  background: var(--skin-accent);
}

.multi-select-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(72px + var(--safe-bottom));
  z-index: 12;
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--skin-border);
  border-radius: 18px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--phone-bg) 88%, transparent);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.multi-select-bar button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--skin-text);
  background: var(--surface-strong);
}

.mind-panel {
  position: absolute;
  top: 68px;
  left: 16px;
  right: 16px;
  z-index: 300;
  pointer-events: auto;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 78%, transparent);
  border-radius: 26px;
  color: var(--skin-text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)),
    color-mix(in srgb, var(--phone-bg) 95%, transparent);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
}

.mind-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mind-panel header button {
  min-width: 54px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  border-radius: 999px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  font-size: 13px;
  font-weight: 900;
}

.mind-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mind-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.mind-avatar.avatar {
  width: 42px;
  border-radius: 14px;
}

.mind-title span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mind-title strong {
  overflow: hidden;
  color: var(--skin-text);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mind-title small {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 800;
}

.mind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mind-panel p {
  margin: 0;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 64%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mind-panel p span {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 900;
}

.mind-score {
  display: inline-block;
  color: var(--skin-text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.mind-score::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--skin-accent), var(--skin-accent-2));
  opacity: 0.86;
}

.mind-os {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--skin-accent) 10%, transparent), transparent),
    color-mix(in srgb, var(--surface-strong) 78%, transparent) !important;
}

.mind-history-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(70vh, 560px);
  overflow: hidden;
}

.mind-history-list {
  min-height: 0;
  max-height: 100%;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.mind-history-list article {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 66%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}

.mind-history-list time {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 380px) {
  .mind-panel {
    left: 12px;
    right: 12px;
    padding: 12px;
    border-radius: 22px;
  }

  .mind-grid {
    grid-template-columns: 1fr;
  }
}

#savePersonaButton,
#saveSettingsButton,
.theme-swatch,
#saveWorldBookButton,
.secondary-button,
.file-button {
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: #0a84ff;
  font-weight: 800;
}

.wide-file-button,
.secondary-button {
  width: 100%;
}

.secondary-button {
  margin-top: 10px;
  color: #252a31;
  background: #eef1f6;
}

.danger-button {
  color: #fff;
  background: #e5484d;
}

.panel-stack {
  display: grid;
  gap: 12px;
}

.panel {
  padding: 14px;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 18px;
}

.panel p {
  margin: 0;
  color: #525966;
  line-height: 1.6;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.field input,
.field select,
.field textarea {
  padding: 12px;
  resize: vertical;
}

.field select {
  width: 100%;
  border: 1px solid rgba(23, 24, 28, 0.12);
  border-radius: 16px;
  outline: 0;
  background: #f6f7fa;
  color: #17181c;
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.file-button {
  position: relative;
  overflow: hidden;
  background: #272b33;
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.persona-card {
  padding: 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #202633, #305b72);
  line-height: 1.5;
}

.preset-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: #f3f5f9;
  color: #20242d;
  cursor: pointer;
}

.preset-card.active {
  outline: 2px solid #18bf72;
  background: linear-gradient(145deg, rgba(24, 191, 114, 0.14), rgba(10, 132, 255, 0.12)), #f8fafc;
}

.preset-card pre {
  max-height: 148px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #4a5565;
  font: 12px/1.55 var(--app-font-family);
}

.tavern-helper-frame {
  width: 100%;
  min-height: 260px;
  margin-top: 12px;
  border: 1px solid var(--skin-border);
  border-radius: 16px;
  background: #111;
}

.tavern-helper-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.tavern-helper-grid div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 14px;
  background: #f3f5f9;
  color: #253044;
}

.tavern-helper-grid strong {
  font-size: 20px;
}

.tavern-helper-grid span {
  color: #6b7280;
  font-size: 12px;
}

.preset-detail-list {
  display: grid;
  gap: 10px;
}

.compact-preset-list {
  gap: 6px;
}

.preset-detail-item {
  border-radius: 16px;
  background: #f3f5f9;
  overflow: hidden;
}

.preset-detail-item summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  cursor: pointer;
  color: #20242d;
}

.compact-preset-item summary,
.regex-detail-item summary {
  padding: 7px 8px;
  gap: 6px;
}

.compact-preset-item summary strong,
.regex-detail-item summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.preset-detail-item summary span {
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.preset-detail-item summary span.enabled {
  background: #18a86d;
}

.preset-detail-item summary span.disabled {
  background: #8c95a3;
}

.preset-detail-item summary em {
  color: #6b7280;
  font-style: normal;
  font-size: 12px;
}

.preset-detail-item p {
  padding: 0 10px 8px;
  font-size: 12px;
}

.preset-search-input {
  width: 100%;
  height: 38px;
  margin: 4px 0 10px;
  border: 0;
  border-radius: 14px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(126, 135, 152, 0.16);
  font: 13px/1.2 var(--app-font-family);
}

.compact-action-row {
  gap: 6px;
  padding: 0 8px 6px;
}

.mini-toggle-button {
  min-height: 30px;
  margin: 0 10px 8px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}

.compact-action-row .mini-toggle-button {
  margin: 0;
  min-height: 28px;
  font-size: 11px;
}

.preset-content-editor {
  width: calc(100% - 16px);
  margin: 0 8px 8px;
  border: 0;
  border-radius: 12px;
  padding: 9px;
  resize: vertical;
  color: #263244;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(126, 135, 152, 0.16);
  font: 12px/1.5 var(--app-font-family);
}

.preset-detail-item pre,
.preset-json-preview {
  max-height: 260px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #263244;
  background: rgba(255, 255, 255, 0.72);
  font: 12px/1.55 var(--app-font-family);
}

.date-app {
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(180deg, #fff7fb, #f3f7fb);
}

.date-picker-app {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 18px;
  background: linear-gradient(180deg, #fff7fb, #f3f7fb);
}

.date-picker-head h2 {
  margin: 0;
  color: #20242d;
  font-size: 24px;
}

.date-picker-head p {
  margin: 6px 0 0;
  color: #7d8492;
  font-size: 13px;
}

.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
}

.date-person-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 6px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  color: #263244;
  box-shadow: 0 8px 24px rgba(30, 36, 44, 0.06);
}

button.date-person-card {
  border: 0;
  text-align: center;
}

.theater-flow-head {
  display: grid;
  gap: 6px;
}

.theater-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.theater-type-card {
  min-height: 156px;
  display: grid;
  align-content: end;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(95, 119, 88, 0.18);
  border-radius: 20px;
  text-align: left;
  color: #263244;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(235, 245, 236, 0.82)),
    radial-gradient(circle at 18% 16%, rgba(88, 145, 94, 0.16), transparent 36%);
  box-shadow: 0 14px 34px rgba(30, 36, 44, 0.08);
}

.theater-type-card.long {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(236, 240, 250, 0.88)),
    radial-gradient(circle at 18% 16%, rgba(88, 116, 170, 0.16), transparent 36%);
}

.theater-type-card strong {
  font-size: 20px;
}

.theater-type-card span,
.theater-session-card small {
  color: #687284;
  font-size: 13px;
  line-height: 1.45;
}

.theater-flow-back {
  justify-self: start;
}

.date-person-avatar {
  width: 64px;
  height: 64px;
  font-size: 20px;
}

.date-person-card strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.date-object-back {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #344054;
  font-weight: 900;
}

.date-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 30px rgba(30, 36, 44, 0.08);
}

.date-avatar {
  width: 58px;
}

.date-hero div {
  display: grid;
  gap: 4px;
}

.date-hero strong {
  font-size: 20px;
}

.date-hero span {
  color: #697386;
}

.date-preset-state {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(120, 92, 190, 0.18);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(108, 92, 231, 0.12), rgba(0, 184, 148, 0.1)), rgba(255, 255, 255, 0.9);
  color: #263244;
}

.date-preset-state strong {
  font-size: 14px;
}

.date-preset-state span {
  color: #697386;
  font-size: 12px;
}

.date-char-strip {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  gap: 8px;
  overflow: auto;
  margin: -14px -14px 0;
  padding: 14px 14px 10px;
  background: color-mix(in srgb, #fff7fb 86%, transparent);
  backdrop-filter: blur(16px);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.date-char-strip button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-weight: 900;
  scroll-snap-align: start;
  white-space: nowrap;
}

.date-char-strip button.active {
  background: #171b22;
  color: #fff;
}

.date-messages {
  min-height: 0;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 4px;
}

.date-generation-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  color: #6f5834;
  font-size: 13px;
  font-weight: 900;
}

.date-generation-status[hidden] {
  display: none;
}

.date-generation-status span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: datePulse 0.9s ease-in-out infinite;
}

@keyframes datePulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.date-tool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.theater-view-toggle,
.favorite-type-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  background: rgba(255, 255, 255, 0.68);
}

.theater-view-toggle span {
  padding: 0 6px;
  color: var(--skin-muted, #7d8492);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.theater-view-toggle button,
.favorite-type-tabs button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
}

.theater-view-toggle button.active,
.favorite-type-tabs button.active {
  background: #171b22;
  color: #fff;
}

.theater-session-card {
  cursor: pointer;
  gap: 8px;
}

.theater-state-button {
  border-color: rgba(87, 122, 82, 0.22) !important;
  background: color-mix(in srgb, var(--surface-strong) 76%, #dff0d9 24%) !important;
}

.theater-debug-button {
  opacity: 0.86;
}

@media (max-width: 430px) {
  .theater-type-grid {
    grid-template-columns: 1fr;
  }

  .date-tool-row {
    flex-wrap: wrap;
  }

  .theater-view-toggle {
    order: 2;
    flex: 1 1 auto;
    justify-content: center;
  }
}

.theater-session-card small,
.theater-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skin-surface, #fffdf7) 76%, var(--skin-accent, #4d7cff) 24%);
  color: var(--skin-text, #2c241d);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.theater-mode-badge.long {
  background: color-mix(in srgb, var(--skin-surface, #fffdf7) 68%, #7f63ff 32%);
}

.theater-session-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

.theater-session-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--skin-button, #171b22);
  color: var(--skin-button-text, #fff);
  font-size: 12px;
  font-weight: 900;
}

.theater-state-overlay {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 10px max(10px, env(safe-area-inset-bottom));
  background: rgba(20, 22, 26, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theater-state-panel {
  width: min(720px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 18px 18px 14px 14px;
  background: var(--skin-surface, #fffdf7);
  color: var(--skin-text, #2c241d);
  box-shadow: var(--skin-shadow-float, 0 24px 80px rgba(0, 0, 0, 0.24));
  padding: 14px;
}

.theater-state-panel header,
.theater-state-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.theater-state-panel header h2 {
  margin: 0;
  font-size: 18px;
}

.theater-state-panel header small {
  display: block;
  margin-top: 3px;
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
}

.theater-state-panel header button,
.theater-state-panel footer button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--skin-button, #171b22);
  color: var(--skin-button-text, #fff);
  font-weight: 900;
}

.theater-state-panel footer {
  flex-wrap: wrap;
}

.theater-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.theater-state-grid div,
.theater-state-detail {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  background: color-mix(in srgb, var(--skin-surface, #fffdf7) 82%, #fff 18%);
}

.theater-state-grid strong,
.theater-state-detail summary {
  font-size: 13px;
  font-weight: 900;
}

.theater-state-grid p,
.theater-state-detail pre {
  margin: 6px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
}

.theater-state-editor textarea {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.context-debug-button {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
}

.context-debug-inline {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.context-debug-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(20, 22, 26, 0.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.context-debug-panel {
  width: min(720px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 18px;
  background: var(--surface-strong, #fffdf7);
  color: var(--skin-text, #2c241d);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  padding: 14px;
}

.context-debug-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.context-debug-panel > header h2 {
  margin: 0;
  font-size: 18px;
}

.context-debug-panel > header button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #171b22;
  color: #fff;
  font-weight: 900;
}

.context-debug-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.context-debug-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.context-debug-grid strong,
.context-debug-grid span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-debug-grid span {
  margin-top: 4px;
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
}

.context-debug-note {
  margin: 0 0 12px;
  padding: 9px 10px;
  border: 1px solid rgba(61, 118, 255, 0.22);
  border-radius: 12px;
  background: rgba(61, 118, 255, 0.08);
  color: #27406d;
  font-size: 12px;
  font-weight: 800;
}

.context-debug-entry {
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.62);
}

.context-debug-entry + .context-debug-entry {
  margin-top: 8px;
}

.context-debug-entry summary {
  cursor: pointer;
  font-weight: 900;
}

.context-debug-entry summary span {
  float: right;
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
}

.context-debug-pre {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
}

.api-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.api-log-list {
  display: grid;
  gap: 8px;
}

.api-log-row {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 82%, transparent);
  color: var(--skin-text, #2c241d);
  text-align: left;
  box-shadow: 0 8px 20px rgba(35, 42, 52, 0.06);
}

.api-log-row.pending { border-style: dashed; }
.api-log-row.error { border-color: color-mix(in srgb, #e34b55 56%, var(--skin-border, rgba(0,0,0,.1))); }
.api-log-row.success { border-color: color-mix(in srgb, #1f9d63 38%, var(--skin-border, rgba(0,0,0,.1))); }

.api-log-main,
.api-log-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.api-log-main strong,
.api-log-main small,
.api-log-meta span,
.api-log-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-log-main strong { font-size: 14px; }
.api-log-main small,
.api-log-meta,
.api-log-preview {
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
}

.api-log-badge {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skin-accent, #4d7cff) 24%, var(--surface-strong, #fff) 76%);
  color: var(--skin-text, #2c241d);
  text-align: center;
  font-size: 11px;
  font-weight: 1000;
}

.api-log-badge.error { background: color-mix(in srgb, #e34b55 24%, var(--surface-strong, #fff) 76%); }
.api-log-badge.pending { background: color-mix(in srgb, #d8a426 24%, var(--surface-strong, #fff) 76%); }

.api-log-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.api-log-detail-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--skin-button, #171b22);
  color: var(--skin-button-text, #fff);
  font-weight: 900;
}


.api-log-filter-row,
.data-tool-row,
.debug-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.api-log-filter-row select,
.data-tool-row select {
  min-height: 36px;
  flex: 1 1 150px;
  border: 1px solid var(--skin-border, rgba(0,0,0,.1));
  border-radius: 12px;
  background: var(--skin-field, rgba(255,255,255,.72));
  color: var(--skin-text, #2c241d);
  font-weight: 800;
  padding: 0 10px;
}

.api-log-block {
  margin: 10px 0;
  border: 1px solid var(--skin-border, rgba(0,0,0,.08));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 82%, transparent);
  overflow: hidden;
}

.api-log-block summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 1000;
}

.api-log-block summary span {
  flex: 0 0 auto;
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
}

.api-log-block .api-log-block-tools {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px 8px;
}

.api-log-block .api-log-block-tools button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--skin-accent, #4d7cff) 22%, var(--surface-strong, #fff) 78%);
  color: var(--skin-text, #2c241d);
  font-weight: 900;
}

.storage-meter-grid {
  display: grid;
  gap: 8px;
}

.storage-meter-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--skin-border, rgba(0,0,0,.08));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 82%, transparent);
}

.storage-meter-card strong {
  font-size: 13px;
}

.storage-meter-card span,
.storage-meter-card small {
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
}


.inspiration-float-button {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  z-index: 9500;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 3px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: color-mix(in srgb, var(--skin-surface, #fffdf7) 86%, var(--skin-accent, #4d7cff) 14%);
  color: var(--skin-text, #2c241d);
  box-shadow: var(--skin-shadow-float, 0 18px 46px rgba(0, 0, 0, 0.18));
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.inspiration-float-button img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.inspiration-float-button.has-image span {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  max-width: 52px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.58);
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.inspiration-float-button.dragging {
  opacity: 0.9;
}

.inspiration-float-button.loading {
  animation: inspirationPulse 1.15s ease-in-out infinite;
}

.inspiration-float-button.failed {
  background: color-mix(in srgb, var(--skin-surface, #fffdf7) 78%, #d65a4a 22%);
}

.inspiration-float-button.idle {
  background: color-mix(in srgb, var(--skin-surface, #fffdf7) 92%, var(--skin-accent, #4d7cff) 8%);
  opacity: 0.78;
  border-style: dashed;
}

@keyframes inspirationPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.inspiration-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 10px max(10px, env(safe-area-inset-bottom));
  background: rgba(20, 22, 26, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.inspiration-panel {
  width: min(680px, 100%);
  max-height: min(78vh, 680px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 18px 18px 14px 14px;
  background: var(--skin-surface, #fffdf7);
  color: var(--skin-text, #2c241d);
  box-shadow: var(--skin-shadow-float, 0 24px 80px rgba(0, 0, 0, 0.24));
  padding: 14px;
}

.inspiration-panel header,
.inspiration-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inspiration-panel header h2 {
  margin: 0;
  font-size: 18px;
}

.inspiration-panel header small {
  display: block;
  margin-top: 3px;
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
}

.inspiration-panel button {
  touch-action: manipulation;
}

.inspiration-panel header button,
.inspiration-panel footer button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--skin-button, #171b22);
  color: var(--skin-button-text, #fff);
  font-weight: 900;
}

.inspiration-panel footer {
  flex-wrap: wrap;
}

.inspiration-option-list {
  min-height: 80px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.inspiration-option {
  display: grid;
  grid-template-columns: minmax(74px, 0.28fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  width: 100%;
  min-height: 48px;
  padding: 10px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  background: color-mix(in srgb, var(--skin-surface, #fffdf7) 78%, #fff 22%);
  color: var(--skin-text, #2c241d);
  text-align: left;
}

.inspiration-option strong {
  font-size: 12px;
}

.inspiration-option span {
  min-width: 0;
  word-break: break-word;
  line-height: 1.45;
}

.inspiration-error {
  max-height: 72px;
  overflow: auto;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(214, 90, 74, 0.12);
  color: #9b3328;
  font-size: 12px;
  word-break: break-word;
}

.inspiration-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  z-index: 10040;
  transform: translateX(-50%);
  max-width: min(280px, calc(100vw - 32px));
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.chat-world-preview details {
  width: 100%;
}

.chat-world-preview summary {
  cursor: pointer;
  font-weight: 900;
}

.chat-world-hit {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(126, 103, 68, 0.14);
}

.chat-world-hit strong,
.chat-world-hit span,
.chat-world-hit p {
  display: block;
  margin: 0;
}

.chat-world-hit span {
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
}

.chat-world-hit p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.date-load-more {
  width: 100%;
  min-height: 38px;
  margin: 0 0 12px;
  border-radius: 16px;
  border: 1px dashed rgba(158, 119, 52, 0.34);
  background: rgba(255, 255, 255, 0.62);
  color: #80612f;
  font-weight: 900;
}

.date-line {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: #20242d;
  box-shadow: 0 8px 24px rgba(30, 36, 44, 0.06);
}

.date-line.user {
  background: rgba(184, 245, 206, 0.55);
}

.date-line.error {
  background: #ffe2e2;
  color: #9b1c1c;
}

.date-line.loading {
  border: 1px dashed rgba(158, 119, 52, 0.38);
  background: rgba(255, 250, 236, 0.78);
  color: #6f5834;
}

.date-line strong {
  display: block;
  margin-bottom: 8px;
  color: #5b6c8c;
  font-size: 12px;
}

.date-line p,
.date-rich-content p {
  margin: 0;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.date-text-narration {
  color: color-mix(in srgb, #20242d 86%, #6f5834);
}

.date-text-dialogue {
  padding: 10px 12px;
  border-left: 3px solid #b9852f;
  border-radius: 10px;
  background: rgba(255, 246, 221, 0.62);
  color: #57401f;
  font-weight: 750;
}

.date-text-thought,
.date-inline-thought {
  color: #7d8492;
  font-style: italic;
}

.date-inline-dialogue {
  color: #8a5a12;
  font-weight: 850;
}

.date-rich-content {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.theater-line.dialogue-mode {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

.theater-line.dialogue-mode .date-speaker-head {
  padding: 0 4px;
}

.theater-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: #ededed;
}

.theater-chat-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.theater-chat-row.user {
  justify-content: flex-end;
}

.theater-chat-row.loading,
.theater-chat-row.error {
  justify-content: flex-start;
}

.theater-chat-row .message-avatar,
.theater-chat-row .avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.theater-chat-bubble {
  max-width: min(72%, 520px);
  padding: 9px 11px;
  border-radius: 6px;
  background: #fff;
  color: #111318;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.theater-chat-bubble.user {
  background: #95ec69;
}

.theater-chat-bubble.loading {
  color: #7a6a42;
  background: #fff6dc;
}

.theater-chat-bubble.error {
  color: #9b1c1c;
  background: #ffe2e2;
}

.theater-chat-empty {
  align-self: center;
  max-width: 82%;
  margin: auto 0;
  padding: 8px 12px;
  border-radius: 999px;
  color: #7a7f89;
  background: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.theater-dialogue-bubble {
  display: grid;
  gap: 5px;
  width: fit-content;
  max-width: min(86%, 520px);
  padding: 10px 12px;
  border-radius: 16px;
  border-top-left-radius: 6px;
  border: 1px solid rgba(185, 133, 47, 0.22);
  background: rgba(255, 250, 236, 0.88);
  color: #4b3820;
  box-shadow: 0 8px 22px rgba(67, 48, 24, 0.07);
}

.theater-dialogue-bubble.user {
  justify-self: end;
  border-top-left-radius: 16px;
  border-top-right-radius: 6px;
  background: rgba(198, 239, 211, 0.88);
}

.theater-dialogue-bubble strong {
  margin: 0;
  color: #8a5a12;
}

.theater-dialogue-bubble p {
  margin: 0;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.date-html-frame {
  width: 100%;
  min-height: 520px;
  border: 1px solid var(--skin-border);
  border-radius: 12px;
  background: transparent;
  pointer-events: auto;
}

.date-code-block {
  max-height: 520px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--skin-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--phone-bg) 76%, #000 8%);
  color: var(--skin-text);
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.date-raw-fallback {
  border-style: dashed;
  opacity: 0.82;
}

.date-composer {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 26px rgba(30, 36, 44, 0.08);
}

.date-composer textarea {
  height: 54px;
  max-height: 92px;
  min-width: 0;
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  background: #f3f5f8;
  outline: 0;
  resize: none;
  color: #20242d;
}

.date-composer button {
  min-height: 54px;
  border-radius: 14px;
  background: #18bf72;
  color: #fff;
  font-weight: 900;
}

.date-composer button:disabled,
.date-composer textarea:disabled {
  opacity: 0.62;
}

.date-composer .date-reroll {
  background: #252a31;
}

.list-stack {
  display: grid;
  gap: 10px;
}

.diary-app .button-row {
  justify-content: flex-start;
}

.diary-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-strong);
  border: 1px solid var(--skin-border);
  color: var(--skin-text);
}

.diary-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.diary-card header button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: #e5484d;
  font-weight: 800;
}

.diary-card strong {
  color: var(--skin-title);
}

.diary-card p {
  margin: 0;
  line-height: 1.65;
  white-space: pre-wrap;
}

.diary-status {
  min-height: 20px;
  margin: 8px 0 0;
  color: var(--skin-muted);
  font-size: 13px;
  font-weight: 800;
}

.forum-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.26);
}

.forum-share-picker {
  width: min(390px, 100%);
  max-height: min(72vh, 620px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border-radius: 24px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--phone-bg) 94%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.forum-share-picker header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.forum-share-picker header button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--skin-text);
  background: var(--surface-strong);
}

.forum-share-preview {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--skin-border);
  border-radius: 16px;
  background: var(--surface);
}

.forum-share-preview span,
.forum-share-preview p,
.forum-share-char-list small {
  color: var(--skin-muted);
}

.forum-share-preview p {
  margin: 0;
  line-height: 1.5;
}

.forum-share-char-list {
  min-height: 0;
  display: grid;
  gap: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.forum-share-char-list button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  color: var(--skin-text);
  background: var(--surface-strong);
  text-align: left;
}

.forum-share-avatar {
  width: 48px;
  height: 48px;
}

.check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.check-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #f3f5f9;
  color: #252a31;
}

.check-pill input {
  width: 18px;
  height: 18px;
  accent-color: #0a84ff;
}

.persona-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  color: #17181c;
  background: #f3f5f9;
  text-align: left;
}

.persona-row > span {
  min-width: 0;
}

.settings-list {
  display: grid;
  gap: 10px;
}

.settings-row {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 20px;
  color: #17181c;
  background: rgba(255, 255, 255, 0.86);
  text-align: left;
}

.settings-symbol {
  width: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #7d8b9b, #2f3742);
  font-weight: 900;
}

.settings-row small {
  display: block;
  margin-top: 3px;
  color: #384150;
}

.custom-ui-block {
  display: grid;
  gap: 12px;
}

.custom-ui-block header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.custom-ui-block header small {
  display: block;
  margin-top: 2px;
  color: var(--skin-muted);
}

.custom-ui-block pre {
  max-height: 190px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-text) 7%, transparent);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
}

.danger-zone {
  border-color: color-mix(in srgb, #e34b55 32%, var(--skin-border)) !important;
}

.panel,
.settings-row,
.field input,
.field textarea,
.field select {
  color: var(--app-font-color);
}

.field span,
.panel p {
  color: color-mix(in srgb, var(--app-font-color) 72%, #6b7280);
}

.settings-back {
  min-height: 34px;
  margin-bottom: 12px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0a84ff;
  background: #eef1f6;
  font-weight: 800;
}

.persona-row.active {
  color: #fff;
  background: linear-gradient(145deg, #1f7edb, #24b879);
}

.persona-row .avatar {
  width: 42px;
  border-radius: 14px;
}

.persona-row small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  opacity: 0.76;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-row {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  background: #f3f5f9;
  color: #252a31;
}

.world-row small {
  color: #8a93a1;
  font-size: 12px;
}

.world-row p {
  margin: 0;
  color: #5c6470;
  display: -webkit-box;
  overflow: hidden;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.world-group {
  display: grid;
  gap: 8px;
}

.world-group h3 {
  margin: 6px 2px 0;
  color: #5c6470;
  font-size: 14px;
}

.world-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.world-group {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--skin-border);
  border-radius: 16px;
  background: var(--surface);
}

.world-group summary {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--skin-text);
  font-weight: 900;
  list-style: none;
}

.world-group summary::-webkit-details-marker {
  display: none;
}

.world-group summary em {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--skin-muted);
  background: var(--surface-strong);
  font-style: normal;
  font-size: 12px;
}

.wechat-shell {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.wechat-main {
  min-height: 0;
  overflow: auto;
}

.wechat-list {
  display: grid;
  gap: 8px;
}

.wechat-section-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
  color: #17181c;
}

.wechat-section-head h2 {
  margin: 0;
  font-size: 22px;
  text-align: center;
}

.wechat-section-head button {
  width: 42px;
  height: 42px;
  justify-self: center;
  border-radius: 50%;
  color: #fff;
  background: #07c160;
  font-size: 26px;
  font-weight: 900;
}

.wechat-contact {
  width: 100%;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  color: #17181c;
  background: rgba(255, 255, 255, 0.86);
  text-align: left;
}

.wechat-contact small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #626b78;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wechat-contact > span {
  min-width: 0;
}

.wechat-bottom-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
}

.wechat-tab {
  min-height: 42px;
  border-radius: 16px;
  color: #5b6470;
  background: transparent;
  font-weight: 800;
}

.wechat-tab.active {
  color: #fff;
  background: #19b45b;
}

.wechat-back {
  justify-self: start;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0a84ff;
  background: rgba(255, 255, 255, 0.86);
  font-weight: 800;
}

.icon-editor {
  display: grid;
  gap: 10px;
}

.icon-editor-row {
  display: grid;
  grid-template-columns: 48px 1fr 62px 62px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: #f3f5f9;
  color: var(--app-font-color);
}

.appearance-row-wide {
  grid-template-columns: 48px 1fr 62px 72px 44px;
}

.face-lock-field {
  display: block;
}

.face-lock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.face-lock-preview {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  background: #e7eaf0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex: 0 0 auto;
}

.face-lock-preview[data-empty="1"] {
  visibility: hidden;
  width: 0;
  height: 0;
  border: 0;
  margin: 0;
}

.face-lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.icon-editor-row .icon-face {
  width: 48px;
  border-radius: 14px;
}

.mini-file-button,
.mini-reset-button {
  min-height: 36px;
  margin-top: 0;
  border-radius: 12px;
  font-size: 13px;
}

.mini-select {
  min-height: 36px;
  max-width: 72px;
  border: 0;
  border-radius: 12px;
  padding: 0 6px;
  color: var(--app-font-color);
  background: #eef1f6;
  font-weight: 800;
  font-size: 13px;
}

.mini-color {
  width: 38px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.theme-swatch {
  min-height: 92px;
  align-content: end;
  padding: 10px;
  color: #fff;
  text-align: left;
  background: #232832;
}



.theme-swatch.aurora {
  background: linear-gradient(145deg, #172128, #47d49f 52%, #f0bd43);
}

.wallpaper-preview {
  width: 100%;
  aspect-ratio: 9 / 16;
  margin-top: 12px;
  border-radius: 22px;
  background: #171a20 var(--wallpaper-image, url("../img/image-aea739b273b7.webp")) center / cover no-repeat;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.32), 0 12px 24px rgba(26, 31, 45, 0.12);
}

.notes-app,
.gallery-grid {
  height: 100%;
}

.notes-app textarea {
  height: 100%;
  padding: 16px;
  resize: none;
  font-size: 17px;
  line-height: 1.6;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(150px, 1fr);
  gap: 10px;
}

.photo-card {
  border-radius: 22px;
  background-size: cover;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.28);
}

.sunrise { background: linear-gradient(145deg, #ffca73, #ff6c80 55%, #4e7cff); }
.ocean { background: linear-gradient(145deg, #45d0c5, #0a65c8); }
.city { background: linear-gradient(145deg, #303846, #7f8ea3 58%, #ffd479); }
.forest { background: linear-gradient(145deg, #1f8d63, #b8d86a); }

@media (max-width: 480px) {
  .device-shell {
    padding: 0;
  }

  .phone {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .icon-face {
    width: clamp(48px, 14vw, 58px);
    border-radius: 15px;
  }

  .app-grid {
    gap: 16px 10px;
  }
}

.contact-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.contact-tab {
  min-height: 42px;
  border-radius: 16px;
  color: #5b6470;
  background: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

.contact-tab.active {
  color: #fff;
  background: #0a84ff;
}

.moments-page {
  min-height: 100%;
  background: #fff;
}

.moments-cover {
  position: relative;
  height: 260px;
  background: linear-gradient(145deg, rgba(20, 24, 28, 0.2), rgba(20, 24, 28, 0.35)), var(--wallpaper-image, url("../img/image-aea739b273b7.webp")) center / cover;
}

.moments-back,
.moments-camera {
  position: absolute;
  top: 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.16);
  font-weight: 900;
}

.moments-back {
  left: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 30px;
}

.moments-camera {
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 28px;
  line-height: 1;
}

.moments-top-menu {
  position: absolute;
  top: 58px;
  right: 14px;
  z-index: 4;
  display: grid;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(47, 54, 64, 0.96);
}

.moments-top-menu[hidden] {
  display: none;
}

.moments-top-menu button {
  min-width: 130px;
  min-height: 38px;
  padding: 0 12px;
  color: #fff;
  background: transparent;
  text-align: left;
}

.moment-char-panel {
  position: absolute;
  top: 58px;
  right: 14px;
  z-index: 5;
  display: grid;
  gap: 12px;
  width: min(310px, calc(100% - 28px));
  max-height: 360px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 40px rgba(16, 20, 28, 0.18);
  color: #20242d;
}

.moment-char-panel[hidden] {
  display: none;
}

.moment-char-panel > strong {
  font-size: 15px;
}

.moment-char-list {
  display: grid;
  gap: 8px;
  max-height: 210px;
  overflow: auto;
}

.moment-char-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f4f6fa;
  color: #273043;
  font-weight: 800;
}

.moment-char-list input {
  width: 18px;
  height: 18px;
  accent-color: #18bf72;
}

.moment-char-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.moment-char-actions button {
  min-height: 36px;
  border-radius: 12px;
  background: #edf1f6;
  color: #263040;
  font-weight: 900;
}

.wechat-section-head button:first-child {
  justify-self: start;
}

.wechat-section-head button:last-child {
  justify-self: end;
}

.moment-char-actions button:last-child {
  background: #16bf72;
  color: #fff;
}

.moments-profile {
  position: absolute;
  right: 18px;
  bottom: -32px;
  display: flex;
  align-items: end;
  gap: 12px;
  color: #fff;
  font-size: 25px;
}

.moments-avatar {
  width: 76px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 14px;
  background: linear-gradient(145deg, #22b872, #2e7cf7);
}

.moments-feed {
  display: grid;
  padding-top: 54px;
}

.moment-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 18px 14px;
  border-bottom: 1px solid #edf0f4;
  color: #17181c;
}

.moment-avatar {
  width: 46px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #1f7edb, #24b879);
  font-weight: 900;
}

.moment-avatar.user {
  background: linear-gradient(145deg, #ff9eb8, #83d3d6);
}

.moment-content strong {
  color: #52668a;
}

.moment-content p {
  margin: 6px 0 10px;
  color: #17181c;
  line-height: 1.45;
}

.moment-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 240px;
}

.moment-photo-grid.single {
  grid-template-columns: 1fr;
  max-width: 210px;
}

.moment-photo {
  aspect-ratio: 1;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
}

.moment-photo-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
}

.moment-photo-button {
  padding: 0;
  border-radius: 3px;
  background: transparent;
}

.image-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 14px;
  padding: 58px 18px max(28px, calc(20px + var(--safe-bottom)));
  background: rgba(0, 0, 0, 0.82);
}

.image-preview-frame {
  min-height: 0;
  display: grid;
  place-items: center;
}

.image-preview-overlay img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 10px;
}

.image-preview-overlay .image-preview-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font-size: 30px;
}

.image-preview-overlay .image-preview-save {
  min-height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 15px;
  font-weight: 700;
}

.moment-photo-grid.single .moment-photo {
  aspect-ratio: 4 / 3;
}

.photo-a { background: linear-gradient(145deg, #253047, #61ca8b); }
.photo-b { background: linear-gradient(145deg, #303846, #ffd479); }
.photo-c { background: linear-gradient(145deg, #6e2cff, #ff719d); }
.photo-d { background: linear-gradient(145deg, #246bff, #7fd5ff); }

.moment-content footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  color: #9aa0aa;
}

.moment-content footer button {
  min-width: 44px;
  min-height: 28px;
  border-radius: 8px;
  color: #52668a;
  background: #f2f3f6;
}

.moment-action-menu {
  justify-self: end;
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 8px;
  background: #2f3640;
  white-space: nowrap;
}

.moment-action-menu[hidden] {
  display: none;
}

.moment-action-menu button {
  flex: 0 0 auto;
  min-height: 34px;
  min-width: 82px;
  padding: 0 10px;
  color: #fff;
  background: #2f3640;
  font-size: 13px;
}

.moment-comments {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f5f6f8;
}

.moment-comments:empty {
  display: none;
}

.moment-comments p,
.moment-comments button {
  margin: 0;
  color: #394150;
  font-size: 14px;
}

.moment-comments button {
  width: 100%;
  border-radius: 6px;
  padding: 3px 4px;
  background: transparent;
  text-align: left;
}

.moment-comment-form {
  display: grid;
  grid-template-columns: 1fr 54px;
  gap: 6px;
  margin-top: 8px;
}

.moment-comment-form[hidden] {
  display: none;
}

.moment-comment-form input {
  min-width: 0;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  padding: 8px;
  outline: 0;
}

.moment-comment-form button {
  border-radius: 12px;
  color: #fff;
  background: #19b45b;
  font-weight: 800;
}

.moment-comment-form:not([hidden]) {
  position: fixed;
  left: 50%;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--moment-keyboard-inset, 0px));
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 28px));
  z-index: 2600;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(145, 154, 169, .28);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 34px rgba(20, 28, 40, .18);
  backdrop-filter: blur(18px);
}
.moment-comment-form:not([hidden]) input {
  background: rgba(245, 247, 251, .96);
}
.moment-comments button[data-moment-comment-item] {
  -webkit-touch-callout: none;
  user-select: none;
}
.moment-comment-dock {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--moment-keyboard-inset, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(420px, calc(100vw - 28px)) !important;
  z-index: 99999 !important;
  display: grid !important;
  grid-template-columns: 1fr 54px !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(145, 154, 169, .28) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 14px 34px rgba(20, 28, 40, .22) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.moment-comment-dock input {
  min-width: 0;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  padding: 10px 12px;
  outline: 0;
  background: rgba(245, 247, 251, .98);
}
.moment-comment-dock button {
  border-radius: 12px;
  color: #fff;
  background: #19b45b;
  font-weight: 900;
}
:root[data-ui-mode="dark"] .moment-comment-dock,
html[data-ui-mode="dark"] .moment-comment-dock {
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(28, 31, 38, .96) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42) !important;
}
:root[data-ui-mode="dark"] .moment-comment-dock input,
html[data-ui-mode="dark"] .moment-comment-dock input {
  background: rgba(255, 255, 255, .08) !important;
  color: #f4f7fb !important;
}
:root[data-ui-mode="dark"] .moment-comment-form:not([hidden]),
html[data-ui-mode="dark"] .moment-comment-form:not([hidden]) {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(28, 31, 38, .95);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
}
:root[data-ui-mode="dark"] .moment-comment-form:not([hidden]) input,
html[data-ui-mode="dark"] .moment-comment-form:not([hidden]) input {
  background: rgba(255, 255, 255, .08);
  color: #f4f7fb;
}

.profile-page {
  min-height: 100%;
  padding: 26px 18px;
  color: #2a2d33;
  background: #f7f7f7;
}

.profile-page h1 {
  margin: 20px 0 22px;
  font-size: 42px;
  letter-spacing: 0;
}

.profile-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.profile-avatar .avatar {
  width: 78px;
  border-radius: 50%;
}

.profile-card strong {
  display: block;
  font-size: 25px;
}

.profile-card span {
  display: block;
  margin-top: 8px;
  color: #8b8f97;
}

.profile-menu {
  overflow: hidden;
  margin-top: 22px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}

.profile-menu button {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px 1fr 28px;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid #eef0f3;
  color: #2a2d33;
  background: #fff;
  text-align: left;
}

.profile-menu button:last-child {
  border-bottom: 0;
}

.profile-menu button span {
  color: #8b8f97;
  font-size: 23px;
}

.profile-menu button strong {
  font-size: 19px;
}

.profile-menu button em {
  color: #c1c5cc;
  font-style: normal;
  font-size: 30px;
}

.chat-extra-panel {
  max-height: 210px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #f6f6f6;
}

.sticker-button,
.plus-grid button {
  min-height: 64px;
  border-radius: 14px;
  background: #fff;
  color: #17181c;
  font-weight: 800;
}

.plus-action-button {
  display: grid;
  grid-template-rows: 52px 18px;
  place-items: center;
  gap: 4px;
  background: transparent;
}

.plus-action-icon {
  width: 38px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #7d8b9b, #2f3742);
  background-position: center;
  background-size: cover;
  font-weight: 900;
}

.plus-action-button span:last-child {
  color: #17181c;
  font-size: 13px;
}

.sticker-button small,
.sticker-grid figcaption {
  display: block;
  margin-top: 4px;
  color: #384150;
  font-size: 11px;
  line-height: 1.2;
}

.sticker-grid figure {
  margin: 0;
}

.sticker-grid button {
  width: 100%;
  min-height: 28px;
  margin-top: 4px;
  border-radius: 8px;
  color: #fff;
  background: #252a31;
  font-size: 12px;
  font-weight: 800;
}

.sticker-button img,
.sticker-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.chat-extra-panel[data-panel-type="stickers"] {
  max-height: min(42vh, 390px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.sticker-button {
  min-height: 132px;
  display: grid;
  grid-template-rows: minmax(92px, 1fr) auto;
  align-items: start;
  gap: 5px;
  padding: 6px;
}

.sticker-button img,
.sticker-grid img {
  object-fit: contain;
  background: rgba(255, 255, 255, 0.72);
}

.sticker-button small,
.sticker-grid figcaption {
  overflow-wrap: anywhere;
}

.sticker-grid {
  grid-template-columns: repeat(3, 1fr);
}

.sticker-select {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  color: var(--skin-muted);
  font-size: 12px;
}

.sticker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.forum-app {
  display: grid;
  gap: 12px;
}

.forum-toolbar {
  display: grid;
  grid-template-columns: 1fr 42px 42px;
  gap: 8px;
  align-items: center;
}

.forum-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.forum-refresh-button,
.forum-add-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: #252a31;
  font-size: 24px;
  font-weight: 900;
}

.forum-add-button {
  background: #f45b69;
}

.forum-hidden-tip {
  margin: -4px 2px 0;
  color: #8a93a1;
  font-size: 12px;
}

.forum-status {
  padding: 10px 12px;
  border-radius: 16px;
  color: #52606d;
  background: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}

.forum-board-config {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  color: #17181c;
}

.forum-board-config p,
.forum-board-config small {
  display: block;
  margin: 4px 0 0;
  color: #626b78;
}

.forum-board-config button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: #252a31;
  font-weight: 800;
}

.forum-tab {
  min-width: 72px;
  min-height: 38px;
  border-radius: 999px;
  color: #5b6470;
  background: rgba(255, 255, 255, 0.84);
  font-weight: 800;
}

.forum-tab.active {
  color: #fff;
  background: #f45b69;
}

.forum-feed {
  display: grid;
  gap: 10px;
}

.forum-post {
  position: relative;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  color: #17181c;
  box-shadow: 0 10px 26px rgba(26, 31, 45, 0.08);
}

.forum-post-stats {
  display: block;
  margin-bottom: 6px;
  color: #8a93a1;
  font-size: 13px;
}

.forum-post h2 {
  margin: 6px 0 8px;
  font-size: 18px;
  line-height: 1.25;
}

.forum-post p {
  margin: 0;
  color: #525966;
  line-height: 1.55;
  white-space: normal;
}

.forum-post button {
  min-height: 34px;
  margin-top: 12px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: #252a31;
  font-weight: 800;
}

.forum-detail {
  display: grid;
  gap: 12px;
}

.forum-post-full {
  background: rgba(255, 255, 255, 0.94);
}

.forum-comments {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  color: #17181c;
}

.forum-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.forum-detail-actions {
  display: flex;
  gap: 8px;
}

.forum-detail-head h2 {
  margin: 0;
  font-size: 18px;
}

.forum-detail-head button,
.forum-comment-form button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: #252a31;
  font-weight: 800;
}

.forum-detail-actions .danger-button {
  margin: 0;
  background: #e5484d;
}

.forum-comment-list {
  display: grid;
  gap: 8px;
}

.forum-comment {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 14px;
  color: #303744;
  background: #f4f6f9;
  text-align: left;
}

.forum-comment strong {
  color: #52668a;
  margin-right: 8px;
  overflow-wrap: anywhere;
}

.forum-comment small {
  display: block;
  color: #8a93a1;
  font-size: 12px;
}

.forum-comment span {
  color: #303744;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}

.forum-comment-form {
  display: grid;
  grid-template-columns: 1fr 58px;
  gap: 8px;
}

.forum-comment-form input {
  min-width: 0;
  border: 1px solid #e4e7ed;
  border-radius: 14px;
  padding: 10px;
  outline: 0;
}

.empty-text {
  margin: 0;
  color: #8a93a1;
}

.forum-discussion {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  background: #f4f6f9;
}

.forum-discussion p {
  display: block;
  margin: 0;
  color: #303744;
  font-size: 13px;
  text-align: left;
}

.forum-discussion strong {
  color: #52668a;
  margin-right: 8px;
  overflow-wrap: anywhere;
}

.forum-discussion span {
  text-align: left;
  overflow-wrap: anywhere;
}

.moment-editor {
  min-height: 100%;
  padding: 18px;
  color: #17181c;
  background: #fff;
}

.moment-editor-top {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  min-height: 54px;
}

.moment-editor-top strong {
  justify-self: center;
  font-size: 20px;
}

.moment-editor-top button {
  color: #17181c;
  background: transparent;
  font-weight: 800;
}

.moment-editor-top button:last-child {
  color: #8a8f99;
}

.moment-editor textarea {
  width: 100%;
  min-height: 150px;
  margin-top: 24px;
  border: 0;
  outline: 0;
  resize: none;
  color: #17181c;
  font-size: 18px;
  line-height: 1.6;
  background: #fafafa;
  padding: 14px;
}

.moment-remind-row {
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid #eef0f3;
  font-size: 18px;
}

.moment-remind-row span {
  font-size: 28px;
}

.moment-remind-row em {
  color: #c1c5cc;
  font-style: normal;
  font-size: 28px;
}

.moment-image-picker {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.moment-image-picker label,
#momentImagePreview img {
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fafafa;
  color: #c9cdd3;
  font-size: 42px;
}

.moment-image-picker input {
  display: none;
}

#momentImagePreview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#momentImagePreview img {
  object-fit: cover;
}

button.bubble {
  border: 0;
  appearance: none;
}

.message-action-menu {
  position: fixed;
  z-index: 50;
  display: flex;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(24, 28, 34, 0.94);
  transform: translateX(-50%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.message-action-menu button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 800;
}

:root[data-ui-mode="light"] .message-action-menu,
body.light .message-action-menu,
.light .message-action-menu {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #17181c !important;
}

:root[data-ui-mode="light"] .message-action-menu button,
body.light .message-action-menu button,
.light .message-action-menu button {
  color: #17181c !important;
  background: rgba(17, 19, 24, 0.08) !important;
}

:root[data-ui-mode="light"] .message-action-menu button:hover,
body.light .message-action-menu button:hover,
.light .message-action-menu button:hover {
  background: rgba(17, 19, 24, 0.14) !important;
}

.wallet-balance {
  margin-top: 8px;
  font-size: 34px;
  font-weight: 900;
  color: #111318;
}

.wallet-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 18px;
}

.wallet-hero-card {
  border-radius: 30px;
  padding: 26px 26px 24px;
  background: linear-gradient(145deg, #222, #383838);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

.wallet-hero-card,
.wallet-hero-card * {
  color-scheme: dark;
}
.wallet-hero-card > span,
.wallet-hero-card .wallet-hero-grid span {
  color: rgba(255, 255, 255, 0.66) !important;
}
.wallet-hero-card .wallet-hero-grid b {
  color: #fff !important;
}

.wallet-hero-card span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 800;
}

.wallet-hero-card strong {
  display: block;
  margin: 24px 0 28px;
  font-size: clamp(44px, 12vw, 66px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wallet-hero-card hr {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 0 22px;
}

.wallet-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wallet-hero-grid b {
  display: block;
  margin-top: 8px;
  font-size: 22px;
}

.wallet-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wallet-section-head h2 {
  margin: 0;
  font-size: 22px;
}

.wallet-filter-tabs {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.wallet-filter-tabs button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--skin-muted, #8a8f99);
  font-weight: 900;
}

.wallet-filter-tabs button.active {
  background: #111;
  color: #fff;
}

.wallet-record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wallet-record-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
  text-align: left;
}

.wallet-record-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(142, 174, 215, 0.16);
  font-size: 20px;
}

.wallet-record-row strong {
  display: block;
  font-size: 15px;
  color: var(--skin-text, #222);
}

.wallet-record-row small {
  display: block;
  margin-top: 4px;
  color: var(--skin-muted, #8a8f99);
  line-height: 1.35;
}

.wallet-record-amount {
  font-size: 17px;
  font-weight: 950;
  white-space: nowrap;
}

.wallet-record-row.income .wallet-record-amount { color: #1d8c58; }
.wallet-record-row.expense .wallet-record-amount { color: #202226; }

.wallet-empty {
  padding: 54px 0;
  text-align: center;
  color: var(--skin-muted, #aaa);
  font-weight: 800;
}

.wallet-adjust {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

:root[data-ui-mode="dark"] .wallet-filter-tabs button,
body.dark .wallet-filter-tabs button {
  background: rgba(255, 255, 255, 0.09);
}

:root[data-ui-mode="dark"] .wallet-filter-tabs button.active,
body.dark .wallet-filter-tabs button.active {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
}

:root[data-ui-mode="dark"] .wallet-record-row,
body.dark .wallet-record-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-ui-mode="dark"] .wallet-record-row.expense .wallet-record-amount,
body.dark .wallet-record-row.expense .wallet-record-amount {
  color: #f1f1f3;
}

/* Tavern-inspired dark/light skin */
:root {
  --page-bg: #141416;
  --phone-bg: #1f1f22;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.09);
  --skin-border: rgba(255, 255, 255, 0.1);
  --skin-accent: #d4a96a;
  --skin-accent-2: #8e86d6;
  --skin-text: #ededef;
  --skin-muted: #9a9aa0;
  --skin-shadow: 0 12px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --skin-home: radial-gradient(ellipse 80% 50% at 30% 8%, rgba(142, 134, 214, 0.13), transparent 60%),
    radial-gradient(ellipse 70% 40% at 90% 95%, rgba(212, 169, 106, 0.09), transparent 55%),
    #1f1f22;
}

:root[data-ui-mode="dark"] {
  color-scheme: dark;
  --page-bg: #141416;
  --phone-bg: #1f1f22;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.09);
  --skin-border: rgba(255, 255, 255, 0.1);
  --skin-accent: #d4a96a;
  --skin-accent-2: #8e86d6;
  --skin-text: #ededef;
  --skin-muted: #9a9aa0;
  --skin-shadow: 0 12px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --skin-home: radial-gradient(ellipse 80% 50% at 30% 8%, rgba(142, 134, 214, 0.13), transparent 60%),
    radial-gradient(ellipse 70% 40% at 90% 95%, rgba(212, 169, 106, 0.09), transparent 55%),
    #1f1f22;
}

:root[data-ui-mode="light"] {
  color-scheme: light;
  --page-bg: #e8e2d4;
  --phone-bg: #f1ebdd;
  --surface: #f7f2e9;
  --surface-strong: #fbf7ee;
  --skin-border: rgba(60, 45, 25, 0.1);
  --skin-accent: #a6733a;
  --skin-accent-2: #6b7a5a;
  --skin-text: #33291c;
  --skin-muted: #8a7b62;
  --skin-shadow: 0 10px 40px rgba(60, 45, 25, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --skin-home: radial-gradient(ellipse 80% 50% at 30% 8%, rgba(166, 115, 58, 0.07), transparent 60%),
    radial-gradient(ellipse 70% 40% at 90% 95%, rgba(107, 122, 90, 0.08), transparent 55%),
    #f1ebdd;
}

html,
body {
  background: var(--page-bg);
}

.device-shell {
  padding: max(0px, env(safe-area-inset-top)) max(0px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left));
  background: var(--page-bg);
  overflow: hidden;
}

.phone {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  background: var(--phone-bg);
  box-shadow: none;
}

.screen {
  background: var(--skin-home);
  color: var(--skin-text);
}

.status-bar,
.app-topbar,
.widget-label,
.app-tile small,
.dock {
  color: var(--skin-muted);
}

.widget,
.panel,
.settings-row,
.persona-row,
.forum-post,
.moment-item,
.preset-card,
.date-hero,
.date-preset-state,
.date-line,
.date-composer,
.memo-card,
.notes-widget-tile {
  border: 1px solid var(--skin-border);
  background: var(--surface);
  color: var(--skin-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.widget::before,
.panel::before,
.moment-item::before,
.preset-card::before,
.date-line::before {
  content: "";
  display: block;
  height: 1px;
  margin: -1px 12px 10px;
  background: linear-gradient(to right, transparent, var(--skin-accent), transparent);
  opacity: 0.28;
}

.app-screen,
.wechat-shell,
.profile-page,
.moments-page,
.forum-page,
.date-app {
  background: var(--phone-bg);
  color: var(--skin-text);
}

.app-topbar span,
.panel h2,
.profile-page h1,
.moment-content strong,
.forum-post h2,
.date-hero strong,
.preset-card > strong {
  color: var(--skin-accent);
  letter-spacing: 0.02em;
}

.settings-symbol,
.app-icon .icon-face:not(.custom-icon),
.dock-icon .icon-face:not(.custom-icon),
.composer-send,
.date-composer button:last-child,
.tiny-button {
  background: linear-gradient(135deg, var(--skin-accent-2), var(--skin-accent));
  color: #fff;
}

.app-tile {
  color: var(--skin-text);
}

.dock {
  border-color: var(--skin-border);
  background: color-mix(in srgb, var(--phone-bg) 70%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.field input,
.field select,
.field textarea,
.composer-input-wrap,
.date-composer textarea,
.moment-comment-form input,
.forum-comment-form input {
  border-color: var(--skin-border);
  background: var(--surface-strong);
  color: var(--skin-text);
}

.bubble.assistant,
.message-action-menu,
.chat-extra-panel,
.moment-action-menu,
.moments-top-menu {
  background: color-mix(in srgb, var(--phone-bg) 88%, #000 12%);
  border: 1px solid var(--skin-border);
  color: var(--skin-text);
}

.bubble.user {
  background: color-mix(in srgb, var(--skin-accent-2) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--skin-accent-2) 28%, transparent);
}

.settings-row small,
.panel p,
.field span,
.date-hero span,
.date-preset-state span,
.date-line strong {
  color: var(--skin-muted);
}

@media (display-mode: standalone) {
  .device-shell {
    min-height: 100dvh;
    padding: 0;
  }

  .phone {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

@media (max-width: 520px) {
  .device-shell {
    padding: 0;
  }

  .phone {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

/* WeChat pages need their own themed layout, not the generic card ornament. */
.moment-item::before,
.profile-card::before,
.profile-menu::before {
  content: none;
  display: none;
}

.wechat-shell,
.wechat-main {
  color: var(--skin-text);
  background: var(--phone-bg);
}

.wechat-bottom-tabs {
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb, var(--phone-bg) 78%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.wechat-tab {
  color: var(--skin-muted);
}

.wechat-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--skin-accent-2), var(--skin-accent));
}

.moments-page {
  background: var(--phone-bg);
  color: var(--skin-text);
}

.moments-feed {
  display: grid;
  padding-top: 54px;
}

.moment-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 18px 14px;
  border: 0;
  border-bottom: 1px solid var(--skin-border);
  border-radius: 0;
  background: transparent;
  color: var(--skin-text);
  box-shadow: none;
}

.moment-content {
  min-width: 0;
}

.moment-content strong {
  color: var(--skin-accent);
}

.moment-content p {
  color: var(--skin-text);
  word-break: normal;
  overflow-wrap: break-word;
}

.moment-content footer {
  color: var(--skin-muted);
}

.moment-content footer button,
.moment-comments {
  background: var(--surface);
  color: var(--skin-text);
}

.moment-content footer button {
  color: var(--skin-muted);
}

.moment-comments {
  border: 1px solid var(--skin-border);
}

.moment-comments p,
.moment-comments button {
  color: var(--skin-text);
}

.moment-comment-form input,
.moment-char-panel,
.moment-char-list label,
.moment-char-actions button {
  border: 1px solid var(--skin-border);
  background: var(--surface-strong);
  color: var(--skin-text);
}

.profile-page {
  background: var(--phone-bg);
  color: var(--skin-text);
}

.profile-card,
.profile-menu {
  border: 1px solid var(--skin-border);
  background: var(--surface);
  box-shadow: none;
}

.profile-card strong,
.profile-menu button strong {
  color: var(--skin-text);
}

.profile-card span,
.profile-menu button span,
.profile-menu button em {
  color: var(--skin-muted);
}

.profile-menu button {
  border-bottom-color: var(--skin-border);
  background: transparent;
  color: var(--skin-text);
}

.wechat-me-card {
  min-height: 160px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 18px;
  padding: 28px 24px;
  color: var(--skin-text);
  background: var(--surface-strong);
  border-bottom: 1px solid var(--skin-border);
}

.wechat-me-card .profile-avatar {
  width: 86px;
  height: 86px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}

.wechat-me-card .profile-avatar .avatar {
  width: 86px;
  height: 86px;
  border-radius: 16px;
}

.wechat-me-info {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 0;
  text-align: left;
  background: transparent;
}

.wechat-me-info strong {
  color: var(--skin-text);
  font-size: 28px;
  line-height: 1;
}

.wechat-me-info span {
  color: var(--skin-muted);
  font-size: 18px;
}

.wechat-me-info small {
  display: flex;
  gap: 8px;
}

.wechat-me-info small span {
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--skin-border);
  border-radius: 999px;
  color: var(--skin-muted);
  background: transparent;
}

.wechat-me-card > em {
  color: var(--skin-muted);
  font-style: normal;
  font-size: 22px;
}

.wechat-me-section {
  margin-top: 10px;
  border-top: 1px solid var(--skin-border);
  border-bottom: 1px solid var(--skin-border);
  background: var(--surface-strong);
}

.wechat-me-section.single {
  margin-top: 12px;
}

.wechat-me-section button {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--skin-border);
  color: var(--skin-text);
  background: transparent;
  text-align: left;
}

.wechat-me-section button:last-child {
  border-bottom: 0;
}

.wechat-me-section strong {
  color: var(--skin-text);
  font-size: 20px;
  font-weight: 650;
}

.wechat-me-section small {
  color: var(--skin-muted);
  font-size: 13px;
}

.wechat-me-section em {
  color: var(--skin-muted);
  font-style: normal;
  font-size: 26px;
}

.me-icon {
  width: 30px;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.me-icon.green { color: #20c997; }
.me-icon.cube { color: #60a5fa; }
.me-icon.blue { color: #38bdf8; }
.me-icon.cyan { color: #22d3ee; }
.me-icon.red { color: #fb7185; }
.me-icon.yellow { color: #facc15; }

.user-mask-panel {
  display: grid;
  gap: 14px;
}

.user-mask-panel .image-hotspot {
  justify-self: center;
}

.user-mask-panel .avatar {
  width: 86px;
  height: 86px;
  border-radius: 24px;
}

/* Minimal monochrome glass skin → 改为「类iOS深灰」 */
:root[data-ui-mode="dark"] {
  --page-bg: #141416;
  --phone-bg: #1f1f22;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.09);
  --skin-border: rgba(255, 255, 255, 0.1);
  --skin-accent: #d4a96a;
  --skin-accent-2: #8e86d6;
  --skin-text: #ededef;
  --skin-muted: rgba(237, 237, 239, 0.6);
  --skin-shadow: 0 12px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --skin-home: radial-gradient(ellipse 80% 50% at 30% 8%, rgba(142, 134, 214, 0.13), transparent 60%),
    radial-gradient(ellipse 70% 40% at 90% 95%, rgba(212, 169, 106, 0.09), transparent 55%),
    #1f1f22;
  --glass-icon-bg: rgba(255, 255, 255, 0.09);
  --glass-icon-border: rgba(255, 255, 255, 0.14);
  --glass-icon-text: rgba(237, 237, 239, 0.9);
}

:root[data-ui-mode="light"] {
  --page-bg: #e8e2d4;
  --phone-bg: #f1ebdd;
  --surface: #f7f2e9;
  --surface-strong: #fbf7ee;
  --skin-border: rgba(60, 45, 25, 0.1);
  --skin-accent: #a6733a;
  --skin-accent-2: #6b7a5a;
  --skin-text: #33291c;
  --skin-muted: rgba(51, 41, 28, 0.6);
  --skin-shadow: 0 10px 40px rgba(60, 45, 25, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --skin-home: radial-gradient(ellipse 80% 50% at 30% 8%, rgba(166, 115, 58, 0.07), transparent 60%),
    radial-gradient(ellipse 70% 40% at 90% 95%, rgba(107, 122, 90, 0.08), transparent 55%),
    #f1ebdd;
  --glass-icon-bg: #fbf7ee;
  --glass-icon-border: rgba(60, 45, 25, 0.1);
  --glass-icon-text: #33291c;
}

html,
body,
.device-shell {
  background: var(--page-bg) !important;
}

.phone {
  background: var(--phone-bg) !important;
}

.screen {
  background: var(--skin-home) !important;
}

.widget,
.dock,
.panel,
.date-line,
.forum-post,
.forum-comments,
.profile-menu,
.profile-card,
.date-person-card,
.date-composer,
.composer,
.wechat-tabbar {
  background: var(--surface) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

.icon-face:not(.custom-icon),
.chat-gradient,
.world-gradient,
.forum-gradient,
.preset-gradient,
.memory-gradient,
.diary-gradient,
.date-gradient,
.settings-gradient {
  color: var(--glass-icon-text) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.025)),
    var(--glass-icon-bg) !important;
  border: 1px solid var(--glass-icon-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 28px rgba(0, 0, 0, 0.14) !important;
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}

.custom-icon {
  position: relative;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.custom-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 58%);
  pointer-events: none;
}

.app-tile small,
.dock-icon small,
.status-bar,
.app-topbar,
.widget-label {
  color: var(--skin-muted) !important;
}

.widget strong,
.panel h2,
.profile-page h1,
.date-picker-head h2,
.forum-post h2,
.wechat-section-head h2,
.app-topbar span {
  color: var(--skin-text) !important;
}

/* Minimal skin fixes: keep wallpaper, chat tools, and dark surfaces correct */
.screen {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)),
    var(--wallpaper-image, var(--skin-home)) center / cover no-repeat !important;
}

:root[data-ui-mode="dark"] .screen {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
    var(--wallpaper-image, var(--skin-home)) center / cover no-repeat !important;
}

.chat-layout {
  background-color: var(--phone-bg) !important;
  color: var(--skin-text);
}

.chat-layout.bubble-glass {
  --chat-bubble-text: var(--skin-text);
}

.chat-layout.bubble-glass .bubble.assistant {
  background: color-mix(in srgb, var(--chat-bubble-assistant) 68%, var(--phone-bg) 32%) !important;
  color: var(--skin-text) !important;
  border-color: color-mix(in srgb, var(--chat-bubble-assistant) 44%, var(--skin-border)) !important;
}

.chat-layout.bubble-glass .bubble.user {
  background: color-mix(in srgb, var(--chat-bubble-user) 82%, transparent) !important;
  color: var(--skin-text) !important;
  border-color: color-mix(in srgb, var(--chat-bubble-user) 54%, var(--skin-border)) !important;
}

:root[data-ui-mode="light"] .chat-layout.bubble-glass {
  --chat-bubble-text: #111318;
}

:root[data-ui-mode="light"] .chat-layout.bubble-glass .bubble.assistant,
:root[data-ui-mode="light"] .chat-layout.bubble-glass .bubble.user {
  color: #111318 !important;
}

.wechat-chat-topbar,
.composer,
.composer-input-wrap,
.wechat-bottom-tabs,
.wechat-contact,
.settings-row,
.moment-item,
.moment-comments,
.forum-post,
.forum-comments,
.date-composer,
.date-line {
  background: var(--surface) !important;
  border-color: var(--skin-border) !important;
  color: var(--skin-text) !important;
}

.composer textarea,
.composer-icon,
.wechat-top-icon,
.wechat-contact strong,
.wechat-tab,
.settings-row strong,
.forum-comment,
.forum-comment span,
.moment-content p,
.moment-comments p,
.moment-comments button {
  color: var(--skin-text) !important;
}

.composer-input-wrap,
.composer textarea,
.moment-comment-form input,
.forum-comment-form input,
.field input,
.field textarea,
.field select {
  background: var(--surface-strong) !important;
  border-color: var(--skin-border) !important;
  color: var(--skin-text) !important;
}

.composer-send,
.date-composer button:last-child,
.forum-tab.active,
.wechat-tab.active {
  background: var(--skin-accent) !important;
  color: var(--phone-bg) !important;
}

.plus-grid button,
.plus-action-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.plus-action-icon:not(.custom-icon) {
  color: var(--glass-icon-text) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035)),
    var(--glass-icon-bg) !important;
  border: 1px solid var(--glass-icon-border) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 8px 22px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.plus-action-icon.custom-icon {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.plus-action-button span:last-child,
.sticker-button small,
.sticker-grid figcaption,
.wechat-contact small,
.settings-row small,
.forum-post-stats,
.date-line strong {
  color: var(--skin-muted) !important;
}

/* Home layout: no fake status island, compact iOS standalone spacing. */
.dynamic-island,
.status-bar {
  display: none !important;
}

.home-screen {
  padding: max(12px, env(safe-area-inset-top, 0px)) 18px calc(18px + var(--safe-bottom)) !important;
  flex-direction: column !important;
}
.home-screen.active {
  display: flex !important;
}

.app-screen {
  padding-top: 0 !important;
  background: var(--phone-bg) !important;
}

.app-body {
  padding: calc(54px + env(safe-area-inset-top, 0px)) 0 0 !important;
}

.wechat-shell,
.date-app {
  min-height: 100%;
  gap: 0 !important;
  background: var(--phone-bg) !important;
}

.wechat-main,
.date-messages {
  background: var(--phone-bg);
}

html,
body,
.device-shell,
.phone {
  width: 100vw !important;
  max-width: none !important;
  height: var(--app-height) !important;
  min-height: var(--app-height) !important;
  margin: 0 !important;
}

body,
.device-shell {
  overflow: hidden !important;
  background: var(--phone-bg) !important;
}

.app-topbar {
  top: max(4px, env(safe-area-inset-top, 0px)) !important;
}

.home-content {
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  gap: 14px;
}

.widget {
  min-height: 96px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 24px;
}

.widget::before {
  content: none !important;
  display: none !important;
}

.quick-chat-frame {
  width: 76px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--skin-border);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035)),
    var(--surface-strong);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
}

.quick-chat-frame .avatar {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  font-size: 26px;
}

.quick-chat-frame .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-chat-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.quick-chat-copy strong {
  margin: 0;
  overflow: hidden;
  color: var(--skin-text) !important;
  font-size: 22px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-chat-copy small {
  overflow: hidden;
  color: var(--skin-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-widget-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 164px;
}

.home-widget-layout .notes-widget-tile {
  grid-column: auto !important;
  min-height: 164px;
  padding: 13px;
  border-radius: 22px;
}

.notes-widget-title {
  justify-self: start;
  padding: 0;
  color: var(--widget-text-color);
  background: transparent;
  font-weight: 900;
}

.notes-widget-preview {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.notes-widget-preview strong {
  overflow: hidden;
  color: var(--widget-text-color);
  font-size: 18px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-widget-preview p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--widget-text-color) 82%, transparent);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.home-frame-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 164px;
}

.home-photo-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--skin-border);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035)),
    var(--surface);
  color: var(--skin-muted);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
}

.home-photo-frame-large {
  min-height: 164px;
  border-radius: 22px;
}

.home-photo-frame input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.home-frame-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.home-frame-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 58%);
}

.home-frame-placeholder {
  color: var(--skin-muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

@media (max-width: 380px) {
  .widget {
    grid-template-columns: 64px minmax(0, 1fr) auto;
  }

  .quick-chat-frame {
    width: 64px;
    border-radius: 18px;
  }

  .home-widget-layout,
  .home-photo-frame-large,
  .home-widget-layout .notes-widget-tile {
    min-height: 148px;
  }
}

.note-list,
.period-list {
  display: grid;
  gap: 10px;
}

.note-card,
.period-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--skin-border);
  border-radius: 18px;
  background: var(--surface);
}

.note-card-main {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 0;
  text-align: left;
  color: var(--skin-text);
  background: transparent;
}

.note-card-main strong,
.period-card strong {
  color: var(--skin-text);
}

.note-card-main p,
.period-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--skin-muted);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.note-card-main small,
.period-card small {
  color: var(--skin-muted);
}

.note-delete,
.period-card button,
.inline-actions .secondary-button {
  justify-self: start;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--skin-text);
  background: var(--surface-strong);
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-title-row > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.section-title-row h2,
.section-title-row p {
  margin: 0;
}

.section-title-row button {
  flex: 0 0 auto;
}

.note-editor-panel {
  border-color: color-mix(in srgb, var(--skin-accent) 28%, var(--skin-border));
}

.important-dates-panel {
  border-color: color-mix(in srgb, var(--skin-accent-2) 24%, var(--skin-border));
}

.form-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.form-action-grid button {
  width: 100%;
  height: 56px;
  min-height: 56px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border-radius: 16px;
  line-height: 1.1;
}

.wide-file-button,
.form-action-grid button {
  min-height: 56px;
}

.font-list {
  display: grid;
  gap: 8px;
}

.font-row {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--surface-strong);
}

.font-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-text {
  margin: 0;
  color: var(--skin-muted);
}

.memory-search-input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--skin-border);
  border-radius: 16px;
  outline: 0;
  color: var(--skin-text);
  background: var(--surface-strong);
}

.memory-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.memory-hero h2 {
  margin: 0;
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1.1;
}

.memory-hero p {
  margin: 4px 0 0;
}

.memory-hero > strong,
.memory-filter-pill,
.memory-back-button {
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--skin-text);
  background: var(--surface-strong);
  white-space: nowrap;
}

.memory-toolbar {
  display: grid;
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.memory-role-list {
  display: grid;
  gap: 8px;
}

.memory-role-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border-radius: 18px;
  color: var(--skin-text);
  background: transparent;
  text-align: left;
}

.memory-role-row:hover,
.memory-role-row:focus-visible {
  background: var(--surface-strong);
}

.memory-role-avatar,
.memory-selected-avatar {
  width: 48px;
  height: 48px;
}

.memory-role-row span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.memory-role-row strong,
.memory-selected-head strong {
  color: var(--skin-text);
}

.memory-role-row small,
.memory-selected-head small {
  overflow: visible;
  color: var(--skin-muted);
  text-overflow: clip;
  white-space: normal;
}

.memory-role-row em {
  color: var(--skin-text);
  font-style: normal;
  font-weight: 900;
}

.memory-selected-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.memory-module-list {
  display: grid;
  gap: 12px;
}

.memory-module-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--skin-border);
  border-radius: 18px;
  background: var(--surface);
}

.memory-module-card header {
  display: grid;
  gap: 4px;
}

.memory-module-card header strong {
  color: var(--skin-text);
}

.memory-module-card header small,
.memory-entry > header > span {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 800;
}

.memory-entry-list {
  display: grid;
  gap: 8px;
}

/* 历史记忆重建预览面板：中间列表需独立滚动，否则候选记忆多时会被裁剪、划不动 */
.memory-detail-panel .memory-entry-list {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.memory-entry {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface-strong);
}

.memory-entry.pinned {
  border: 1px solid color-mix(in srgb, #ffd166 70%, var(--skin-border));
  background: color-mix(in srgb, #ffd166 12%, var(--surface-strong));
}

.memory-entry header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.memory-entry header > span {
  flex: 1 1 180px;
  min-width: 0;
}

.memory-entry-actions {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.memory-entry-actions button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--skin-text);
  background: var(--surface);
}

.memory-entry p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--skin-text);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.memory-entry-preview {
  cursor: pointer;
}

.memory-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  padding: 18px;
  background: rgba(8, 10, 14, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.memory-detail-panel {
  max-height: min(78vh, 680px);
  min-height: 420px;
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 78%, transparent);
  border-radius: 28px;
  color: var(--skin-text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)),
    color-mix(in srgb, var(--phone-bg) 88%, transparent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(28px) saturate(1.12);
  -webkit-backdrop-filter: blur(28px) saturate(1.12);
}

.memory-detail-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.memory-detail-panel header > button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  font-size: 20px;
  font-weight: 900;
}

.memory-detail-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.memory-detail-avatar.avatar {
  width: 46px;
  border-radius: 15px;
}

.memory-detail-title span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.memory-detail-title strong,
.memory-detail-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-detail-title strong {
  color: var(--skin-text);
  font-size: 17px;
}

.memory-detail-title small {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 800;
}

.memory-detail-panel textarea {
  width: 100%;
  min-height: 0;
  resize: none;
  border: 1px solid color-mix(in srgb, var(--skin-border) 68%, transparent);
  border-radius: 20px;
  outline: 0;
  padding: 13px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  line-height: 1.65;
  -webkit-overflow-scrolling: touch;
}

.memory-detail-actions {
  display: grid;
  grid-template-columns: 1fr 0.9fr 0.8fr;
  gap: 8px;
}

.memory-detail-actions button {
  min-height: 42px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2));
  font-weight: 900;
}

.memory-detail-actions button:nth-child(2) {
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
}

.period-calendar {
  display: grid;
  gap: 10px;
}

.period-calendar header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
}

.period-calendar header strong {
  text-align: center;
  color: var(--skin-text);
}

.period-calendar header button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--skin-text);
  background: var(--surface-strong);
}

.period-weekdays,
.period-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.period-weekdays span {
  text-align: center;
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 800;
}

.period-day {
  position: relative;
  min-height: 42px;
  border: 1px solid var(--skin-border);
  border-radius: 14px;
  color: var(--skin-text);
  background: var(--surface);
}

.period-day span {
  position: relative;
  z-index: 1;
  font-weight: 800;
}

.period-day.outside {
  opacity: 0.34;
}

.period-day.today {
  border-color: color-mix(in srgb, var(--skin-accent) 70%, var(--skin-border));
}

.period-day.period-range {
  background: color-mix(in srgb, #ff8fab 28%, var(--surface)) !important;
}

.period-day.period-start,
.period-day.period-end {
  color: #3c1724;
  background: #ff8fab !important;
  border-color: #ff8fab;
}

.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd166;
}

.period-day.tap-ignored {
  animation: periodTapIgnored 0.28s ease;
}

@keyframes periodTapIgnored {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-2px); }
  70% { transform: translateX(2px); }
}

.period-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 800;
}

.period-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.period-legend i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-start { background: #ff8fab; }
.legend-range { background: color-mix(in srgb, #ff8fab 36%, transparent); }
.legend-predict { background: #ffd166; }

/* ============================================================
   主屏重设计 v2 —— 极简温润 / 纸张质感 / 类iOS深灰
   用 --skin-* 变量驱动，自动适配 light / dark
   ============================================================ */

.home-screen {
  background: var(--wallpaper-image, var(--skin-home)) center / cover no-repeat !important;
}

.home-content {
  gap: 0 !important;
  padding-top: 2px;
}

/* —— 顶部大时钟 —— */
.clock-hero {
  display: flex;
  flex-direction: column;
  padding: 14px 6px 22px;
}
.clock-hero .clock-greeting {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--skin-muted);
  margin-bottom: 2px;
}
.clock-hero .clock-time {
  font-size: 60px;
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--skin-text);
  font-variant-numeric: tabular-nums;
  font-family: "SF Pro Display", var(--app-font-family);
}
.clock-hero .clock-date {
  font-size: 14px;
  font-weight: 500;
  color: var(--skin-muted);
  margin-top: 7px;
}

/* —— 继续聊天卡片 —— */
.widget.continue-card {
  position: relative;
  min-height: 86px !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px;
  padding: 15px !important;
  border-radius: 26px !important;
  border: 1px solid var(--skin-border) !important;
  background: linear-gradient(135deg, var(--surface-strong), var(--surface)) !important;
  color: var(--skin-text) !important;
  box-shadow: var(--skin-shadow);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
}
.widget.continue-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--skin-accent) 8%, transparent), transparent 55%);
  pointer-events: none;
}
.continue-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.widget.continue-card .quick-chat-frame {
  position: relative;
  z-index: 2;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  padding: 2px;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--skin-accent) 32%, transparent);
}
.widget.continue-card .quick-chat-frame .avatar,
.widget.continue-card .quick-chat-frame .quick-chat-avatar {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  display: block;
}
.widget.continue-card .quick-chat-frame .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget.continue-card .quick-chat-copy {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.widget.continue-card .quick-chat-copy .widget-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--skin-accent);
  opacity: 1;
}
.widget.continue-card .quick-chat-copy strong {
  margin-top: 1px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700;
  color: var(--skin-text);
}
.widget.continue-card .quick-chat-copy small {
  margin-top: 2px;
  font-size: 13px;
  color: var(--skin-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.continue-enter {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--phone-bg);
  background: var(--skin-text);
}

/* —— 备忘录 + 相框 行 —— */
.app-grid {
  gap: 18px 10px !important;
  padding: 0 2px !important;
}
.home-widget-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.home-widget-layout .notes-widget-tile {
  min-height: 128px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--skin-border);
  background: var(--surface);
  color: var(--skin-text);
  box-shadow: var(--skin-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.notes-widget-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--skin-accent-2);
  text-align: left;
}
.notes-widget-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--skin-accent-2);
}
.notes-widget-preview {
  margin-top: 10px;
}
.notes-widget-preview strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--skin-text);
}
.notes-widget-preview p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--skin-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-photo-frame-large {
  min-height: 128px;
  border-radius: 24px;
  border: 1px solid var(--skin-border);
  background: linear-gradient(160deg, var(--skin-accent), var(--skin-accent-2));
  box-shadow: var(--skin-shadow);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-photo-frame-large::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 25%, rgba(255, 255, 255, 0.22), transparent 55%);
  pointer-events: none;
}
.home-photo-frame-large .home-frame-placeholder {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 600;
  z-index: 1;
}
.home-photo-frame-large .home-frame-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.auto-status-panel.home-photo-frame-large {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--skin-border);
  background: var(--surface);
  color: var(--skin-text);
  text-align: left;
}

.auto-status-panel.home-photo-frame-large::after {
  opacity: 0.45;
}

.auto-status-panel strong,
.auto-status-panel span,
.auto-status-panel p {
  position: relative;
  z-index: 1;
}

.auto-status-panel strong {
  color: var(--skin-accent-2);
  font-size: 13px;
  font-weight: 900;
}

.auto-status-panel span {
  color: var(--skin-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.auto-status-panel p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--skin-muted);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* —— 应用分区标题 —— */
.home-section-label {
  grid-column: 1 / -1;
  margin: 8px 4px 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--skin-muted);
}

/* —— App 图标 —— */
.app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
}
.app-tile .icon-face:not(.custom-icon),
.app-tile .app-icon-face:not(.custom-icon) {
  width: 60px;
  height: 60px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--skin-text) !important;
  background: var(--surface-strong) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--skin-text) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: transform 0.18s ease;
}
.app-tile .icon-face.custom-icon {
  width: 60px;
  height: 60px;
  border-radius: 19px;
  border: 1px solid var(--skin-border);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--skin-text) 8%, transparent);
}
.app-tile:active .icon-face,
.app-tile:active .app-icon-face {
  transform: scale(0.92);
}
.app-tile small {
  font-size: 11px;
  color: var(--skin-text);
  opacity: 0.82;
}
/* 不同图标着色，增加层次（按网格顺序循环） */
.app-tile:nth-child(4n+3) .icon-face:not(.custom-icon) { color: var(--skin-accent) !important; }
.app-tile:nth-child(4n+1) .icon-face:not(.custom-icon) { color: var(--skin-accent-2) !important; }

/* —— Dock —— */
.dock {
  margin-top: 22px;
  padding: 12px 14px !important;
  border-radius: 28px !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent) !important;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--skin-text) 10%, transparent) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.dock .dock-icon .icon-face {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}
.dock .dock-icon:nth-child(1) .icon-face:not(.custom-icon) { background: linear-gradient(135deg, var(--skin-accent-2), var(--skin-accent)); }
.dock .dock-icon:nth-child(2) .icon-face:not(.custom-icon) { background: linear-gradient(135deg, var(--skin-accent), color-mix(in srgb, var(--skin-accent) 60%, #fff)); }
.dock .dock-icon:nth-child(3) .icon-face:not(.custom-icon) { background: linear-gradient(135deg, var(--skin-muted), var(--skin-accent-2)); }
.dock .dock-icon:nth-child(4) .icon-face:not(.custom-icon) { background: linear-gradient(135deg, #7b68ee, #f08a9b 58%, #f4c76d); }

/* —— 入场动画 —— */
.home-screen.active .clock-hero { animation: homeRise 0.5s ease both; }
.home-screen.active .widget.continue-card { animation: homeRise 0.5s ease 0.06s both; }
.home-screen.active .home-widget-layout { animation: homeRise 0.5s ease 0.12s both; }
.home-screen.active .app-tile { animation: homeRise 0.45s ease 0.18s both; }
.home-screen.active .dock { animation: homeRise 0.5s ease 0.24s both; }
@keyframes homeRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 自定义上传图标：显示原图，不套色块 */
.app-tile .icon-face.custom-icon,
.dock .dock-icon .icon-face.custom-icon {
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}

/* ============================================================
   聊天界面重设计 v2 —— 温润纸张 / 融入主题
   ============================================================ */

/* —— 顶栏 —— */
.wechat-chat-topbar {
  grid-template-columns: 46px 1fr 46px !important;
  min-height: 56px !important;
  padding: 8px !important;
  border-bottom: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent) !important;
  color: var(--skin-text) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.wechat-top-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  min-width: 0;
}
.wechat-top-title strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--skin-text);
}
.wechat-top-title small {
  margin-top: 1px;
  font-size: 11px;
  color: var(--skin-muted);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wechat-top-icon {
  color: var(--skin-text) !important;
}

/* —— 消息区背景（无自定义背景图时用主题底） —— */
.chat-layout {
  background-color: var(--phone-bg) !important;
}
.messages {
  gap: 16px !important;
  padding: 18px 14px !important;
}

/* —— 头像 —— */
.message-row .message-avatar,
.message-row .avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--skin-border);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--skin-text) 12%, transparent);
}

/* —— 气泡（默认 wechat 主题也精致化） —— */
.bubble {
  padding: 11px 14px !important;
  border-radius: 20px !important;
  line-height: 1.55 !important;
  font-size: 14.5px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--skin-text) 6%, transparent);
}
.bubble.assistant {
  background: var(--surface-strong) !important;
  color: var(--skin-text) !important;
  border: 1px solid var(--skin-border) !important;
  border-top-left-radius: 7px !important;
}
.bubble.user {
  background: linear-gradient(135deg, var(--skin-accent-2), color-mix(in srgb, var(--skin-accent-2) 70%, var(--skin-accent))) !important;
  color: #fff !important;
  border: 0 !important;
  border-top-right-radius: 7px !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--skin-accent-2) 30%, transparent) !important;
}
.bubble.error {
  background: color-mix(in srgb, #d9534f 16%, var(--surface-strong)) !important;
  color: #b3261e !important;
  border: 1px solid color-mix(in srgb, #d9534f 30%, transparent) !important;
  border-radius: 16px !important;
}

/* glass 气泡主题：保持半透明毛玻璃，但圆角和阴影跟上 */
.chat-layout.bubble-glass .bubble {
  border-radius: 20px !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--skin-text) 10%, transparent) !important;
}
.chat-layout.bubble-glass .bubble.assistant { border-top-left-radius: 7px !important; }
.chat-layout.bubble-glass .bubble.user { border-top-right-radius: 7px !important; }

/* —— 时间分割 —— */
.message-time-divider {
  background: color-mix(in srgb, var(--skin-text) 7%, transparent) !important;
  color: var(--skin-muted) !important;
}

/* —— 图片 / 转账卡片 —— */
.chat-image-card {
  width: min(180px, 60vw) !important;
  padding: 7px !important;
  border-radius: 18px !important;
  background: var(--surface-strong) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--skin-text) 8%, transparent) !important;
}
.chat-image-card img { border-radius: 13px !important; }
.chat-image-card small { color: var(--skin-muted) !important; }

/* === Moss fix 2026-06-12: pending image card === */
.chat-image-card.image-pending {
  min-height: 168px !important;
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  color: var(--skin-muted) !important;
  background: color-mix(in srgb, var(--surface-strong) 92%, var(--skin-accent) 8%) !important;
}
.chat-image-card.image-pending::before {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--skin-accent) 35%, var(--skin-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--skin-accent) 24%, transparent), color-mix(in srgb, var(--surface-strong) 78%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 38%, transparent);
  animation: mossImagePendingPulse 1.15s ease-in-out infinite alternate;
}
.chat-image-card.image-pending small {
  max-width: 150px;
  text-align: center;
}
@keyframes mossImagePendingPulse {
  from { opacity: .55; transform: scale(.96); }
  to { opacity: 1; transform: scale(1.04); }
}

.chat-image-card.sticker-message-card {
  width: min(156px, 46vw) !important;
  padding: 4px !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.chat-image-card.sticker-message-card img {
  aspect-ratio: auto !important;
  max-height: 154px !important;
  object-fit: contain !important;
  background: transparent !important;
}
.transfer-card {
  border-radius: 18px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--skin-accent), color-mix(in srgb, var(--skin-accent) 60%, #c89060)) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--skin-accent) 30%, transparent) !important;
}

/* —— 输入栏 —— */
.composer {
  grid-template-columns: 38px 1fr 38px 38px auto !important;
  gap: 8px !important;
  padding: 10px 12px calc(12px + var(--safe-bottom)) !important;
  border-top: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.composer-input-wrap {
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 6px !important;
  border-radius: 20px !important;
  border: 1px solid var(--skin-border) !important;
  background: var(--phone-bg) !important;
}
.composer textarea {
  background: transparent !important;
  color: var(--skin-text) !important;
  border: 0 !important;
}
.composer-icon,
.composer-mic {
  color: var(--skin-muted) !important;
  background: transparent !important;
}
.composer-send {
  min-width: 54px !important;
  height: 38px !important;
  border-radius: 19px !important;
  color: #fff !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--skin-accent) 28%, transparent) !important;
}

/* 聊天文字头像用主题渐变；图片头像保持原图 */
.message-row .avatar:not(.image-avatar) {
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
  color: #fff !important;
}
.message-row.user .avatar:not(.image-avatar) {
  background: linear-gradient(135deg, var(--skin-muted), var(--skin-accent-2)) !important;
}
.message-row .avatar.image-avatar { background: transparent !important; }
.message-row .avatar.image-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit;
}

/* ============================================================
   约会界面滑动修复：防止 grid 子项把页面撑开，恢复手机触摸滚动
   ============================================================ */
.app-body:has(.date-app) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

.date-app {
  min-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

.date-messages {
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding-bottom: calc(14px + var(--safe-bottom)) !important;
}

.date-line,
.date-rich-content {
  min-height: 0 !important;
  max-width: 100% !important;
  touch-action: pan-y !important;
}

.date-composer {
  flex-shrink: 0 !important;
}

/* ============================================================
   全局 app 同步美化：沿用首页 / 微信聊天的简约玻璃质感
   ============================================================ */
.app-body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--phone-bg) 92%, transparent), var(--phone-bg)),
    var(--wallpaper-image, var(--skin-home)) center / cover no-repeat !important;
}

.panel-stack,
.forum-app,
.world-app,
.preset-app,
.memory-app,
.diary-app,
.period-app,
.notes-app-list {
  gap: 14px !important;
  padding: 14px !important;
}

.panel,
.settings-row,
.world-row,
.forum-post,
.forum-comments,
.forum-post-full,
.forum-board-config,
.preset-card,
.preset-detail-item,
.memory-hero,
.memory-toolbar,
.memory-role-panel,
.memory-selected-role,
.memory-module-card,
.memory-entry,
.diary-card,
.period-card,
.date-line,
.date-preset-state,
.mind-panel,
.mind-history-panel,
.forum-share-picker {
  border: 1px solid color-mix(in srgb, var(--skin-border) 78%, transparent) !important;
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent) !important;
  color: var(--skin-text) !important;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--skin-text) 8%, transparent) !important;
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.panel,
.settings-row,
.world-row,
.forum-post,
.forum-comments,
.forum-post-full,
.forum-board-config,
.preset-card,
.memory-hero,
.memory-toolbar,
.memory-role-panel,
.memory-selected-role,
.memory-module-card,
.diary-card,
.period-card,
.mind-panel,
.mind-history-panel,
.forum-share-picker {
  border-radius: 24px !important;
}

.preset-detail-item,
.memory-entry,
.date-line,
.date-preset-state {
  border-radius: 18px !important;
}

.panel h2,
.settings-row strong,
.world-row strong,
.forum-post h2,
.forum-detail-head h2,
.preset-card strong,
.memory-hero h2,
.memory-module-card header strong,
.diary-card strong,
.period-card strong,
.date-line strong,
.mind-panel strong,
.mind-history-panel strong,
.forum-share-picker strong {
  color: var(--skin-text) !important;
  letter-spacing: 0 !important;
}

.panel p,
.settings-row small,
.world-row small,
.world-row p,
.forum-post p,
.forum-post-stats,
.forum-hidden-tip,
.forum-status,
.preset-card small,
.preset-detail-item p,
.memory-hero p,
.memory-module-card header small,
.memory-entry header span,
.memory-entry p,
.diary-card p,
.period-card small,
.date-preset-state span,
.mind-history-list time,
.forum-share-preview p,
.forum-share-char-list small {
  color: var(--skin-muted) !important;
}

.panel button,
.settings-back,
.secondary-button,
.world-actions button,
.forum-post button,
.forum-detail-head button,
.forum-comment-form button,
.preset-card button,
.memory-entry-actions button,
.memory-back-button,
.diary-card header button,
.period-card button,
.forum-share-picker button,
.mind-panel header button {
  min-height: 38px;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent) !important;
  background: color-mix(in srgb, var(--phone-bg) 72%, transparent) !important;
  color: var(--skin-text) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--skin-text) 6%, transparent);
}

.panel button:not(.danger-button):not(.settings-back):not(.secondary-button):hover,
.secondary-button,
.forum-refresh-button,
.forum-add-button,
.memory-filter-pill {
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.danger-button,
.diary-card header button[data-delete-diary],
.memory-entry-actions button[data-memory-delete] {
  background: color-mix(in srgb, #e34b55 90%, var(--phone-bg)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.field input,
.field textarea,
.field select,
.preset-search-input,
.memory-search-input,
.forum-comment-form input,
.preset-content-editor,
.preset-detail-item textarea {
  border-radius: 18px !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--phone-bg) 82%, transparent) !important;
  color: var(--skin-text) !important;
}

.range-number-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
}

.range-number-row input[type="number"] {
  height: 40px;
  padding: 0 10px;
  text-align: center;
}

.date-line,
.date-rich-content,
.date-html-frame {
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.date-rich-content p {
  margin: 0 0 0.75em;
}

.forum-share-overlay,
.image-preview-overlay {
  background: color-mix(in srgb, #000 38%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.forum-share-char-list {
  max-height: min(420px, 62vh) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.forum-share-char-list button {
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--phone-bg) 76%, transparent) !important;
}

:root[data-ui-mode="dark"] .panel,
:root[data-ui-mode="dark"] .settings-row,
:root[data-ui-mode="dark"] .world-row,
:root[data-ui-mode="dark"] .forum-post,
:root[data-ui-mode="dark"] .forum-comments,
:root[data-ui-mode="dark"] .forum-post-full,
:root[data-ui-mode="dark"] .preset-card,
:root[data-ui-mode="dark"] .memory-entry,
:root[data-ui-mode="dark"] .diary-card,
:root[data-ui-mode="dark"] .date-line,
:root[data-ui-mode="dark"] .mind-panel,
:root[data-ui-mode="dark"] .mind-history-panel,
:root[data-ui-mode="dark"] .forum-share-picker {
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent) !important;
}

:root[data-ui-mode="dark"] .forum-comment,
:root[data-ui-mode="dark"] .forum-discussion,
:root[data-ui-mode="dark"] .forum-discussion p,
:root[data-ui-mode="dark"] .preset-detail-item summary,
:root[data-ui-mode="dark"] .preset-detail-item pre,
:root[data-ui-mode="dark"] .preset-json-preview,
:root[data-ui-mode="dark"] .check-pill,
:root[data-ui-mode="dark"] .sticker-bulk-preview,
:root[data-ui-mode="dark"] .sticker-bulk-row {
  background: color-mix(in srgb, var(--phone-bg) 70%, transparent) !important;
  border-color: color-mix(in srgb, var(--skin-border) 82%, transparent) !important;
  color: var(--skin-text) !important;
}

:root[data-ui-mode="dark"] .forum-comment strong,
:root[data-ui-mode="dark"] .forum-comment span,
:root[data-ui-mode="dark"] .forum-discussion strong,
:root[data-ui-mode="dark"] .forum-discussion span,
:root[data-ui-mode="dark"] .preset-detail-item summary strong,
:root[data-ui-mode="dark"] .compact-preset-item summary strong,
:root[data-ui-mode="dark"] .check-pill span,
:root[data-ui-mode="dark"] .world-row strong,
:root[data-ui-mode="dark"] .preset-card strong,
:root[data-ui-mode="dark"] .sticker-bulk-preview strong {
  color: var(--skin-text) !important;
}

:root[data-ui-mode="dark"] .forum-comment small,
:root[data-ui-mode="dark"] .preset-detail-item summary span,
:root[data-ui-mode="dark"] .preset-detail-item summary em,
:root[data-ui-mode="dark"] .sticker-bulk-row label span {
  color: var(--skin-muted) !important;
}

.forum-toolbar,
.world-actions,
.sticker-actions,
.button-row {
  align-items: center;
}

.forum-tab,
.forum-refresh-button,
.forum-add-button,
.world-actions button,
.sticker-actions button,
.mini-toggle-button {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.forum-tab:active,
.forum-refresh-button:active,
.forum-add-button:active,
.world-actions button:active,
.sticker-actions button:active,
.mini-toggle-button:active {
  transform: scale(0.97);
}

.forum-tab {
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent) !important;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent) !important;
  color: var(--skin-text) !important;
}

.forum-tab.active {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--skin-accent) 22%, transparent) !important;
}

.forum-comment,
.forum-discussion {
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent) !important;
}

.form-status.success {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--skin-accent) 14%, var(--surface-strong)) !important;
  color: var(--skin-text) !important;
  font-weight: 700;
}

.sticker-bulk-preview {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 76%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}

.sticker-bulk-list {
  display: grid;
  gap: 10px;
  max-height: min(420px, 55vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.sticker-bulk-row {
  display: grid;
  grid-template-columns: 58px minmax(74px, 0.7fr) minmax(110px, 1fr);
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 70%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--phone-bg) 68%, transparent);
}

.sticker-bulk-row img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  grid-row: span 2;
}

.sticker-bulk-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sticker-bulk-row label:last-child {
  grid-column: 2 / -1;
}

.sticker-bulk-row label span {
  font-size: 12px;
  color: var(--skin-muted);
}

.sticker-bulk-row input {
  min-width: 0;
  height: 36px;
  border-radius: 14px;
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  color: var(--skin-text);
  padding: 0 10px;
}

@media (max-width: 520px) {
  .sticker-bulk-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .sticker-bulk-row img {
    width: 52px;
    height: 52px;
  }

  .sticker-bulk-row label,
  .sticker-bulk-row label:last-child {
    grid-column: 2 / -1;
  }
}

/* ============================================================
   iOS Safari 约会正文最终滚动修复
   只让文章列表滚动，避免 app-body/date-messages 双层滚动互相抢触摸。
   ============================================================ */
.app-body.date-mode {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: auto !important;
  touch-action: auto !important;
}

.app-body.date-mode .date-picker-app {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding-bottom: calc(18px + var(--safe-bottom)) !important;
}

.app-body.date-mode .date-app {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  touch-action: auto !important;
}

.app-body.date-mode .date-messages {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: block !important;
  align-self: stretch !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding: 0 0 132px !important;
}

.app-body.date-mode .date-line {
  overflow: visible !important;
  margin: 0 0 14px !important;
  transform: translateZ(0);
}

.app-body.date-mode .date-rich-content,
.app-body.date-mode .date-rich-content p {
  overflow: visible !important;
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.app-body.date-mode .date-html-frame {
  pointer-events: none !important;
}

.app-body.date-mode .date-composer {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 999 !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  padding: 8px !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18) !important;
  transform: translateZ(0);
}

.app-body.date-mode .date-composer textarea,
.app-body.date-mode .date-composer button {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
   查手机 app
   ============================================================ */
.phone-inspect-app {
  min-height: 100%;
}

.phone-inspect-hero h2 {
  margin: 0;
  font-size: 24px;
}

.phone-inspect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.phone-inspect-card {
  min-height: 166px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 76%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  color: var(--skin-text);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--skin-text) 8%, transparent);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

.phone-inspect-avatar {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  font-size: 24px;
}

.phone-inspect-card strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}

.phone-inspect-card small {
  max-width: 100%;
  color: var(--skin-muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.char-phone-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(14px, var(--safe-top)) 14px max(14px, var(--safe-bottom));
  background: color-mix(in srgb, #000 38%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.char-phone-shell {
  width: min(420px, 100%);
  height: min(760px, 100%);
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  border-radius: 34px;
  background: color-mix(in srgb, var(--phone-bg) 92%, transparent);
  color: var(--skin-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.char-phone-head {
  display: grid;
  grid-template-columns: 38px 52px minmax(0, 1fr) 66px;
  align-items: center;
  gap: 10px;
}

.char-phone-head button,
.char-phone-inner-back {
  min-height: 36px;
  border-radius: 18px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}

.char-phone-head button:last-child {
  color: #fff;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2));
}

.char-phone-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.char-phone-head span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.char-phone-head strong,
.char-phone-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.char-phone-head small,
.char-phone-status {
  color: var(--skin-muted);
  font-size: 12px;
}

.char-phone-status {
  min-height: 18px;
  margin: 0;
}

.char-phone-home {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  overflow-y: auto;
  padding: 8px 2px calc(10px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

.char-phone-profile {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-strong) 68%, transparent);
}

.char-phone-profile-avatar {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  font-size: 28px;
}

.char-phone-profile strong {
  color: var(--skin-text);
  font-size: 20px;
}

.char-phone-profile small {
  color: var(--skin-muted);
  font-size: 12px;
  text-align: center;
}

.char-phone-app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 10px;
  align-content: start;
  padding: 4px;
}

.char-phone-app-icon {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--skin-text);
  background: transparent;
}

.char-phone-app-icon .icon-face {
  width: 58px;
  border-radius: 18px;
  font-size: 21px;
}

.char-phone-app-icon small {
  max-width: 72px;
  overflow: hidden;
  color: var(--skin-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.char-phone-content-view {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
}

.char-phone-content-view h3 {
  margin: 0;
  color: var(--skin-text);
  font-size: 22px;
}

.char-phone-inner-back {
  justify-self: start;
  padding: 0 14px;
  font-weight: 900;
}

.char-phone-content {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding: 2px 2px calc(8px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

.char-phone-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
}

.char-phone-item span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2));
  font-size: 12px;
  font-weight: 900;
}

.char-phone-item p {
  margin: 0;
  color: var(--skin-text);
  line-height: 1.55;
  word-break: break-word;
}

.mock-wechat-list,
.mock-browser,
.mock-notes,
.mock-call-list,
.mock-sms-thread {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 2px 2px calc(8px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

.mock-chat-row,
.mock-browser-card,
.mock-note-card,
.mock-call-row {
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  border-radius: 18px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--skin-text) 6%, transparent);
}

.mock-chat-row,
.mock-browser-card,
.mock-product-card,
.mock-note-card,
.mock-photo-tile,
.mock-call-row,
.mock-sms-row {
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.mock-chat-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.mock-chat-row > div {
  min-width: 0;
}

.mock-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #21c471, #2997ff);
  font-weight: 900;
}

.mock-chat-row strong,
.mock-browser-card strong,
.mock-product-card strong,
.mock-note-card strong,
.mock-call-row strong {
  color: var(--skin-text);
}

.mock-chat-row p,
.mock-browser-card p,
.mock-product-card p,
.mock-note-card p,
.mock-call-row p {
  margin: 4px 0 0;
  color: var(--skin-muted);
  line-height: 1.4;
  word-break: break-word;
}

.mock-chat-row p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.mock-chat-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-chat-row time {
  justify-self: end;
  white-space: nowrap;
  text-align: right;
}

.mock-chat-row time,
.mock-browser-card small,
.mock-call-row em {
  color: var(--skin-muted);
  font-size: 11px;
  font-style: normal;
}

.mock-searchbar {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 18px;
  color: var(--skin-muted);
  background: color-mix(in srgb, var(--phone-bg) 84%, transparent);
  border: 1px solid var(--skin-border);
}

.mock-browser-card,
.mock-note-card {
  padding: 13px;
}

.mock-shop-grid,
.mock-album-grid {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  padding: 2px 2px calc(8px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

.mock-product-card {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
}

.mock-product-img,
.mock-photo-tile div {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #ff8fab, #74b9ff);
  font-size: 28px;
  font-weight: 900;
}

.mock-product-card span {
  color: #f04f5f;
  font-weight: 900;
}

.mock-note-card {
  background: linear-gradient(145deg, rgba(255, 232, 126, 0.78), rgba(255, 248, 205, 0.9));
}

.mock-photo-tile {
  display: grid;
  gap: 6px;
}

.mock-photo-tile p {
  margin: 0;
  color: var(--skin-muted);
  font-size: 12px;
  line-height: 1.35;
}

.mock-call-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
}

.mock-call-row > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #20c46b;
  font-weight: 900;
}

.mock-sms-thread {
  align-content: end;
  background: color-mix(in srgb, var(--phone-bg) 88%, transparent);
  border-radius: 20px;
  padding: 12px;
}

.mock-sms-list-head {
  margin-bottom: 4px;
  color: var(--skin-text);
  font-size: 22px;
  font-weight: 900;
}

.mock-sms-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
}

.mock-sms-row strong {
  color: var(--skin-text);
}

.mock-sms-row span {
  color: var(--skin-muted);
  font-size: 12px;
}

.mock-sms-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--skin-muted);
  line-height: 1.45;
}

.char-phone-detail-view {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.char-phone-detail-card {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  -webkit-overflow-scrolling: touch;
}

.char-phone-detail-card .detail-kicker {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 900;
}

.char-phone-detail-card h3 {
  margin: 8px 0 6px;
  color: var(--skin-text);
  font-size: 22px;
  line-height: 1.25;
}

.char-phone-detail-card small {
  display: block;
  color: var(--skin-muted);
  margin-bottom: 14px;
}

.char-phone-detail-card p {
  margin: 0;
  color: var(--skin-text);
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
}

.mock-phone-chat-detail {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--phone-bg) 84%, transparent);
}

.mock-phone-chat-detail header {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.mock-phone-chat-detail header strong {
  color: var(--skin-text);
  font-size: 17px;
}

.mock-phone-chat-detail header small {
  color: var(--skin-muted);
  font-size: 12px;
}

.mock-phone-bubbles {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
}

.mock-phone-bubbles p {
  max-width: 82%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 18px;
  line-height: 1.5;
  word-break: break-word;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--skin-text) 5%, transparent);
}

.mock-phone-bubbles .received {
  justify-self: start;
  border-top-left-radius: 6px;
  color: var(--skin-text);
  background: var(--surface-strong);
}

.mock-phone-bubbles .sent {
  justify-self: end;
  border-top-right-radius: 6px;
  color: #fff;
  background: #34c759;
}

.favorite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.favorite-row .persona-row {
  min-width: 0;
}

.favorite-delete {
  align-self: center;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #e34b55 45%, var(--skin-border));
  color: #b3261e;
  background: color-mix(in srgb, #e34b55 12%, var(--surface-strong));
}

.favorite-search-panel {
  display: grid;
  gap: 10px;
}

.favorite-type-tabs {
  justify-self: start;
  flex-wrap: wrap;
}

.favorite-search-results {
  display: grid;
  gap: 10px;
}

.favorite-search-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--skin-border);
  background: var(--surface-strong);
}

.favorite-search-result > span {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 900;
}

.favorite-search-result > button {
  justify-self: end;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 14px;
  border: 0;
  background: #171b22;
  color: #fff;
  font-weight: 900;
}

.world-book-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.world-book-entry-head h2 {
  margin: 0;
}

.world-book-entry-head button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 14px;
  border: 0;
  background: #171b22;
  color: #fff;
  font-weight: 900;
}

.favorite-detail {
  display: grid;
  gap: 12px;
}

.favorite-detail header,
.diary-role-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.favorite-detail header {
  justify-content: space-between;
}

.favorite-detail header small,
.diary-role-profile small {
  display: block;
  color: var(--skin-muted);
  font-size: 12px;
}

.favorite-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--skin-border);
  background: var(--surface-strong);
}

.favorite-card span {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 900;
}

.favorite-card p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.longform-favorite {
  line-height: 1.75;
}

.favorite-image-full {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  overflow: hidden;
}

.favorite-image-full img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  background: color-mix(in srgb, var(--skin-text) 6%, transparent);
}

.diary-entry-list {
  display: grid;
  gap: 12px;
}

.chat-extra-panel[data-panel-type="stickers"] {
  max-height: min(42vh, 390px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.chat-extra-panel[data-panel-type="stickers"] .sticker-button {
  min-height: 132px !important;
  grid-template-rows: minmax(92px, 1fr) auto !important;
}

.chat-extra-panel[data-panel-type="stickers"] .sticker-button img,
.sticker-grid img {
  object-fit: contain !important;
}

.chat-extra-panel[data-panel-type="stickers"] .sticker-button small {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 28px;
  overflow: hidden;
}

/* 顶层浮动返回键：放到右侧，避开左上角系统区域 */
.app-topbar {
  top: max(18px, calc(10px + var(--safe-top))) !important;
  height: 38px !important;
  left: 24px !important;
  right: 24px !important;
  grid-template-columns: 34px 1fr 34px !important;
}

.back-button {
  grid-column: 3 !important;
  justify-self: end !important;
}

.app-topbar span,
#appTitle {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
}

.back-button,
.moments-back {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  font-size: 27px !important;
  line-height: 28px !important;
}

.moments-back {
  left: auto !important;
  right: 24px !important;
  top: 18px !important;
}

.moments-camera {
  right: 66px !important;
}

.wechat-chat-topbar {
  grid-template-columns: 42px 1fr 48px !important;
}

.wechat-top-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 28px !important;
}

html,
body,
.device-shell,
.phone,
.screen,
.app-screen,
.app-body,
.chat-layout,
.wechat-shell,
.forum-app,
.panel-stack {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.messages,
.message-row,
.composer,
.composer-input-wrap,
.composer textarea {
  max-width: 100% !important;
  min-width: 0 !important;
}

.composer {
  width: 100% !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px minmax(50px, auto) !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.composer-icon,
.composer-mic {
  width: 34px !important;
  min-width: 34px !important;
}

.composer-send {
  min-width: 50px !important;
  padding-inline: 10px !important;
}

body:has(.composer textarea:focus) .chat-layout {
  height: var(--app-height) !important;
}

body:has(.composer textarea:focus) .messages {
  min-height: 0 !important;
  padding-bottom: 8px !important;
}

body:has(.composer textarea:focus) .composer {
  padding-bottom: 8px !important;
}

:root[data-ui-mode="dark"] .date-rich-content,
:root[data-ui-mode="dark"] .date-rich-content p,
:root[data-ui-mode="dark"] .date-line,
:root[data-ui-mode="dark"] .date-line strong,
:root[data-ui-mode="dark"] .date-composer textarea {
  color: var(--skin-text) !important;
}

:root[data-ui-mode="dark"] .date-rich-content .date-text-thought,
:root[data-ui-mode="dark"] .date-inline-thought {
  color: var(--skin-muted) !important;
}

.date-speaker-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.date-speaker-avatar.avatar {
  width: 34px;
  border-radius: 12px;
}

/* PWA standalone/fullscreen: stretch past the Safari toolbar-height gap. */
@media (display-mode: standalone) {
  html,
  body,
  .device-shell,
  .phone,
  .screen,
  .home-screen,
  .app-screen {
    height: var(--standalone-full-height) !important;
    min-height: var(--standalone-full-height) !important;
  }

  body,
  .device-shell,
  .phone,
  .screen {
    background-color: var(--phone-bg) !important;
  }

  .screen {
    inset: 0 !important;
    bottom: 0 !important;
    background-size: cover !important;
  }

  .home-screen {
    padding-bottom: max(calc(18px + var(--safe-bottom)), 34px) !important;
  }
}

body.pwa-standalone,
body.pwa-standalone .device-shell,
body.pwa-standalone .phone,
body.pwa-standalone .screen,
body.pwa-standalone .home-screen,
body.pwa-standalone .app-screen {
  height: var(--standalone-full-height) !important;
  min-height: var(--standalone-full-height) !important;
}

body.pwa-standalone {
  background: var(--phone-bg) !important;
}

/* Unified system skin: shared tokens for light parchment and dark coffee themes. */
:root {
  --skin-radius-xs: 12px;
  --skin-radius-sm: 16px;
  --skin-radius-md: 20px;
  --skin-radius-lg: 26px;
  --skin-shadow-soft: 0 10px 30px color-mix(in srgb, var(--skin-text, #2a2119) 10%, transparent);
  --skin-shadow-float: 0 18px 46px color-mix(in srgb, var(--skin-text, #2a2119) 16%, transparent);
  --skin-home: linear-gradient(180deg, #f5ecdc 0%, #eadbc5 100%);
  --phone-bg: #f4ecdf;
  --surface: #fbf4e9;
  --surface-strong: #fffaf1;
  --skin-text: #2c241d;
  --skin-title: #1f1a16;
  --skin-muted: #7a6d60;
  --skin-border: rgba(124, 92, 54, 0.18);
  --skin-accent: #b17a36;
  --skin-accent-2: #8f642d;
}

:root[data-ui-mode="dark"] {
  color-scheme: dark;
  --skin-home: linear-gradient(180deg, #201916 0%, #120f0d 100%);
  --phone-bg: #17120f;
  --surface: #211a16;
  --surface-strong: #2a211b;
  --skin-text: #f2e8dc;
  --skin-title: #fff6ea;
  --skin-muted: #b8aa9b;
  --skin-border: rgba(224, 194, 154, 0.18);
  --skin-accent: #c28a48;
  --skin-accent-2: #9b6a38;
}

body {
  background: var(--skin-home) !important;
}

.phone,
.screen,
.app-screen,
.app-body,
.chat-layout,
.wechat-shell,
.moments-page,
.date-app,
.forum-app {
  background-color: var(--phone-bg) !important;
  color: var(--skin-text) !important;
}

@media (min-width: 720px) {
  .device-shell {
    padding: 28px !important;
  }

  .phone {
    width: min(430px, 100vw) !important;
    max-height: min(932px, calc(100vh - 56px)) !important;
    border-radius: 38px !important;
    box-shadow: 0 28px 80px rgba(35, 25, 18, 0.24) !important;
  }
}

.clock-hero,
.widget,
.dock {
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent) !important;
  color: var(--skin-title) !important;
  box-shadow: var(--skin-shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

.clock-hero {
  border-radius: 30px !important;
  padding: 22px 20px !important;
}

.app-grid {
  gap: 18px 14px !important;
}

.icon-face {
  width: var(--icon-size, 58px) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, var(--surface-strong), color-mix(in srgb, var(--surface) 80%, var(--skin-accent) 20%)) !important;
  border: 1px solid var(--skin-border) !important;
  color: var(--skin-accent-2) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--skin-text) 9%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.app-tile small,
.dock .app-tile small {
  color: var(--skin-muted) !important;
  text-shadow: none !important;
}

.app-topbar,
.wechat-chat-topbar,
.date-titlebar,
.settings-header {
  border-bottom: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent) !important;
  color: var(--skin-title) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--skin-text) 6%, transparent) !important;
}

.panel,
.settings-row,
.persona-row,
.world-book-card,
.memory-module-card,
.favorite-search-result,
.favorite-card,
.forum-post,
.moment-post {
  border-radius: var(--skin-radius-lg) !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent) !important;
  color: var(--skin-text) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

.panel-stack {
  gap: 16px !important;
  padding: 16px !important;
}

.bubble,
.date-line,
.theater-dialogue-bubble,
.message-action-menu,
.memory-detail-panel,
.forward-picker-sheet,
.image-preview-frame {
  border-radius: var(--skin-radius-md) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--skin-text) 8%, transparent) !important;
}

.bubble.assistant,
.date-line,
.theater-dialogue-bubble.assistant {
  background: var(--surface-strong) !important;
  color: var(--skin-text) !important;
}

.bubble.user,
.theater-dialogue-bubble.user {
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.composer,
.date-composer {
  border-top: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent) !important;
  box-shadow: 0 -10px 28px color-mix(in srgb, var(--skin-text) 8%, transparent) !important;
}

.composer-input-wrap,
.field input,
.field select,
.field textarea,
.date-composer textarea,
.memory-search-input {
  border-radius: var(--skin-radius-md) !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--phone-bg) 78%, var(--surface-strong)) !important;
  color: var(--skin-text) !important;
}

button,
.secondary-button,
.file-button,
.settings-back,
.memory-back-button {
  border-radius: var(--skin-radius-sm) !important;
}

/* 双页桌面：今日页 / 应用页 */
.home-screen {
  --desktop-page: 0;
}

.home-content {
  overflow: hidden;
}

.home-screen.desktop-apps-active .clock-hero,
.home-screen.desktop-apps-active .widget {
  display: none !important;
}

.app-grid {
  flex: 1;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
  overflow: hidden;
  padding: 0 2px !important;
}

.desktop-pages-viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.desktop-pages-track {
  height: 100%;
  display: flex;
  transform: translateX(calc(var(--desktop-page) * -100%));
  transition: transform 0.28s ease;
  will-change: transform;
}

.desktop-page {
  flex: 0 0 100%;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.desktop-widgets-page {
  overflow-y: auto;
  padding: 0 0 4px;
  scrollbar-width: none;
}

.desktop-widgets-page::-webkit-scrollbar {
  display: none;
}

.desktop-widgets-page .home-widget-layout {
  margin-bottom: 0;
}

.desktop-apps-page {
  overflow-y: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
}

.desktop-apps-page::-webkit-scrollbar {
  display: none;
}

.apps-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 12px;
  align-content: start;
  padding: 8px 2px 18px;
}

.apps-page-grid .app-tile {
  min-width: 0;
}

.apps-page-grid .app-tile .icon-face {
  flex: none;
}

.apps-page-grid .app-tile small {
  max-width: 76px;
  min-height: 26px;
  white-space: normal;
  overflow: hidden;
  text-align: center;
  line-height: 1.2;
  text-overflow: clip;
}

.desktop-page-dots {
  height: 18px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.desktop-page-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--skin-muted) 42%, transparent);
  transition: transform 0.2s ease, background 0.2s ease;
}

.desktop-page-dot.active {
  width: 7px;
  height: 7px;
  transform: scale(1.35);
  border-radius: 50%;
  background: var(--skin-accent-2);
}

.dock {
  flex: 0 0 auto;
  margin-top: 8px !important;
  margin-bottom: max(0px, env(safe-area-inset-bottom));
}

/* UI 收口层：暖米色 / 咖啡暗色统一，以及移动浏览器底部遮挡修补 */
:root {
  --skin-radius-xs: 10px;
  --skin-radius-sm: 14px;
  --skin-radius-md: 20px;
  --skin-radius-lg: 26px;
  --skin-radius-xl: 32px;
  --skin-control-height: 42px;
  --skin-gap: 12px;
  --browser-bottom-reserve: 74px;
}

:root[data-ui-mode="light"] {
  --page-bg: #e7ddca;
  --phone-bg: #efe6d5;
  --surface: #f7f0e4;
  --surface-strong: #fffaf0;
  --surface-soft: #ede1cf;
  --skin-border: rgba(74, 51, 27, 0.13);
  --skin-accent: #a87742;
  --skin-accent-2: #667753;
  --skin-title: #2e2519;
  --skin-text: #3b3022;
  --skin-muted: #8d7c64;
  --skin-shadow-soft: 0 10px 28px rgba(78, 55, 30, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --skin-shadow: 0 16px 46px rgba(78, 55, 30, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --skin-home: radial-gradient(ellipse 80% 48% at 28% 6%, rgba(168, 119, 66, 0.08), transparent 62%),
    radial-gradient(ellipse 70% 42% at 90% 96%, rgba(102, 119, 83, 0.08), transparent 55%),
    #efe6d5;
}

:root[data-ui-mode="dark"] {
  --page-bg: #18130f;
  --phone-bg: #211b16;
  --surface: rgba(255, 244, 225, 0.055);
  --surface-strong: rgba(255, 244, 225, 0.10);
  --surface-soft: rgba(255, 244, 225, 0.065);
  --skin-border: rgba(239, 214, 175, 0.13);
  --skin-accent: #c5955b;
  --skin-accent-2: #8f7f5f;
  --skin-title: #f2e5d0;
  --skin-text: #eadcc7;
  --skin-muted: #ad9b80;
  --skin-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --skin-shadow: 0 18px 54px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --skin-home: radial-gradient(ellipse 80% 48% at 28% 6%, rgba(197, 149, 91, 0.12), transparent 62%),
    radial-gradient(ellipse 70% 42% at 92% 96%, rgba(143, 127, 95, 0.10), transparent 55%),
    #211b16;
}

body.pwa-standalone {
  --browser-bottom-reserve: 0px;
}

body {
  background: var(--page-bg) !important;
}

.phone,
.screen,
.app-screen,
.app-body,
.chat-layout,
.wechat-shell,
.moments-page,
.date-app,
.forum-app,
.diary-app {
  background-color: var(--phone-bg) !important;
  color: var(--skin-text) !important;
}

.home-screen {
  padding-bottom: max(calc(18px + var(--safe-bottom)), var(--browser-bottom-reserve)) !important;
}

.app-screen {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-top: calc(58px + var(--safe-top)) !important;
  padding-bottom: max(var(--safe-bottom), var(--browser-bottom-reserve)) !important;
}

.app-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

.app-body:has(.chat-layout),
.app-body:has(.wechat-shell),
.app-body.date-mode {
  overflow: hidden !important;
}

.app-topbar,
.wechat-chat-topbar,
.date-titlebar,
.settings-header,
.wechat-section-head {
  border-bottom: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent) !important;
  color: var(--skin-title) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--skin-text) 6%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.app-topbar {
  top: max(10px, calc(8px + var(--safe-top))) !important;
  left: 12px !important;
  right: 12px !important;
  height: 44px !important;
}

.back-button,
.wechat-top-icon,
.settings-back,
.memory-back-button,
.moments-back,
.moments-camera {
  min-width: var(--skin-control-height) !important;
  width: var(--skin-control-height) !important;
  height: var(--skin-control-height) !important;
  border-radius: 50% !important;
  color: var(--skin-title) !important;
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

.dock {
  height: 76px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: var(--skin-radius-lg) !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent) !important;
  box-shadow: var(--skin-shadow) !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  backdrop-filter: blur(22px) saturate(1.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
}

.dock .dock-icon,
.dock .app-icon {
  width: 100%;
  min-width: 0;
  min-height: 54px;
}

.icon-face,
.app-tile .icon-face:not(.custom-icon),
.dock .dock-icon .icon-face:not(.custom-icon) {
  width: var(--icon-size, 58px) !important;
  height: var(--icon-size, 58px) !important;
  flex: 0 0 auto !important;
  border-radius: 18px !important;
  border: 1px solid var(--skin-border) !important;
  color: var(--skin-accent-2) !important;
  background: linear-gradient(145deg, var(--surface-strong), color-mix(in srgb, var(--surface) 80%, var(--skin-accent) 20%)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--skin-text) 9%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.dock .dock-icon .icon-face {
  width: 48px !important;
  height: 48px !important;
}

.app-tile {
  min-height: 88px;
  justify-content: start;
}

.app-tile small {
  color: var(--skin-muted) !important;
  text-shadow: none !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.clock-hero,
.widget,
.home-status-card,
.notes-widget-tile,
.auto-status-panel,
.panel,
.settings-row,
.persona-row,
.world-row,
.world-book-card,
.memory-module-card,
.favorite-card,
.favorite-search-result,
.forum-post,
.moment-post,
.diary-card,
.period-card,
.mind-panel,
.mind-history-panel,
.message-action-menu,
.forward-picker-sheet,
.forum-share-picker,
.profile-menu,
.chat-extra-panel {
  border-radius: var(--skin-radius-lg) !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent) !important;
  color: var(--skin-text) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

.home-status-card,
.notes-widget-tile,
.auto-status-panel {
  min-height: 128px;
}

.panel-stack,
.wechat-list,
.settings-list {
  gap: var(--skin-gap) !important;
}

.wechat-shell {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 0 12px 12px !important;
}

.wechat-main {
  min-height: 0 !important;
  overflow: auto !important;
  padding-bottom: 4px !important;
}

.wechat-contact {
  min-height: 74px !important;
  border-radius: var(--skin-radius-md) !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent) !important;
  color: var(--skin-text) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

.wechat-contact small,
.wechat-tab,
.settings-row small,
.panel p,
.field span {
  color: var(--skin-muted) !important;
}

.wechat-bottom-tabs {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: var(--skin-radius-lg) !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

.wechat-tab {
  min-height: 42px !important;
  border-radius: var(--skin-radius-sm) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.wechat-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
}

.chat-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  background: var(--phone-bg) !important;
}

.messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 14px 12px 12px !important;
}

.bubble,
.date-line,
.theater-dialogue-bubble,
.chat-image-card {
  border-radius: var(--skin-radius-md) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--skin-text) 8%, transparent) !important;
}

.bubble.assistant,
.date-line,
.theater-dialogue-bubble.assistant {
  background: var(--surface-strong) !important;
  color: var(--skin-text) !important;
}

.bubble.user,
.theater-dialogue-bubble.user {
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.composer,
.date-composer {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 8 !important;
  min-height: 58px !important;
  border-top: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent) !important;
  box-shadow: 0 -10px 28px color-mix(in srgb, var(--skin-text) 8%, transparent) !important;
  backdrop-filter: blur(20px) saturate(1.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
}

.composer {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px auto !important;
  gap: 7px !important;
  align-items: end !important;
  padding: 9px 10px 10px !important;
}

.composer-input-wrap,
.field input,
.field select,
.field textarea,
.date-composer textarea,
.memory-search-input,
.preset-search-input,
.forum-comment-form input,
.moment-comment-form input {
  min-height: var(--skin-control-height) !important;
  border-radius: var(--skin-radius-md) !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--phone-bg) 78%, var(--surface-strong)) !important;
  color: var(--skin-text) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent) !important;
}

.composer-input-wrap {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 8px !important;
}

.composer textarea {
  width: 100% !important;
  min-height: 26px !important;
  max-height: 96px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--skin-text) !important;
}

.composer-icon,
.composer-mic,
.composer-send,
.date-composer button,
.secondary-button,
.file-button,
.panel button,
.forum-refresh-button,
.forum-add-button,
.world-actions button,
.preset-card button {
  min-height: var(--skin-control-height) !important;
  border-radius: var(--skin-radius-sm) !important;
  font-size: 14px !important;
}

.composer-icon,
.composer-mic {
  width: 34px !important;
  min-width: 34px !important;
  color: var(--skin-muted) !important;
  background: transparent !important;
}

.composer-send,
.date-composer button:last-child,
.secondary-button:not(.danger-button),
.forum-refresh-button,
.forum-add-button {
  color: #fff !important;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--skin-accent) 22%, transparent) !important;
}

.chat-extra-panel {
  left: 10px !important;
  right: 10px !important;
  bottom: calc(64px + var(--safe-bottom)) !important;
  max-height: min(48vh, 360px) !important;
  overflow: auto !important;
}

body:not(.pwa-standalone) .home-screen {
  padding-bottom: max(18px, var(--browser-bottom-reserve)) !important;
}

body:not(.pwa-standalone) .app-screen {
  padding-bottom: var(--browser-bottom-reserve) !important;
}

body:not(.pwa-standalone) .chat-extra-panel {
  bottom: calc(64px + var(--browser-bottom-reserve)) !important;
}

@media (min-width: 720px) {
  :root {
    --browser-bottom-reserve: 0px;
  }
}

/* Final UI consolidation: parchment light theme + coffee dark theme.
   CSS-only pass for consistent mobile layout, controls, cards, dock, WeChat tabs, and safe-area spacing. */
:root {
  --skin-radius-xs: 10px;
  --skin-radius-sm: 14px;
  --skin-radius-md: 18px;
  --skin-radius-lg: 24px;
  --skin-radius-xl: 30px;
  --skin-control-height: 42px;
  --skin-control-font: 14px;
  --skin-card-gap: 12px;
  --skin-page-pad: 12px;
  --skin-icon-radius: 18px;
  --skin-shadow-soft: 0 10px 28px rgba(75, 53, 30, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --skin-shadow-float: 0 18px 46px rgba(75, 53, 30, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.66);
  --browser-bottom-reserve: 118px;
}

:root[data-ui-mode="light"] {
  color-scheme: light;
  --page-bg: #e8decd;
  --phone-bg: #efe6d6;
  --surface: #f5ecdc;
  --surface-strong: #fff8ed;
  --surface-soft: #eadcc7;
  --surface-glass: rgba(255, 248, 237, 0.9);
  --skin-border: rgba(92, 66, 36, 0.14);
  --skin-border-strong: rgba(92, 66, 36, 0.22);
  --skin-title: #2b2118;
  --skin-text: #3a2f23;
  --skin-muted: #847460;
  --skin-accent: #ac7b43;
  --skin-accent-2: #6f7d5a;
  --skin-home: radial-gradient(ellipse 82% 48% at 22% 4%, rgba(172, 123, 67, 0.11), transparent 62%),
    radial-gradient(ellipse 72% 44% at 92% 96%, rgba(111, 125, 90, 0.12), transparent 58%),
    #efe6d6;
}

:root[data-ui-mode="dark"] {
  color-scheme: dark;
  --page-bg: #17120e;
  --phone-bg: #211a15;
  --surface: #292119;
  --surface-strong: #31271e;
  --surface-soft: #241d17;
  --surface-glass: rgba(49, 39, 30, 0.88);
  --skin-border: rgba(232, 203, 165, 0.14);
  --skin-border-strong: rgba(232, 203, 165, 0.22);
  --skin-title: #f5eadb;
  --skin-text: #eadcc9;
  --skin-muted: #b2a18a;
  --skin-accent: #c28d55;
  --skin-accent-2: #9a805c;
  --skin-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --skin-shadow-float: 0 20px 54px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --skin-home: radial-gradient(ellipse 82% 48% at 22% 4%, rgba(194, 141, 85, 0.14), transparent 62%),
    radial-gradient(ellipse 72% 44% at 92% 96%, rgba(154, 128, 92, 0.12), transparent 58%),
    #211a15;
}

body.pwa-standalone {
  --browser-bottom-reserve: 0px;
}

body,
.device-shell,
.phone,
.screen {
  background-color: var(--page-bg) !important;
}

.phone,
.screen,
.home-screen,
.app-screen,
.app-body,
.chat-layout,
.wechat-shell,
.moments-page,
.date-app,
.forum-app,
.diary-app,
.world-app {
  color: var(--skin-text) !important;
}

.screen,
.home-screen {
  background: var(--wallpaper-image, var(--skin-home)) center / cover no-repeat !important;
}

.app-screen,
.app-body,
.chat-layout,
.wechat-shell,
.moments-page,
.date-app,
.forum-app,
.diary-app,
.world-app {
  background: var(--phone-bg) !important;
}

.home-screen {
  gap: 10px !important;
  padding: calc(42px + var(--safe-top)) 14px calc(14px + var(--safe-bottom) + var(--browser-bottom-reserve)) !important;
}

.home-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.clock-hero {
  flex: 0 0 auto !important;
  min-height: 142px !important;
  border-radius: var(--skin-radius-xl) !important;
  padding: 20px !important;
}

.clock-time {
  font-size: clamp(64px, 20vw, 88px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.widget.continue-card {
  flex: 0 0 auto !important;
  min-height: 98px !important;
}

.app-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.desktop-pages-viewport,
.desktop-pages-track,
.desktop-page {
  min-height: 0 !important;
  height: 100% !important;
}

.desktop-widgets-page,
.desktop-apps-page {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.desktop-widgets-page {
  padding: 0 0 6px !important;
}

.home-widget-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 0 2px 6px !important;
}

.home-status-card {
  grid-column: 1 / -1 !important;
  min-height: 126px !important;
}

.notes-widget-tile,
.auto-status-panel.home-photo-frame-large {
  min-height: 154px !important;
}

.desktop-apps-page {
  padding: 8px 0 10px !important;
}

.apps-page-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px 10px !important;
  padding: 8px 2px 20px !important;
}

.app-tile {
  min-width: 0 !important;
  min-height: 86px !important;
  gap: 7px !important;
}

.app-tile .icon-face,
.dock .dock-icon .icon-face {
  flex: 0 0 auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: var(--skin-icon-radius) !important;
  background-size: cover !important;
  background-position: center !important;
}

.app-tile .icon-face {
  width: var(--icon-size, 58px) !important;
  height: var(--icon-size, 58px) !important;
}

.dock {
  flex: 0 0 76px !important;
  width: 100% !important;
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: var(--skin-radius-lg) !important;
  border: 1px solid var(--skin-border) !important;
  background: var(--surface-glass) !important;
  box-shadow: var(--skin-shadow-float) !important;
  backdrop-filter: blur(22px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
}

.dock .dock-icon {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: transparent !important;
}

.dock .dock-icon .icon-face {
  width: 50px !important;
  height: 50px !important;
}

.desktop-page-dots {
  flex: 0 0 18px !important;
  margin-top: 2px !important;
}

.desktop-page-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--skin-muted) 42%, transparent) !important;
  transform: none !important;
}

.desktop-page-dot.active {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--skin-accent-2) !important;
  transform: scale(1.35) !important;
}

.app-screen {
  display: flex !important;
  flex-direction: column !important;
  padding-top: calc(58px + var(--safe-top)) !important;
  padding-bottom: calc(var(--safe-bottom) + var(--browser-bottom-reserve)) !important;
  overflow: hidden !important;
}

.app-topbar {
  top: max(10px, calc(8px + var(--safe-top))) !important;
  left: 12px !important;
  right: 12px !important;
  height: 44px !important;
  display: grid !important;
  grid-template-columns: var(--skin-control-height) minmax(0, 1fr) var(--skin-control-height) !important;
  align-items: center !important;
  border-radius: var(--skin-radius-lg) !important;
  border: 1px solid var(--skin-border) !important;
  background: var(--surface-glass) !important;
  color: var(--skin-title) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

#appTitle {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.app-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

.app-body:has(.chat-layout),
.app-body:has(.wechat-shell),
.app-body.date-mode {
  overflow: hidden !important;
}

.wechat-shell {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 0 var(--skin-page-pad) var(--skin-page-pad) !important;
}

.wechat-main {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 2px 0 4px !important;
}

.wechat-list {
  gap: 10px !important;
  padding-bottom: 6px !important;
}

.wechat-bottom-tabs {
  flex: 0 0 auto !important;
  min-height: 60px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: var(--skin-radius-lg) !important;
  border: 1px solid var(--skin-border) !important;
  background: var(--surface-glass) !important;
  box-shadow: var(--skin-shadow-soft) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

.wechat-tab {
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 6px !important;
  border-radius: var(--skin-radius-sm) !important;
  color: var(--skin-muted) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.wechat-tab.active {
  color: #fffaf0 !important;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--skin-accent) 22%, transparent) !important;
}

.chat-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.wechat-chat-topbar {
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: var(--skin-control-height) minmax(0, 1fr) var(--skin-control-height) !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: 0 0 var(--skin-radius-lg) var(--skin-radius-lg) !important;
  border-bottom: 1px solid var(--skin-border) !important;
  background: var(--surface-glass) !important;
  color: var(--skin-title) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

.wechat-top-title {
  min-width: 0 !important;
}

.wechat-top-title strong,
.wechat-top-title small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 12px var(--skin-page-pad) 12px !important;
}

.composer,
.date-composer {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 12 !important;
  border-top: 1px solid var(--skin-border) !important;
  background: var(--surface-glass) !important;
  box-shadow: 0 -12px 28px color-mix(in srgb, var(--skin-text) 8%, transparent) !important;
  backdrop-filter: blur(20px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.14) !important;
}

.composer {
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px minmax(50px, auto) !important;
  gap: 7px !important;
  align-items: end !important;
  padding: 9px 10px 10px !important;
}

.composer-input-wrap {
  min-width: 0 !important;
  min-height: var(--skin-control-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
}

.composer textarea {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 26px !important;
  max-height: 96px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--skin-text) !important;
}

.composer-icon,
.composer-mic {
  width: 34px !important;
  min-width: 34px !important;
  height: var(--skin-control-height) !important;
  min-height: var(--skin-control-height) !important;
  padding: 0 !important;
  color: var(--skin-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.composer-send {
  min-width: 50px !important;
  height: var(--skin-control-height) !important;
  padding: 0 12px !important;
}

.clock-hero,
.widget,
.home-status-card,
.notes-widget-tile,
.auto-status-panel,
.panel,
.settings-row,
.persona-row,
.world-row,
.world-group,
.world-book-card,
.memory-module-card,
.favorite-card,
.favorite-search-result,
.forum-post,
.forum-comments,
.forum-post-full,
.moment-post,
.moment-comment,
.diary-card,
.period-card,
.mind-panel,
.mind-history-panel,
.profile-card,
.profile-menu,
.wechat-me-card,
.wechat-me-section,
.message-action-menu,
.forward-picker-sheet,
.forum-share-picker,
.memory-detail-panel,
.chat-extra-panel {
  border-radius: var(--skin-radius-lg) !important;
  border: 1px solid var(--skin-border) !important;
  background: var(--surface-glass) !important;
  color: var(--skin-text) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

.wechat-contact {
  min-height: 74px !important;
  border-radius: var(--skin-radius-md) !important;
  border: 1px solid var(--skin-border) !important;
  background: var(--surface-glass) !important;
  color: var(--skin-text) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

.wechat-contact strong,
.settings-row strong,
.world-row strong,
.panel h2,
.panel h3,
.diary-card strong,
.profile-menu button strong,
.wechat-me-info strong,
.world-book-entry-head h2 {
  color: var(--skin-title) !important;
}

.wechat-contact small,
.settings-row small,
.world-row small,
.world-row p,
.panel p,
.hint-text,
.field span,
.profile-menu button span,
.profile-menu button em,
.wechat-me-info span,
.wechat-me-info small {
  color: var(--skin-muted) !important;
}

.bubble,
.date-line,
.theater-dialogue-bubble,
.chat-image-card {
  border-radius: var(--skin-radius-md) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--skin-text) 8%, transparent) !important;
}

.bubble.assistant,
.date-line,
.theater-dialogue-bubble.assistant {
  background: var(--surface-strong) !important;
  color: var(--skin-text) !important;
}

.bubble.user,
.theater-dialogue-bubble.user {
  color: #fffaf0 !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
}

.field input,
.field select,
.field textarea,
.composer-input-wrap,
.date-composer textarea,
.memory-search-input,
.preset-search-input,
.forum-comment-form input,
.moment-comment-form input,
.range-number-row input[type="number"],
.sticker-bulk-row input {
  width: 100%;
  min-height: var(--skin-control-height) !important;
  border-radius: var(--skin-radius-md) !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--phone-bg) 74%, var(--surface-strong)) !important;
  color: var(--skin-text) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent) !important;
}

.field textarea {
  min-height: 104px !important;
}

button,
.secondary-button,
.danger-button,
.file-button,
.panel button,
.settings-back,
.memory-back-button,
.back-button,
.wechat-top-icon,
.world-actions button,
.button-row button,
.form-action-grid button,
.date-composer button,
.theater-view-toggle button,
.forum-refresh-button,
.forum-add-button {
  min-height: var(--skin-control-height) !important;
  border-radius: var(--skin-radius-sm) !important;
  font-size: var(--skin-control-font) !important;
  font-weight: 800 !important;
}

.panel button:not(.danger-button):not(.settings-back):not(.secondary-button),
.button-row button:not(.danger-button):not(.secondary-button),
.form-action-grid button:not(.danger-button):not(.secondary-button),
.date-composer button:last-child,
.forum-refresh-button,
.forum-add-button,
.world-actions button:not(.danger-button),
.composer-send {
  color: #fffaf0 !important;
  border: 1px solid transparent !important;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2)) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--skin-accent) 22%, transparent) !important;
}

.secondary-button,
.file-button,
.settings-back,
.memory-back-button,
.back-button,
.wechat-top-icon,
.theater-view-toggle button {
  color: var(--skin-title) !important;
  border: 1px solid var(--skin-border) !important;
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent) !important;
  box-shadow: var(--skin-shadow-soft) !important;
}

.back-button,
.wechat-top-icon,
.settings-back,
.memory-back-button,
.moments-back,
.moments-camera {
  width: var(--skin-control-height) !important;
  min-width: var(--skin-control-height) !important;
  height: var(--skin-control-height) !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

.danger-button {
  color: #fff4ee !important;
  background: linear-gradient(135deg, #a8563f, #774134) !important;
}

.panel-stack,
.settings-list,
.list-stack {
  gap: var(--skin-card-gap) !important;
}

.panel-stack,
.settings-app,
.world-app,
.diary-app,
.forum-app,
.date-app {
  padding: var(--skin-page-pad) !important;
}

.forward-picker-overlay,
.forum-share-overlay,
.image-preview-overlay,
.char-phone-overlay {
  background: rgba(34, 26, 20, 0.42) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.forward-picker-sheet,
.forum-share-picker,
.memory-detail-panel {
  background: var(--surface-strong) !important;
}

.chat-extra-panel {
  left: 10px !important;
  right: 10px !important;
  bottom: 72px !important;
  max-height: min(46vh, 360px) !important;
  overflow-y: auto !important;
}

body:not(.pwa-standalone) .chat-extra-panel {
  bottom: 72px !important;
}

@media (max-width: 380px) {
  :root {
    --skin-page-pad: 10px;
    --skin-control-height: 40px;
    --browser-bottom-reserve: 110px;
  }

  .home-screen {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .clock-hero {
    min-height: 128px !important;
  }

  .home-widget-layout {
    gap: 10px !important;
  }

  .apps-page-grid {
    gap: 18px 6px !important;
  }

  .dock .dock-icon .icon-face {
    width: 46px !important;
    height: 46px !important;
  }

  .composer {
    grid-template-columns: 32px minmax(0, 1fr) 32px 32px minmax(46px, auto) !important;
    gap: 5px !important;
    padding-inline: 8px !important;
  }

  .composer-icon,
  .composer-mic {
    width: 32px !important;
    min-width: 32px !important;
  }
}

@media (display-mode: standalone), (min-width: 720px) {
  :root {
    --browser-bottom-reserve: 0px;
  }
}

/* Final period calendar override: no olive fill on calendar controls. */
.period-calendar header button,
.period-calendar .period-day {
  background: color-mix(in srgb, var(--surface-strong) 92%, #fff8ec) !important;
  color: var(--skin-title) !important;
}

.period-calendar .period-day.outside {
  background: color-mix(in srgb, var(--surface-strong) 78%, #efe3cf) !important;
  color: color-mix(in srgb, var(--skin-muted) 82%, #fff) !important;
  opacity: 1 !important;
}

.period-calendar header button:hover,
.period-calendar header button:active,
.period-calendar header button:focus-visible,
.period-calendar .period-day:hover,
.period-calendar .period-day:active,
.period-calendar .period-day:focus-visible {
  background: color-mix(in srgb, var(--surface-strong) 88%, #fff2e4) !important;
  color: var(--skin-title) !important;
}

.period-calendar .period-day.period-range {
  background: color-mix(in srgb, #ffd8e4 34%, var(--surface-strong)) !important;
}

.period-calendar .period-day.period-start,
.period-calendar .period-day.period-end {
  background: color-mix(in srgb, #ffd4e1 48%, var(--surface-strong)) !important;
  color: var(--skin-title) !important;
}

/* Compatibility fallback: avoid color-mix so iOS local WebViews do not fall back to olive buttons. */
.app-body:has(.period-app),
.period-app {
  background: #fff8ec !important;
}

.period-app .panel,
.period-app .period-card,
.period-app .period-calendar,
.period-app .period-list {
  background: #fffdf7 !important;
  background-image: none !important;
  border-color: rgba(132, 91, 54, 0.16) !important;
  color: #3a2b22 !important;
}

.period-calendar header button,
.period-calendar .period-day,
.period-app .period-day {
  background: #fffdf7 !important;
  background-image: none !important;
  border-color: rgba(132, 91, 54, 0.16) !important;
  color: #3a2b22 !important;
  opacity: 1 !important;
}

.period-calendar .period-day.outside,
.period-app .period-day.outside {
  background: #efe3cf !important;
  background-image: none !important;
  color: #9b8a76 !important;
}

.period-calendar .period-day.today,
.period-app .period-day.today {
  border-color: #f45f86 !important;
  box-shadow: inset 0 0 0 2px rgba(244, 95, 134, 0.32) !important;
}

.period-calendar .period-day.period-range,
.period-app .period-day.period-range {
  background: #ffe3ec !important;
  background-image: none !important;
  border-color: #f7a8bd !important;
  color: #3c1724 !important;
}

.period-calendar .period-day.period-start,
.period-calendar .period-day.period-end,
.period-app .period-day.period-start,
.period-app .period-day.period-end {
  background: #ff8fab !important;
  background-image: none !important;
  border-color: #f45f86 !important;
  color: #3c1724 !important;
  box-shadow: 0 6px 16px rgba(244, 95, 134, 0.22) !important;
}

.period-calendar .period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after,
.period-app .period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after {
  background: #ffd166 !important;
}

.wechat-top-title,
#chatName {
  position: relative;
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.wechat-top-title {
  min-height: 44px;
  padding: 0 8px;
}

/* Final home page indicator fix: target the real desktop page buttons. */
.desktop-page-dots {
  align-items: center !important;
}

.desktop-page-dots > button.desktop-page-dot,
.desktop-page-dots > button.desktop-page-dot[aria-current="false"] {
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 8px !important;
  align-self: center !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  line-height: 0 !important;
  transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.desktop-page-dots > button.desktop-page-dot.active,
.desktop-page-dots > button.desktop-page-dot[aria-current="page"] {
  flex-basis: 10px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  transform: none !important;
}

/* Chat background and theater dialogue fixes. */
.chat-layout {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.chat-layout .messages {
  background: transparent !important;
}

.chat-layout:has(.messages) {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.app-body.date-mode {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.app-body.date-mode .date-app.theater-app {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.app-body.date-mode .theater-chat-messages {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding-bottom: calc(132px + var(--safe-bottom)) !important;
}

/* Home widget guard: the old continue-chat card should not reappear from stale markup. */
.home-screen .widget.continue-card {
  display: none !important;
}

/* Runtime bootstrap alignment: keep home pages full-width after base.css + styles.css both load. */
.desktop-pages-track {
  width: 100% !important;
  transform: translateX(calc(var(--desktop-page, 0) * -100%)) !important;
}

.desktop-page {
  flex: 0 0 100% !important;
  width: 100% !important;
}

.apps-page-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.date-tool-row {
  align-items: center !important;
}

.context-debug-inline {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.context-debug-inline::before {
  content: "调";
  font-size: 14px;
  font-weight: 900;
}

/* Final desktop page dots: keep indicators as true circles after global button rules. */
.desktop-page-dot,
.desktop-page-dot.active {
  box-sizing: border-box !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  line-height: 0 !important;
}

.desktop-page-dot.active {
  transform: scale(1.35) !important;
}

/* Current request overrides: scoped UI fixes only. */
.chat-companion-status {
  display: none !important;
}

/* Final reference period rice calendar: this must remain the last period override. */
.period-app .period-calendar,
.panel .period-calendar {
  overflow: visible !important;
}

.period-app .period-calendar header button,
.panel .period-calendar header button,
.period-calendar header button,
.period-app .period-calendar .period-days > button.period-day,
.panel .period-calendar .period-days > button.period-day,
.period-calendar .period-days > button.period-day {
  position: relative !important;
  background: #fffaf0 !important;
  background-image: none !important;
  color: #4d412f !important;
  border: 1px solid rgba(126, 103, 68, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 5px 12px rgba(85, 68, 43, 0.045) !important;
  opacity: 1 !important;
}

.period-app .period-calendar .period-days,
.panel .period-calendar .period-days,
.period-calendar .period-days {
  gap: 8px !important;
}

.period-app .period-calendar .period-days > button.period-day,
.panel .period-calendar .period-days > button.period-day,
.period-calendar .period-days > button.period-day {
  min-height: 50px !important;
  border-radius: 18px !important;
}

.period-app .period-calendar .period-days > button.period-day span,
.panel .period-calendar .period-days > button.period-day span,
.period-calendar .period-days > button.period-day span {
  position: relative !important;
  z-index: 2 !important;
  color: inherit !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.period-app .period-calendar .period-days > button.period-day.outside,
.panel .period-calendar .period-days > button.period-day.outside,
.period-calendar .period-days > button.period-day.outside {
  background: #f4eddd !important;
  background-image: none !important;
  color: rgba(90, 74, 50, 0.42) !important;
  border-color: rgba(126, 103, 68, 0.08) !important;
  box-shadow: none !important;
}

.period-app .period-calendar .period-days > button.period-day.today,
.panel .period-calendar .period-days > button.period-day.today,
.period-calendar .period-days > button.period-day.today {
  background: #fffaf0 !important;
  color: #2f281d !important;
  border-color: rgba(151, 123, 73, 0.82) !important;
  box-shadow: 0 0 0 2px rgba(151, 123, 73, 0.20), inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-range,
.panel .period-calendar .period-days > button.period-day.period-range,
.period-calendar .period-days > button.period-day.period-range,
.period-app .period-calendar .period-days > button.period-day.period-start,
.period-app .period-calendar .period-days > button.period-day.period-end,
.panel .period-calendar .period-days > button.period-day.period-start,
.panel .period-calendar .period-days > button.period-day.period-end,
.period-calendar .period-days > button.period-day.period-start,
.period-calendar .period-days > button.period-day.period-end {
  background: #fffaf0 !important;
  background-image: none !important;
  color: #3c1724 !important;
  border-color: #ff8fab !important;
  box-shadow: 0 0 0 2px rgba(255, 143, 171, 0.16), inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-range::before,
.panel .period-calendar .period-days > button.period-day.period-range::before,
.period-calendar .period-days > button.period-day.period-range::before,
.period-app .period-calendar .period-days > button.period-day.period-start::before,
.panel .period-calendar .period-days > button.period-day.period-start::before,
.period-calendar .period-days > button.period-day.period-start::before,
.period-app .period-calendar .period-days > button.period-day.period-end::before,
.panel .period-calendar .period-days > button.period-day.period-end::before,
.period-calendar .period-days > button.period-day.period-end::before {
  content: "" !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ff8fab !important;
  box-shadow: 0 0 0 3px rgba(255, 143, 171, 0.14) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-range::before,
.panel .period-calendar .period-days > button.period-day.period-range::before,
.period-calendar .period-days > button.period-day.period-range::before {
  left: 8px !important;
  top: 8px !important;
  background: #ffc0cf !important;
}

.period-app .period-calendar .period-days > button.period-day.period-start::before,
.panel .period-calendar .period-days > button.period-day.period-start::before,
.period-calendar .period-days > button.period-day.period-start::before,
.period-app .period-calendar .period-days > button.period-day.period-end::before,
.panel .period-calendar .period-days > button.period-day.period-end::before,
.period-calendar .period-days > button.period-day.period-end::before {
  right: 8px !important;
  bottom: 8px !important;
}

.period-app .period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range),
.panel .period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range),
.period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range) {
  background: #fffaf0 !important;
  background-image: none !important;
  color: #5a4213 !important;
  border-color: rgba(255, 209, 102, 0.90) !important;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.18), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after,
.panel .period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after,
.period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after {
  content: "" !important;
  right: 8px !important;
  bottom: 8px !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffd166 !important;
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.20) !important;
}

.period-legend .legend-start { background: #ff8fab !important; }
.period-legend .legend-range { background: #ffc0cf !important; }
.period-legend .legend-predict { background: #ffd166 !important; }

/* Reference period rice calendar: warm paper cells, state by border and dots only. */
.period-app .period-calendar,
.panel .period-calendar {
  overflow: visible !important;
}

.period-app .period-calendar header button,
.panel .period-calendar header button,
.period-calendar header button {
  background: #fffaf0 !important;
  background-image: none !important;
  color: #5a4a32 !important;
  border: 1px solid rgba(126, 103, 68, 0.18) !important;
  box-shadow: 0 6px 16px rgba(92, 72, 42, 0.08) !important;
}

.period-app .period-calendar .period-days,
.panel .period-calendar .period-days,
.period-calendar .period-days {
  gap: 8px !important;
}

.period-app .period-calendar .period-days > button.period-day,
.panel .period-calendar .period-days > button.period-day,
.period-calendar .period-days > button.period-day {
  position: relative !important;
  min-height: 50px !important;
  border-radius: 18px !important;
  background: #fffaf0 !important;
  background-image: none !important;
  color: #4d412f !important;
  border: 1px solid rgba(126, 103, 68, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 5px 12px rgba(85, 68, 43, 0.045) !important;
  opacity: 1 !important;
  transform: translateZ(0);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease !important;
}

.period-app .period-calendar .period-days > button.period-day span,
.panel .period-calendar .period-days > button.period-day span,
.period-calendar .period-days > button.period-day span {
  position: relative !important;
  z-index: 2 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: inherit !important;
}

.period-app .period-calendar .period-days > button.period-day:active,
.panel .period-calendar .period-days > button.period-day:active,
.period-calendar .period-days > button.period-day:active {
  transform: scale(.96) !important;
}

.period-app .period-calendar .period-days > button.period-day.outside,
.panel .period-calendar .period-days > button.period-day.outside,
.period-calendar .period-days > button.period-day.outside {
  background: #f4eddd !important;
  background-image: none !important;
  color: rgba(90, 74, 50, 0.42) !important;
  border-color: rgba(126, 103, 68, 0.08) !important;
  box-shadow: none !important;
}

.period-app .period-calendar .period-days > button.period-day.today,
.panel .period-calendar .period-days > button.period-day.today,
.period-calendar .period-days > button.period-day.today {
  color: #2f281d !important;
  border-color: rgba(151, 123, 73, 0.82) !important;
  box-shadow: 0 0 0 2px rgba(151, 123, 73, 0.20), inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-range,
.panel .period-calendar .period-days > button.period-day.period-range,
.period-calendar .period-days > button.period-day.period-range {
  background: #fffaf0 !important;
  background-image: none !important;
  color: #5c2b38 !important;
  border-color: rgba(255, 143, 171, 0.62) !important;
  box-shadow: 0 0 0 2px rgba(255, 143, 171, 0.15), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-range::before,
.panel .period-calendar .period-days > button.period-day.period-range::before,
.period-calendar .period-days > button.period-day.period-range::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #ffc0cf !important;
  box-shadow: 0 0 0 3px rgba(255, 143, 171, 0.12) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-start,
.period-app .period-calendar .period-days > button.period-day.period-end,
.panel .period-calendar .period-days > button.period-day.period-start,
.panel .period-calendar .period-days > button.period-day.period-end,
.period-calendar .period-days > button.period-day.period-start,
.period-calendar .period-days > button.period-day.period-end {
  background: #fffaf0 !important;
  background-image: none !important;
  color: #3c1724 !important;
  border-color: #ff8fab !important;
  box-shadow: 0 0 0 3px rgba(255, 143, 171, 0.22), 0 8px 18px rgba(255, 143, 171, 0.16), inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-start::before,
.panel .period-calendar .period-days > button.period-day.period-start::before,
.period-calendar .period-days > button.period-day.period-start::before,
.period-app .period-calendar .period-days > button.period-day.period-end::before,
.panel .period-calendar .period-days > button.period-day.period-end::before,
.period-calendar .period-days > button.period-day.period-end::before {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 1 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ff8fab !important;
  box-shadow: 0 0 0 3px rgba(255, 143, 171, 0.18) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range),
.panel .period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range),
.period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range) {
  background: #fffaf0 !important;
  background-image: none !important;
  color: #5a4213 !important;
  border-color: rgba(255, 209, 102, 0.90) !important;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.18), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.period-app .period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after,
.panel .period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after,
.period-calendar .period-days > button.period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ffd166 !important;
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.20) !important;
}

.period-app .period-legend i,
.panel .period-legend i {
  border: 1px solid rgba(126, 103, 68, 0.12) !important;
}

.period-app .period-legend .legend-start,
.panel .period-legend .legend-start,
.period-legend .legend-start { background: #ff8fab !important; }

.period-app .period-legend .legend-range,
.panel .period-legend .legend-range,
.period-legend .legend-range { background: #ffc0cf !important; }

.period-app .period-legend .legend-predict,
.panel .period-legend .legend-predict,
.period-legend .legend-predict { background: #ffd166 !important; }

/* Period calendar: keep the calendar on warm paper tones instead of the global olive accent. */
.period-calendar header button {
  border: 1px solid color-mix(in srgb, var(--skin-border) 82%, transparent) !important;
  background: color-mix(in srgb, var(--surface-strong) 94%, #fff8ec) !important;
  color: var(--skin-title) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--skin-text) 7%, transparent) !important;
}

.period-calendar header button:hover,
.period-calendar header button:active,
.period-calendar header button:focus-visible {
  background: color-mix(in srgb, var(--surface-strong) 88%, #fff1df) !important;
  color: var(--skin-title) !important;
  border-color: color-mix(in srgb, #f58aaa 36%, var(--skin-border)) !important;
}

.period-calendar .period-day {
  min-height: 48px !important;
  border: 1px solid color-mix(in srgb, var(--skin-border) 88%, transparent) !important;
  background: color-mix(in srgb, var(--surface-strong) 92%, #fff8ec) !important;
  color: var(--skin-title) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--skin-text) 5%, transparent) !important;
}

.period-calendar .period-day:hover,
.period-calendar .period-day:active,
.period-calendar .period-day:focus-visible {
  background: color-mix(in srgb, var(--surface-strong) 88%, #fff2e4) !important;
  color: var(--skin-title) !important;
  border-color: color-mix(in srgb, #f58aaa 42%, var(--skin-border)) !important;
}

.period-calendar .period-day.outside {
  background: color-mix(in srgb, var(--surface-strong) 78%, #efe3cf) !important;
  color: color-mix(in srgb, var(--skin-muted) 82%, #fff) !important;
  opacity: 1 !important;
}

.period-calendar .period-day.today {
  border-color: color-mix(in srgb, #f58aaa 72%, var(--skin-border)) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, #f58aaa 18%, transparent),
    0 6px 16px color-mix(in srgb, var(--skin-text) 5%, transparent) !important;
}

.period-calendar .period-day.period-range {
  background: color-mix(in srgb, #ffd8e4 34%, var(--surface-strong)) !important;
  color: var(--skin-title) !important;
  border-color: color-mix(in srgb, #f58aaa 38%, var(--skin-border)) !important;
}

.period-calendar .period-day.period-start,
.period-calendar .period-day.period-end {
  background: color-mix(in srgb, #ffd4e1 48%, var(--surface-strong)) !important;
  color: var(--skin-title) !important;
  border-color: #f58aaa !important;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, #f58aaa 52%, transparent),
    0 8px 18px color-mix(in srgb, #f58aaa 16%, transparent) !important;
}

.period-calendar .period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after {
  background: #ffd166 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #fff8ec 84%, transparent) !important;
}

/* Chat polish: centered bars, companion status card, refined image messages. */
.app-topbar {
  position: absolute !important;
}

.app-topbar span,
#appTitle {
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.back-button {
  position: relative !important;
  z-index: 2 !important;
}

.wechat-chat-topbar {
  position: relative !important;
  grid-template-columns: var(--skin-control-height) minmax(0, 1fr) var(--skin-control-height) !important;
}

.wechat-top-title {
  position: absolute !important;
  inset: 7px calc(var(--skin-control-height) + 16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.wechat-top-icon {
  position: relative !important;
  z-index: 2 !important;
}

.chat-world-preview {
  display: none !important;
}

.chat-companion-status {
  max-height: 120px !important;
  margin: 10px var(--skin-page-pad) 8px !important;
  padding: 11px 13px 12px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--skin-accent) 18%, var(--skin-border)) !important;
  border-radius: var(--skin-radius-md) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 92%, #fff7e6), color-mix(in srgb, var(--phone-bg) 78%, #fff)) !important;
  color: var(--skin-text) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-text) 7%, transparent) !important;
}

.companion-status-tags,
.companion-status-pills {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.companion-status-tags {
  margin-bottom: 7px !important;
}

.companion-status-tags span,
.companion-status-pills span {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.companion-status-tags span {
  padding: 0 !important;
  color: var(--skin-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.companion-status-tags span:first-child {
  color: var(--skin-title) !important;
}

.companion-status-pills span {
  flex: 0 1 auto !important;
  max-width: 46% !important;
  padding: 5px 9px !important;
  border: 1px solid color-mix(in srgb, var(--skin-accent) 18%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent) !important;
  color: var(--skin-title) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.chat-companion-status p {
  margin: 8px 0 0 !important;
  overflow: hidden !important;
  color: var(--skin-muted) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.chat-image-card {
  width: min(240px, 70vw) !important;
  gap: 0 !important;
  padding: 7px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--skin-accent) 14%, var(--skin-border)) !important;
  background: color-mix(in srgb, var(--surface-strong) 94%, #fff8ec) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--skin-text) 9%, transparent) !important;
}

.chat-image-card img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 15px !important;
}

.chat-image-card small {
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  margin: 8px 4px 4px !important;
  overflow: hidden !important;
  color: var(--skin-muted) !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  line-height: 1.48 !important;
  text-align: left !important;
}

.chat-image-card.sticker-message-card small {
  display: none !important;
}

.screen:not(.active),
.app-screen:not(.active) {
  display: none !important;
}

.home-screen.active {
  display: flex !important;
}

.app-screen.active {
  display: flex !important;
}

/* Patch 2: reduce browser-bottom gap, keep titles inside the top strip, and make home widgets transparent glass. */
:root {
  --browser-bottom-reserve: 28px;
  --home-widget-bg: rgba(255, 248, 237, 0.34);
}

:root[data-ui-mode="dark"] {
  --home-widget-bg: rgba(49, 39, 30, 0.30);
}

body:not(.pwa-standalone) .home-screen {
  padding-bottom: calc(12px + var(--safe-bottom) + var(--browser-bottom-reserve)) !important;
}

body:not(.pwa-standalone) .app-screen {
  padding-bottom: calc(var(--safe-bottom) + var(--browser-bottom-reserve)) !important;
}

.home-screen {
  padding-bottom: calc(12px + var(--safe-bottom) + var(--browser-bottom-reserve)) !important;
}

.app-screen {
  padding-top: calc(58px + var(--safe-top)) !important;
  padding-bottom: calc(var(--safe-bottom) + var(--browser-bottom-reserve)) !important;
}

.app-topbar {
  height: 46px !important;
  top: max(10px, calc(8px + var(--safe-top))) !important;
  display: grid !important;
  grid-template-columns: var(--skin-control-height) minmax(0, 1fr) var(--skin-control-height) !important;
  align-items: center !important;
  padding: 0 6px !important;
}

.app-topbar span,
#appTitle {
  position: absolute !important;
  inset: 0 var(--skin-control-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  color: var(--skin-title) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
}

.back-button {
  grid-column: 3 !important;
  align-self: center !important;
  justify-self: end !important;
}

.clock-hero,
.widget,
.home-status-card,
.notes-widget-tile,
.auto-status-panel.home-photo-frame-large {
  background: var(--home-widget-bg) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

.app-tile .icon-face.custom-icon,
.dock .dock-icon .icon-face.custom-icon,
.icon-editor-row .icon-face.custom-icon {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

@media (max-width: 380px) {
  :root {
    --browser-bottom-reserve: 24px;
  }
}

@media (display-mode: standalone), (min-width: 720px) {
  :root {
    --browser-bottom-reserve: 0px;
  }
}

/* Final period calendar override: no olive fill on calendar controls. */
.period-calendar header button,
.period-calendar .period-day {
  background: color-mix(in srgb, var(--surface-strong) 92%, #fff8ec) !important;
  color: var(--skin-title) !important;
}

.period-calendar .period-day.outside {
  background: color-mix(in srgb, var(--surface-strong) 78%, #efe3cf) !important;
  color: color-mix(in srgb, var(--skin-muted) 82%, #fff) !important;
  opacity: 1 !important;
}

.period-calendar header button:hover,
.period-calendar header button:active,
.period-calendar header button:focus-visible,
.period-calendar .period-day:hover,
.period-calendar .period-day:active,
.period-calendar .period-day:focus-visible {
  background: color-mix(in srgb, var(--surface-strong) 88%, #fff2e4) !important;
  color: var(--skin-title) !important;
}

.period-calendar .period-day.period-range {
  background: color-mix(in srgb, #ffd8e4 34%, var(--surface-strong)) !important;
}

.period-calendar .period-day.period-start,
.period-calendar .period-day.period-end {
  background: color-mix(in srgb, #ffd4e1 48%, var(--surface-strong)) !important;
  color: var(--skin-title) !important;
}

/* Final compatibility fallback: plain period colors for iOS local WebViews. */
.app-body:has(.period-app),
.period-app {
  background: #fff8ec !important;
}

.period-app .panel,
.period-app .period-card,
.period-app .period-calendar,
.period-app .period-list {
  background: #fffdf7 !important;
  background-image: none !important;
  border-color: rgba(132, 91, 54, 0.16) !important;
  color: #3a2b22 !important;
}

.period-app .period-calendar {
  background: #FAF3E8 !important;
  background-image: none !important;
}

.period-calendar header button,
.period-calendar .period-day,
.period-app .period-day {
  background: #fffdf7 !important;
  background-image: none !important;
  border-color: rgba(132, 91, 54, 0.16) !important;
  color: #3a2b22 !important;
  opacity: 1 !important;
}

.period-calendar .period-day.outside,
.period-app .period-day.outside {
  background: #efe3cf !important;
  background-image: none !important;
  color: #9b8a76 !important;
}

.period-calendar .period-day.today,
.period-app .period-day.today {
  border-color: #f45f86 !important;
  box-shadow: inset 0 0 0 2px rgba(244, 95, 134, 0.32) !important;
}

.period-calendar .period-day.period-range,
.period-app .period-day.period-range {
  background: #ffe3ec !important;
  background-image: none !important;
  border-color: #f7a8bd !important;
  color: #3c1724 !important;
}

.period-calendar .period-day.period-start,
.period-calendar .period-day.period-end,
.period-app .period-day.period-start,
.period-app .period-day.period-end {
  background: #ff8fab !important;
  background-image: none !important;
  border-color: #f45f86 !important;
  color: #3c1724 !important;
  box-shadow: 0 6px 16px rgba(244, 95, 134, 0.22) !important;
}

.period-calendar .period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after,
.period-app .period-day.period-predicted:not(.period-start):not(.period-end):not(.period-range)::after {
  background: #ffd166 !important;
}

.wechat-top-title,
#chatName {
  position: relative;
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.wechat-top-title {
  min-height: 44px;
  padding: 0 8px;
}

/* Final home page indicator fix: target the real desktop page buttons. */
.desktop-page-dots {
  align-items: center !important;
}

.desktop-page-dots > button.desktop-page-dot,
.desktop-page-dots > button.desktop-page-dot[aria-current="false"] {
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 8px !important;
  align-self: center !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  line-height: 0 !important;
  transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.desktop-page-dots > button.desktop-page-dot.active,
.desktop-page-dots > button.desktop-page-dot[aria-current="page"] {
  flex-basis: 10px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  transform: none !important;
}

/* Final chat background and theater dialogue fixes. */
.chat-layout {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.chat-layout .messages {
  background: transparent !important;
}

.chat-layout:has(.messages) {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.app-body.date-mode .date-app.theater-app {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.app-body.date-mode .theater-chat-messages {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding-bottom: calc(132px + var(--safe-bottom)) !important;
}

:root[data-ui-mode="light"] .message-action-menu,
body.light .message-action-menu,
.light .message-action-menu {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #17181c !important;
}

:root[data-ui-mode="light"] .message-action-menu button,
body.light .message-action-menu button,
.light .message-action-menu button {
  color: #17181c !important;
  background: rgba(17, 19, 24, 0.08) !important;
}

:root[data-ui-mode="light"] .message-action-menu button:hover,
body.light .message-action-menu button:hover,
.light .message-action-menu button:hover {
  background: rgba(17, 19, 24, 0.14) !important;
}

/* Final chat scroll lock and theater extra-prompt jump. */
.app-body:has(.chat-layout) {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.chat-layout {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

.wechat-chat-topbar {
  grid-row: 1 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 20 !important;
}

.chat-layout .messages,
#messages.messages {
  grid-row: 2 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  background: transparent !important;
}

.chat-layout .messages.multi-selecting,
#messages.messages.multi-selecting {
  padding-bottom: calc(180px + var(--safe-bottom)) !important;
  scroll-padding-bottom: calc(180px + var(--safe-bottom)) !important;
}

.composer {
  grid-row: 3 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 30 !important;
}

.date-app.theater-app {
  position: relative !important;
}

.theater-jump-extra-prompt {
  position: absolute !important;
  right: 14px !important;
  bottom: calc(86px + var(--safe-bottom)) !important;
  z-index: 45 !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(70, 90, 60, 0.88) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.theater-jump-extra-prompt:active {
  transform: scale(0.96) !important;
}

body:has(.theater-chat-messages) .inspiration-float-button {
  bottom: calc(146px + var(--safe-bottom)) !important;
}

.theater-extra-prompt-highlight {
  animation: theaterExtraPromptFlash 1.4s ease;
}

@keyframes theaterExtraPromptFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(130, 170, 80, 0.55);
    filter: brightness(1.08);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(130, 170, 80, 0);
    filter: brightness(1.02);
  }
  100% {
    box-shadow: none;
    filter: none;
  }
}

/* Phase 1 home widget guard: keep reminder and proactive diary side by side. */
.home-widget-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 2px 6px !important;
  box-sizing: border-box !important;
}

.home-status-card {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  min-height: 118px !important;
}

.home-widget-layout .reminder-widget,
.home-widget-layout .notes-widget-tile,
.home-widget-layout .auto-status-panel.home-photo-frame-large {
  grid-column: auto !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 136px !important;
  box-sizing: border-box !important;
}

@media (max-width: 380px) {
  .home-widget-layout {
    gap: 8px !important;
  }

  .home-widget-layout .reminder-widget,
  .home-widget-layout .notes-widget-tile,
  .home-widget-layout .auto-status-panel.home-photo-frame-large {
    min-height: 126px !important;
    padding: 12px !important;
  }
}

/* 20260610 source fix: compact theater toolbar */
.theater-toolbar {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
  width: 100%;
}

.theater-toolbar-back {
  flex: 0 0 auto;
  max-width: 108px;
  min-height: 34px !important;
  padding: 0 10px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-toolbar-center {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}

.theater-toolbar-center .theater-mode-badge {
  flex: 0 1 auto;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theater-toolbar-center .theater-view-toggle {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

.theater-toolbar-center .theater-view-toggle button {
  min-height: 30px !important;
  padding: 0 9px !important;
}

.theater-more-button {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 34px;
  border-radius: 999px;
  color: var(--skin-title, #2c241d);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 86%, transparent);
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  font-weight: 900;
  line-height: 1;
}

.theater-more-menu {
  display: none;
  position: absolute;
  top: 58px;
  right: 14px;
  z-index: 40;
  min-width: 148px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 96%, transparent);
  box-shadow: var(--skin-shadow-float, 0 16px 38px rgba(0, 0, 0, 0.18));
}

.theater-more-menu.open {
  display: grid;
  gap: 6px;
}

.theater-more-menu button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--skin-title, #2c241d);
  background: color-mix(in srgb, var(--phone-bg, #f7efe1) 70%, transparent);
  text-align: left;
  font-weight: 900;
}

.theater-state-inline {
  min-width: 68px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(255, 255, 255, .72);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}
.theater-toolbar-spacer { width: 68px; flex: 0 0 68px; }

.backup-export-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 430px) {
  .date-tool-row.theater-toolbar {
    flex-wrap: nowrap !important;
  }

  .theater-toolbar-back {
    max-width: 96px;
  }

  .theater-toolbar-center .theater-mode-badge {
    max-width: 76px;
  }
}

/* Diary rework 2026-06-10: inner-slice cards, notes and marks */
.diary-home-hero,
.diary-home-section,
.diary-toolbar {
  display: grid;
  gap: 10px;
}

.diary-home-section h2,
.diary-home-hero h2 {
  margin: 0;
}

.diary-today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.diary-mini-card,
.diary-respond-row {
  width: 100%;
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0, 0, 0, 0.08)) 78%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 78%, #fff 22%);
  color: var(--skin-text, #2c241d);
  text-align: left;
}

.diary-mini-card strong,
.diary-respond-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-mini-card p,
.diary-respond-row small {
  margin: 0;
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  line-height: 1.45;
}

.diary-respond-list {
  display: grid;
  gap: 8px;
}

.diary-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  background: color-mix(in srgb, var(--phone-bg, #f4f6fa) 80%, transparent) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.diary-search-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 84%, transparent);
  color: var(--skin-text, #2c241d);
}

.diary-filter-row,
.diary-mark-row,
.diary-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.diary-filter-row button,
.diary-mark,
.diary-card-actions button,
.diary-note-head button,
.diary-note-card footer button,
.diary-card-footer button,
.diary-favorite {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0, 0, 0, 0.08)) 78%, transparent) !important;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 76%, transparent) !important;
  color: var(--skin-text, #2c241d) !important;
  font-size: 12px;
  font-weight: 900;
}

.diary-filter-row button.active,
.diary-mark.active,
.diary-favorite.active {
  background: linear-gradient(135deg, var(--skin-accent, #b47a35), var(--skin-accent-2, #d2a45f)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.diary-timeline {
  display: grid;
  gap: 12px;
}

.diary-card {
  position: relative;
  display: grid;
  gap: 10px;
  overflow: hidden;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-strong, #fffdf7) 90%, #fff 10%), color-mix(in srgb, var(--phone-bg, #f4f6fa) 64%, #fff 36%)) !important;
}

.diary-card.favorite::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--skin-accent, #b47a35), var(--skin-accent-2, #d2a45f));
}

.diary-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
}

.diary-card-head div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.diary-card-head time {
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
}

.diary-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--skin-text, #2c241d) !important;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-favorite {
  min-width: 36px;
  padding: 0 !important;
  font-size: 17px !important;
}

.diary-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.diary-mood-pill,
.diary-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.diary-mood-pill {
  background: color-mix(in srgb, var(--skin-accent, #b47a35) 18%, var(--surface-strong, #fffdf7));
  color: var(--skin-text, #2c241d);
}

.diary-tag {
  background: color-mix(in srgb, var(--skin-muted, #7b6b5a) 12%, transparent);
  color: var(--skin-muted, #7b6b5a);
}

.diary-summary {
  margin: 0 !important;
  color: var(--skin-text, #2c241d) !important;
  font-weight: 850;
  line-height: 1.5;
}

.diary-inner-preview {
  margin: 0 !important;
  color: var(--skin-muted, #7b6b5a) !important;
  line-height: 1.7 !important;
  white-space: pre-wrap;
  word-break: break-word;
}

.diary-card.compact .diary-inner-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.diary-hidden-want {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--skin-accent, #b47a35) 34%, var(--skin-border, rgba(0, 0, 0, 0.08)));
  border-radius: 16px;
  background: color-mix(in srgb, var(--skin-accent, #b47a35) 9%, transparent);
}

.diary-hidden-want span,
.diary-note-head strong {
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 900;
}

.diary-hidden-want p {
  margin: 0 !important;
  color: var(--skin-text, #2c241d) !important;
}

.diary-card-footer,
.diary-note-head,
.diary-note-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.diary-card-footer span,
.diary-note-card footer span {
  min-width: 0;
  overflow: hidden;
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-note-area {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.diary-note-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 246, 199, 0.84), rgba(255, 252, 230, 0.72));
  color: #4c3a17;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.52);
}

.diary-note-card p {
  margin: 0 !important;
  color: #4c3a17 !important;
  line-height: 1.55;
}

.diary-note-card footer {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.diary-card-actions .danger-button,
.diary-card-actions button[data-delete-diary] {
  background: color-mix(in srgb, #e34b55 90%, var(--phone-bg, #fff)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

@media (max-width: 430px) {
  .diary-today-grid {
    grid-template-columns: 1fr;
  }

  .diary-card {
    gap: 9px;
    padding: 13px !important;
  }

  .diary-card-actions button,
  .diary-filter-row button,
  .diary-mark {
    flex: 1 1 auto;
  }
}

/* ============================================================
   Forum Redbook Rework 2026-06-10
   小红书式虚拟论坛 / 文字图片封面 / 手机端安全滚动
   ============================================================ */
.forum-page-redbook {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px 12px calc(24px + var(--safe-bottom));
  overflow-x: hidden;
  color: var(--skin-text);
}

.forum-header-redbook {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 78%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--skin-accent) 18%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-strong) 88%, transparent);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--skin-text) 8%, transparent);
  backdrop-filter: blur(22px) saturate(1.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
}

.forum-title-block {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.forum-title-block span,
.forum-channel-summary span {
  color: var(--skin-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.forum-title-block h1 {
  margin: 0;
  color: var(--skin-text);
  font-size: clamp(26px, 8vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.forum-title-block p,
.forum-channel-summary p {
  margin: 0;
  color: var(--skin-muted);
  line-height: 1.45;
  font-size: 13px;
}

.forum-header-actions,
.forum-detail-actions,
.forum-detail-actions-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.forum-round-button,
.forum-refresh-pill,
.forum-detail-actions-main button,
.forum-detail-actions button {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  color: var(--skin-text);
  background: color-mix(in srgb, var(--phone-bg) 74%, transparent);
  font-weight: 900;
}

.forum-round-button {
  width: 42px;
  height: 42px;
  padding: 0;
}

.forum-round-button.accent,
.forum-refresh-pill,
.forum-detail-actions-main button:first-child {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #ff5b76, #f6b44b 56%, #2cb3a3);
  box-shadow: 0 10px 24px color-mix(in srgb, #ff5b76 24%, transparent);
}

.forum-search-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.forum-search-bar {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  color: var(--skin-muted);
}

.forum-search-bar input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--skin-text);
  background: transparent;
}

.forum-board-strip,
.forum-channel-strip,
.forum-hot-searches div {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}

.forum-board-pill,
.forum-channel-tab,
.forum-hot-searches button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 70%, transparent);
  border-radius: 999px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  font-weight: 900;
  white-space: nowrap;
  scroll-snap-align: start;
}

.forum-board-pill.active,
.forum-channel-tab.active {
  border-color: transparent;
  color: #fff;
  background: #171b22;
}

:root[data-ui-mode="dark"] .forum-board-pill.active,
:root[data-ui-mode="dark"] .forum-channel-tab.active {
  color: #111318;
  background: var(--skin-accent);
}

.forum-hot-searches {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--skin-border) 62%, transparent);
}

.forum-hot-searches strong {
  color: var(--skin-text);
  font-size: 13px;
}

.forum-hot-searches button {
  min-height: 30px;
  padding: 0 10px;
  color: var(--skin-muted);
  font-size: 12px;
}

.forum-channel-summary {
  display: grid;
  gap: 3px;
  padding: 0 4px;
}

.forum-masonry-feed {
  column-count: 2;
  column-gap: 10px;
  width: 100%;
}

.forum-note-card {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 10px;
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid color-mix(in srgb, var(--skin-border) 70%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  color: var(--skin-text);
  text-align: left;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--skin-text) 7%, transparent);
  cursor: pointer;
  transform: translateZ(0);
}

.forum-note-card[hidden] {
  display: none !important;
}

.forum-cover-text-card {
  position: relative;
  min-height: 176px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 14px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #ff6b8a, #f6b44b 56%, #2cb3a3);
}

.forum-cover-text-card::before,
.forum-cover-text-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.forum-cover-text-card::before {
  width: 140px;
  height: 140px;
  right: -48px;
  top: -42px;
  background: rgba(255, 255, 255, 0.24);
}

.forum-cover-text-card::after {
  width: 90px;
  height: 90px;
  left: -32px;
  bottom: -28px;
  background: rgba(255, 255, 255, 0.18);
}

.forum-cover-kicker,
.forum-cover-text-card strong,
.forum-cover-text-card small {
  position: relative;
  z-index: 1;
}

.forum-cover-kicker {
  justify-self: start;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.forum-cover-text-card strong {
  align-self: center;
  display: grid;
  gap: 3px;
  font-size: clamp(18px, 6vw, 25px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

.forum-cover-text-card strong b {
  display: block;
  font-weight: 950;
}

.forum-cover-text-card small {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.forum-cover-text-card.sticky-note {
  color: #4d3619;
  background: linear-gradient(145deg, #fff1a8, #ffd166 62%, #ffa94d);
}
.forum-cover-text-card.sticky-note .forum-cover-kicker { background: rgba(255,255,255,.38); }
.forum-cover-text-card.sticky-note small { color: rgba(77, 54, 25, 0.72); }

.forum-cover-text-card.hot-topic {
  background: linear-gradient(145deg, #ff3d5a, #ff8f3d 60%, #ffd166);
}

.forum-cover-text-card.night-chat {
  background: radial-gradient(circle at 80% 10%, rgba(142, 134, 214, .55), transparent 38%), linear-gradient(145deg, #181826, #2d2442 62%, #151923);
}

.forum-cover-text-card.soft-pink {
  color: #5a2435;
  background: linear-gradient(145deg, #ffd6e0, #ff8fab 58%, #f7c3a4);
}
.forum-cover-text-card.soft-pink small { color: rgba(90, 36, 53, 0.72); }

.forum-cover-text-card.clean-card {
  color: #242833;
  background: linear-gradient(145deg, #ffffff, #f0f3f8 62%, #dfe7ff);
}
.forum-cover-text-card.clean-card .forum-cover-kicker { background: rgba(20,24,30,.08); }
.forum-cover-text-card.clean-card small { color: rgba(36, 40, 51, 0.65); }

.forum-cover-text-card.rumor-board {
  background: linear-gradient(145deg, #2f3542, #5c4b51 58%, #b66d5f);
}

.forum-cover-text-card.campus {
  background: linear-gradient(145deg, #4b8f63, #88b66d 58%, #f5d78e);
}

.forum-cover-text-card.luxury {
  background: linear-gradient(145deg, #18120d, #7a5632 56%, #d4a96a);
}

.forum-cover-text-card.detail {
  min-height: 310px;
  border-radius: 28px;
  aspect-ratio: 4 / 5;
}

.forum-note-content {
  display: grid;
  gap: 7px;
  padding: 11px;
}

.forum-type-badge {
  justify-self: start;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--skin-accent) 88%, #ff5b76);
  font-size: 11px;
  font-weight: 900;
}

.forum-note-title {
  margin: 0;
  color: var(--skin-text) !important;
  font-size: 15px;
  line-height: 1.32;
  letter-spacing: 0 !important;
}

.forum-note-summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--skin-muted) !important;
  line-height: 1.42;
  font-size: 12px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.forum-note-tags,
.forum-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.forum-note-tags span,
.forum-detail-tags span {
  color: var(--skin-accent);
  font-size: 11px;
  font-weight: 900;
}

.forum-note-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--skin-muted);
  font-size: 11px;
}

.forum-note-author {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-note-author i,
.forum-detail-author i {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2));
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.forum-note-stats {
  white-space: nowrap;
}

.forum-detail-page {
  min-height: 100%;
  padding: 14px 12px calc(24px + var(--safe-bottom));
  display: grid;
  align-content: start;
  gap: 12px;
}

.forum-detail-note,
.forum-comment-thread {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 72%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  color: var(--skin-text);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--skin-text) 8%, transparent);
}

.forum-detail-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--skin-muted);
}

.forum-detail-note h1 {
  margin: 0;
  color: var(--skin-text);
  font-size: 25px;
  line-height: 1.22;
}

.forum-detail-note p {
  margin: 0;
  color: var(--skin-text);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

.forum-detail-author {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.forum-detail-author i {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.forum-detail-author span {
  display: grid;
  gap: 2px;
}

.forum-detail-author strong {
  color: var(--skin-text);
}

.forum-detail-author small,
.forum-detail-meta-row small {
  color: var(--skin-muted);
}

.forum-comment-thread .forum-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.forum-comment-thread .forum-detail-head h2 {
  margin: 0;
  color: var(--skin-text);
}

.forum-comment-list {
  display: grid;
  gap: 8px;
}

.forum-comment {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 68%, transparent) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--phone-bg) 72%, transparent) !important;
  color: var(--skin-text) !important;
  text-align: left;
}

.forum-comment strong {
  color: var(--skin-accent) !important;
}

.forum-comment small {
  color: var(--skin-muted) !important;
}

.forum-comment span {
  color: var(--skin-text) !important;
  line-height: 1.5;
}

.forum-comment-replies {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
}

.forum-comment-replies p {
  margin: 0;
  font-size: 12px;
}

.forum-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
}

.forum-comment-form input {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--skin-border);
  border-radius: 18px;
  padding: 0 12px;
  outline: 0;
  background: color-mix(in srgb, var(--phone-bg) 78%, transparent);
  color: var(--skin-text);
}

.forum-comment-form button {
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-2));
  font-weight: 900;
}

.forum-setting-generator .panel {
  display: grid;
  gap: 10px;
}

.forum-setting-generator .panel p {
  color: var(--skin-muted) !important;
  line-height: 1.55;
}

.forum-empty {
  break-inside: avoid;
  display: block;
  padding: 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
}

@media (max-width: 360px) {
  .forum-page-redbook,
  .forum-detail-page {
    padding-left: 10px;
    padding-right: 10px;
  }
  .forum-masonry-feed {
    column-gap: 8px;
  }
  .forum-cover-text-card {
    min-height: 150px;
    padding: 11px;
  }
  .forum-note-content {
    padding: 9px;
  }
}

@media (min-width: 680px) {
  .forum-masonry-feed {
    column-count: 3;
  }
}

/* Structured memory engine v1 */
.memory-tabs-panel {
  overflow-x: auto;
}
.memory-type-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  padding: 2px;
}
.memory-type-tabs button {
  flex: 0 0 auto;
}
.memory-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.memory-table-chip {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--skin-border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 800;
}
.memory-entry.structured {
  border-left: 3px solid color-mix(in srgb, var(--skin-accent) 76%, transparent);
}
.memory-entry.legacy {
  opacity: 0.92;
}
.memory-entry.pinned {
  border-color: color-mix(in srgb, #ffd166 70%, var(--skin-border)) !important;
}
.memory-vector-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skin-accent) 14%, transparent);
  color: var(--skin-accent);
  font-size: 11px;
  font-weight: 900;
}
.memory-vector-meter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--skin-muted);
  font-size: 11px;
  font-weight: 800;
}
.memory-vector-meter::before {
  content: "";
  width: 28px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--skin-accent) 72%, transparent), color-mix(in srgb, var(--skin-accent) 18%, transparent));
}

/* ============================================================
   Bugfix 2026-06-10: forum grid / inspiration panel / dark contrast
   ============================================================ */
.forum-masonry-feed {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  column-count: initial !important;
  column-gap: 0 !important;
  align-items: start !important;
}

.forum-note-card {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  break-inside: auto !important;
}

@media (min-width: 680px) {
  .forum-masonry-feed {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  .forum-masonry-feed {
    gap: 8px !important;
  }
}

.inspiration-panel {
  overflow: hidden !important;
  max-height: min(82vh, 720px) !important;
}

.inspiration-option-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding-right: 2px !important;
  padding-bottom: 4px !important;
}

.inspiration-option {
  height: auto !important;
  min-height: 56px !important;
  align-items: start !important;
}

.inspiration-option span {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.5 !important;
}

@media (max-width: 420px) {
  .inspiration-panel {
    max-height: min(84vh, 720px) !important;
  }
  .inspiration-option {
    grid-template-columns: minmax(66px, 0.32fr) minmax(0, 1fr) !important;
    padding: 11px !important;
  }
}

.backup-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 420px) {
  .backup-import-grid {
    grid-template-columns: 1fr;
  }
}

:root[data-ui-mode="dark"] .icon-editor-row,
:root[data-ui-mode="dark"] .font-row,
:root[data-ui-mode="dark"] .theater-type-card,
:root[data-ui-mode="dark"] .theater-session-card,
:root[data-ui-mode="dark"] .date-person-card,
:root[data-ui-mode="dark"] .forum-search-bar,
:root[data-ui-mode="dark"] .forum-hot-searches,
:root[data-ui-mode="dark"] .forum-channel-summary,
:root[data-ui-mode="dark"] .forum-detail-note,
:root[data-ui-mode="dark"] .forum-comment-thread,
:root[data-ui-mode="dark"] .forum-note-card {
  background: color-mix(in srgb, var(--phone-bg) 76%, #fff 6%) !important;
  border-color: color-mix(in srgb, var(--skin-border) 88%, transparent) !important;
  color: var(--skin-text) !important;
}

:root[data-ui-mode="dark"] .icon-editor-row strong,
:root[data-ui-mode="dark"] .font-row span,
:root[data-ui-mode="dark"] .theater-type-card strong,
:root[data-ui-mode="dark"] .theater-session-card strong,
:root[data-ui-mode="dark"] .date-person-card strong,
:root[data-ui-mode="dark"] .forum-title-block h1,
:root[data-ui-mode="dark"] .forum-hot-searches strong,
:root[data-ui-mode="dark"] .forum-channel-summary span,
:root[data-ui-mode="dark"] .forum-note-title,
:root[data-ui-mode="dark"] .forum-detail-note h1,
:root[data-ui-mode="dark"] .forum-detail-note p,
:root[data-ui-mode="dark"] .forum-detail-author strong,
:root[data-ui-mode="dark"] .inspiration-panel h2,
:root[data-ui-mode="dark"] .inspiration-option strong,
:root[data-ui-mode="dark"] .inspiration-option span {
  color: var(--skin-text) !important;
}

:root[data-ui-mode="dark"] .forum-title-block p,
:root[data-ui-mode="dark"] .forum-channel-summary p,
:root[data-ui-mode="dark"] .forum-note-summary,
:root[data-ui-mode="dark"] .forum-note-meta,
:root[data-ui-mode="dark"] .theater-type-card span,
:root[data-ui-mode="dark"] .theater-session-card small,
:root[data-ui-mode="dark"] .date-person-card span,
:root[data-ui-mode="dark"] .inspiration-panel header small {
  color: rgba(237, 237, 239, 0.76) !important;
}

:root[data-ui-mode="dark"] .mini-select,
:root[data-ui-mode="dark"] .mini-color,
:root[data-ui-mode="dark"] .forum-search-bar input {
  background: color-mix(in srgb, var(--phone-bg) 82%, #fff 8%) !important;
  color: var(--skin-text) !important;
  border: 1px solid var(--skin-border) !important;
}

:root[data-ui-mode="dark"] .app-tile small,
:root[data-ui-mode="dark"] .dock-icon small,
:root[data-ui-mode="dark"] .apps-page-grid .app-tile small {
  color: rgba(255, 255, 255, 0.94) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72) !important;
}

:root[data-ui-mode="light"] .app-tile small,
:root[data-ui-mode="light"] .dock-icon small,
:root[data-ui-mode="light"] .apps-page-grid .app-tile small {
  color: rgba(51, 41, 28, 0.82) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.72) !important;
}

/* ============================================================
   主界面重做 —— 双页桌面
   第一页：图片框（偏上）+ 时钟日期小组件 + 4 App
   第二页：4×2 三图组件 + 4×2 日历组件 + 2×2 相框 + 4 App
   全屏自适应（沿用 --skin-* 主题变量，自动适配 light/dark）
   ============================================================ */
.home-content.custom-home {
  display: flex !important;
  flex-direction: column !important;
  padding: 4px 0 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.custom-home .desktop-pages-viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}
.custom-home .desktop-pages-track {
  height: 100%;
  display: flex;
  transform: translateX(calc(var(--desktop-page, 0) * -100%));
  transition: transform 0.28s ease;
  will-change: transform;
}
.custom-home .desktop-page {
  flex: 0 0 100%;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.custom-home .desktop-page::-webkit-scrollbar { display: none; }

/* 通用 App 磁贴 */
.custom-home .app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  animation: none !important;
  -webkit-tap-highlight-color: transparent;
}
.custom-home .app-tile .icon-face {
  width: var(--icon-size, 58px);
  height: var(--icon-size, 58px);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-text) 15%, transparent);
}
.custom-home .app-tile .icon-face.custom-icon {
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}
.custom-home .app-tile small {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--skin-text);
  text-align: center;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--phone-bg) 60%, transparent);
}
.custom-home .app-tile:active { transform: scale(0.96); }

/* 通用：可上传图片块的占位提示 */
.custom-home .upload-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--skin-muted);
}
.custom-home .has-image .upload-hint { opacity: 0; }
.custom-home .has-image:active .upload-hint {
  opacity: 1;
  color: #fff;
  background: color-mix(in srgb, #000 28%, transparent);
}

/* —— 第一页 —— */
.custom-home .home-page1 {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 0 10px;
}
.custom-home .home-image-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  width: 100%;
  border: 0;
  padding: 0;
  border-radius: 30px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
  box-shadow: var(--skin-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.custom-home .home-image-frame:not(.has-image) {
  border: 1.5px dashed color-mix(in srgb, var(--skin-muted) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.custom-home .home-image-frame-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.custom-home .home-image-frame-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--skin-border);
}
.custom-home .home-image-frame.has-image .home-image-frame-hint {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.custom-home .home-image-frame.has-image:active .home-image-frame-hint { opacity: 1; }

/* 时钟 + 日期小组件 */
.custom-home .home-clock-widget {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 24px;
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--skin-shadow);
}
.custom-home .home-clock-widget .clock-greeting {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--skin-muted);
}
.custom-home .home-clock-widget .clock-time {
  font-size: 46px;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--skin-text);
  font-variant-numeric: tabular-nums;
  font-family: "SF Pro Display", var(--app-font-family);
}
.custom-home .home-clock-widget .clock-date {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--skin-muted);
}

/* 第一页 4 个 App */
.custom-home .home-page1-apps {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 2px 4px;
}

/* —— 第二页 —— */
.custom-home .home-page2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
  padding: 6px 0 12px;
}

/* 4×2 三图组件 */
.custom-home .home-gallery-widget {
  grid-column: 1 / -1;
  padding: 14px;
  border-radius: 26px;
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb, var(--surface-strong) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--skin-shadow);
}
.custom-home .home-gallery-title {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--skin-text);
  text-align: center;
  cursor: pointer;
  padding: 2px 4px 0;
}
.custom-home .home-gallery-title.is-placeholder {
  color: color-mix(in srgb, var(--skin-muted) 72%, transparent);
  font-weight: 600;
}
.custom-home .home-gallery-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.custom-home .home-gallery-slot {
  position: relative;
  flex: 1;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 45%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.custom-home .home-gallery-slot:not(.has-image) {
  box-shadow: none;
  border: 1.5px dashed color-mix(in srgb, var(--skin-muted) 55%, transparent);
}
.custom-home .home-gallery-slot-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.custom-home .home-gallery-slot-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--skin-muted);
}
.custom-home .home-gallery-slot.has-image .home-gallery-slot-hint { opacity: 0; }
.custom-home .home-gallery-slot.has-image:active .home-gallery-slot-hint {
  opacity: 1;
  color: #fff;
  background: color-mix(in srgb, #000 28%, transparent);
}

/* 4×2 日历组件（占位但有真实日期） */
.custom-home .home-calendar-widget {
  grid-column: 1 / -1;
  padding: 16px 18px;
  border-radius: 26px;
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb, var(--surface-strong) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--skin-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.custom-home .home-cal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.custom-home .home-cal-month {
  font-size: 22px;
  font-weight: 800;
  color: var(--skin-text);
}
.custom-home .home-cal-year {
  font-size: 13px;
  font-weight: 600;
  color: var(--skin-muted);
}
.custom-home .home-cal-week {
  display: flex;
  justify-content: space-between;
}
.custom-home .home-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.custom-home .home-cal-wk {
  font-size: 11px;
  font-weight: 600;
  color: var(--skin-muted);
}
.custom-home .home-cal-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--skin-text);
  border-radius: 50%;
}
.custom-home .home-cal-day.today .home-cal-num {
  color: #fff;
  background: var(--skin-accent);
}
.custom-home .home-cal-day.today .home-cal-wk {
  color: var(--skin-accent);
}

/* 2×2 相框 */
.custom-home .home-frame-2x2 {
  position: relative;
  grid-column: 1 / 2;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: var(--skin-shadow);
  -webkit-tap-highlight-color: transparent;
}
.custom-home .home-frame-2x2:not(.has-image) {
  border: 1.5px dashed color-mix(in srgb, var(--skin-muted) 55%, transparent);
}
.custom-home .home-frame-2x2-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.custom-home .home-frame-2x2-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--skin-muted);
}
.custom-home .home-frame-2x2.has-image .home-frame-2x2-hint { opacity: 0; }
.custom-home .home-frame-2x2.has-image:active .home-frame-2x2-hint {
  opacity: 1;
  color: #fff;
  background: color-mix(in srgb, #000 28%, transparent);
}

/* 2×2 四个 App（与相框并排） */
.custom-home .home-page2-apps {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: space-evenly;
  justify-items: center;
  gap: 12px 6px;
}

/* 分页圆点 */
.custom-home .desktop-page-dots {
  height: 20px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}
.custom-home .desktop-page-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--skin-muted) 42%, transparent);
  transition: transform 0.2s ease, background 0.2s ease;
}
.custom-home .desktop-page-dot.active {
  transform: scale(1.4);
  background: var(--skin-accent-2, var(--skin-accent));
}

/* 入场动画 */
.home-screen.active .home-image-frame { animation: homeRise 0.5s ease both; }
.home-screen.active .home-clock-widget { animation: homeRise 0.5s ease 0.08s both; }
.home-screen.active .home-page1-apps { animation: homeRise 0.5s ease 0.16s both; }

/* —— 半透明 Dock —— */
.dock {
  background: color-mix(in srgb, var(--surface-strong) 40%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--skin-border) 70%, transparent) !important;
  backdrop-filter: blur(26px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.4) !important;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--skin-text) 12%, transparent) !important;
}
.dock .dock-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
}
.dock .dock-icon-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--skin-text);
  opacity: 0.86;
}

/* ============================================================
   统一高透玻璃：所有组件 + Dock
   低底色 + 强模糊 + 通透白边，让壁纸透过来
   （置于组件/Dock 样式之后，确保覆盖生效）
   ============================================================ */
.custom-home .home-clock-widget,
.custom-home .home-gallery-widget,
.custom-home .home-calendar-widget {
  background: color-mix(in srgb, var(--surface-strong) 24%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 26%, transparent) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--skin-text) 9%, transparent) !important;
}
.custom-home .home-image-frame:not(.has-image),
.custom-home .home-gallery-slot:not(.has-image),
.custom-home .home-frame-2x2:not(.has-image) {
  background: color-mix(in srgb, var(--surface-strong) 18%, transparent) !important;
  border: 1px dashed color-mix(in srgb, #fff 34%, transparent) !important;
  backdrop-filter: blur(22px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
}
.custom-home .home-image-frame.has-image,
.custom-home .home-gallery-slot.has-image,
.custom-home .home-frame-2x2.has-image {
  background: transparent !important;
}
.custom-home .home-image-frame-hint {
  background: color-mix(in srgb, var(--surface-strong) 30%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 30%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
}
.dock {
  background: color-mix(in srgb, var(--surface-strong) 20%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 26%, transparent) !important;
  backdrop-filter: blur(32px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.5) !important;
  box-shadow: 0 12px 36px color-mix(in srgb, var(--skin-text) 10%, transparent) !important;
}

/* —— 主页文字编辑浮层 —— */
.home-text-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, #000 38%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: homeTextFade 0.18s ease both;
}
@keyframes homeTextFade { from { opacity: 0; } to { opacity: 1; } }
.home-text-sheet {
  width: min(440px, 92vw);
  margin-bottom: max(18px, env(safe-area-inset-bottom));
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 26px;
  background: var(--surface-strong);
  border: 1px solid var(--skin-border);
  box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.25);
  animation: homeTextSlide 0.22s ease both;
}
@keyframes homeTextSlide { from { transform: translateY(24px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
.home-text-sheet h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--skin-text);
}
.home-text-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.home-text-field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--skin-muted);
}
.home-text-field input,
.home-text-field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--skin-border);
  background: var(--surface);
  color: var(--skin-text);
  font: inherit;
  font-size: 15px;
  resize: none;
  box-sizing: border-box;
}
.home-text-field textarea { line-height: 1.5; }
.home-text-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.home-text-actions button {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
.home-text-actions .secondary-button {
  background: color-mix(in srgb, var(--skin-muted) 18%, transparent);
  color: var(--skin-text);
}
.home-text-actions .primary-button {
  background: var(--skin-accent);
  color: #fff;
}


/* Apple theme: Light mode, soft iOS-like daytime UI */
body.theme-apple {
  --page-bg: #f6f7fa;
  --phone-bg: #f7f8fb;
  --surface: rgba(255, 255, 255, 0.66);
  --surface-strong: rgba(255, 255, 255, 0.86);
  --skin-border: rgba(110, 118, 130, 0.14);
  --skin-accent: #6f97cf;
  --skin-accent-2: #9bb7d9;
  --skin-text: #30343a;
  --skin-title: #25282d;
  --skin-muted: rgba(65, 72, 82, 0.62);
  --skin-button: rgba(116, 151, 196, 0.18);
  --skin-button-text: #335f94;
  --skin-shadow: 0 14px 34px rgba(74, 87, 110, 0.10), inset 0 1px rgba(255, 255, 255, 0.76);
  --skin-shadow-float: 0 24px 70px rgba(74, 87, 110, 0.16), inset 0 1px rgba(255, 255, 255, 0.78);
  --skin-home:
    radial-gradient(circle at 18% 10%, rgba(205, 221, 241, 0.70), transparent 34%),
    radial-gradient(circle at 86% 16%, rgba(231, 235, 240, 0.92), transparent 36%),
    radial-gradient(circle at 80% 86%, rgba(221, 230, 241, 0.76), transparent 38%),
    linear-gradient(180deg, #fbfcff 0%, #f4f6fa 46%, #eef2f7 100%);
  --glass-icon-bg: rgba(255, 255, 255, 0.68);
  --glass-icon-border: rgba(100, 112, 128, 0.13);
  --glass-icon-text: #46515f;
  --text: #30343a;
  --muted: rgba(65, 72, 82, 0.62);
  --line: rgba(110, 118, 130, 0.14);
  --ink: #30343a;
  --app-font-color: #30343a;
  --widget-text-color: #343940;
  --widget-glass-color: rgba(255, 255, 255, 0.56);
  color: var(--skin-text);
  background: var(--page-bg) !important;
}

.theme-swatch.apple {
  color: #3a4048;
  background:
    radial-gradient(circle at 18% 12%, rgba(205, 221, 241, 0.95), transparent 34%),
    linear-gradient(145deg, #ffffff, #eef2f7 70%, #e5ebf3);
}

body.theme-apple,
body.theme-apple .device-shell {
  background: var(--page-bg) !important;
}

body.theme-apple .phone {
  background: var(--phone-bg) !important;
}

body.theme-apple .screen {
  color: var(--skin-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(246, 248, 252, 0.22)),
    var(--wallpaper-image, var(--skin-home)) center / cover no-repeat !important;
}

body.theme-apple .home-screen,
body.theme-apple .app-screen,
body.theme-apple .app-body,
body.theme-apple .notes-app,
body.theme-apple .date-app,
body.theme-apple .date-picker-app,
body.theme-apple .chat-layout,
body.theme-apple .forum-app,
body.theme-apple .settings-app,
body.theme-apple .memory-app,
body.theme-apple .theater-app {
  color: var(--skin-text) !important;
  background: transparent !important;
}


body.theme-apple .home-screen {
  background: var(--wallpaper-image, var(--skin-home)) center / cover no-repeat !important;
}

body.theme-apple .dynamic-island {
  background: rgba(68, 74, 84, 0.18) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.48), 0 8px 22px rgba(74, 87, 110, 0.08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

body.theme-apple .status-bar,
body.theme-apple .clock-hero,
body.theme-apple .clock-greeting,
body.theme-apple .clock-date,
body.theme-apple .app-topbar,
body.theme-apple .app-topbar span,
body.theme-apple .app-tile small,
body.theme-apple .dock-icon small,
body.theme-apple .widget-label {
  color: rgba(48, 52, 58, 0.76) !important;
  text-shadow: none !important;
}

body.theme-apple .signal span {
  background: rgba(48, 52, 58, 0.72) !important;
}

body.theme-apple .clock-time {
  color: rgba(38, 42, 48, 0.78) !important;
  font-weight: 700;
  text-shadow: none !important;
}

body.theme-apple .back-button,
body.theme-apple .wechat-top-icon,
body.theme-apple .ghost-button,
body.theme-apple .tiny-button,
body.theme-apple .settings-back,
body.theme-apple .date-object-back,
body.theme-apple .theater-flow-back {
  color: #466f9f !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(110, 118, 130, 0.13) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.68), 0 8px 20px rgba(74, 87, 110, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

body.theme-apple :where(
  .widget,
  .home-status-card,
  .notes-widget-tile,
  .auto-status-panel,
  .dock,
  .panel,
  .chat-header,
  .preset-card,
  .preset-detail-item,
  .persona-card,
  .tavern-helper-grid div,
  .date-line,
  .date-hero,
  .date-preset-state,
  .date-generation-status,
  .date-person-card,
  .date-composer,
  .theater-type-card,
  .theater-session-card,
  .theater-state-panel,
  .theater-state-grid div,
  .theater-state-detail,
  .context-debug-panel,
  .context-debug-grid div,
  .context-debug-entry,
  .forum-post,
  .forum-comments,
  .forum-share-card,
  .location-card,
  .forwarded-chat-card,
  .forward-picker-sheet,
  .forward-picker-char,
  .profile-menu,
  .profile-card,
  .chat-image-card,
  .mind-panel,
  .mind-panel p,
  .mind-history-list article,
  .multi-select-bar,
  .message-action-menu,
  .favorite-type-tabs,
  .theater-view-toggle,
  .appearance-row-wide,
  .icon-editor-row,
  .check-pill,
  .world-card,
  .memory-card,
  .diary-card,
  .gallery-card,
  .settings-row
) {
  color: var(--skin-text) !important;
  background: var(--surface) !important;
  border-color: var(--skin-border) !important;
  box-shadow: var(--skin-shadow) !important;
  backdrop-filter: blur(24px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
}

body.theme-apple :where(.panel, .forward-picker-sheet, .context-debug-panel, .theater-state-panel, .mind-panel) {
  background: var(--surface-strong) !important;
}

body.theme-apple :where(
  h1, h2, h3, strong,
  .panel h2,
  .profile-page h1,
  .date-picker-head h2,
  .forum-post h2,
  .wechat-section-head h2,
  .mind-title strong,
  .widget strong,
  .date-hero strong,
  .preset-card strong
) {
  color: var(--skin-title) !important;
}

body.theme-apple :where(
  p, small, em,
  .hint-text,
  .panel p,
  .field span,
  .chat-header span,
  .date-picker-head p,
  .date-hero span,
  .date-preset-state span,
  .forum-post small,
  .location-card small,
  .forwarded-chat-scroll em,
  .mind-title small,
  .mind-panel p span,
  .chat-list-time,
  .message-time-divider
) {
  color: var(--skin-muted) !important;
}

body.theme-apple :where(
  input,
  select,
  textarea,
  .composer-input-wrap,
  .preset-search-input,
  .preset-content-editor,
  .preset-json-preview,
  .preset-detail-item pre
) {
  color: var(--skin-text) !important;
  background: rgba(248, 249, 252, 0.82) !important;
  border-color: rgba(110, 118, 130, 0.14) !important;
  box-shadow: inset 0 1px 2px rgba(74, 87, 110, 0.05) !important;
}

body.theme-apple input::placeholder,
body.theme-apple textarea::placeholder {
  color: rgba(65, 72, 82, 0.42) !important;
}

body.theme-apple :where(
  #savePersonaButton,
  #saveSettingsButton,
  #saveWorldBookButton,
  .secondary-button,
  .file-button,
  .mini-toggle-button,
  .chat-settings-button,
  .forward-picker-confirm,
  .theater-session-actions button,
  .theater-state-panel header button,
  .theater-state-panel footer button,
  .context-debug-panel > header button,
  .context-debug-inline,
  .context-debug-button,
  .theme-swatch
) {
  color: #365f8d !important;
  background: rgba(225, 235, 247, 0.78) !important;
  border: 1px solid rgba(110, 118, 130, 0.13) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72), 0 8px 18px rgba(74, 87, 110, 0.08) !important;
}

body.theme-apple .danger-button,
body.theme-apple .bubble.error {
  color: #9b4b4b !important;
  background: rgba(255, 233, 233, 0.82) !important;
  border-color: rgba(170, 80, 80, 0.12) !important;
}

body.theme-apple .icon-face:not(.custom-icon),
body.theme-apple .chat-gradient,
body.theme-apple .people-gradient,
body.theme-apple .settings-gradient,
body.theme-apple .notes-gradient,
body.theme-apple .gallery-gradient,
body.theme-apple .music-gradient,
body.theme-apple .map-gradient,
body.theme-apple .weather-gradient,
body.theme-apple .world-gradient,
body.theme-apple .beauty-gradient,
body.theme-apple .moments-gradient,
body.theme-apple .forum-gradient,
body.theme-apple .preset-gradient,
body.theme-apple .memory-gradient,
body.theme-apple .phonecheck-gradient,
body.theme-apple .diary-gradient,
body.theme-apple .period-gradient,
body.theme-apple .date-gradient,
body.theme-apple .theater-gradient {
  color: #4c5663 !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(235, 240, 247, 0.66)),
    rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(112, 122, 136, 0.13) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.88), 0 9px 22px rgba(74, 87, 110, 0.10) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

body.theme-apple .dock .icon-face:not(.custom-icon) {
  background: rgba(255, 255, 255, 0.78) !important;
}

body.theme-apple .desktop-page-dot {
  background: rgba(87, 96, 110, 0.24) !important;
}

body.theme-apple .desktop-page-dot.active {
  background: rgba(87, 96, 110, 0.54) !important;
}

body.theme-apple .wechat-chat-topbar,
body.theme-apple .composer,
body.theme-apple .wechat-tabbar,
body.theme-apple .date-char-strip {
  color: var(--skin-text) !important;
  background: rgba(247, 248, 251, 0.78) !important;
  border-color: rgba(110, 118, 130, 0.12) !important;
  box-shadow: 0 8px 22px rgba(74, 87, 110, 0.08) !important;
  backdrop-filter: blur(24px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.14) !important;
}

body.theme-apple .chat-layout {
  --chat-bubble-user: rgba(218, 235, 218, 0.92);
  --chat-bubble-assistant: rgba(255, 255, 255, 0.88);
  --chat-bubble-text: #343940;
  background-color: #f3f5f8 !important;
}

body.theme-apple .bubble.assistant,
body.theme-apple .bubble.user {
  color: var(--chat-bubble-text) !important;
  border: 1px solid rgba(110, 118, 130, 0.10) !important;
  box-shadow: 0 6px 14px rgba(74, 87, 110, 0.07) !important;
}

body.theme-apple .composer-send,
body.theme-apple .date-char-strip button.active,
body.theme-apple .theater-view-toggle button.active,
body.theme-apple .favorite-type-tabs button.active,
body.theme-apple .preset-card.active,
body.theme-apple .message-select-box.checked {
  color: #ffffff !important;
  background: #7da1cb !important;
  border-color: rgba(87, 124, 166, 0.22) !important;
  box-shadow: 0 8px 18px rgba(93, 130, 172, 0.18) !important;
}

body.theme-apple .date-char-strip button,
body.theme-apple .theater-view-toggle button,
body.theme-apple .favorite-type-tabs button,
body.theme-apple .multi-select-bar button,
body.theme-apple .message-action-menu button,
body.theme-apple .mind-panel header button,
body.theme-apple .forward-picker-sheet header button {
  color: var(--skin-text) !important;
  background: rgba(255, 255, 255, 0.64) !important;
  border: 1px solid rgba(110, 118, 130, 0.11) !important;
  box-shadow: none !important;
}

body.theme-apple .transfer-card {
  color: #5b4d36 !important;
  background: linear-gradient(145deg, rgba(255, 238, 204, 0.90), rgba(235, 215, 183, 0.78)) !important;
  border-color: rgba(150, 120, 74, 0.16) !important;
  box-shadow: 0 10px 22px rgba(130, 104, 64, 0.10) !important;
}

body.theme-apple .location-card,
body.theme-apple .forum-share-card,
body.theme-apple .forwarded-chat-card {
  border-left-color: #9bb7d9 !important;
}

body.theme-apple .app-topbar::before {
  content: "";
  position: absolute;
  inset: -6px -6px;
  z-index: -1;
  border-radius: 22px;
  background: rgba(247, 248, 251, 0.50);
  border: 1px solid rgba(110, 118, 130, 0.10);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
}

body.theme-apple .home-status-avatar,
body.theme-apple .avatar,
body.theme-apple .image-avatar {
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.74), 0 8px 16px rgba(74, 87, 110, 0.08);
}

body.theme-apple .theme-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Apple theme: Dark mode, soft iOS-like graphite glass */
html[data-ui-mode="dark"] body.theme-apple {
  color-scheme: dark;
  --page-bg: #111216;
  --phone-bg: #16171c;
  --surface: rgba(35, 37, 44, 0.66);
  --surface-strong: rgba(42, 44, 52, 0.84);
  --skin-border: rgba(255, 255, 255, 0.105);
  --skin-accent: #82a8d8;
  --skin-accent-2: #a8bed8;
  --skin-text: #e4e7ec;
  --skin-title: #f0f2f6;
  --skin-muted: rgba(222, 228, 238, 0.58);
  --skin-button: rgba(128, 166, 210, 0.16);
  --skin-button-text: #b9d2ef;
  --skin-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.08);
  --skin-shadow-float: 0 24px 72px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.10);
  --skin-home:
    radial-gradient(circle at 18% 10%, rgba(84, 110, 146, 0.28), transparent 34%),
    radial-gradient(circle at 86% 14%, rgba(119, 128, 142, 0.24), transparent 36%),
    radial-gradient(circle at 78% 86%, rgba(83, 101, 128, 0.20), transparent 38%),
    linear-gradient(180deg, #1c1d23 0%, #17191f 48%, #121419 100%);
  --glass-icon-bg: rgba(42, 45, 54, 0.72);
  --glass-icon-border: rgba(255, 255, 255, 0.095);
  --glass-icon-text: #dfe4ec;
  --text: #e4e7ec;
  --muted: rgba(222, 228, 238, 0.58);
  --line: rgba(255, 255, 255, 0.105);
  --ink: #e4e7ec;
  --app-font-color: #e4e7ec;
  --widget-text-color: #e4e7ec;
  --widget-glass-color: rgba(40, 42, 50, 0.58);
  color: var(--skin-text);
  background: var(--page-bg) !important;
}

html[data-ui-mode="dark"] body.theme-apple,
html[data-ui-mode="dark"] body.theme-apple .device-shell {
  background: var(--page-bg) !important;
}

html[data-ui-mode="dark"] body.theme-apple .phone {
  background: var(--phone-bg) !important;
}

html[data-ui-mode="dark"] body.theme-apple .screen {
  color: var(--skin-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(17, 18, 22, 0.20)),
    var(--wallpaper-image, var(--skin-home)) center / cover no-repeat !important;
}

html[data-ui-mode="dark"] body.theme-apple .dynamic-island {
  background: rgba(5, 6, 8, 0.60) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 8px 22px rgba(0, 0, 0, 0.24) !important;
}

html[data-ui-mode="dark"] body.theme-apple .status-bar,
html[data-ui-mode="dark"] body.theme-apple .clock-hero,
html[data-ui-mode="dark"] body.theme-apple .clock-greeting,
html[data-ui-mode="dark"] body.theme-apple .clock-date,
html[data-ui-mode="dark"] body.theme-apple .app-topbar,
html[data-ui-mode="dark"] body.theme-apple .app-topbar span,
html[data-ui-mode="dark"] body.theme-apple .app-tile small,
html[data-ui-mode="dark"] body.theme-apple .dock-icon small,
html[data-ui-mode="dark"] body.theme-apple .widget-label {
  color: rgba(232, 236, 244, 0.72) !important;
  text-shadow: none !important;
}

html[data-ui-mode="dark"] body.theme-apple .signal span {
  background: rgba(232, 236, 244, 0.72) !important;
}

html[data-ui-mode="dark"] body.theme-apple .clock-time {
  color: rgba(242, 244, 248, 0.82) !important;
  text-shadow: none !important;
}

html[data-ui-mode="dark"] body.theme-apple .back-button,
html[data-ui-mode="dark"] body.theme-apple .wechat-top-icon,
html[data-ui-mode="dark"] body.theme-apple .ghost-button,
html[data-ui-mode="dark"] body.theme-apple .tiny-button,
html[data-ui-mode="dark"] body.theme-apple .settings-back,
html[data-ui-mode="dark"] body.theme-apple .date-object-back,
html[data-ui-mode="dark"] body.theme-apple .theater-flow-back {
  color: var(--skin-button-text) !important;
  background: rgba(40, 42, 50, 0.68) !important;
  border-color: var(--skin-border) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.20) !important;
}

html[data-ui-mode="dark"] body.theme-apple :where(
  .widget,
  .home-status-card,
  .notes-widget-tile,
  .auto-status-panel,
  .dock,
  .panel,
  .chat-header,
  .preset-card,
  .preset-detail-item,
  .persona-card,
  .tavern-helper-grid div,
  .date-line,
  .date-hero,
  .date-preset-state,
  .date-generation-status,
  .date-person-card,
  .date-composer,
  .theater-type-card,
  .theater-session-card,
  .theater-state-panel,
  .theater-state-grid div,
  .theater-state-detail,
  .context-debug-panel,
  .context-debug-grid div,
  .context-debug-entry,
  .forum-post,
  .forum-comments,
  .forum-share-card,
  .location-card,
  .forwarded-chat-card,
  .forward-picker-sheet,
  .forward-picker-char,
  .profile-menu,
  .profile-card,
  .chat-image-card,
  .mind-panel,
  .mind-panel p,
  .mind-history-list article,
  .multi-select-bar,
  .message-action-menu,
  .favorite-type-tabs,
  .theater-view-toggle,
  .appearance-row-wide,
  .icon-editor-row,
  .check-pill,
  .world-card,
  .memory-card,
  .diary-card,
  .gallery-card,
  .settings-row
) {
  color: var(--skin-text) !important;
  background: var(--surface) !important;
  border-color: var(--skin-border) !important;
  box-shadow: var(--skin-shadow) !important;
}

html[data-ui-mode="dark"] body.theme-apple :where(.panel, .forward-picker-sheet, .context-debug-panel, .theater-state-panel, .mind-panel) {
  background: var(--surface-strong) !important;
}

html[data-ui-mode="dark"] body.theme-apple :where(
  input,
  select,
  textarea,
  .composer-input-wrap,
  .preset-search-input,
  .preset-content-editor,
  .preset-json-preview,
  .preset-detail-item pre
) {
  color: var(--skin-text) !important;
  background: rgba(24, 26, 32, 0.78) !important;
  border-color: var(--skin-border) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

html[data-ui-mode="dark"] body.theme-apple input::placeholder,
html[data-ui-mode="dark"] body.theme-apple textarea::placeholder {
  color: rgba(222, 228, 238, 0.36) !important;
}

html[data-ui-mode="dark"] body.theme-apple :where(
  #savePersonaButton,
  #saveSettingsButton,
  #saveWorldBookButton,
  .secondary-button,
  .file-button,
  .mini-toggle-button,
  .chat-settings-button,
  .forward-picker-confirm,
  .theater-session-actions button,
  .theater-state-panel header button,
  .theater-state-panel footer button,
  .context-debug-panel > header button,
  .context-debug-inline,
  .context-debug-button,
  .theme-swatch
) {
  color: var(--skin-button-text) !important;
  background: var(--skin-button) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

html[data-ui-mode="dark"] body.theme-apple .danger-button,
html[data-ui-mode="dark"] body.theme-apple .bubble.error {
  color: #f1b6b6 !important;
  background: rgba(78, 38, 40, 0.58) !important;
  border-color: rgba(255, 160, 160, 0.12) !important;
}

html[data-ui-mode="dark"] body.theme-apple .icon-face:not(.custom-icon),
html[data-ui-mode="dark"] body.theme-apple .chat-gradient,
html[data-ui-mode="dark"] body.theme-apple .people-gradient,
html[data-ui-mode="dark"] body.theme-apple .settings-gradient,
html[data-ui-mode="dark"] body.theme-apple .notes-gradient,
html[data-ui-mode="dark"] body.theme-apple .gallery-gradient,
html[data-ui-mode="dark"] body.theme-apple .music-gradient,
html[data-ui-mode="dark"] body.theme-apple .map-gradient,
html[data-ui-mode="dark"] body.theme-apple .weather-gradient,
html[data-ui-mode="dark"] body.theme-apple .world-gradient,
html[data-ui-mode="dark"] body.theme-apple .beauty-gradient,
html[data-ui-mode="dark"] body.theme-apple .moments-gradient,
html[data-ui-mode="dark"] body.theme-apple .forum-gradient,
html[data-ui-mode="dark"] body.theme-apple .preset-gradient,
html[data-ui-mode="dark"] body.theme-apple .memory-gradient,
html[data-ui-mode="dark"] body.theme-apple .phonecheck-gradient,
html[data-ui-mode="dark"] body.theme-apple .diary-gradient,
html[data-ui-mode="dark"] body.theme-apple .period-gradient,
html[data-ui-mode="dark"] body.theme-apple .date-gradient,
html[data-ui-mode="dark"] body.theme-apple .theater-gradient {
  color: #dfe4ec !important;
  background:
    linear-gradient(145deg, rgba(54, 57, 66, 0.92), rgba(32, 34, 41, 0.72)),
    rgba(38, 40, 48, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.095) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 9px 22px rgba(0, 0, 0, 0.22) !important;
}

html[data-ui-mode="dark"] body.theme-apple .dock .icon-face:not(.custom-icon) {
  background: rgba(44, 47, 56, 0.74) !important;
}

html[data-ui-mode="dark"] body.theme-apple .desktop-page-dot {
  background: rgba(232, 236, 244, 0.22) !important;
}

html[data-ui-mode="dark"] body.theme-apple .desktop-page-dot.active {
  background: rgba(232, 236, 244, 0.50) !important;
}

html[data-ui-mode="dark"] body.theme-apple .wechat-chat-topbar,
html[data-ui-mode="dark"] body.theme-apple .composer,
html[data-ui-mode="dark"] body.theme-apple .wechat-tabbar,
html[data-ui-mode="dark"] body.theme-apple .date-char-strip {
  color: var(--skin-text) !important;
  background: rgba(26, 28, 34, 0.78) !important;
  border-color: var(--skin-border) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20) !important;
}

html[data-ui-mode="dark"] body.theme-apple .chat-layout {
  --chat-bubble-user: rgba(63, 79, 99, 0.78);
  --chat-bubble-assistant: rgba(38, 40, 47, 0.88);
  --chat-bubble-text: #edf1f6;
  background-color: #17191f !important;
}

html[data-ui-mode="dark"] body.theme-apple .bubble.assistant,
html[data-ui-mode="dark"] body.theme-apple .bubble.user {
  color: var(--chat-bubble-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16) !important;
}

html[data-ui-mode="dark"] body.theme-apple .composer-send,
html[data-ui-mode="dark"] body.theme-apple .date-char-strip button.active,
html[data-ui-mode="dark"] body.theme-apple .theater-view-toggle button.active,
html[data-ui-mode="dark"] body.theme-apple .favorite-type-tabs button.active,
html[data-ui-mode="dark"] body.theme-apple .preset-card.active,
html[data-ui-mode="dark"] body.theme-apple .message-select-box.checked {
  color: #f3f7ff !important;
  background: rgba(95, 124, 162, 0.82) !important;
  border-color: rgba(166, 198, 235, 0.18) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

html[data-ui-mode="dark"] body.theme-apple .date-char-strip button,
html[data-ui-mode="dark"] body.theme-apple .theater-view-toggle button,
html[data-ui-mode="dark"] body.theme-apple .favorite-type-tabs button,
html[data-ui-mode="dark"] body.theme-apple .multi-select-bar button,
html[data-ui-mode="dark"] body.theme-apple .message-action-menu button,
html[data-ui-mode="dark"] body.theme-apple .mind-panel header button,
html[data-ui-mode="dark"] body.theme-apple .forward-picker-sheet header button {
  color: var(--skin-text) !important;
  background: rgba(44, 47, 56, 0.64) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: none !important;
}

html[data-ui-mode="dark"] body.theme-apple .transfer-card {
  color: #f1dcc0 !important;
  background: linear-gradient(145deg, rgba(105, 79, 46, 0.64), rgba(74, 57, 39, 0.60)) !important;
  border-color: rgba(240, 205, 158, 0.14) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

html[data-ui-mode="dark"] body.theme-apple .location-card,
html[data-ui-mode="dark"] body.theme-apple .forum-share-card,
html[data-ui-mode="dark"] body.theme-apple .forwarded-chat-card {
  border-left-color: #8fb1d9 !important;
}

html[data-ui-mode="dark"] body.theme-apple .app-topbar::before {
  background: rgba(26, 28, 34, 0.52) !important;
  border-color: var(--skin-border) !important;
}

html[data-ui-mode="dark"] body.theme-apple .home-status-avatar,
html[data-ui-mode="dark"] body.theme-apple .avatar,
html[data-ui-mode="dark"] body.theme-apple .image-avatar {
  background: rgba(44, 47, 56, 0.68) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px rgba(0, 0, 0, 0.18) !important;
}



/* Apple theme cleanup: remove residual warm/beige surfaces in light & dark variants */
body.theme-apple {
  --surface: rgba(248, 250, 253, 0.86);
  --surface-strong: rgba(252, 253, 255, 0.95);
  --skin-surface: rgba(250, 251, 253, 0.96);
  --skin-shadow-soft: 0 10px 24px rgba(74, 87, 110, 0.08);
}

body.theme-apple :where(
  .wechat-contact,
  .wechat-bottom-tabs,
  .wechat-back,
  .wechat-me-card,
  .wechat-me-section,
  .world-row,
  .persona-row,
  .preset-card,
  .preset-detail-item,
  .tavern-helper-grid div,
  .memory-module-card,
  .memory-entry,
  .memory-entry-actions button,
  .period-card,
  .period-calendar,
  .period-list,
  .period-calendar header button,
  .period-calendar .period-day,
  .period-app .period-day,
  .period-app .panel,
  .period-app .period-card,
  .period-app .period-calendar,
  .period-app .period-list
) {
  background: var(--skin-surface) !important;
  color: var(--skin-text) !important;
  border-color: var(--skin-border) !important;
}

body.theme-apple .app-body:has(.period-app),
body.theme-apple .period-app {
  background: #f4f6fa !important;
}

body.theme-apple .period-calendar .period-day.outside,
body.theme-apple .period-app .period-day.outside {
  background: rgba(235, 239, 245, 0.92) !important;
  color: rgba(120, 128, 140, 0.76) !important;
}

body.theme-apple .period-calendar .period-day.period-range,
body.theme-apple .period-app .period-day.period-range {
  background: rgba(255, 227, 236, 0.90) !important;
  border-color: rgba(244, 95, 134, 0.24) !important;
  color: #4a2a33 !important;
}

body.theme-apple .period-calendar .period-day.period-start,
body.theme-apple .period-calendar .period-day.period-end,
body.theme-apple .period-app .period-day.period-start,
body.theme-apple .period-app .period-day.period-end {
  background: #ffb5c9 !important;
  border-color: #f08aa8 !important;
  color: #4a2a33 !important;
}

body.theme-apple .wechat-contact,
body.theme-apple .wechat-me-card,
body.theme-apple .wechat-me-section,
body.theme-apple .wechat-bottom-tabs,
body.theme-apple .world-row,
body.theme-apple .memory-module-card,
body.theme-apple .memory-entry {
  box-shadow: var(--skin-shadow-soft) !important;
}

body.theme-apple .world-book-entry-head button,
body.theme-apple .period-card button,
body.theme-apple .memory-entry-actions button,
body.theme-apple .wechat-tab.active {
  background: #8eb0da !important;
  color: #ffffff !important;
  border-color: rgba(87, 124, 166, 0.18) !important;
}

html[data-ui-mode="dark"] body.theme-apple {
  --skin-surface: rgba(34, 37, 44, 0.94);
}

html[data-ui-mode="dark"] body.theme-apple :where(
  .wechat-contact,
  .wechat-bottom-tabs,
  .wechat-back,
  .wechat-me-card,
  .wechat-me-section,
  .world-row,
  .persona-row,
  .preset-card,
  .preset-detail-item,
  .tavern-helper-grid div,
  .memory-module-card,
  .memory-entry,
  .memory-entry-actions button,
  .period-card,
  .period-calendar,
  .period-list,
  .period-calendar header button,
  .period-calendar .period-day,
  .period-app .period-day,
  .period-app .panel,
  .period-app .period-card,
  .period-app .period-calendar,
  .period-app .period-list
) {
  background: var(--skin-surface) !important;
  color: var(--skin-text) !important;
  border-color: var(--skin-border) !important;
}

html[data-ui-mode="dark"] body.theme-apple .app-body:has(.period-app),
html[data-ui-mode="dark"] body.theme-apple .period-app {
  background: #17191f !important;
}

html[data-ui-mode="dark"] body.theme-apple .period-calendar .period-day.outside,
html[data-ui-mode="dark"] body.theme-apple .period-app .period-day.outside {
  background: rgba(50, 54, 62, 0.92) !important;
  color: rgba(196, 202, 212, 0.44) !important;
}

html[data-ui-mode="dark"] body.theme-apple .period-calendar .period-day.period-range,
html[data-ui-mode="dark"] body.theme-apple .period-app .period-day.period-range {
  background: rgba(109, 68, 86, 0.72) !important;
  border-color: rgba(255, 162, 193, 0.18) !important;
  color: #f6dde6 !important;
}

html[data-ui-mode="dark"] body.theme-apple .period-calendar .period-day.period-start,
html[data-ui-mode="dark"] body.theme-apple .period-calendar .period-day.period-end,
html[data-ui-mode="dark"] body.theme-apple .period-app .period-day.period-start,
html[data-ui-mode="dark"] body.theme-apple .period-app .period-day.period-end {
  background: rgba(171, 103, 131, 0.88) !important;
  border-color: rgba(255, 182, 205, 0.22) !important;
  color: #fff4f8 !important;
}



/* Apple theme header polish: remove warm tint from app title bar */
body.theme-apple .app-topbar,
body.theme-apple .app-topbar span {
  color: #2f343b !important;
}

body.theme-apple .app-topbar::before {
  background: rgba(252, 253, 255, 0.92) !important;
  border: 1px solid rgba(112, 122, 136, 0.10) !important;
  box-shadow: 0 10px 24px rgba(74, 87, 110, 0.06), inset 0 1px rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(24px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;
}

body.theme-apple .back-button {
  color: #6f8fb9 !important;
  background: rgba(250, 251, 253, 0.96) !important;
  border: 1px solid rgba(112, 122, 136, 0.10) !important;
  box-shadow: 0 6px 14px rgba(74, 87, 110, 0.05), inset 0 1px rgba(255, 255, 255, 0.82) !important;
}

html[data-ui-mode="dark"] body.theme-apple .app-topbar,
html[data-ui-mode="dark"] body.theme-apple .app-topbar span {
  color: #eef2f6 !important;
}

html[data-ui-mode="dark"] body.theme-apple .app-topbar::before {
  background: rgba(28, 31, 38, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20), inset 0 1px rgba(255, 255, 255, 0.08) !important;
}

html[data-ui-mode="dark"] body.theme-apple .back-button {
  color: #a8c1df !important;
  background: rgba(42, 46, 54, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.06) !important;
}


/* 世界书分栏布局：左侧分类，右侧新增 / 编辑 / 条目列表 */
.worldbook-split-app {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(108px, 30vw, 138px) minmax(0, 1fr);
  gap: 14px;
  padding: 14px 12px calc(18px + var(--safe-bottom));
  background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--skin-accent, #8eb0da) 16%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--phone-bg, #f4f6fa) 96%, #fff 4%), var(--phone-bg, #f4f6fa));
  color: var(--skin-text, #172033);
  overflow: hidden;
}

.worldbook-sidebar {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px 8px;
  border-right: 1px solid color-mix(in srgb, var(--skin-border, rgba(86, 105, 128, 0.18)) 70%, transparent);
}

.worldbook-sidebar-title {
  min-height: 58px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: color-mix(in srgb, var(--skin-accent, #6f93bd) 82%, var(--skin-text, #172033));
  background: color-mix(in srgb, var(--surface-strong, #fff) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--skin-accent, #8eb0da) 22%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-text, #172033) 7%, transparent), inset 0 1px rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.worldbook-tab-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.worldbook-tab {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--skin-muted, #667589);
  text-align: left;
  font-weight: 900;
}

.worldbook-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldbook-tab em {
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 62%, transparent);
  color: inherit;
  font-size: 11px;
  font-style: normal;
}

.worldbook-tab.active {
  color: var(--skin-text, #172033);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  border-color: color-mix(in srgb, var(--skin-border, #d6dde7) 62%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--skin-text, #172033) 8%, transparent), inset 0 1px rgba(255, 255, 255, 0.82);
}

.worldbook-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 12px;
  overflow: hidden;
  padding-right: 2px;
}

.worldbook-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 2px 0 4px;
}

.worldbook-workspace-head div {
  min-width: 0;
}

.worldbook-workspace-head small,
.worldbook-workspace-head p {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--skin-muted, #667589);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.worldbook-workspace-head h1 {
  margin: 2px 0 4px;
  color: var(--skin-text, #172033);
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.worldbook-add-button {
  min-height: 42px;
  max-width: 136px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--skin-border, #d6dde7) 60%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 86%, transparent);
  color: color-mix(in srgb, var(--skin-accent, #6f93bd) 76%, var(--skin-text, #172033));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-text, #172033) 7%, transparent), inset 0 1px rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.worldbook-editor-card,
.worldbook-card,
.worldbook-empty-card {
  border: 1px solid color-mix(in srgb, var(--skin-border, #d6dde7) 72%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, transparent);
  color: var(--skin-text, #172033);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--skin-text, #172033) 8%, transparent), inset 0 1px rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
}

.worldbook-editor-card {
  max-height: min(52vh, 520px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 26px;
  -webkit-overflow-scrolling: touch;
}

.worldbook-editor-card header {
  display: grid;
  gap: 2px;
}

.worldbook-editor-card header span {
  color: var(--skin-muted, #667589);
  font-size: 12px;
  font-weight: 900;
}

.worldbook-editor-card header h2 {
  margin: 0;
  color: var(--skin-text, #172033);
  font-size: 18px;
}

.worldbook-editor-card .field,
.worldbook-editor-card .field span {
  color: var(--skin-text, #172033);
}

.worldbook-editor-card input,
.worldbook-editor-card select,
.worldbook-editor-card textarea {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--skin-border, #d6dde7) 68%, transparent);
  background: color-mix(in srgb, var(--phone-bg, #f4f6fa) 62%, #fff 38%);
  color: var(--skin-text, #172033);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.worldbook-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.worldbook-reader-list {
  max-height: 120px;
  overflow-y: auto;
  padding: 2px;
}

.worldbook-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.worldbook-editor-actions button,
.worldbook-card-actions button {
  min-height: 40px;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--skin-border, #d6dde7) 62%, transparent) !important;
  background: color-mix(in srgb, var(--phone-bg, #f4f6fa) 70%, transparent) !important;
  color: var(--skin-text, #172033) !important;
  font-weight: 900;
}

.worldbook-editor-actions button:first-child {
  background: linear-gradient(135deg, var(--skin-accent, #8eb0da), var(--skin-accent-2, #adc7e6)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.worldbook-list-panel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  padding: 2px 2px calc(10px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

.worldbook-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 25px;
}

.worldbook-card.disabled {
  opacity: 0.62;
}

.worldbook-card-main {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 0;
  background: transparent !important;
  color: inherit !important;
  text-align: left;
  box-shadow: none !important;
}

.worldbook-card-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.worldbook-card-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--skin-text, #172033);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.2;
}

.worldbook-card-title i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--skin-accent, #ffbd2e) 80%, #ffbd2e);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--skin-accent, #ffbd2e) 14%, transparent);
}

.worldbook-card small,
.worldbook-card p,
.worldbook-empty-card p {
  margin: 0;
  overflow: hidden;
  color: var(--skin-muted, #667589);
  line-height: 1.45;
}

.worldbook-card small {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.worldbook-card p {
  display: -webkit-box;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.worldbook-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.worldbook-card-actions button {
  min-height: 34px;
  font-size: 12px;
}

.worldbook-card-actions .danger-button {
  background: color-mix(in srgb, #ff3b30 14%, var(--phone-bg, #f4f6fa)) !important;
  color: #d33a33 !important;
}

.worldbook-empty-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 25px;
}

.worldbook-empty-card strong {
  color: var(--skin-text, #172033);
  font-size: 18px;
}


/* 世界书右侧操作热区修复：避免卡片主体或旧浮层吞掉点击 */
.worldbook-split-app,
.worldbook-sidebar,
.worldbook-workspace,
.worldbook-editor-card,
.worldbook-card {
  position: relative;
}

.worldbook-workspace {
  z-index: 2;
  pointer-events: auto;
}

.worldbook-workspace-head,
.worldbook-editor-actions,
.worldbook-card-actions {
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

.worldbook-workspace button,
.worldbook-workspace input,
.worldbook-workspace select,
.worldbook-workspace textarea,
.worldbook-sidebar button {
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.worldbook-card-main {
  position: relative;
  z-index: 1;
}

.worldbook-card-actions button,
.worldbook-editor-actions button,
.worldbook-add-button {
  position: relative;
  z-index: 5;
}

html[data-ui-mode="dark"] .worldbook-split-app {
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--skin-accent, #8eb0da) 20%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--phone-bg, #1f2229) 95%, #000 5%), var(--phone-bg, #1f2229));
}

html[data-ui-mode="dark"] .worldbook-sidebar-title,
html[data-ui-mode="dark"] .worldbook-tab.active,
html[data-ui-mode="dark"] .worldbook-add-button,
html[data-ui-mode="dark"] .worldbook-editor-card,
html[data-ui-mode="dark"] .worldbook-card,
html[data-ui-mode="dark"] .worldbook-empty-card {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.08);
}

@media (max-width: 390px) {
  .worldbook-split-app {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .worldbook-sidebar {
    padding-left: 4px;
    padding-right: 6px;
  }

  .worldbook-sidebar-title {
    min-height: 52px;
    font-size: 13px;
  }

  .worldbook-tab {
    min-height: 48px;
    padding: 0 8px;
    font-size: 13px;
  }

  .worldbook-workspace-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .worldbook-add-button {
    justify-self: start;
    max-width: 100%;
    min-height: 38px;
  }

  .worldbook-editor-card {
    max-height: 48vh;
    border-radius: 22px;
  }

  .worldbook-card-title strong {
    font-size: 16px;
  }
}

.worldbook-workspace {
  display: flex !important;
  flex-direction: column;
}

.worldbook-list-panel {
  flex: 1 1 auto;
}


/* ============================================================
   购物 App：第三页桌面 + 商品/外卖/订单
   主题色采用苔绿、雾蓝、暖米色；避免橙色系，贴合当前玻璃/自然主题。
   ============================================================ */
.shop-gradient { background: linear-gradient(145deg, #45665c, #6f8f82 54%, #c6b78c); }
.custom-home .home-page3 {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 16px;
  padding: 6px 0 12px;
}
.custom-home .shop-home-hero {
  min-height: 210px;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 8px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  border-radius: 30px;
  color: var(--skin-text);
  text-align: left;
  background:
    radial-gradient(circle at 16% 16%, color-mix(in srgb, #d7e7dc 72%, transparent), transparent 34%),
    radial-gradient(circle at 86% 22%, color-mix(in srgb, #b6cad5 58%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 40%, transparent), color-mix(in srgb, #6f8f82 28%, transparent));
  backdrop-filter: blur(26px) saturate(1.28);
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  box-shadow: var(--skin-shadow);
  -webkit-tap-highlight-color: transparent;
}
.custom-home .shop-home-hero span {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--skin-muted);
  background: color-mix(in srgb, var(--surface-strong) 52%, transparent);
  font-size: 12px;
  font-weight: 900;
}
.custom-home .shop-home-hero strong {
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.custom-home .shop-home-hero small {
  color: var(--skin-muted);
  font-size: 14px;
  font-weight: 800;
}
.custom-home .home-page3-apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  justify-items: center;
}
.shop-app {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px 12px calc(24px + var(--safe-bottom));
  background:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, #dbeadf 66%, transparent), transparent 34%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, #cbdbe8 50%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--phone-bg, #f3ecdf) 92%, #eff7f2 8%), color-mix(in srgb, var(--phone-bg, #f3ecdf) 82%, #dfe9e2 18%));
  color: var(--skin-text, #2c241d);
}
.shop-app button { -webkit-tap-highlight-color: transparent; }
.shop-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 74%, transparent);
  box-shadow: var(--skin-shadow, 0 12px 34px rgba(30, 36, 44, 0.08));
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.shop-hero h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.shop-hero p { margin: 4px 0 0; color: var(--skin-muted, #7b6b5a); font-size: 13px; line-height: 1.45; }
.shop-hero-badge {
  min-width: 66px;
  min-height: 66px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, #45665c, #7c988d);
  font-size: 28px;
  box-shadow: 0 12px 26px color-mix(in srgb, #45665c 28%, transparent);
}
.shop-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.shop-search-row input {
  min-height: 42px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  padding: 0 13px;
  color: var(--skin-text, #2c241d);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 78%, transparent);
  outline: 0;
}
.shop-search-row button,
.shop-mini-button,
.shop-generate-button,
.shop-card-actions button,
.shop-cart-row button,
.shop-event-card button,
.shop-order-card button {
  min-height: 38px;
  border: 0;
  border-radius: 14px;
  padding: 0 12px;
  color: var(--skin-button-text, #fff);
  background: var(--skin-button, #171b22);
  font-weight: 900;
}
.shop-tabs,
.shop-category-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.shop-tabs button,
.shop-category-strip button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  color: var(--skin-text, #2c241d);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 66%, transparent);
  font-size: 13px;
  font-weight: 900;
}
.shop-tabs button.active,
.shop-category-strip button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #45665c, #6f8f82);
}
.shop-toolbar {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 64%, transparent);
}
.shop-toolbar-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.shop-generate-button {
  min-height: 42px;
  background: linear-gradient(145deg, #45665c, #6f8f82);
}
.shop-mini-button {
  color: var(--skin-text, #2c241d);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 72%, #dbe8df 28%);
}
.shop-status {
  min-height: 18px;
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.shop-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 76%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-text, #17181c) 8%, transparent);
}
.shop-card-emoji {
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background:
    radial-gradient(circle at 24% 18%, color-mix(in srgb, #fff 54%, transparent), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, #dce8df 76%, transparent), color-mix(in srgb, #bbcfc7 84%, transparent));
  font-size: 42px;
}
.shop-card h3 {
  min-height: 38px;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}
.shop-card-shop,
.shop-card-desc,
.shop-card-reason,
.shop-card-meta,
.shop-card-tags {
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  line-height: 1.4;
}
.shop-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.shop-card-price strong { font-size: 18px; color: #4f6b5d; }
.shop-card-price del { color: var(--skin-muted, #7b6b5a); font-size: 12px; }
.shop-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.shop-card-actions button:nth-child(3) {
  grid-column: 1 / -1;
  color: var(--skin-text, #2c241d);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 72%, #dbe8df 28%);
}
.shop-empty {
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--skin-muted, #7b6b5a) 36%, transparent);
  border-radius: 20px;
  color: var(--skin-muted, #7b6b5a);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 44%, transparent);
  text-align: center;
  line-height: 1.6;
}
.shop-order-list,
.shop-event-list,
.shop-cart-list {
  display: grid;
  gap: 10px;
}
.shop-order-card,
.shop-event-card,
.shop-cart-row {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 78%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-text, #17181c) 7%, transparent);
}
.shop-order-card strong,
.shop-event-card strong,
.shop-cart-row strong { font-size: 15px; }
.shop-order-card small,
.shop-event-card small,
.shop-cart-row small { color: var(--skin-muted, #7b6b5a); line-height: 1.45; }
.shop-order-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
.shop-order-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #45665c, #6f8f82);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.shop-order-status.pending { background: color-mix(in srgb, var(--skin-muted, #7b6b5a) 74%, #171b22 26%); }
.shop-order-status.moving { background: linear-gradient(145deg, #4b6f93, #7c9ab7); }
.shop-order-status.received { background: linear-gradient(145deg, #45665c, #6f8f82); }
.shop-cart-row {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.shop-order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}
.shop-order-card button.shop-confirm-button {
  color: #fff;
  background: linear-gradient(145deg, #45665c, #6f8f82);
}
.shop-order-card button.shop-secondary-button {
  color: var(--skin-muted, #7b6b5a);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 72%, #dbe8df 28%);
}
.shop-order-card button.shop-secondary-button:disabled { opacity: 0.72; }
.shop-order-card button.shop-danger-button {
  color: #fff;
  background: color-mix(in srgb, #c92f3b 86%, #171b22 14%);
}
.chat-shop-order-card {
  width: min(252px, 74vw);
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-left: 4px solid #6f8f82;
  border-radius: 14px;
  color: var(--skin-text, #2c241d);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 94%, transparent);
  text-align: left;
  box-shadow: 0 10px 24px rgba(20, 24, 30, 0.12);
}
.chat-shop-order-card span { color: var(--skin-muted, #7b6b5a); font-size: 12px; font-weight: 900; }
.chat-shop-order-card strong { font-size: 16px; line-height: 1.35; }
.chat-shop-order-card small { color: var(--skin-muted, #7b6b5a); line-height: 1.45; }
@media (max-width: 390px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-toolbar-main { grid-template-columns: 1fr; }
}


/* ============================================================
   情侣空间 App：共同小屋 + 回忆胶卷 + 双人日记
   主题色采用雾粉、苔绿、暖米，和当前玻璃自然主题保持一致。
   ============================================================ */
.couple-gradient { background: linear-gradient(145deg, #786174, #6f9384 54%, #d4bea5); }
.custom-home .life-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.custom-home .life-home-grid .shop-home-hero,
.custom-home .couple-home-hero {
  min-height: 184px;
}
.custom-home .couple-home-hero {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 8px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  border-radius: 30px;
  color: var(--skin-text);
  text-align: left;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, #f0d6df 74%, transparent), transparent 34%),
    radial-gradient(circle at 84% 16%, color-mix(in srgb, #b9d4c7 58%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 42%, transparent), color-mix(in srgb, #9d7d8e 24%, transparent));
  backdrop-filter: blur(26px) saturate(1.28);
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  box-shadow: var(--skin-shadow);
  -webkit-tap-highlight-color: transparent;
}
.custom-home .couple-home-hero span,
.custom-home .couple-home-hero small,
.custom-home .couple-home-hero strong {
  display: block;
}
.custom-home .couple-home-hero span {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--skin-muted);
  background: color-mix(in srgb, var(--surface-strong) 52%, transparent);
  font-size: 12px;
  font-weight: 900;
}
.custom-home .couple-home-hero strong {
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.custom-home .couple-home-hero small {
  color: var(--skin-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.custom-home .couple-home-mini-stack {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
}
.custom-home .couple-home-mini-stack i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, #fff 46%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-strong) 56%, transparent);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.custom-home .couple-home-mini-stack b {
  min-width: 0;
  overflow: hidden;
  color: var(--skin-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.couple-app {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px 12px calc(24px + var(--safe-bottom));
  color: var(--skin-text, #2c241d);
  background:
    radial-gradient(circle at 18% 4%, rgba(238, 205, 216, 0.72), transparent 26%),
    radial-gradient(circle at 94% 18%, rgba(177, 212, 197, 0.62), transparent 28%),
    linear-gradient(180deg, #fff8f6, #f2f6ef 56%, #eef3f6);
}
.couple-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(226, 238, 228, 0.76));
  box-shadow: 0 18px 42px rgba(74, 62, 52, 0.12);
}
.couple-hero-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.couple-avatar-stack {
  display: flex;
  align-items: center;
}
.couple-avatar-stack .avatar {
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 18px rgba(74, 62, 52, 0.12);
}
.couple-avatar-stack .avatar + .avatar { margin-left: -12px; }
.couple-title { min-width: 0; display: grid; gap: 3px; }
.couple-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
.couple-title small { color: var(--skin-muted, #7b6b5a); font-size: 12px; font-weight: 800; }
.couple-stage-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #77566a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.couple-quote {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid #9d7d8e;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  color: #4d3f46;
  line-height: 1.55;
}
.couple-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.couple-stat {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}
.couple-stat span { color: var(--skin-muted, #7b6b5a); font-size: 11px; font-weight: 900; }
.couple-stat strong { font-size: 18px; }
.couple-char-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
}
.couple-char-strip button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  color: #4d3f46;
  background: rgba(255, 255, 255, 0.68);
  font-weight: 900;
  white-space: nowrap;
}
.couple-char-strip button.active { background: #2f3835; color: #fff; }
.couple-room {
  position: relative;
  min-height: 246px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 251, 246, 0.92) 0 60%, rgba(216, 205, 186, 0.86) 60% 100%),
    radial-gradient(circle at 18% 16%, rgba(248, 222, 231, 0.68), transparent 30%);
  box-shadow: 0 18px 42px rgba(74, 62, 52, 0.12);
}
.couple-room-window {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 84px;
  height: 74px;
  border-radius: 24px;
  background: linear-gradient(145deg, #c7e2ec, #f5eee0);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,0.58);
}
.couple-room-bed {
  position: absolute;
  left: 20px;
  bottom: 34px;
  width: 148px;
  height: 72px;
  border-radius: 26px 26px 18px 18px;
  background: linear-gradient(145deg, #dcc6cf, #f8eee9);
  box-shadow: 0 12px 24px rgba(100, 74, 58, 0.12);
}
.couple-room-bed::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 12px;
  width: 48px;
  height: 30px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}
.couple-room-table {
  position: absolute;
  right: 28px;
  bottom: 42px;
  width: 100px;
  height: 50px;
  border-radius: 18px;
  background: linear-gradient(145deg, #b99b82, #d8c2a9);
  box-shadow: 0 12px 24px rgba(100, 74, 58, 0.14);
}
.couple-room-wallnote {
  position: absolute;
  left: 24px;
  top: 24px;
  max-width: 168px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  color: #6c5362;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 10px 20px rgba(74, 62, 52, 0.10);
}
.couple-room-item {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 8px 18px rgba(74, 62, 52, 0.12);
  font-size: 22px;
}
.couple-room-item.item-0 { left: 48px; bottom: 116px; }
.couple-room-item.item-1 { right: 52px; bottom: 96px; }
.couple-room-item.item-2 { left: 176px; bottom: 38px; }
.couple-room-item.item-3 { right: 118px; top: 36px; }
.couple-section {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 32px rgba(74, 62, 52, 0.08);
}
.couple-section header,
.couple-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.couple-section h3 { margin: 0; font-size: 17px; }
.couple-section small { color: var(--skin-muted, #7b6b5a); line-height: 1.45; }
.couple-actions { flex-wrap: wrap; justify-content: flex-start; }
.couple-actions button,
.couple-section header button,
.couple-memory-card button,
.couple-diary-card button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: #2f3835;
  font-size: 12px;
  font-weight: 900;
}
.couple-actions button.secondary,
.couple-section header button.secondary { color: #4d3f46; background: rgba(255, 255, 255, 0.82); }
.couple-api-status {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #5d5360;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}
.couple-api-status.ready {
  background: linear-gradient(145deg, rgba(226, 238, 232, 0.9), rgba(245, 239, 231, 0.84));
}
.couple-api-status.error {
  background: rgba(255, 231, 231, 0.86);
  color: #8b2f38;
}

.couple-memory-list,
.couple-diary-list {
  display: grid;
  gap: 8px;
}
.couple-memory-card,
.couple-diary-card {
  display: grid;
  gap: 6px;
  padding: 11px;
  border-radius: 18px;
  background: rgba(246, 241, 234, 0.9);
}
.couple-memory-card.pinned { background: linear-gradient(145deg, rgba(246, 241, 234, 0.95), rgba(238, 219, 228, 0.82)); }
.couple-memory-card strong,
.couple-diary-card strong { font-size: 15px; }
.couple-memory-card p,
.couple-diary-card p { margin: 0; color: #5d5360; line-height: 1.48; }
.couple-empty {
  padding: 18px;
  border: 1.5px dashed rgba(125, 106, 88, 0.28);
  border-radius: 20px;
  color: var(--skin-muted, #7b6b5a);
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 390px) {
  .custom-home .life-home-grid { grid-template-columns: 1fr; }
  .custom-home .life-home-grid .shop-home-hero,
  .custom-home .couple-home-hero { min-height: 144px; }
  .couple-stat-grid { grid-template-columns: 1fr; }
}

/* WeChat pin / blacklist / top message banner */
.wechat-chat-tools {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}
.wechat-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px;
  color: var(--skin-text, #17181c);
}
.wechat-list-head h2 {
  margin: 0;
  font-size: 22px;
}
.wechat-list-head small {
  color: var(--skin-muted, #626b78);
  font-size: 12px;
  font-weight: 800;
}
.wechat-contact-row {
  display: block;
}
.wechat-contact-row.pinned .wechat-contact {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-strong, #fff) 86%, #d8f0e4 14%), color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent)) !important;
}
.wechat-contact-row.blocked {
  opacity: 0.72;
}
.wechat-pin-badge,
.wechat-block-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skin-accent, #07c160) 16%, transparent);
  color: var(--skin-text, #17181c);
  font-size: 11px;
  font-weight: 900;
}
.wechat-block-badge {
  background: rgba(80, 86, 98, 0.14);
}
.wechat-message-toast {
  position: fixed;
  top: max(12px, calc(8px + var(--safe-top)));
  left: 14px;
  right: 14px;
  z-index: 12000;
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 22px;
  color: #17181c;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 46px rgba(16, 20, 26, 0.22);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  text-align: left;
  animation: wechatToastDrop 0.22s ease both;
}
.wechat-message-toast .avatar {
  width: 42px;
  border-radius: 14px;
}
.wechat-message-toast strong,
.wechat-message-toast small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wechat-message-toast small {
  margin-top: 2px;
  color: rgba(23, 24, 28, 0.62);
  font-size: 12px;
}
.wechat-message-toast em {
  color: rgba(23, 24, 28, 0.52);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
@keyframes wechatToastDrop {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.inspiration-preview-button {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: color-mix(in srgb, var(--skin-surface, #fffdf7) 86%, var(--skin-accent, #4d7cff) 14%);
  color: var(--skin-text, #2c241d);
  font-size: 12px;
  font-weight: 900;
}
.inspiration-preview-button img { width: 100%; height: 100%; object-fit: cover; }


/* Chat + panel polish: remove parchment residue and use clean icon buttons */
.chat-layout .chat-extra-panel,
.chat-layout .chat-extra-panel.plus-grid,
body.theme-apple .chat-layout .chat-extra-panel,
html[data-ui-mode="dark"] body.theme-apple .chat-layout .chat-extra-panel {
  background: color-mix(in srgb, var(--phone-bg, #f4f7fb) 96%, #ffffff 4%) !important;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(76, 92, 112, 0.14)) 70%, transparent) !important;
  box-shadow: 0 -16px 42px rgba(66, 78, 96, 0.10), inset 0 1px rgba(255,255,255,.72) !important;
}
.chat-layout .plus-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px 12px !important;
  padding: 20px 18px calc(18px + var(--safe-bottom)) !important;
}
.chat-layout .plus-action-button,
.chat-layout .plus-grid button {
  min-height: 78px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--skin-text, #253044) !important;
}
.chat-layout .plus-action-icon:not(.custom-icon) {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(231,237,246,.92)) !important;
  border: 1px solid rgba(111, 128, 150, 0.18) !important;
  color: #314153 !important;
  box-shadow: 0 10px 24px rgba(47, 62, 82, 0.10), inset 0 1px rgba(255,255,255,.86) !important;
  font-size: 23px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.chat-layout .plus-action-icon.custom-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(111, 128, 150, 0.16) !important;
  box-shadow: 0 10px 24px rgba(47, 62, 82, 0.10) !important;
}
.chat-layout .plus-action-label,
.chat-layout .plus-action-button span:last-child {
  color: var(--skin-text, #253044) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
.chat-layout .composer {
  border-top: 1px solid rgba(81, 96, 118, 0.12) !important;
  background: color-mix(in srgb, var(--phone-bg, #f4f7fb) 92%, #ffffff 8%) !important;
}


/* Voice messages and lightweight call UI */
.voice-card-wrap {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
  column-gap: 8px;
  row-gap: 6px;
  max-width: min(316px, 88vw);
}
.voice-card-wrap.user {
  justify-content: end;
}
.voice-transcribe-pill {
  align-self: center;
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(128, 132, 138, 0.18);
  color: rgba(76, 82, 92, 0.74);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.voice-transcribe-pill.active {
  background: rgba(128, 132, 138, 0.26);
  color: rgba(48, 54, 64, 0.82);
}
.voice-transcribe-pill:active {
  transform: scale(.96);
}
.voice-transcript-text {
  grid-column: 1 / -1;
  max-width: min(240px, 68vw);
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(128, 132, 138, 0.14);
  color: var(--skin-text, #253044);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.voice-card {
  width: min(240px, 68vw);
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 18px;
  color: var(--skin-text, #253044);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, transparent);
  box-shadow: 0 10px 24px rgba(47, 62, 82, 0.10);
}
.voice-card.user {
  justify-self: end;
  background: color-mix(in srgb, var(--skin-accent, #b47a35) 18%, var(--surface-strong, #fff));
}
.voice-card.assistant { justify-self: start; }
.voice-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}
.voice-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 78px;
}
.voice-wave i {
  width: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: .65;
}
.voice-wave i:nth-child(1) { height: 8px; }
.voice-wave i:nth-child(2) { height: 14px; }
.voice-wave i:nth-child(3) { height: 20px; }
.voice-wave i:nth-child(4) { height: 14px; }
.voice-wave i:nth-child(5) { height: 9px; }
.voice-card small {
  color: var(--skin-muted, #6f7380);
  font-size: 11px;
  font-weight: 800;
}
.voice-card audio {
  width: 100%;
  height: 30px;
}
.voice-capture-overlay,
.chat-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 18px;
  background: rgba(10, 12, 16, .34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.voice-capture-card,
.chat-call-card {
  width: min(420px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 36px));
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0,0,0,.12)) 72%, transparent);
  border-radius: 28px;
  color: var(--skin-text, #253044);
  background: color-mix(in srgb, var(--phone-bg, #f7f2e9) 92%, transparent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}
.voice-capture-card h3,
.chat-call-card h3 { margin: 0; font-size: 20px; }
.voice-capture-card p,
.chat-call-card p { margin: 0; color: var(--skin-muted, #6f7380); line-height: 1.45; }
.voice-hold-button {
  height: 108px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, var(--skin-accent, #b47a35), var(--skin-accent-2, #6b7a8a));
  font-size: 18px;
  font-weight: 1000;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--skin-accent, #b47a35) 36%, transparent);
  touch-action: none;
  user-select: none;
}
.voice-hold-button.recording {
  transform: scale(.98);
  filter: saturate(1.25);
}
.voice-capture-status {
  min-height: 22px;
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 82%, transparent);
  font-size: 13px;
  font-weight: 800;
}
.voice-fallback-text {
  min-height: 74px;
  width: 100%;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--skin-border, rgba(0,0,0,.12));
  border-radius: 16px;
  color: var(--skin-text, #253044);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, transparent);
  font: inherit;
}
.voice-capture-actions,
.chat-call-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.voice-capture-actions button,
.chat-call-actions button,
.chat-call-composer button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--skin-accent, #b47a35);
  font-weight: 900;
}
.voice-capture-actions button.secondary,
.chat-call-actions button.secondary,
.chat-call-composer button.secondary {
  color: var(--skin-text, #253044);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
}
.chat-call-overlay { place-items: center; }
.chat-call-card {
  height: min(720px, calc(100dvh - 40px));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.chat-call-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chat-call-transcript {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 78%, transparent);
  -webkit-overflow-scrolling: touch;
}
.call-line {
  max-width: 82%;
  padding: 9px 11px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--phone-bg, #f7f2e9) 90%, transparent);
  color: var(--skin-text, #253044);
  line-height: 1.45;
  word-break: break-word;
}
.call-line.user { justify-self: end; background: color-mix(in srgb, var(--skin-accent, #b47a35) 18%, var(--phone-bg, #f7f2e9)); }
.call-line.assistant { justify-self: start; }
.call-line small { display:block; color: var(--skin-muted, #6f7380); font-size: 11px; font-weight: 900; margin-bottom: 3px; }
.chat-call-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.chat-call-composer textarea {
  min-height: 42px;
  max-height: 96px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid var(--skin-border, rgba(0,0,0,.12));
  border-radius: 18px;
  color: var(--skin-text, #253044);
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, transparent);
  font: inherit;
}


/* Inline voice button + movable call mini-window */
.chat-layout .composer {
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px 34px auto !important;
}
.composer-voice-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
}
.composer-voice-inline.recording {
  color: #fff !important;
  background: var(--skin-accent, #6f9ed8) !important;
}
.composer-icon[data-send-batch].has-pending {
  color: #fff !important;
  background: var(--skin-accent, #6f9ed8) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--skin-accent, #6f9ed8) 36%, transparent) !important;
}
.chat-call-overlay.call-mini {
  position: fixed;
  inset: 0;
  display: block;
  padding: 0;
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 86;
}
.chat-call-overlay.call-mini .chat-call-card {
  position: fixed;
  width: min(364px, calc(100vw - 22px));
  height: min(566px, calc(100dvh - 38px));
  max-height: calc(100dvh - 38px);
  pointer-events: auto;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-radius: 26px;
  box-shadow: 0 22px 70px rgba(20, 26, 36, .28), inset 0 1px rgba(255,255,255,.62);
  transition: width .18s ease, height .18s ease, border-radius .18s ease, transform .18s ease, opacity .18s ease;
}
.chat-call-overlay.call-mini .chat-call-card.call-compact {
  width: min(218px, calc(100vw - 28px));
  height: auto;
  min-height: 74px;
  max-height: 118px;
  padding: 10px 12px;
  border-radius: 24px;
  grid-template-rows: auto;
}
.chat-call-overlay.call-mini .chat-call-card.call-compact .voice-capture-status,
.chat-call-overlay.call-mini .chat-call-card.call-compact .chat-call-transcript,
.chat-call-overlay.call-mini .chat-call-card.call-compact .chat-call-composer {
  display: none !important;
}
.chat-call-card.dragging { transition: none !important; }
.chat-call-head[data-drag-chat-call] {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.chat-call-head[data-drag-chat-call]:active { cursor: grabbing; }
.chat-call-head-main {
  min-width: 0;
}
.chat-call-head-main h3 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-call-head-main p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
}
.chat-call-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.chat-call-mini-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 999px;
  color: var(--skin-text, #253044) !important;
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, transparent) !important;
  font-size: 15px;
  font-weight: 1000;
  box-shadow: inset 0 1px rgba(255,255,255,.62);
}
.chat-call-card.call-compact .chat-call-mini-button[data-toggle-chat-call-size]::after { content: "放"; }
.chat-call-card:not(.call-compact) .chat-call-mini-button[data-toggle-chat-call-size]::after { content: "缩"; }
.chat-call-card.call-compact .chat-call-head { align-items: center; }
.chat-call-card.call-compact .chat-call-head-main p { display: none; }
.chat-call-card.call-compact .chat-call-duration { margin-top: 4px; }
.chat-call-duration {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 6px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 86%, transparent);
  color: var(--skin-muted, #6f7380);
  font-size: 12px;
  font-weight: 900;
}
.call-summary-card {
  width: min(280px, 72vw);
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0,0,0,.12)) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, transparent);
  color: var(--skin-text, #253044);
  box-shadow: 0 10px 24px rgba(47, 62, 82, 0.10);
  text-align: left;
}
.call-summary-card strong { font-size: 15px; }
.call-summary-card small { color: var(--skin-muted, #6f7380); font-weight: 800; }
.call-summary-lines {
  max-height: 128px;
  overflow: auto;
  display: grid;
  gap: 5px;
  font-size: 12px;
  line-height: 1.45;
}
.call-summary-lines p { margin: 0; }
.voice-capture-overlay { z-index: 94 !important; }
.incoming-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(7, 10, 16, .38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.incoming-call-card {
  width: min(330px, calc(100vw - 34px));
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px 20px;
  border-radius: 30px;
  color: var(--skin-text, #253044);
  background: color-mix(in srgb, var(--phone-bg, #f7f2e9) 92%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  text-align: center;
}
.incoming-call-card .avatar { width: 76px; height: 76px; }
.incoming-call-card h3 { margin: 4px 0 0; font-size: 22px; }
.incoming-call-card p { margin: 0; color: var(--skin-muted, #6f7380); line-height: 1.45; }
.incoming-call-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 8px;
}
.incoming-call-actions button {
  min-width: 92px;
  min-height: 44px;
  border-radius: 999px;
  color: #fff;
  font-weight: 1000;
}
.incoming-call-actions .decline { background: #e34b55; }
.incoming-call-actions .accept { background: #1fb56a; }


/* Final fix: keep WeChat chat three-dot menu pinned to the far-right action slot.
   The centered title is absolutely positioned, so the dots button must explicitly occupy column 3. */
.wechat-chat-topbar > [data-back-wechat] {
  grid-column: 1 !important;
  justify-self: start !important;
}
.wechat-chat-topbar > .wechat-top-icon.dots,
.wechat-chat-topbar > #chatSettingsTopButton {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  margin-left: 0 !important;
}



/* Stability batch2: memory explainability, custom UI safety, preset control */
.custom-ui-toolbar,.custom-ui-status,.preset-control-grid,.memory-entry-meta,.memory-entry-flags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.custom-ui-status{padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--surface-strong) 88%,transparent);border:1px solid var(--skin-border);color:var(--skin-muted)}.custom-ui-status strong{color:var(--skin-text)}.custom-ui-block pre{max-height:180px;overflow:auto}.custom-ui-warning{color:#b36b00;background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.25);border-radius:14px;padding:8px 10px;margin:8px 0}.memory-entry-meta,.memory-entry-flags{margin-top:6px;font-size:11px;color:var(--skin-muted)}.memory-entry-flags span,.preset-scope-pill,.custom-ui-pill{border:1px solid var(--skin-border);border-radius:999px;padding:4px 8px;background:color-mix(in srgb,var(--surface-strong) 82%,transparent)}.memory-entry.muted,.memory-entry.no-mention{opacity:.62}.memory-entry.permanent{border-color:color-mix(in srgb,var(--skin-accent) 45%,var(--skin-border))}.memory-detail-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}.memory-detail-controls .field{margin:0}.preset-control-grid{align-items:stretch}.preset-scope-panel .check-pill,.custom-ui-app .check-pill{min-height:40px}.preset-binding-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}@media(max-width:520px){.memory-detail-controls,.preset-binding-row{grid-template-columns:1fr}}html[data-ui-mode="dark"] .custom-ui-warning{color:#ffd785;background:rgba(255,193,7,.10)}


/* === Moss fix 2026-06-12: homepage font variables, wallet contrast, custom UI preview, moments dock === */
.home-screen,
.home-screen .status-bar,
.home-screen .app-tile,
.home-screen .app-icon,
.home-screen .app-tile small,
.home-screen .dock-icon small,
.home-screen .apps-page-grid .app-tile small,
.home-screen .home-gallery-title,
.home-screen .home-gallery-widget,
.home-screen .home-cal-widget,
.home-screen .home-cal-widget *,
.home-screen .home-image-frame-hint,
.home-screen .home-frame-2x2-hint,
.home-screen .desktop-page-dot-label,
body.theme-apple .home-screen .app-tile small,
body.theme-apple .home-screen .dock-icon small,
body.theme-apple .home-screen .widget-label,
html[data-ui-mode="dark"] body.theme-apple .home-screen .app-tile small,
html[data-ui-mode="dark"] body.theme-apple .home-screen .dock-icon small,
html[data-ui-mode="dark"] body.theme-apple .home-screen .widget-label {
  color: var(--app-font-color) !important;
}
.home-screen .app-tile small,
.home-screen .dock-icon small,
.home-screen .apps-page-grid .app-tile small {
  text-shadow: 0 1px 8px color-mix(in srgb, var(--app-font-color) 24%, transparent) !important;
}
.home-screen .home-clock-widget,
.home-screen .home-clock-widget .clock-greeting,
.home-screen .home-clock-widget .clock-date,
.home-screen .home-clock-widget .clock-time,
.home-screen .home-status-card,
.home-screen .notes-widget-tile,
.home-screen .auto-status-panel {
  color: var(--widget-text-color) !important;
}
.home-screen .home-clock-widget .clock-greeting,
.home-screen .home-clock-widget .clock-date,
.home-screen .home-status-card small,
.home-screen .auto-status-panel span,
.home-screen .notes-widget-preview p {
  color: color-mix(in srgb, var(--widget-text-color) 72%, transparent) !important;
}
.wallet-hero-card,
.wallet-hero-card * {
  color: #f8fafc !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}
.wallet-hero-card strong,
.wallet-hero-card .wallet-balance {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(255, 255, 255, 0.24), 0 1px 0 rgba(0, 0, 0, 0.22) !important;
  opacity: 1 !important;
}
.wallet-hero-card > span,
.wallet-hero-card .wallet-hero-grid span {
  color: rgba(255, 255, 255, 0.78) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
}
.custom-ui-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  background: rgba(8, 10, 14, 0.54);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.custom-ui-preview-sheet {
  width: min(440px, calc(100vw - 28px));
  max-height: min(78vh, 720px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb, var(--surface-strong) 94%, var(--phone-bg));
  color: var(--skin-text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}
.custom-ui-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.custom-ui-preview-head h3 {
  margin: 0;
  font-size: 18px;
}
.custom-ui-preview-head button,
.custom-ui-preview-actions button {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  border: 1px solid var(--skin-border);
  font-weight: 900;
}
.custom-ui-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.custom-ui-preview-actions button:first-child {
  background: var(--skin-accent);
  color: #fff;
}
.custom-ui-preview-demo {
  display: grid;
  gap: 12px;
}
.custom-ui-preview-demo .chat-layout,
.custom-ui-preview-demo .mind-panel,
.custom-ui-preview-demo .panel,
.custom-ui-preview-demo .wechat-shell {
  min-height: auto;
  height: auto;
}
.custom-ui-preview-demo .messages {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--phone-bg) 78%, transparent);
}
.custom-ui-preview-demo .bubble {
  width: fit-content;
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 16px;
  color: var(--skin-text);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
}
.custom-ui-preview-demo .bubble.user {
  justify-self: end;
  background: color-mix(in srgb, var(--skin-accent) 72%, var(--surface-strong));
  color: #fff;
}
.custom-ui-preview-demo .moment-comments {
  display: grid;
}
.moment-comment-dock.is-closing {
  opacity: 0;
  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity .16s ease, transform .16s ease;
}


/* === Moss stability pass 2026-06-12: unified keyboard, cool theme variables, readable wallet/home text === */
:root {
  --keyboard-inset: 0px;
  --visible-height: 100dvh;
  --home-font-color: var(--app-font-color, var(--skin-text));
  --dock-text: var(--home-font-color);
  --card-text: var(--skin-text);
  --wallet-number-color: #ffffff;
}

:root[data-ui-mode="light"] {
  color-scheme: light;
  --page-bg: #f6f8fb;
  --phone-bg: #f4f7fb;
  --surface: rgba(248, 250, 253, 0.86);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --surface-soft: rgba(235, 240, 247, 0.92);
  --surface-glass: rgba(248, 250, 253, 0.78);
  --skin-border: rgba(96, 113, 138, 0.14);
  --skin-accent: #82a8d8;
  --skin-accent-2: #a9c3e0;
  --skin-title: #222b37;
  --skin-text: #2f3a49;
  --skin-muted: rgba(70, 82, 98, 0.62);
  --skin-shadow-soft: 0 10px 26px rgba(74, 87, 110, 0.08), inset 0 1px rgba(255,255,255,.72);
  --skin-shadow: 0 16px 42px rgba(74, 87, 110, 0.12), inset 0 1px rgba(255,255,255,.72);
  --skin-home:
    radial-gradient(circle at 18% 10%, rgba(205, 221, 241, 0.70), transparent 34%),
    radial-gradient(circle at 86% 16%, rgba(231, 235, 240, 0.92), transparent 36%),
    radial-gradient(circle at 80% 86%, rgba(221, 230, 241, 0.76), transparent 38%),
    linear-gradient(180deg, #fbfcff 0%, #f4f6fa 46%, #eef2f7 100%);
}

body.theme-apple,
body.theme-apple .phone,
body.theme-apple .screen,
body.theme-apple .home-screen,
body.theme-apple .app-screen,
body.theme-apple .app-body,
body.theme-apple .chat-layout,
body.theme-apple .date-app,
body.theme-apple .date-picker-app,
body.theme-apple .date-messages,
body.theme-apple .theater-app,
body.theme-apple .wechat-shell {
  background-color: var(--phone-bg) !important;
  color: var(--skin-text) !important;
}

body.theme-apple .home-screen {
  background: var(--wallpaper-image, var(--skin-home)) center / cover no-repeat !important;
}

body.theme-apple .app-body.date-mode,
body.theme-apple .app-body.date-mode .date-app,
body.theme-apple .app-body.date-mode .date-picker-app,
body.theme-apple .app-body.date-mode .date-messages,
body.theme-apple .app-body.date-mode .theater-app,
body.theme-apple .app-body.date-mode .theater-chat-messages {
  background: var(--phone-bg) !important;
  color: var(--skin-text) !important;
}

html[data-ui-mode="dark"] body.theme-apple .app-body.date-mode,
html[data-ui-mode="dark"] body.theme-apple .app-body.date-mode .date-app,
html[data-ui-mode="dark"] body.theme-apple .app-body.date-mode .date-picker-app,
html[data-ui-mode="dark"] body.theme-apple .app-body.date-mode .date-messages,
html[data-ui-mode="dark"] body.theme-apple .app-body.date-mode .theater-app,
html[data-ui-mode="dark"] body.theme-apple .app-body.date-mode .theater-chat-messages {
  background: var(--phone-bg) !important;
  color: var(--skin-text) !important;
}

.home-screen,
.home-screen :where(.status-bar, .clock-greeting, .clock-date, .app-tile, .app-icon, .app-tile small, .dock-icon small, .apps-page-grid .app-tile small, .home-gallery-title, .home-cal-month, .home-cal-year, .home-cal-wk, .home-cal-num, .home-image-frame-hint, .home-gallery-slot-hint, .home-frame-2x2-hint, .desktop-page-dot-label),
body.theme-apple .home-screen :where(.status-bar, .clock-greeting, .clock-date, .app-tile, .app-icon, .app-tile small, .dock-icon small, .apps-page-grid .app-tile small, .home-gallery-title, .home-cal-month, .home-cal-year, .home-cal-wk, .home-cal-num, .home-image-frame-hint, .home-gallery-slot-hint, .home-frame-2x2-hint, .desktop-page-dot-label),
html[data-ui-mode="dark"] body.theme-apple .home-screen :where(.status-bar, .clock-greeting, .clock-date, .app-tile, .app-icon, .app-tile small, .dock-icon small, .apps-page-grid .app-tile small, .home-gallery-title, .home-cal-month, .home-cal-year, .home-cal-wk, .home-cal-num, .home-image-frame-hint, .home-gallery-slot-hint, .home-frame-2x2-hint, .desktop-page-dot-label) {
  color: var(--home-font-color) !important;
  -webkit-text-fill-color: currentColor !important;
}

.home-screen :where(.clock-time) {
  color: color-mix(in srgb, var(--home-font-color) 86%, transparent) !important;
  -webkit-text-fill-color: currentColor !important;
}

.home-screen .dock-icon small,
.home-screen .app-tile small {
  color: var(--dock-text) !important;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--home-font-color) 24%, transparent) !important;
}

.wallet-hero-card .wallet-balance,
.wallet-hero-card strong.wallet-balance,
.wallet-hero-card [class*="balance"] {
  color: var(--wallet-number-color) !important;
  -webkit-text-fill-color: var(--wallet-number-color) !important;
  -webkit-text-stroke: 0 transparent !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 2px 18px rgba(255,255,255,.32), 0 1px 0 rgba(0,0,0,.22) !important;
}

body.keyboard-open {
  --browser-bottom-reserve: 0px !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.keyboard-open .device-shell,
body.keyboard-open .phone,
body.keyboard-open .screen,
body.keyboard-open .app-screen.active {
  max-height: var(--visible-height) !important;
  overflow: hidden !important;
}

body.keyboard-open .app-screen.active {
  padding-bottom: 0 !important;
}

body.keyboard-open .app-body:has(.chat-layout),
body.keyboard-open .app-body.date-mode {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.keyboard-open .chat-layout {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.keyboard-open .chat-layout .messages,
body.keyboard-open .app-body.date-mode .date-messages,
body.keyboard-open .app-body.date-mode .theater-chat-messages {
  padding-bottom: calc(104px + var(--safe-bottom)) !important;
  scroll-padding-bottom: calc(104px + var(--safe-bottom)) !important;
}

body.keyboard-open .chat-layout .composer,
body.keyboard-open .app-body.date-mode .date-composer {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(0px, var(--keyboard-inset)) !important;
  width: min(430px, calc(100vw - 24px)) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 99980 !important;
  border-radius: 18px !important;
  box-shadow: 0 -8px 26px rgba(35, 48, 68, 0.14) !important;
}

body.keyboard-open .moment-comment-dock,
body.keyboard-open .moment-comment-form:not([hidden]) {
  bottom: max(0px, var(--keyboard-inset)) !important;
  z-index: 99990 !important;
}

body.keyboard-open .chat-extra-panel {
  bottom: calc(72px + var(--keyboard-inset)) !important;
}

@supports (height: 100svh) {
  body.keyboard-open .device-shell,
  body.keyboard-open .phone,
  body.keyboard-open .screen,
  body.keyboard-open .app-screen.active {
    max-height: min(var(--visible-height), 100svh) !important;
  }
}



.auto-backup-row {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--skin-border, rgba(0,0,0,.08));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 82%, transparent);
}

.auto-backup-row strong {
  font-size: 13px;
  color: var(--skin-text, #2c241d);
}

.auto-backup-row small {
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
}

.button-row.compact {
  gap: 6px;
}

.button-row.compact button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

/* unread-route v1: generated content badges and route prompt */
.avatar-unread-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.avatar-unread-wrap > .avatar {
  flex: 0 0 auto;
}
.unread-dot-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid var(--surface-strong, #fff);
  background: #ff384f;
  color: #fff;
  font-size: 10px;
  line-height: 12px;
  font-weight: 900;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 3px 9px rgba(180, 0, 32, 0.26);
  z-index: 5;
  pointer-events: none;
}
.app-tile,
.dock-icon,
.app-icon {
  position: relative;
}
.app-unread-dot {
  position: absolute;
  top: 5px;
  right: 14px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid var(--phone-bg, #f6f7fb);
  background: #ff384f;
  color: #fff;
  font-size: 10px;
  line-height: 13px;
  font-weight: 900;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(180, 0, 32, 0.24);
  z-index: 8;
  pointer-events: none;
}
.dock-icon .app-unread-dot {
  top: 4px;
  right: 8px;
}
.generation-route-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 18px;
  right: 18px;
  z-index: 1000000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--skin-border, #d7dee8) 78%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  color: var(--skin-text, #2c3644);
  box-shadow: 0 18px 44px rgba(31, 41, 55, 0.18);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  cursor: pointer;
  animation: generated-route-toast-in 0.2s ease both;
}
.generation-route-toast .avatar-unread-wrap,
.generation-route-toast .avatar {
  width: 44px;
  height: 44px;
}
.generation-route-toast span {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}
.generation-route-toast strong,
.generation-route-toast em,
.generation-route-toast small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generation-route-toast strong {
  font-size: 14px;
  font-weight: 900;
}
.generation-route-toast small {
  color: var(--muted-text, #7b8797);
  font-size: 12px;
  font-weight: 800;
}
.generation-route-toast em {
  max-width: 100%;
  color: var(--skin-text, #2c3644);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  opacity: 0.9;
}
.generation-route-toast::after {
  content: "去列表";
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skin-accent, #8fb0dc) 24%, transparent);
  color: var(--skin-text, #2c3644);
  font-size: 12px;
  font-weight: 900;
}
@keyframes generated-route-toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-color-scheme: dark) {
  .generation-route-toast {
    background: rgba(28, 34, 43, 0.88);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  }
  .unread-dot-badge,
  .app-unread-dot {
    border-color: rgba(28, 34, 43, 0.94);
  }
}

/* unread-time-date-sync-fix: date app synced chat progress notice */
.date-sync-brief {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(124, 146, 166, 0.18);
  color: var(--ink, #202733);
  box-shadow: 0 8px 20px rgba(42, 54, 78, 0.06);
}
.date-sync-brief strong {
  font-size: 12px;
  font-weight: 900;
}
.date-sync-brief p {
  margin: 0;
  color: rgba(40, 52, 68, 0.62);
  font-size: 11px;
  line-height: 1.45;
}

/* 微信见面卡片：角色主动邀约 → 约会 App → 赴约完成状态回写 */
.chat-meeting-card {
  width: min(258px, 74vw);
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--skin-border, rgba(0, 0, 0, 0.08));
  border-left: 4px solid #8f7bb8;
  border-radius: 14px;
  color: var(--skin-text, #2c241d);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 92%, #efe7ff 8%);
  text-align: left;
  box-shadow: 0 10px 24px rgba(20, 24, 30, 0.12);
}

.chat-meeting-card span {
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 900;
}

.chat-meeting-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.chat-meeting-card small {
  color: var(--skin-muted, #7b6b5a);
  line-height: 1.45;
}

.chat-meeting-card em {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: #5f4c86;
  background: color-mix(in srgb, #efe7ff 78%, var(--surface-strong, #fffdf7) 22%);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.chat-meeting-card.completed {
  border-left-color: #6f8f82;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 92%, #e6f0e4 8%);
}

.chat-meeting-card.completed em {
  color: #3f6c50;
  background: color-mix(in srgb, #e2f0df 78%, var(--surface-strong, #fffdf7) 22%);
}

.meeting-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.meeting-card-actions button {
  flex: 1 1 92px;
  min-width: 0;
  border: none;
  border-radius: 999px;
  padding: 8px 10px;
  color: #fff;
  background: linear-gradient(145deg, #75619a, #927bbd);
  font-size: 12px;
  font-weight: 900;
}

.meeting-card-actions button[data-complete-meeting-card] {
  background: linear-gradient(145deg, #45665c, #6f8f82);
}

.meeting-card-actions button:disabled {
  color: var(--skin-muted, #7b6b5a);
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 72%, #dbe8df 28%);
  opacity: 0.72;
}

/* Couple Space v2: picker, larger room, draggable memory wall */
.couple-picker {
  gap: 14px;
  padding-top: 14px;
}
.couple-picker-hero {
  display: grid;
  gap: 8px;
  padding: 22px 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 0%, rgba(255,255,255,.74), transparent 34%),
    linear-gradient(145deg, rgba(255,248,246,.92), rgba(226,239,231,.82));
  box-shadow: 0 18px 42px rgba(74,62,52,.11);
}
.couple-picker-hero small,
.couple-title small:first-child {
  color: #8d6378;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}
.couple-picker-hero h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -.04em;
}
.couple-picker-hero p {
  margin: 0;
  color: var(--skin-muted, #7b6b5a);
  line-height: 1.55;
  font-size: 13px;
  font-weight: 800;
}
.couple-picker-grid {
  display: grid;
  gap: 10px;
}
.couple-picker-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 30px rgba(74,62,52,.08);
  text-align: left;
  color: #342d2b;
}
.couple-picker-card .avatar {
  width: 54px;
  height: 54px;
  box-shadow: 0 8px 18px rgba(74,62,52,.12);
}
.couple-picker-card span {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.couple-picker-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}
.couple-picker-card small {
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  font-weight: 800;
}
.couple-picker-card i {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(47,56,53,.92);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}
.couple-back-list {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #4d3f46;
  background: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(74,62,52,.08);
}
.couple-meet-card {
  border-radius: 32px;
}

/* —— 情侣空间首页：真实小屋场景 —— */
.couple-room-cover { display: grid; gap: 8px; justify-items: start; padding: 4px 4px 12px; }
.couple-room-cover .couple-avatar-stack { transform: scale(1.05); transform-origin: left; }
.couple-room-title { display: grid; gap: 2px; }
.couple-room-title small { font-size: 12px; letter-spacing: .2em; color: #c4607a; font-weight: 800; }
.couple-room-title strong { font-family: "Songti SC","STSong",serif; font-size: 24px; font-weight: 600; color: #4a3a32; }
html[data-ui-mode="dark"] .couple-room-title strong { color: #f0e7dc; }
.couple-room-ambient { display: flex; flex-wrap: wrap; gap: 7px; }
.couple-room-ambient span { font-size: 11.5px; color: #8a7b70; border: 1px solid rgba(138,123,112,.25); border-radius: 999px; padding: 4px 10px; background: rgba(255,255,255,.04); }

.couple-room-stage { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 44px rgba(0,0,0,.4); background: #0c1018; margin-bottom: 14px; }
.couple-room-stage svg { display: block; width: 100%; height: auto; }
.couple-room-stage[data-stuff="empty"] .accrued { display: none; }
.couple-room-stage[data-time="night"] .crm-sky { opacity: .58; }
.couple-room-stage[data-time="night"] .crm-lamp { opacity: 1; }
.couple-room-stage[data-time="day"] .crm-lamp { opacity: .28; }
.couple-room-stage[data-time="day"] .crm-sky { opacity: 1; }
.crm-hot { position: absolute; border: 0; background: transparent; padding: 0; cursor: pointer; }
.crm-ring { position: absolute; inset: 0; border-radius: 14px; transition: box-shadow .2s; }
.crm-hot:active .crm-ring { box-shadow: 0 0 0 1.5px rgba(255,214,166,.6), 0 0 22px rgba(255,183,132,.4); }
.crm-tip { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-size: 10.5px; font-weight: 800; white-space: nowrap; color: #1a1206; background: rgba(255,214,166,.92); padding: 3px 8px; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,.35); display: none; }
.couple-room-stage.crm-labels .crm-tip { display: block; }
.crm-hot::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,214,166,.85); box-shadow: 0 0 8px rgba(255,183,132,.7); }
.couple-room-stage.crm-labels .crm-hot::after { opacity: 0; }
.crm-labels-toggle { position: absolute; right: 10px; bottom: 10px; font-size: 11px; font-weight: 800; color: #ffe3c4; background: rgba(20,16,28,.6); border: 1px solid rgba(255,214,166,.3); border-radius: 999px; padding: 6px 12px; backdrop-filter: blur(6px); }
.crm-empty-hint { position: absolute; left: 14px; right: 14px; bottom: 44px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.65); font-family: "Songti SC","STSong",serif; text-align: center; }
.couple-chat-card.anniversary { background: linear-gradient(135deg,#fff0d9,#ffe1c0); }
.couple-chat-card.anniversary .couple-chat-card-head { color: #d08a3a; }
.couple-room-item { border: 0; cursor: pointer; }
.couple-room-item:active { transform: scale(.92); }
.couple-room-hint { margin: 0 4px 12px; font-size: 12.5px; color: #8a7b70; line-height: 1.6; }
.couple-sheet-obj { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; margin-bottom: 12px; background: linear-gradient(150deg, rgba(255,183,132,.28), rgba(231,121,154,.2)); }

/* 留言墙面板 */
.couple-wall { columns: 2; column-gap: 12px; margin-top: 8px; }
.couple-wall-note { break-inside: avoid; margin-bottom: 12px; border-radius: 14px; padding: 14px; font-size: 13px; line-height: 1.7; color: #3a2f28; box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.couple-wall-note small { display: block; margin-top: 8px; font-size: 10.5px; color: rgba(0,0,0,.45); font-weight: 700; }
.couple-wall-note.wall-0 { background: linear-gradient(160deg,#ffe7b8,#ffd98c); transform: rotate(-1.2deg); }
.couple-wall-note.wall-1 { background: linear-gradient(160deg,#ffd4dd,#ffbccb); transform: rotate(1.1deg); }
.couple-wall-note.wall-2 { background: linear-gradient(160deg,#cfeede,#a9dcc6); transform: rotate(.7deg); }
.couple-wall-note.wall-3 { background: linear-gradient(160deg,#cfe0ff,#aec8ff); transform: rotate(-.9deg); }

/* —— 情侣空间「双方同意才能开启」邀请界面 —— */
.couple-consent { display: grid; gap: 14px; }
.couple-consent-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 26px 20px 30px;
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 40px rgba(74,62,52,.12);
}
.couple-avatar-stack.big { transform: scale(1.18); margin-bottom: 8px; }
.couple-consent-card h2 { font-size: 19px; font-weight: 950; color: #4a3e34; margin: 4px 0 0; }
.couple-consent-sub { font-size: 13px; color: #8a7b70; font-weight: 800; margin: 0; }
.couple-consent-desc { font-size: 13px; line-height: 1.7; color: #6a5c52; margin: 2px 6px; }
.couple-consent-desc strong { color: #c4607a; }
.couple-consent-send {
  margin-top: 8px;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 950;
  color: #fff;
  background: linear-gradient(135deg,#ff8aa6,#d76b8c);
  box-shadow: 0 14px 28px rgba(215,107,140,.32);
}
.couple-consent-send:disabled { opacity: .7; }
.couple-consent-state { display: grid; justify-items: center; gap: 8px; width: 100%; }
.couple-consent-wait { font-size: 14px; font-weight: 850; color: #6a5c52; margin: 6px 0 0; }
.couple-consent-state small { font-size: 12px; color: #9a8b80; line-height: 1.6; }
.couple-consent-bubble {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(135deg,#fff1f4,#ffe3ea);
  color: #6a4350;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(215,107,140,.16);
}
.couple-consent-mood { font-style: italic; }
.couple-consent-tip { font-size: 12.5px; color: #8a7b70; line-height: 1.6; margin: 4px 8px 0; }
.couple-dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.couple-dots i { width: 5px; height: 5px; border-radius: 50%; background: #d76b8c; opacity: .35; animation: coupleDot 1.1s infinite ease-in-out; }
.couple-dots i:nth-child(2) { animation-delay: .18s; }
.couple-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes coupleDot { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* 情侣空间邀请/回应 在聊天里的卡片 */
.couple-chat-card {
  display: grid;
  gap: 4px;
  text-align: left;
  max-width: 78%;
  padding: 12px 15px;
  border-radius: 18px;
  background: linear-gradient(135deg,#fff1f4,#ffe6ec);
  color: #6a4350;
  box-shadow: 0 8px 18px rgba(215,107,140,.16);
}
.couple-chat-card.user { justify-self: end; }
.couple-chat-card .couple-chat-card-head { font-size: 11.5px; font-weight: 900; color: #c4607a; letter-spacing: .02em; }
.couple-chat-card strong { font-size: 14px; font-weight: 800; line-height: 1.55; }
.couple-chat-card small { font-size: 11px; color: #b07f8e; }
.couple-chat-card.decline { background: linear-gradient(135deg,#f3f0ee,#e9e4e0); color: #6a5c52; box-shadow: 0 8px 18px rgba(74,62,52,.1); }
.couple-chat-card.decline .couple-chat-card-head { color: #8a7b70; }

.couple-main-previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.couple-preview-card {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  display: grid;
  align-content: end;
  gap: 5px;
  padding: 14px;
  border-radius: 26px;
  text-align: left;
  color: #362d2f;
  background: rgba(255,255,255,.74);
  box-shadow: 0 14px 30px rgba(74,62,52,.09);
}
/* 纪念册入口卡：横跨一行，颜色更暖 */
.couple-preview-card.chronicle {
  min-height: auto;
  margin-bottom: 10px;
  background: linear-gradient(150deg, rgba(255,233,221,.92), rgba(255,214,224,.9));
  color: #5a3f44;
}
.couple-preview-card.chronicle small { color: #c4607a; font-weight: 800; }
/* 纪念册时间线 */
.couple-chron-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; font-size: 12px; color: #8a7b70; font-weight: 700; }
.couple-chron-tools button { border: 1px solid rgba(196,96,122,.3); color: #c4607a; background: rgba(196,96,122,.07); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 800; }
.couple-chron-tools button:disabled { opacity: .65; }
.couple-chron-chapter { font-family: "Songti SC","STSong",serif; font-size: 13px; letter-spacing: .08em; color: #9a7d68; margin: 16px 4px 12px; }
.couple-chron-chapter.prologue { color: #a98; opacity: .85; }
.couple-chron-line { position: relative; margin-left: 6px; padding-left: 22px; }
.couple-chron-line::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #e7a37a, rgba(231,163,122,.2)); }
.couple-chron-item { position: relative; margin-bottom: 14px; display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 0; cursor: pointer; }
.couple-chron-item:active .couple-chron-card { transform: scale(.99); }
.couple-chron-card { transition: transform .15s ease; }

/* 纪念册某一页详情弹层 */
.couple-sheet-back { position: absolute; inset: 0; z-index: 70; display: flex; align-items: flex-end; background: rgba(8,11,22,.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity .24s ease; }
.couple-sheet-back.show { opacity: 1; }
.couple-sheet { width: 100%; border-radius: 26px 26px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); background: linear-gradient(160deg, #fff3ec, #ffe7ec); box-shadow: 0 -12px 40px rgba(74,62,52,.25); transform: translateY(24px); transition: transform .26s ease; }
.couple-sheet-back.show .couple-sheet { transform: none; }
.couple-sheet-kind { display: inline-block; font-size: 11px; font-weight: 900; color: #c4607a; letter-spacing: .06em; background: rgba(196,96,122,.1); padding: 4px 10px; border-radius: 999px; }
.couple-sheet h3 { margin: 10px 0 4px; font-size: 19px; font-weight: 850; color: #4a3a32; }
.couple-sheet-when { margin: 0; font-size: 12px; font-weight: 800; color: #c4607a; }
.couple-sheet-body { margin: 12px 0 0; font-size: 14.5px; line-height: 1.8; color: #5a4a40; font-family: "Songti SC","STSong",serif; }
.couple-sheet-meta { margin: 12px 0 0; font-size: 12px; color: #a98; }
.couple-sheet-done { margin-top: 18px; width: 100%; min-height: 46px; border-radius: 999px; font-size: 15px; font-weight: 850; color: #fff; background: linear-gradient(135deg,#ff8aa6,#d76b8c); box-shadow: 0 12px 26px rgba(215,107,140,.3); }
html[data-ui-mode="dark"] .couple-sheet { background: linear-gradient(160deg, #241c2c, #1b1626); }
html[data-ui-mode="dark"] .couple-sheet h3 { color: #f0e7dc; }
html[data-ui-mode="dark"] .couple-sheet-body { color: #cfc6ba; }
.couple-chron-item::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #e08a5c; box-shadow: 0 0 8px rgba(224,138,92,.4); }
.couple-chron-item.milestone::before { background: #e7799a; border-color: #e7799a; box-shadow: 0 0 10px rgba(231,121,154,.5); }
.couple-chron-item time { font-size: 11px; color: #c4607a; font-weight: 800; letter-spacing: .04em; }
.couple-chron-card { margin-top: 5px; border-radius: 16px; padding: 12px 14px; background: rgba(255,255,255,.72); box-shadow: 0 8px 18px rgba(74,62,52,.07); }
.couple-chron-card h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 850; color: #4a3a32; }
.couple-chron-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #6a5c52; }
.couple-chron-card small { display: block; margin-top: 7px; font-size: 11px; color: #b07f6a; font-weight: 700; }
html[data-ui-mode="dark"] .couple-chron-card { background: rgba(28,33,52,.7); }
html[data-ui-mode="dark"] .couple-chron-card h4 { color: #f0e7dc; }
html[data-ui-mode="dark"] .couple-chron-card p { color: #b9c0d2; }
.couple-preview-card::before {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);
  font-size: 24px;
}
.couple-preview-card.film::before { content: "🎞️"; }
.couple-preview-card.diary::before { content: "📔"; }
.couple-preview-card small {
  color: #8d6378;
  font-size: 11px;
  font-weight: 950;
}
.couple-preview-card strong {
  font-size: 17px;
}
.couple-preview-card p {
  margin: 0;
  color: var(--skin-muted, #7b6b5a);
  font-size: 12px;
  line-height: 1.4;
}
.couple-preview-card.film {
  background:
    radial-gradient(circle at 88% 10%, rgba(238,219,228,.86), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(245,238,228,.82));
}
.couple-preview-card.diary {
  background:
    radial-gradient(circle at 88% 10%, rgba(216,234,223,.86), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(240,234,244,.78));
}
.couple-detail-panel {
  scroll-margin-top: 12px;
}
.couple-room {
  min-height: 374px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,251,246,.96) 0 58%, rgba(226,216,199,.92) 58% 100%),
    radial-gradient(circle at 18% 15%, rgba(248,222,231,.62), transparent 28%);
  box-shadow: 0 22px 48px rgba(74,62,52,.14);
  touch-action: pan-y;
}
.couple-room-wall,
.couple-room-floor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.couple-room-wall {
  bottom: 42%;
  background:
    repeating-linear-gradient(90deg, rgba(141,99,120,.055) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.72), transparent 25%);
}
.couple-room-floor {
  top: 58%;
  background:
    linear-gradient(135deg, rgba(169,139,111,.16) 25%, transparent 25%) 0 0/34px 34px,
    linear-gradient(225deg, rgba(169,139,111,.13) 25%, transparent 25%) 0 0/34px 34px,
    linear-gradient(180deg, rgba(222,206,185,.88), rgba(204,186,164,.9));
}
.couple-room-window {
  top: 26px;
  right: 22px;
  width: 98px;
  height: 94px;
  border-radius: 28px;
  background: linear-gradient(145deg, #b8dcea, #fff0d6 72%);
  box-shadow: inset 0 0 0 9px rgba(255,255,255,.64), 0 12px 24px rgba(74,62,52,.08);
}
.couple-room-window i,
.couple-room-window b {
  position: absolute;
  background: rgba(255,255,255,.72);
  content: "";
}
.couple-room-window i { left: 50%; top: 10px; bottom: 10px; width: 4px; transform: translateX(-50%); }
.couple-room-window b { left: 10px; right: 10px; top: 50%; height: 4px; transform: translateY(-50%); }
.couple-room-shelf {
  position: absolute;
  right: 28px;
  top: 136px;
  width: 112px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 -8px 0 rgba(155,122,94,.28), 0 10px 20px rgba(74,62,52,.08);
}
.couple-room-shelf span {
  position: absolute;
  bottom: 12px;
  width: 18px;
  height: 28px;
  border-radius: 7px 7px 4px 4px;
  background: rgba(141,99,120,.36);
}
.couple-room-shelf span:nth-child(1) { left: 20px; height: 31px; background: rgba(111,147,132,.38); }
.couple-room-shelf span:nth-child(2) { left: 46px; }
.couple-room-shelf span:nth-child(3) { left: 72px; height: 24px; background: rgba(212,190,165,.62); }
.couple-room-rug {
  position: absolute;
  left: 92px;
  right: 76px;
  bottom: 24px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(238,219,228,.72), rgba(238,219,228,.24) 60%, transparent 68%);
}
.couple-room-bed {
  left: 18px;
  bottom: 48px;
  width: 176px;
  height: 88px;
  border-radius: 34px 34px 20px 20px;
  background: linear-gradient(145deg, #d6bdc8, #fbefe9);
}
.couple-room-bed::before { display: none; }
.couple-room-bed i,
.couple-room-bed b {
  position: absolute;
  content: "";
  border-radius: 18px;
  background: rgba(255,255,255,.84);
}
.couple-room-bed i { left: 18px; top: 16px; width: 54px; height: 34px; }
.couple-room-bed b { right: 18px; top: 18px; width: 44px; height: 28px; background: rgba(247,232,238,.92); }
.couple-room-table {
  right: 24px;
  bottom: 70px;
  width: 116px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(145deg, #ad9077, #dbc4aa);
}
.couple-room-table::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -20px;
  height: 24px;
  border-radius: 0 0 12px 12px;
  background: rgba(123,93,68,.32);
}
.couple-room-table i {
  position: absolute;
  right: 18px;
  top: -22px;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(145deg, #fff4dc, #dfc6a8);
  box-shadow: 0 0 28px rgba(255,226,158,.46);
}
.couple-room-lamp {
  position: absolute;
  right: 52px;
  bottom: 134px;
  width: 4px;
  height: 46px;
  border-radius: 999px;
  background: rgba(117,91,72,.5);
}
.couple-room-lamp::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -28px;
  width: 44px;
  height: 32px;
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(145deg, #fff2c8, #d8b58e);
  box-shadow: 0 0 34px rgba(255,224,151,.5);
}
.couple-room-plant {
  position: absolute;
  left: 26px;
  bottom: 154px;
  width: 38px;
  height: 42px;
  border-radius: 8px 8px 16px 16px;
  background: linear-gradient(145deg, #cfae94, #96765d);
}
.couple-room-plant::before {
  content: "🌿";
  position: absolute;
  left: -8px;
  top: -31px;
  font-size: 34px;
}
.couple-room-wallnote {
  left: 22px;
  top: 24px;
  max-width: 154px;
  z-index: 4;
  transform: rotate(-2deg);
}
.couple-room-photo-wall {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.couple-room-photo {
  position: absolute;
  width: 72px;
  min-height: 58px;
  transform: translate(-50%, -50%) rotate(-2deg);
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 7px 6px 6px;
  border-radius: 10px;
  background: #fffaf5;
  color: #5a4752;
  box-shadow: 0 10px 22px rgba(74,62,52,.16);
  font-size: 12px;
  font-weight: 950;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  z-index: 8;
}
.couple-room-photo::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #b57989;
  box-shadow: 0 2px 4px rgba(74,62,52,.15);
}
.couple-room-photo span { font-size: 22px; line-height: 1; }
.couple-room-photo strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.couple-room-photo.dragging {
  z-index: 20;
  cursor: grabbing;
  transform: translate(-50%, -50%) rotate(1deg) scale(1.04);
}
.couple-room-item-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.couple-room-item {
  min-width: 50px;
  min-height: 48px;
  gap: 1px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.couple-room-item span { font-size: 24px; line-height: 1; }
.couple-room-item small {
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #685865;
  font-size: 9px;
  font-weight: 900;
}
.couple-room-item.item-0 { left: 82px; bottom: 150px; }
.couple-room-item.item-1 { right: 88px; bottom: 136px; }
.couple-room-item.item-2 { left: 205px; bottom: 44px; }
.couple-room-item.item-3 { right: 145px; top: 204px; }
.couple-room-item.item-4 { left: 148px; top: 150px; }
.couple-room-item.item-5 { right: 38px; bottom: 38px; }
.couple-room-item.item-6 { left: 32px; bottom: 28px; }
.couple-room-item.item-7 { right: 28px; top: 204px; }
@media (max-width: 390px) {
  .couple-main-previews { grid-template-columns: 1fr; }
  .couple-room { min-height: 350px; }
  .couple-room-bed { width: 156px; }
  .couple-room-table { width: 104px; }
  .couple-room-photo { width: 64px; }
  .couple-picker-card { grid-template-columns: auto 1fr; }
  .couple-picker-card i { grid-column: 2; justify-self: start; }
}


/* MiniMax role voice output */
.assistant-tts-control {
  display: flex;
  gap: 6px;
  margin: 5px 0 0 4px;
  flex-wrap: wrap;
}
.assistant-tts-control button {
  border: 1px solid rgba(143, 100, 45, 0.16);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-soft);
  box-shadow: 0 4px 14px rgba(70, 52, 28, 0.08);
}
.voice-role-box,
.voice-settings-panel {
  border: 1px solid rgba(143, 100, 45, 0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,250,242,0.62));
  border-radius: 20px;
  padding: 12px;
  margin: 10px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.voice-role-box h2,
.voice-settings-panel h2 {
  margin-top: 0;
}
.voice-number-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.voice-id-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: -4px 0 10px;
}
.voice-id-grid button {
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(143, 100, 45, 0.1);
  color: var(--text-main);
  font-size: 11px;
}
@media (max-width: 430px) {
  .voice-number-grid { grid-template-columns: 1fr; }
}

/* MiniMax voice bar v2 */
.assistant-voice-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0 4px;
}
.assistant-voice-strip {
  min-width: 118px;
  max-width: 210px;
  min-height: 36px;
  border: 0;
  border-radius: 999px 999px 999px 10px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(250,243,232,0.9));
  color: #4e3923;
  box-shadow: 0 8px 20px rgba(76, 56, 28, 0.13), inset 0 1px 0 rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 800;
}
.assistant-voice-strip.pending {
  opacity: .86;
  border: 1px dashed rgba(143, 100, 45, 0.25);
}
.assistant-voice-strip.generating {
  opacity: .72;
}
.assistant-voice-strip.ready:active {
  transform: scale(.98);
}
.voice-play-dot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(143, 100, 45, 0.13);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 10px;
}
.voice-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 38px;
}
.voice-wave i {
  display: block;
  width: 3px;
  border-radius: 99px;
  background: rgba(126, 87, 43, 0.5);
}
.voice-wave i:nth-child(1) { height: 8px; }
.voice-wave i:nth-child(2) { height: 16px; }
.voice-wave i:nth-child(3) { height: 11px; }
.voice-wave i:nth-child(4) { height: 19px; }
.assistant-voice-strip em {
  font-style: normal;
  white-space: nowrap;
  color: rgba(70, 50, 28, 0.78);
}
.assistant-voice-redo {
  border: 0;
  background: rgba(255,255,255,0.62);
  color: var(--text-soft);
  border-radius: 999px;
  min-height: 28px;
  padding: 0 9px;
  font-size: 11px;
  box-shadow: 0 4px 12px rgba(70, 52, 28, 0.07);
}
.voice-advanced {
  margin: 8px 0;
  border-radius: 16px;
  background: rgba(255,255,255,0.42);
  padding: 8px 10px;
}
.voice-advanced summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--text-main);
}
.compact-voice-settings-panel .field,
.compact-voice-box .field {
  margin-bottom: 9px;
}


/* === 2026.06.13 date writing UI === */
.date-writing-button{min-height:34px;max-width:58%;padding:0 12px;border:1px solid color-mix(in srgb,var(--skin-border,rgba(0,0,0,.12)) 80%,transparent);border-radius:999px;color:var(--skin-text,#344054);background:color-mix(in srgb,var(--surface-strong,#fff) 78%,transparent);box-shadow:0 8px 22px color-mix(in srgb,var(--skin-text,#2b2520) 7%,transparent);font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.date-writing-page{min-height:100%;display:grid;align-content:start;gap:12px;padding:14px;overflow-y:auto;color:var(--skin-text,#2c241d);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-strong,#fff) 60%,transparent),color-mix(in srgb,var(--phone-bg,#f4ecdf) 92%,transparent)),var(--phone-bg,#f4ecdf)}
.date-writing-head,.date-writing-card,.date-writing-actions{border:1px solid var(--skin-border,rgba(0,0,0,.1));border-radius:22px;background:color-mix(in srgb,var(--surface-strong,#fff) 86%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--skin-text,#2b2520) 8%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.date-writing-head{display:grid;gap:8px;padding:14px}.date-writing-head h2,.date-writing-card h3{margin:0;color:var(--skin-title,#1f1a16)}.date-writing-head p,.date-writing-card .hint-text,.date-writing-note,.date-writing-status{margin:0;color:var(--skin-muted,#7a6d60);font-size:12.5px;line-height:1.55}.date-writing-card{display:grid;gap:12px;padding:14px}.date-writing-chip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.date-writing-chip{min-width:0}.date-writing-chip input{position:absolute;opacity:0;pointer-events:none}.date-writing-chip span,.date-style-select span{display:grid;place-items:center;min-height:38px;padding:0 10px;border-radius:16px;border:1px solid var(--skin-border,rgba(0,0,0,.1));color:var(--skin-text,#2c241d);background:color-mix(in srgb,var(--phone-bg,#f4ecdf) 56%,#fff);font-size:13px;font-weight:800}.date-writing-chip input:checked+span,.date-style-select input:checked+span{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--skin-accent,#b17a36),var(--skin-accent-2,#8f642d));box-shadow:0 8px 20px color-mix(in srgb,var(--skin-accent,#b17a36) 26%,transparent)}
.date-writing-custom-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.date-writing-custom-row label,.date-style-card .field{display:grid;gap:6px;color:var(--skin-muted,#7a6d60);font-size:12px;font-weight:800}.date-writing-custom-row input,.date-writing-card select,.date-style-card input,.date-style-card textarea{width:100%;min-height:40px;box-sizing:border-box;border:1px solid var(--skin-border,rgba(0,0,0,.12));border-radius:14px;padding:9px 11px;color:var(--skin-text,#2c241d);background:color-mix(in srgb,var(--phone-bg,#f4ecdf) 62%,#fff);font:13px/1.5 var(--app-font-family,system-ui)}.date-style-card textarea{resize:vertical;min-height:104px}.date-writing-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.date-writing-card-title button,.date-style-delete,.date-writing-actions button{border:0;border-radius:14px;min-height:38px;padding:0 12px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--skin-accent,#b17a36),var(--skin-accent-2,#8f642d))}.date-style-list{display:grid;gap:10px}.date-style-card{display:grid;gap:10px;padding:12px;border-radius:18px;border:1px solid color-mix(in srgb,var(--skin-border,rgba(0,0,0,.1)) 88%,transparent);background:color-mix(in srgb,var(--phone-bg,#f4ecdf) 54%,transparent)}.date-style-select input{position:absolute;opacity:0;pointer-events:none}.date-style-delete{justify-self:end;color:var(--skin-text,#2c241d);background:color-mix(in srgb,#c0564a 12%,transparent)}.date-style-delete:disabled{opacity:.45}.date-writing-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.date-writing-actions button:nth-child(2){color:var(--skin-text,#2c241d);background:color-mix(in srgb,var(--skin-muted,#7a6d60) 14%,transparent)}.date-writing-status{min-height:18px;text-align:center}@media (max-width:390px){.date-writing-button{max-width:50%;font-size:11.5px}.date-writing-chip-grid,.date-writing-custom-row{grid-template-columns:1fr}}

/* Date writing style list: collapsed by default, tap a name to edit. */
.date-style-card{display:block;gap:0;padding:0;overflow:hidden;border-radius:18px;background:color-mix(in srgb,var(--surface-strong,#fff) 72%,transparent)}
.date-style-summary{width:100%;min-height:46px;border:0;background:transparent;color:var(--skin-text,#2c241d);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;text-align:left;font:800 14px/1.35 var(--app-font-family,system-ui);cursor:pointer}
.date-style-card.is-selected{border-color:color-mix(in srgb,var(--skin-accent,#7aa1d5) 48%,var(--skin-border,rgba(0,0,0,.1)));background:color-mix(in srgb,var(--skin-accent,#7aa1d5) 9%,var(--surface-strong,#fff))}
.date-style-card.is-selected .date-style-name-text::before{content:"✓ ";font-weight:1000;color:var(--skin-accent,#7aa1d5)}
.date-style-name-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.date-style-caret{flex:0 0 auto;color:var(--skin-muted,#7a6d60);font-size:20px;line-height:1;transition:transform .18s ease,opacity .18s ease;opacity:.68}
.date-style-details{display:none;gap:10px;padding:0 12px 12px}
.date-style-card.expanded .date-style-details{display:grid}
.date-style-card.expanded .date-style-caret{transform:rotate(90deg);opacity:1}
.date-style-card.expanded .date-style-summary{border-bottom:1px solid color-mix(in srgb,var(--skin-border,rgba(0,0,0,.1)) 76%,transparent);margin-bottom:10px}


/* === 2026.06.13 voice acting settings === */
.voice-acting-editor{margin:10px 0;border:1px solid rgba(143,100,45,.12);border-radius:18px;background:rgba(255,255,255,.44);padding:8px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.voice-acting-editor summary{cursor:pointer;font-weight:900;color:var(--text-main);min-height:28px;display:flex;align-items:center}
.voice-acting-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.voice-acting-editor .hint-text{margin:3px 0 8px;color:var(--text-soft);font-size:11.5px;line-height:1.5}
.compact-voice-acting{background:rgba(255,255,255,.36)}
@media (max-width:430px){.voice-acting-grid{grid-template-columns:1fr}}

/* === Moss patch 2026-06-13: char phone native app polish === */
.native-wechat-list {
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--skin-border) 60%, transparent);
}
.native-chat-row {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--skin-border) 46%, transparent);
}
.native-chat-row:last-child { border-bottom: 0; }
.mock-contact-avatar,
.mock-chat-row .avatar.mock-contact-avatar {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  overflow: hidden;
  font-size: 17px;
}
.mock-contact-avatar img,
.mock-bubble-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mock-phone-bubbles.with-avatars { gap: 10px; }
.mock-phone-bubble-row {
  display: grid;
  grid-template-columns: 30px minmax(0, max-content);
  align-items: end;
  gap: 8px;
  max-width: 92%;
}
.mock-phone-bubble-row.sent {
  justify-self: end;
  grid-template-columns: minmax(0, max-content) 30px;
}
.mock-phone-bubble-row.sent .mock-bubble-avatar { grid-column: 2; grid-row: 1; }
.mock-phone-bubble-row.sent p { grid-column: 1; grid-row: 1; }
.mock-bubble-avatar,
.mock-phone-bubble-row .avatar.mock-bubble-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  overflow: hidden;
  font-size: 12px;
}
.mock-phone-bubble-row p {
  max-width: min(230px, 100%);
  margin: 0;
  padding: 9px 11px;
  border-radius: 16px;
  line-height: 1.48;
  word-break: break-word;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--skin-text) 5%, transparent);
}
.mock-phone-bubble-row.received p {
  border-top-left-radius: 5px;
  color: var(--skin-text);
  background: var(--surface-strong);
}
.mock-phone-bubble-row.sent p {
  border-top-right-radius: 5px;
  color: #fff;
  background: #34c759;
}
.mock-phone-bubbles.with-avatars > p { display: none; }
.native-shop-grid .native-order-card small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--skin-muted);
  font-size: 11px;
  line-height: 1.35;
}
.native-order-card .mock-product-img { font-size: 34px; }
.phone-order-hero {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.phone-order-hero > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #ff8fab, #74b9ff);
  font-size: 32px;
}
.phone-order-hero h3 { margin: 0 0 4px; }
.phone-order-price {
  margin: 14px 0;
  color: #f04f5f;
  font-size: 24px;
  font-weight: 950;
}
.phone-order-price.income { color: #20a867; }
.phone-order-price.expense { color: #f04f5f; }
.phone-order-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}
.phone-order-meta dt {
  color: var(--skin-muted);
  font-size: 12px;
  font-weight: 900;
}
.phone-order-meta dd {
  margin: 0;
  color: var(--skin-text);
  line-height: 1.55;
}
.wallet-balance-row {
  background: linear-gradient(135deg, color-mix(in srgb, var(--skin-accent) 18%, var(--surface-strong)), color-mix(in srgb, var(--skin-accent-2) 14%, var(--surface-strong)));
}
.phone-wallet-big-balance {
  display: block;
  margin: 10px 0 12px;
  color: var(--skin-text);
  font-size: 30px;
  font-weight: 950;
}
.mock-item-card strong {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-item-card strong span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, #fff 64%, transparent);
}
.hidden-photo-entry .mock-product-img,
.mock-photo-tile.hidden-photo-entry div {
  background: linear-gradient(145deg, #596275, #303952);
}
.hidden-album-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.text-photo-tile {
  min-height: 128px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #8e9aaf, #cbc0d3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.text-photo-tile span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  font-weight: 900;
}
.text-photo-tile p {
  margin: 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
}


/* 2026.06.13 phone chat/avatar/context fix */
.mock-phone-bubble-row .mock-avatar.mock-bubble-avatar,
.mock-phone-bubble-row .mock-contact-avatar.mock-bubble-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, #23c6a4, #3b9cff);
  color: #fff;
  flex: none;
}
.mock-phone-bubbles .mock-phone-bubble-row.received,
.mock-phone-bubbles .mock-phone-bubble-row.sent {
  background: transparent;
  color: inherit;
  border-radius: 0;
}
.mock-sms-thread {
  align-content: start;
  gap: 10px;
}
.mock-sms-row {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  overflow: hidden;
}
.mock-sms-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
.mock-sms-row span {
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-self: end;
}
.mock-sms-row p {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* 表情包分组 + 角色挂载 */
.chat-extra-panel[data-panel-type="stickers"] {
  display: block;
}
.sticker-send-group {
  margin-bottom: 10px;
}
.sticker-send-group-title,
.sticker-group-title {
  margin: 8px 2px 6px;
  font-size: 12px;
  font-weight: 800;
  color: #6b7280;
}
.sticker-send-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sticker-group-block {
  margin-bottom: 14px;
}
.sticker-mount-panel .sticker-mount-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.sticker-mount-panel .form-status {
  margin-top: 6px;
  color: #6b7280;
}
.sticker-mount-panel .form-status.success {
  color: #2f8f5b;
}
.sticker-message-card img {
  max-width: 120px;
}

/* ===== 顶部标题统一居中（水平+垂直，覆盖各皮肤，不依赖可能未定义的变量） ===== */
.app-topbar {
  position: absolute !important;
  display: grid !important;
  grid-template-columns: var(--skin-control-height, 42px) minmax(0, 1fr) var(--skin-control-height, 42px) !important;
  align-items: center !important;
}
.app-topbar > #appTitle,
.app-topbar > span {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--skin-control-height, 42px) !important;
  right: var(--skin-control-height, 42px) !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}

/* ===== 世界书「允许读取的人物」勾选改成紧凑自适应排版 ===== */
.worldbook-reader-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  grid-template-columns: none !important;
  max-height: 148px !important;
  overflow-y: auto !important;
  padding: 2px !important;
}
.worldbook-reader-list .check-pill {
  width: auto !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}
.worldbook-reader-list .check-pill input {
  width: 16px !important;
  height: 16px !important;
}
.worldbook-reader-list .check-pill span {
  white-space: nowrap !important;
  font-size: 13px !important;
}

/* 2026-06-13: richer, less-selfie Moments attachments */
.moment-rich-card {
  width: min(100%, 260px);
  margin: 8px 0 10px;
  border: 1px solid rgba(82, 102, 138, 0.14);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,249,252,.92));
  box-shadow: 0 8px 24px rgba(36, 44, 60, 0.08);
  overflow: hidden;
}

.moment-rich-head,
.moment-rich-label {
  display: grid;
  gap: 2px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(82, 102, 138, 0.1);
}

.moment-rich-head span,
.moment-rich-label span,
.moment-rich-label small,
.moment-rich-head small {
  color: #8b93a1;
  font-size: 11px;
  font-weight: 700;
}

.moment-rich-head strong,
.moment-rich-forum > strong,
.moment-shop-info strong {
  color: #273247;
}

.moment-chat-shot {
  display: grid;
  gap: 7px;
  padding: 10px;
  background: #eef1f5;
}

.moment-chat-line {
  display: grid;
  justify-items: start;
  gap: 2px;
}

.moment-chat-line.mine {
  justify-items: end;
}

.moment-chat-line em {
  color: #8b93a1;
  font-size: 10px;
  font-style: normal;
}

.moment-chat-line span {
  max-width: 78%;
  padding: 7px 9px;
  border-radius: 12px 12px 12px 4px;
  color: #2b3342;
  background: #fff;
  font-size: 12px;
  line-height: 1.35;
}

.moment-chat-line.mine span {
  border-radius: 12px 12px 4px 12px;
  background: #dcecff;
}

.moment-rich-forum {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
}

.moment-rich-forum > strong,
.moment-rich-forum > p {
  margin: 0 12px;
}

.moment-rich-forum > p {
  color: #606977;
  font-size: 13px;
  line-height: 1.45;
}

.moment-rich-label {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.moment-rich-shop {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.moment-shop-emoji {
  width: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eef3fa;
  font-size: 24px;
}

.moment-shop-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.moment-shop-info span,
.moment-shop-info p {
  margin: 0;
  color: #697281;
  font-size: 12px;
  line-height: 1.35;
}

.moment-rich-shop button {
  padding: 6px 8px;
  border-radius: 999px;
  color: #6d7f98;
  background: #edf3fb;
  font-size: 11px;
}

/* Character schedule / living calendar */
.schedule-editor {
  border: 1px solid rgba(142, 151, 168, .22);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .72);
}
.schedule-editor summary {
  cursor: pointer;
  font-weight: 900;
  color: #3c4658;
}
.form-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.life-schedule-card {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(143, 156, 176, .22);
  border-radius: 16px;
  background: rgba(248, 250, 253, .78);
}
.life-schedule-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.life-schedule-card header strong {
  font-size: 14px;
  color: #2f3848;
}
.life-schedule-card header button {
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(64, 86, 120, .12);
  color: #314059;
  font-weight: 800;
}
.life-schedule-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.life-schedule-list p {
  display: grid;
  grid-template-columns: minmax(68px, auto) 1fr;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .74);
}
.life-schedule-list time {
  color: #7b8798;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.life-schedule-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #3b4656;
  font-size: 12px;
}
.life-schedule-list small {
  color: #8a94a3;
  font-size: 11px;
}
.life-schedule-api-status {
  margin: 6px 0 8px;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(64, 86, 120, .08);
  color: #5d6980;
  font-size: 12px;
  line-height: 1.45;
}
.life-schedule-api-status.ready {
  background: rgba(83, 132, 94, .12);
  color: #3f6c49;
}
.life-schedule-api-status.error {
  background: rgba(167, 82, 70, .12);
  color: #8d463c;
}
@media (max-width: 430px) {
  .form-grid.two { grid-template-columns: 1fr; }
  .life-schedule-list p { grid-template-columns: 1fr; }
}

/* Schedule moved from mind panel into WeChat + menu */
.schedule-panel {
  max-height: calc(100% - 112px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.schedule-panel .life-schedule-card {
  margin-top: 0;
}
.schedule-panel .hint-text {
  color: var(--skin-muted);
}


/* 2026-06-14: Restore Aurora Light as warm beige theme (distinct from Apple Light). */
html[data-ui-mode="light"] body.theme-aurora {
  --page-bg: #eadfc9;
  --phone-bg: #f4ead8;
  --surface: rgba(255, 248, 235, 0.76);
  --surface-strong: rgba(255, 251, 242, 0.92);
  --skin-border: rgba(115, 82, 43, 0.2);
  --skin-text: #3a2c1c;
  --skin-title: #2d2418;
  --skin-muted: rgba(88, 68, 46, 0.7);
  --skin-accent: #b9854b;
  --skin-accent-2: #8f9a68;
  --skin-button: rgba(190, 135, 72, 0.2);
  --skin-button-text: #775126;
  --skin-home: radial-gradient(circle at 18% 0%, rgba(255, 248, 224, 0.96), rgba(242, 229, 204, 0.8) 34%, rgba(218, 198, 163, 0.75) 100%);
  --glass-icon-bg: rgba(255, 249, 238, 0.72);
  --glass-icon-border: rgba(135, 94, 46, 0.16);
  --app-font-color: #3a2c1c;
  background: #eadfc9 !important;
  color: #3a2c1c !important;
}

html[data-ui-mode="light"] body.theme-aurora :where(.device-shell, .app-screen, .home-screen, .phone-frame) {
  background: var(--skin-home) !important;
  color: var(--skin-text) !important;
}

html[data-ui-mode="light"] body.theme-aurora :where(.panel, .settings-card, .memory-module-card, .memory-entry, .shop-card, .wallet-card, .modal-card, .action-sheet, .forward-picker-sheet, .calendar-panel, .phone-panel, .moments-card, .date-card, .theater-card, .inspiration-drawer, .debug-card, .api-log-card) {
  background: var(--surface) !important;
  border-color: var(--skin-border) !important;
  color: var(--skin-text) !important;
  box-shadow: 0 18px 46px rgba(101, 72, 33, 0.14) !important;
}

html[data-ui-mode="light"] body.theme-aurora :where(.app-topbar, .top-bar, .home-widget, .dock, .widget, .chat-composer, .chat-plus-panel, .wechat-header, .settings-topbar) {
  background: rgba(255, 248, 235, 0.74) !important;
  border-color: rgba(118, 84, 45, 0.18) !important;
  color: var(--skin-title) !important;
  box-shadow: 0 16px 38px rgba(100, 72, 38, 0.13) !important;
}

html[data-ui-mode="light"] body.theme-aurora :where(button, .tab-button, .secondary-button, .settings-back, .pill-button, .memory-filter-pill) {
  border-color: rgba(131, 92, 48, 0.18);
}

html[data-ui-mode="light"] body.theme-aurora :where(.primary-button, button:not(.danger-button):not(.icon-button):not(.message-action-button)) {
  color: var(--skin-button-text);
}

html[data-ui-mode="light"] body.theme-aurora :where(input, textarea, select) {
  background: rgba(255, 252, 244, 0.86) !important;
  border-color: rgba(123, 88, 48, 0.18) !important;
  color: var(--skin-text) !important;
}

html[data-ui-mode="light"] body.theme-aurora :where(.hint-text, small, .muted, .empty-text, .subtle-text) {
  color: var(--skin-muted) !important;
}

html[data-ui-mode="light"] body.theme-aurora :where(.app-icon, .icon-face:not(.custom-icon), .dock .app-icon) {
  background: linear-gradient(145deg, rgba(255, 251, 241, 0.94), rgba(228, 205, 166, 0.86)) !important;
  border-color: rgba(129, 91, 48, 0.18) !important;
  box-shadow: 0 12px 26px rgba(92, 66, 34, 0.14) !important;
}

html[data-ui-mode="light"] body.theme-aurora .chat-layout {
  --chat-bubble-assistant: rgba(255, 250, 239, 0.92);
  --chat-bubble-user: rgba(210, 180, 132, 0.82);
  --chat-bubble-text: #3a2c1c;
  background: linear-gradient(180deg, rgba(246, 235, 215, 0.98), rgba(232, 215, 184, 0.95)) !important;
}

/* Aurora Light：dock 改成半透明米白磨砂条；去掉每个 app 那坨米白方框，只保留自定义圆形图标 */
html[data-ui-mode="light"] body.theme-aurora .dock {
  background: rgba(255, 248, 235, 0.5) !important;
  border-color: rgba(118, 84, 45, 0.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
}
html[data-ui-mode="light"] body.theme-aurora .dock .dock-icon,
html[data-ui-mode="light"] body.theme-aurora .dock .app-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-ui-mode="dark"] body.theme-aurora {
  --skin-accent: #c49362;
  --skin-accent-2: #8aa06b;
  --app-font-color: #f1e7da;
}

/* 2026.06.14 card compose polish: transfer/location cards + single-panel forms */
.card-compose-overlay {
  align-items: flex-end !important;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  background: rgba(19, 16, 13, 0.42) !important;
}
.card-compose-modal {
  width: min(460px, 94vw);
  max-height: min(86vh, 720px);
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0,0,0,.12)) 80%, transparent);
  background:
    radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--skin-accent, #b17a36) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-strong, #fffaf0) 94%, #fff 6%);
  color: var(--skin-text, #2c241d);
  box-shadow: 0 26px 70px rgba(26, 18, 12, .28);
  animation: uiModalPop .18s ease both;
}
.card-compose-head {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
}
.card-compose-icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--skin-accent, #b17a36) 28%, transparent);
}
.card-compose-icon.transfer {
  background: linear-gradient(145deg, #f0b150, #d9842d 56%, #b15f23);
}
.card-compose-icon.location {
  background: linear-gradient(145deg, #70b8ff, #2f8fe8 58%, #1d66b3);
}
.card-compose-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .01em;
  color: var(--skin-title, #211b15);
}
.card-compose-head p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--skin-muted, #7a6d60);
}
.transfer-compose-preview {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 5px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(135deg, #f2b75a 0%, #df8a35 48%, #bf6827 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 26px rgba(149, 83, 26, .18);
}
.transfer-compose-preview::after {
  content: "¥";
  position: absolute;
  right: 12px;
  bottom: -30px;
  font-size: 112px;
  font-weight: 950;
  opacity: .13;
}
.transfer-compose-preview span,
.transfer-compose-preview small {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
.transfer-compose-preview strong {
  position: relative;
  z-index: 1;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.card-compose-field {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 900;
  color: var(--skin-title, #211b15);
}
.card-compose-field input,
.card-compose-field textarea,
.location-history-search {
  width: 100%;
  border: 1px solid var(--skin-border, rgba(0,0,0,.12));
  border-radius: 16px;
  background: color-mix(in srgb, var(--phone-bg, #f4ecdf) 72%, #fff 28%);
  color: var(--skin-text, #2c241d);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  outline: none;
  box-sizing: border-box;
}
.card-compose-field input,
.location-history-search {
  height: 44px;
  padding: 0 13px;
}
.card-compose-field textarea {
  min-height: 62px;
  max-height: 120px;
  padding: 11px 13px;
  resize: none;
}
.card-compose-field input:focus,
.card-compose-field textarea:focus,
.location-history-search:focus {
  border-color: color-mix(in srgb, var(--skin-accent, #b17a36) 72%, var(--skin-border, rgba(0,0,0,.12)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent, #b17a36) 13%, transparent);
}
.money-field > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  border: 1px solid var(--skin-border, rgba(0,0,0,.12));
  border-radius: 16px;
  background: color-mix(in srgb, var(--phone-bg, #f4ecdf) 72%, #fff 28%);
}
.money-field em {
  color: var(--skin-accent, #b17a36);
  text-align: center;
  font-style: normal;
  font-weight: 950;
}
.money-field input {
  border: 0 !important;
  background: transparent !important;
  padding-left: 0 !important;
  box-shadow: none !important;
  font-size: 22px !important;
  font-weight: 900;
}
.location-history-panel {
  display: grid;
  gap: 9px;
  min-height: 0;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid var(--skin-border, rgba(0,0,0,.1));
  background: color-mix(in srgb, var(--phone-bg, #f4ecdf) 60%, transparent);
}
.location-history-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.location-history-head strong {
  font-size: 14px;
  color: var(--skin-title, #211b15);
}
.location-history-head small {
  font-size: 11px;
  color: var(--skin-muted, #7a6d60);
}
.location-history-list {
  display: grid;
  gap: 8px;
  max-height: min(28vh, 220px);
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
.location-history-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0,0,0,.12)) 88%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong, #fffaf0) 86%, transparent);
  color: var(--skin-text, #2c241d);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.location-history-item:active {
  transform: scale(.985);
  background: color-mix(in srgb, var(--skin-accent, #b17a36) 10%, var(--surface-strong, #fffaf0));
}
.location-history-item strong {
  font-size: 14px;
  font-weight: 900;
}
.location-history-item small,
.location-history-empty,
.card-compose-status {
  margin: 0;
  font-size: 12px;
  color: var(--skin-muted, #7a6d60);
  line-height: 1.4;
}
.card-compose-actions {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
}
.card-compose-actions button {
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 900;
  color: var(--skin-text, #2c241d);
  background: color-mix(in srgb, var(--skin-muted, #7a6d60) 14%, transparent);
}
.card-compose-actions button[data-card-compose-confirm] {
  color: #fff;
  background: linear-gradient(135deg, var(--skin-accent, #b17a36), var(--skin-accent-2, #8f642d));
  box-shadow: 0 12px 22px color-mix(in srgb, var(--skin-accent, #b17a36) 20%, transparent);
}
.transfer-card.transfer-card-v2 {
  position: relative;
  overflow: hidden;
  width: min(248px, 72vw) !important;
  display: grid !important;
  gap: 5px !important;
  padding: 15px 15px 13px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.25), transparent 32%),
    linear-gradient(135deg, #f1b356 0%, #de8a37 50%, #ba6529 100%) !important;
  text-align: left !important;
  box-shadow: 0 12px 26px rgba(132, 79, 28, .22) !important;
}
.transfer-card-v2.assistant {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.24), transparent 32%),
    linear-gradient(135deg, #ecc46c 0%, #c9923d 54%, #a56d2d 100%) !important;
}
.transfer-card-v2 .transfer-card-watermark {
  position: absolute;
  right: 10px;
  bottom: -30px;
  font-size: 108px !important;
  line-height: 1;
  font-weight: 950;
  color: rgba(255,255,255,.14) !important;
  opacity: 1 !important;
}
.transfer-card-v2 .transfer-card-label {
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.88) !important;
  font-size: 11px !important;
  font-weight: 900;
}
.transfer-card-v2 strong {
  position: relative;
  z-index: 1;
  font-size: 30px !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
}
.transfer-card-v2 small,
.transfer-card-v2 em {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.82) !important;
  font-size: 12px !important;
  line-height: 1.35;
  font-style: normal;
}
.transfer-card-v2 em {
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.location-card.location-card-v2 {
  overflow: hidden;
  width: min(258px, 74vw) !important;
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0,0,0,.12)) 88%, transparent) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--surface-strong, #fffaf0) 92%, transparent) !important;
  color: var(--skin-text, #2c241d) !important;
  text-align: left !important;
  box-shadow: 0 12px 26px rgba(35, 38, 45, .13) !important;
}
.location-card-v2 .location-card-map {
  position: relative;
  overflow: hidden;
  display: block;
  height: 92px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, rgba(255,255,255,.22) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 68% 24%, rgba(255,255,255,.55), transparent 23%),
    linear-gradient(135deg, #a9d7ff, #79bdf2 48%, #9fd7be);
}
.location-card-v2 .location-card-map::before,
.location-card-v2 .location-card-map::after {
  content: "";
  position: absolute;
  width: 130%;
  height: 18px;
  left: -16%;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  transform: rotate(-18deg);
}
.location-card-v2 .location-card-map::before { top: 28px; }
.location-card-v2 .location-card-map::after { top: 60px; opacity: .44; transform: rotate(16deg); }
.location-card-v2 .location-card-map i {
  position: absolute;
  inset: 12px 14px auto auto;
  width: 46px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  box-shadow: -58px 34px 0 rgba(255,255,255,.28), -112px 9px 0 rgba(255,255,255,.2);
}
.location-card-v2 .location-card-map b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 12px;
  rotate: -45deg;
  color: #fff;
  background: linear-gradient(135deg, #318fe9, #1767bc);
  box-shadow: 0 10px 20px rgba(19, 90, 170, .28);
  font-size: 0;
}
.location-card-v2 .location-card-map b::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}
.location-card-v2 .location-card-info {
  display: grid;
  gap: 4px;
  padding: 12px 13px 13px;
}
.location-card-v2 .location-card-info > span {
  color: var(--skin-muted, #7a6d60) !important;
  font-size: 11px !important;
  font-weight: 900;
}
.location-card-v2 .location-card-info strong {
  color: var(--skin-title, #211b15) !important;
  font-size: 16px !important;
  line-height: 1.32;
}
.location-card-v2 .location-card-info small {
  color: var(--skin-muted, #7a6d60) !important;
  font-size: 12px !important;
  line-height: 1.45;
}


/* 2026-06-14: Apple Dark 情侣空间真实深色化（从 card-compose-polish 回退源码上修，不改 Dock / 图标） */
html[data-ui-mode="dark"] body.theme-apple .app-body:has(.couple-app) {
  background: #111318 !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-app {
  --couple-dark-bg: #111318;
  --couple-dark-panel: rgba(28, 31, 38, 0.92);
  --couple-dark-panel-2: rgba(36, 40, 48, 0.90);
  --couple-dark-border: rgba(255, 255, 255, 0.09);
  --couple-dark-text: #f2f5f9;
  --couple-dark-muted: rgba(220, 228, 238, 0.72);
  --couple-dark-soft: rgba(150, 127, 148, 0.20);
  min-height: 100% !important;
  color: var(--couple-dark-text) !important;
  background:
    radial-gradient(circle at 14% 4%, rgba(118, 88, 106, 0.24), transparent 26%),
    radial-gradient(circle at 94% 18%, rgba(84, 118, 108, 0.20), transparent 30%),
    linear-gradient(180deg, #111318 0%, #161a20 50%, #1a2026 100%) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-app :where(h1, h2, h3, strong, .couple-title strong) {
  color: var(--couple-dark-text) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-app :where(p, small, span, em, .couple-title small, .couple-section small, .couple-stat span, .couple-empty) {
  color: var(--couple-dark-muted) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-hero,
html[data-ui-mode="dark"] body.theme-apple .couple-section,
html[data-ui-mode="dark"] body.theme-apple .couple-preview-card,
html[data-ui-mode="dark"] body.theme-apple .couple-memory-card,
html[data-ui-mode="dark"] body.theme-apple .couple-diary-card,
html[data-ui-mode="dark"] body.theme-apple .couple-api-status,
html[data-ui-mode="dark"] body.theme-apple .couple-stat,
html[data-ui-mode="dark"] body.theme-apple .couple-empty {
  color: var(--couple-dark-text) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.045), transparent 30%),
    linear-gradient(145deg, rgba(36, 40, 48, 0.94), rgba(25, 28, 35, 0.92)) !important;
  border: 1px solid var(--couple-dark-border) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(22px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.10) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-memory-card.pinned,
html[data-ui-mode="dark"] body.theme-apple .couple-preview-card.film,
html[data-ui-mode="dark"] body.theme-apple .couple-preview-card.diary {
  background:
    radial-gradient(circle at 86% 8%, rgba(136, 107, 132, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(40, 43, 52, 0.96), rgba(26, 29, 36, 0.94)) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-quote {
  color: #eef3f8 !important;
  background: rgba(43, 47, 56, 0.86) !important;
  border-left-color: rgba(190, 148, 174, 0.82) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-stage-pill,
html[data-ui-mode="dark"] body.theme-apple .couple-char-strip button,
html[data-ui-mode="dark"] body.theme-apple .couple-actions button.secondary,
html[data-ui-mode="dark"] body.theme-apple .couple-section header button.secondary {
  color: #edf3f8 !important;
  background: rgba(45, 49, 58, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-char-strip button.active,
html[data-ui-mode="dark"] body.theme-apple .couple-actions button,
html[data-ui-mode="dark"] body.theme-apple .couple-section header button,
html[data-ui-mode="dark"] body.theme-apple .couple-memory-card button,
html[data-ui-mode="dark"] body.theme-apple .couple-diary-card button {
  color: #f7fbff !important;
  background: rgba(75, 92, 105, 0.92) !important;
  border: 1px solid rgba(190, 214, 231, 0.13) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-api-status.ready {
  color: #e8f4ee !important;
  background: linear-gradient(145deg, rgba(42, 61, 53, 0.92), rgba(34, 38, 45, 0.92)) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-api-status.error {
  color: #ffd2d6 !important;
  background: rgba(72, 38, 44, 0.88) !important;
  border-color: rgba(255, 168, 178, 0.18) !important;
}

/* 小屋本体也改成深色，不再是浅色房间压浅色字 */
html[data-ui-mode="dark"] body.theme-apple .couple-room {
  color: var(--couple-dark-text) !important;
  background:
    linear-gradient(180deg, rgba(34, 38, 46, 0.98) 0 58%, rgba(26, 29, 35, 0.98) 58% 100%),
    radial-gradient(circle at 18% 15%, rgba(126, 94, 112, 0.26), transparent 28%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-wall {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.07), transparent 25%) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-floor {
  background:
    linear-gradient(135deg, rgba(255,255,255,.045) 25%, transparent 25%) 0 0/34px 34px,
    linear-gradient(225deg, rgba(255,255,255,.035) 25%, transparent 25%) 0 0/34px 34px,
    linear-gradient(180deg, rgba(28, 31, 37, .98), rgba(22, 24, 30, .98)) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-window {
  background: linear-gradient(145deg, #263846, #4b3e35 72%) !important;
  box-shadow: inset 0 0 0 9px rgba(255,255,255,.10), 0 12px 24px rgba(0,0,0,.24) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-window i,
html[data-ui-mode="dark"] body.theme-apple .couple-room-window b {
  background: rgba(255,255,255,.20) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-shelf {
  background: rgba(44, 48, 56, .72) !important;
  box-shadow: inset 0 -8px 0 rgba(117, 91, 72, .26), 0 10px 20px rgba(0,0,0,.22) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-shelf span {
  background: rgba(154, 123, 147, .58) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-shelf span:nth-child(1) {
  background: rgba(104, 151, 132, .50) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-shelf span:nth-child(3) {
  background: rgba(178, 145, 105, .56) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-rug {
  background: radial-gradient(ellipse at center, rgba(125, 92, 112, .46), rgba(125, 92, 112, .18) 60%, transparent 70%) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-bed {
  background: linear-gradient(145deg, #5d4c59, #2f333d) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.26) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-bed i,
html[data-ui-mode="dark"] body.theme-apple .couple-room-bed b {
  background: rgba(236, 227, 234, .72) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-table {
  background: linear-gradient(145deg, #5a4739, #382f2a) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.26) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-table::after {
  background: rgba(20, 18, 18, .52) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-table i,
html[data-ui-mode="dark"] body.theme-apple .couple-room-lamp::before {
  background: linear-gradient(145deg, #f1dba7, #8d6f47) !important;
  box-shadow: 0 0 24px rgba(226, 185, 105, .26) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-lamp {
  background: rgba(167, 139, 111, .44) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-plant {
  background: linear-gradient(145deg, #765943, #46372e) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-wallnote,
html[data-ui-mode="dark"] body.theme-apple .couple-room-item,
html[data-ui-mode="dark"] body.theme-apple .couple-room-photo {
  color: #f1f4f8 !important;
  background: rgba(38, 42, 50, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26), inset 0 1px rgba(255,255,255,.05) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-photo::before {
  background: #a97f92 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.22) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-room-item small,
html[data-ui-mode="dark"] body.theme-apple .couple-room-photo strong {
  color: rgba(230, 237, 246, 0.82) !important;
}

html[data-ui-mode="dark"] body.theme-apple .couple-avatar-stack .avatar {
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28) !important;
}


/* 2026-06-14: Aurora Dark 情侣空间真实深色化（只加极光暗色，不改 Dock / 图标） */
html[data-ui-mode="dark"] body.theme-aurora .app-body:has(.couple-app) {
  background: #111318 !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-app {
  --couple-dark-bg: #111318;
  --couple-dark-panel: rgba(28, 31, 38, 0.92);
  --couple-dark-panel-2: rgba(36, 40, 48, 0.90);
  --couple-dark-border: rgba(255, 255, 255, 0.09);
  --couple-dark-text: #f2f5f9;
  --couple-dark-muted: rgba(220, 228, 238, 0.72);
  --couple-dark-soft: rgba(150, 127, 148, 0.20);
  min-height: 100% !important;
  color: var(--couple-dark-text) !important;
  background:
    radial-gradient(circle at 14% 4%, rgba(118, 88, 106, 0.24), transparent 26%),
    radial-gradient(circle at 94% 18%, rgba(84, 118, 108, 0.20), transparent 30%),
    linear-gradient(180deg, #111318 0%, #161a20 50%, #1a2026 100%) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-app :where(h1, h2, h3, strong, .couple-title strong) {
  color: var(--couple-dark-text) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-app :where(p, small, span, em, .couple-title small, .couple-section small, .couple-stat span, .couple-empty) {
  color: var(--couple-dark-muted) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-hero,
html[data-ui-mode="dark"] body.theme-aurora .couple-section,
html[data-ui-mode="dark"] body.theme-aurora .couple-preview-card,
html[data-ui-mode="dark"] body.theme-aurora .couple-memory-card,
html[data-ui-mode="dark"] body.theme-aurora .couple-diary-card,
html[data-ui-mode="dark"] body.theme-aurora .couple-api-status,
html[data-ui-mode="dark"] body.theme-aurora .couple-stat,
html[data-ui-mode="dark"] body.theme-aurora .couple-empty {
  color: var(--couple-dark-text) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.045), transparent 30%),
    linear-gradient(145deg, rgba(36, 40, 48, 0.94), rgba(25, 28, 35, 0.92)) !important;
  border: 1px solid var(--couple-dark-border) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(22px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.10) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-memory-card.pinned,
html[data-ui-mode="dark"] body.theme-aurora .couple-preview-card.film,
html[data-ui-mode="dark"] body.theme-aurora .couple-preview-card.diary {
  background:
    radial-gradient(circle at 86% 8%, rgba(136, 107, 132, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(40, 43, 52, 0.96), rgba(26, 29, 36, 0.94)) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-quote {
  color: #eef3f8 !important;
  background: rgba(43, 47, 56, 0.86) !important;
  border-left-color: rgba(190, 148, 174, 0.82) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-stage-pill,
html[data-ui-mode="dark"] body.theme-aurora .couple-char-strip button,
html[data-ui-mode="dark"] body.theme-aurora .couple-actions button.secondary,
html[data-ui-mode="dark"] body.theme-aurora .couple-section header button.secondary {
  color: #edf3f8 !important;
  background: rgba(45, 49, 58, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-char-strip button.active,
html[data-ui-mode="dark"] body.theme-aurora .couple-actions button,
html[data-ui-mode="dark"] body.theme-aurora .couple-section header button,
html[data-ui-mode="dark"] body.theme-aurora .couple-memory-card button,
html[data-ui-mode="dark"] body.theme-aurora .couple-diary-card button {
  color: #f7fbff !important;
  background: rgba(75, 92, 105, 0.92) !important;
  border: 1px solid rgba(190, 214, 231, 0.13) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-api-status.ready {
  color: #e8f4ee !important;
  background: linear-gradient(145deg, rgba(42, 61, 53, 0.92), rgba(34, 38, 45, 0.92)) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-api-status.error {
  color: #ffd2d6 !important;
  background: rgba(72, 38, 44, 0.88) !important;
  border-color: rgba(255, 168, 178, 0.18) !important;
}

/* 小屋本体也改成深色，不再是浅色房间压浅色字 */
html[data-ui-mode="dark"] body.theme-aurora .couple-room {
  color: var(--couple-dark-text) !important;
  background:
    linear-gradient(180deg, rgba(34, 38, 46, 0.98) 0 58%, rgba(26, 29, 35, 0.98) 58% 100%),
    radial-gradient(circle at 18% 15%, rgba(126, 94, 112, 0.26), transparent 28%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-wall {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.07), transparent 25%) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-floor {
  background:
    linear-gradient(135deg, rgba(255,255,255,.045) 25%, transparent 25%) 0 0/34px 34px,
    linear-gradient(225deg, rgba(255,255,255,.035) 25%, transparent 25%) 0 0/34px 34px,
    linear-gradient(180deg, rgba(28, 31, 37, .98), rgba(22, 24, 30, .98)) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-window {
  background: linear-gradient(145deg, #263846, #4b3e35 72%) !important;
  box-shadow: inset 0 0 0 9px rgba(255,255,255,.10), 0 12px 24px rgba(0,0,0,.24) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-window i,
html[data-ui-mode="dark"] body.theme-aurora .couple-room-window b {
  background: rgba(255,255,255,.20) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-shelf {
  background: rgba(44, 48, 56, .72) !important;
  box-shadow: inset 0 -8px 0 rgba(117, 91, 72, .26), 0 10px 20px rgba(0,0,0,.22) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-shelf span {
  background: rgba(154, 123, 147, .58) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-shelf span:nth-child(1) {
  background: rgba(104, 151, 132, .50) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-shelf span:nth-child(3) {
  background: rgba(178, 145, 105, .56) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-rug {
  background: radial-gradient(ellipse at center, rgba(125, 92, 112, .46), rgba(125, 92, 112, .18) 60%, transparent 70%) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-bed {
  background: linear-gradient(145deg, #5d4c59, #2f333d) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.26) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-bed i,
html[data-ui-mode="dark"] body.theme-aurora .couple-room-bed b {
  background: rgba(236, 227, 234, .72) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-table {
  background: linear-gradient(145deg, #5a4739, #382f2a) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.26) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-table::after {
  background: rgba(20, 18, 18, .52) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-table i,
html[data-ui-mode="dark"] body.theme-aurora .couple-room-lamp::before {
  background: linear-gradient(145deg, #f1dba7, #8d6f47) !important;
  box-shadow: 0 0 24px rgba(226, 185, 105, .26) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-lamp {
  background: rgba(167, 139, 111, .44) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-plant {
  background: linear-gradient(145deg, #765943, #46372e) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-wallnote,
html[data-ui-mode="dark"] body.theme-aurora .couple-room-item,
html[data-ui-mode="dark"] body.theme-aurora .couple-room-photo {
  color: #f1f4f8 !important;
  background: rgba(38, 42, 50, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26), inset 0 1px rgba(255,255,255,.05) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-photo::before {
  background: #a97f92 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.22) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-room-item small,
html[data-ui-mode="dark"] body.theme-aurora .couple-room-photo strong {
  color: rgba(230, 237, 246, 0.82) !important;
}

html[data-ui-mode="dark"] body.theme-aurora .couple-avatar-stack .avatar {
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28) !important;
}

/* ---- WeChat Discover + Tarot (Ancient Star Chart) ---- */
.discover-page,
.tarot-page {
  min-height: 100%;
  padding: 14px 14px calc(92px + var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #1f2430;
  background:
    radial-gradient(circle at 18% 8%, rgba(191, 151, 80, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(246, 239, 224, 0.96), rgba(240, 232, 216, 0.94));
}

.discover-hero {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(124, 89, 42, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)),
    repeating-linear-gradient(45deg, rgba(128, 92, 40, 0.06) 0 1px, transparent 1px 12px);
  box-shadow: 0 16px 34px rgba(60, 45, 22, 0.08), inset 0 1px rgba(255,255,255,.72);
}

.discover-orbit {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #9d6f2e;
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 0 30%, transparent 31%),
    conic-gradient(from 28deg, rgba(157, 111, 46, .22), rgba(9, 27, 61, .16), rgba(157, 111, 46, .22));
  font-size: 25px;
  box-shadow: inset 0 0 0 1px rgba(157, 111, 46, 0.18);
}

.discover-hero h2,
.tarot-hero h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -.02em;
}

.discover-hero p,
.tarot-hero p {
  margin: 4px 0 0;
  color: rgba(39, 43, 50, .68);
  font-size: 13px;
  line-height: 1.55;
}

.discover-list {
  display: grid;
  gap: 10px;
}

.discover-row {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 89, 42, 0.12);
  border-radius: 22px;
  color: #1f2430;
  background: rgba(255, 255, 255, 0.82);
  text-align: left;
  box-shadow: 0 12px 22px rgba(42, 31, 19, 0.06);
}

.discover-row strong,
.discover-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-row strong { font-size: 16px; }
.discover-row small { margin-top: 3px; color: rgba(31, 36, 48, .58); font-size: 12.5px; }
.discover-row em { color: rgba(31, 36, 48, .32); font-style: normal; font-size: 25px; }

.discover-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  font-size: 23px;
  font-weight: 900;
}

.discover-icon.moments { background: linear-gradient(145deg, #43c27d, #1e9162); }
.discover-icon.tarot { background: linear-gradient(145deg, #091b3d, #173260 58%, #9d6f2e); }

.tarot-page {
  padding-top: 10px;
  color: #efe3ca;
  background:
    radial-gradient(circle at 20% 12%, rgba(190, 144, 70, .2), transparent 28%),
    radial-gradient(circle at 82% 2%, rgba(120, 154, 219, .14), transparent 30%),
    linear-gradient(180deg, #07152f 0%, #0b1630 46%, #10172c 100%);
}

.tarot-hero {
  position: relative;
  min-height: 158px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  padding: 16px 16px 18px;
  overflow: hidden;
  border: 1px solid rgba(197, 151, 77, .26);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(197, 151, 77, .2) 1px, transparent 1px),
    linear-gradient(0deg, rgba(197, 151, 77, .18) 1px, transparent 1px),
    radial-gradient(circle at 26% 34%, rgba(255, 240, 202, .16), transparent 4px),
    radial-gradient(circle at 62% 22%, rgba(255, 240, 202, .2), transparent 3px),
    radial-gradient(circle at 80% 72%, rgba(255, 240, 202, .12), transparent 4px),
    linear-gradient(135deg, rgba(9, 27, 61, .92), rgba(6, 15, 35, .92));
  background-size: 34px 34px, 34px 34px, auto, auto, auto, auto;
  box-shadow: 0 22px 50px rgba(1, 5, 16, .36), inset 0 1px rgba(255,255,255,.08);
}

.tarot-hero::after {
  content: "☉  ☽  ☿  ♀  ♂  ♃  ♄";
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: rgba(197, 151, 77, .38);
  font-size: 14px;
  letter-spacing: .32em;
}

.tarot-back.settings-back {
  width: 38px;
  height: 38px;
  justify-self: start;
  border-radius: 50%;
  color: #f5dfad;
  background: rgba(255, 255, 255, .08);
  font-size: 28px;
}

.tarot-hero-copy span,
.tarot-reader small,
.tarot-card-caption small {
  color: rgba(239, 227, 202, .64);
}

.tarot-hero-copy h2 { color: #f7e7bf; }
.tarot-hero-copy p { color: rgba(239, 227, 202, .72); }

.tarot-compose,
.tarot-result,
.tarot-history {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(197, 151, 77, .18);
  border-radius: 24px;
  background: rgba(255, 248, 230, .08);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tarot-compose { display: grid; gap: 10px; }
.tarot-compose label { color: #f5dfad; font-size: 13px; font-weight: 900; }
.tarot-compose textarea {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(197, 151, 77, .2);
  border-radius: 18px;
  padding: 11px 12px;
  color: #f7e7bf;
  background: rgba(3, 11, 29, .38);
  font: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.tarot-compose textarea::placeholder { color: rgba(239, 227, 202, .42); }

.tarot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tarot-actions button,
.tarot-history-head button {
  min-height: 42px;
  border-radius: 16px;
  color: #1a1730;
  background: linear-gradient(145deg, #f4d99f, #b98638);
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255,255,255,.44), 0 10px 22px rgba(0,0,0,.18);
}

.tarot-actions button:disabled { opacity: .68; }

.tarot-reader {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.tarot-reader span {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f4d99f;
  background: rgba(197, 151, 77, .12);
}

.tarot-reader strong { color: #f7e7bf; }
.tarot-reader small { grid-column: 2; font-size: 12px; }

.tarot-spread {
  display: grid;
  grid-template-columns: repeat(var(--tarot-cols, 1), minmax(0, 1fr));
  gap: 12px;
  justify-items: center;
  align-items: start;
  margin: 4px 0 14px;
}

.tarot-spread.count-3 { --tarot-cols: 3; }

.tarot-slot {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 9px;
}

.tarot-card {
  width: min(118px, 25vw);
  aspect-ratio: 0.64;
  border-radius: 16px;
  padding: 5px;
  background: linear-gradient(145deg, #d4aa5d, #76511e);
  box-shadow: 0 16px 28px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.5);
}

.tarot-spread.count-1 .tarot-card { width: min(152px, 42vw); }
.tarot-card.reversed .tarot-card-inner { transform: rotate(180deg); }

.tarot-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(244, 217, 159, .56);
  border-radius: 12px;
  background:
    linear-gradient(45deg, transparent calc(50% - .7px), rgba(244,217,159,.34) 50%, transparent calc(50% + .7px)),
    linear-gradient(-45deg, transparent calc(50% - .7px), rgba(244,217,159,.24) 50%, transparent calc(50% + .7px)),
    radial-gradient(circle at 50% 50%, rgba(244, 217, 159, .13), transparent 31%),
    linear-gradient(180deg, #071a3d, #0a1430 68%, #11142a);
}

.tarot-card-inner::before,
.tarot-card-inner::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(244, 217, 159, .36);
  border-radius: 50%;
}

.tarot-card-inner::after {
  inset: 24px 18px;
  border-style: dashed;
  opacity: .58;
}

.tarot-roman {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  color: #f7e7bf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .08em;
}

.tarot-corner {
  position: absolute;
  right: 8px;
  z-index: 2;
  color: rgba(247, 231, 191, .88);
  font-size: 14px;
}

.tarot-corner.top { top: 8px; }
.tarot-corner.bottom { bottom: 8px; }

.tarot-star-map {
  position: absolute;
  inset: 0;
}

.tarot-star-map i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f7e7bf;
  box-shadow: 0 0 12px rgba(247, 231, 191, .72);
}

.tarot-star-map i:nth-child(1) { left: 28%; top: 31%; }
.tarot-star-map i:nth-child(2) { left: 64%; top: 23%; }
.tarot-star-map i:nth-child(3) { left: 48%; top: 48%; }
.tarot-star-map i:nth-child(4) { left: 32%; top: 68%; }
.tarot-star-map i:nth-child(5) { left: 70%; top: 72%; }

.tarot-sigil-ring {
  position: absolute;
  inset: 35px 18px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  color: #f4d99f;
  font-size: 18px;
  text-shadow: 0 0 12px rgba(244, 217, 159, .36);
}

.tarot-sigil-ring b {
  font-weight: 500;
}

.tarot-sigil-ring b:nth-child(1) { grid-column: 2; font-size: 26px; }
.tarot-sigil-ring b:nth-child(2) { grid-column: 1; }
.tarot-sigil-ring b:nth-child(3) { grid-column: 3; }
.tarot-sigil-ring b:nth-child(4) { grid-column: 1 / 3; }
.tarot-sigil-ring b:nth-child(5) { grid-column: 2 / 4; }

.tarot-card-caption {
  width: 100%;
  display: grid;
  gap: 3px;
  text-align: center;
}

.tarot-card-caption strong { color: #f4d99f; font-size: 12px; }
.tarot-card-caption span { color: #f7e7bf; font-size: 13px; font-weight: 900; }
.tarot-card-caption small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; line-height: 1.35; }

.tarot-reading-text {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 13px;
  border-radius: 18px;
  color: #2a2116;
  background:
    linear-gradient(90deg, rgba(127, 84, 31, .13) 1px, transparent 1px),
    linear-gradient(0deg, rgba(127, 84, 31, .1) 1px, transparent 1px),
    linear-gradient(180deg, #efe0bd, #dfc999);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: inset 0 1px rgba(255,255,255,.48);
}

.tarot-reading-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
  white-space: pre-wrap;
}

.tarot-empty-oracle,
.tarot-loading {
  min-height: 178px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: rgba(239, 227, 202, .76);
}

.tarot-empty-oracle span,
.tarot-loading span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f4d99f;
  background: rgba(197, 151, 77, .12);
  font-size: 28px;
}

.tarot-empty-oracle strong,
.tarot-loading strong { color: #f7e7bf; }
.tarot-empty-oracle p,
.tarot-loading p { margin: 0; max-width: 260px; line-height: 1.55; font-size: 13px; }

.tarot-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: #f7e7bf;
}

.tarot-history-head button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.tarot-history-list {
  display: grid;
  gap: 8px;
}

.tarot-history-list > p {
  margin: 0;
  color: rgba(239, 227, 202, .55);
  font-size: 13px;
}

.tarot-history-row {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(197, 151, 77, .16);
  border-radius: 16px;
  color: #efe3ca;
  background: rgba(2, 8, 22, .22);
  text-align: left;
}

.tarot-history-row.active {
  border-color: rgba(244, 217, 159, .46);
  background: rgba(197, 151, 77, .16);
}

.tarot-history-row strong,
.tarot-history-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-history-row small { color: rgba(239, 227, 202, .58); }

@media (max-width: 390px) {
  .tarot-spread.count-3 { gap: 8px; }
  .tarot-card { width: min(102px, 27vw); border-radius: 14px; }
  .tarot-card-caption small { display: none; }
}


/* 2026.06.15 tarot readability + premium layout polish */
.discover-list {
  gap: 12px;
}

.discover-row {
  min-height: 78px;
  border-radius: 24px;
  border-color: rgba(124, 89, 42, 0.10);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,247,241,.92));
  box-shadow: 0 14px 28px rgba(42, 31, 19, 0.08), inset 0 1px rgba(255,255,255,.6);
}

.discover-row strong { font-size: 16.5px; }
.discover-row small { color: rgba(31, 36, 48, .66); }
.discover-icon {
  border-radius: 18px;
  box-shadow: inset 0 1px rgba(255,255,255,.26), 0 10px 20px rgba(9, 24, 52, .12);
}

.tarot-page {
  padding: 14px 14px 22px;
  color: #f6ebcf;
  background:
    radial-gradient(circle at 18% 8%, rgba(204, 164, 90, .18), transparent 26%),
    radial-gradient(circle at 84% 4%, rgba(117, 151, 214, .14), transparent 30%),
    linear-gradient(180deg, #06142d 0%, #0a1734 42%, #0f1830 100%);
}

.tarot-page > * {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.tarot-hero {
  min-height: 182px;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 14px;
  padding: 18px 18px 22px;
  border: 1px solid rgba(200, 162, 90, .34);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(200, 162, 90, .16) 1px, transparent 1px),
    linear-gradient(0deg, rgba(200, 162, 90, .14) 1px, transparent 1px),
    radial-gradient(circle at 26% 34%, rgba(255, 241, 207, .14), transparent 4px),
    radial-gradient(circle at 62% 22%, rgba(255, 241, 207, .16), transparent 3px),
    radial-gradient(circle at 80% 72%, rgba(255, 241, 207, .10), transparent 4px),
    linear-gradient(135deg, rgba(10, 29, 64, .96), rgba(6, 15, 35, .96));
  background-size: 34px 34px, 34px 34px, auto, auto, auto, auto;
  box-shadow: 0 24px 52px rgba(1, 5, 16, .42), inset 0 1px rgba(255,255,255,.08);
}

.tarot-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 14, 35, .20), rgba(4, 10, 26, .48));
  pointer-events: none;
}

.tarot-hero > * {
  position: relative;
  z-index: 1;
}

.tarot-hero::after {
  right: 18px;
  bottom: 14px;
  color: rgba(218, 181, 102, .56);
  font-size: 14px;
  letter-spacing: .28em;
}

.tarot-back.settings-back {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  color: #f5dfad;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.18);
}

.tarot-hero-copy {
  display: grid;
  gap: 6px;
  align-content: start;
  padding-right: 74px;
}

.tarot-hero-copy span,
.tarot-reader small,
.tarot-card-caption small {
  color: rgba(246, 235, 207, .80);
  text-shadow: 0 1px 2px rgba(0,0,0,.24);
}

.tarot-hero-copy span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e8d2a0;
}

.tarot-hero-copy h2 {
  margin: 0;
  color: #f6ebcf;
  font-size: 33px;
  line-height: 1.06;
  letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.22);
}

.tarot-hero-copy p {
  margin: 0;
  max-width: 430px;
  color: rgba(246, 235, 207, .88);
  font-size: 13px;
  line-height: 1.68;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

.tarot-compose,
.tarot-result,
.tarot-history {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(200, 162, 90, .22);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(24, 37, 74, .92), rgba(11, 23, 49, .92));
  box-shadow: 0 18px 38px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.tarot-compose {
  display: grid;
  gap: 12px;
}

.tarot-compose label {
  color: #f3dfb2;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
}

.tarot-compose textarea {
  min-height: 76px;
  padding: 14px 15px;
  border: 1px solid rgba(200, 162, 90, .18);
  border-radius: 20px;
  color: #3a2c1a;
  background: linear-gradient(180deg, rgba(255,250,239,.98), rgba(244,235,216,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.78), 0 6px 16px rgba(0,0,0,.08);
}

.tarot-compose textarea::placeholder {
  color: rgba(58, 44, 26, .46);
}

.tarot-actions {
  gap: 12px;
}

.tarot-actions button,
.tarot-history-head button {
  min-height: 48px;
  border-radius: 18px;
  border: 1px solid rgba(117, 81, 30, .18);
  color: #231a10;
  background: linear-gradient(145deg, #f3d89b 0%, #d8a448 56%, #b67b2c 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.48), 0 12px 26px rgba(0,0,0,.18);
}

.tarot-reader {
  gap: 10px;
  margin-bottom: 14px;
}

.tarot-reader span {
  color: #f4d99f;
  background: rgba(197, 151, 77, .14);
}

.tarot-reader strong {
  color: #f7eed6;
  font-size: 15px;
}

.tarot-reader small {
  grid-column: 2;
  font-size: 12px;
}

.tarot-spread {
  gap: 14px;
  margin: 8px 0 16px;
}

.tarot-card {
  width: min(126px, 27vw);
  border-radius: 18px;
  padding: 5px;
  background: linear-gradient(160deg, #efcf8f, #bd8a36 48%, #78521e 100%);
  box-shadow: 0 18px 32px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.46);
}

.tarot-spread.count-1 .tarot-card {
  width: min(168px, 44vw);
}

.tarot-card-inner {
  border-radius: 14px;
  background:
    linear-gradient(45deg, transparent calc(50% - .7px), rgba(244,217,159,.34) 50%, transparent calc(50% + .7px)),
    linear-gradient(-45deg, transparent calc(50% - .7px), rgba(244,217,159,.24) 50%, transparent calc(50% + .7px)),
    radial-gradient(circle at 50% 50%, rgba(244, 217, 159, .13), transparent 31%),
    linear-gradient(180deg, #081a3d, #0a1430 68%, #11142a);
}

.tarot-card-caption {
  gap: 4px;
}

.tarot-card-caption strong {
  color: #eacb89;
  font-size: 12px;
}

.tarot-card-caption span {
  color: #f7eed6;
  font-size: 14px;
  font-weight: 900;
}

.tarot-card-caption small {
  color: rgba(246, 235, 207, .84);
  font-size: 11px;
  line-height: 1.45;
}

.tarot-reading-text {
  margin-top: 14px;
  padding: 16px 16px 17px;
  border-radius: 20px;
  color: #2c2214;
  background:
    linear-gradient(90deg, rgba(127, 84, 31, .12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(127, 84, 31, .10) 1px, transparent 1px),
    linear-gradient(180deg, #f3e5c5, #e1cca0);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: 0 12px 28px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.60);
}

.tarot-reading-text p {
  color: #2c2214;
  font-size: 14px;
  line-height: 1.78;
}

.tarot-empty-oracle,
.tarot-loading {
  min-height: 188px;
  gap: 9px;
  color: rgba(246, 235, 207, .84);
}

.tarot-empty-oracle strong,
.tarot-loading strong {
  color: #f7eed6;
}

.tarot-empty-oracle p,
.tarot-loading p {
  color: rgba(246, 235, 207, .78);
  max-width: 300px;
  line-height: 1.6;
}

.tarot-history-head {
  margin-bottom: 12px;
  color: #f7eed6;
}

.tarot-history-list {
  gap: 10px;
}

.tarot-history-list > p {
  color: rgba(246, 235, 207, .74);
}

.tarot-history-row {
  gap: 4px;
  padding: 12px 13px;
  border: 1px solid rgba(200, 162, 90, .18);
  border-radius: 18px;
  color: #f6ebcf;
  background: linear-gradient(180deg, rgba(7, 16, 37, .52), rgba(7, 17, 39, .34));
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}

.tarot-history-row strong {
  color: #f9eed3;
  font-size: 13px;
}

.tarot-history-row small {
  color: rgba(246, 235, 207, .74);
}

.tarot-history-row.active {
  border-color: rgba(244, 217, 159, .52);
  background: linear-gradient(180deg, rgba(195, 151, 77, .16), rgba(26, 35, 70, .52));
  box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.06);
}

@media (max-width: 520px) {
  .tarot-hero-copy h2 { font-size: 30px; }
}

@media (max-width: 390px) {
  .tarot-page { padding-left: 12px; padding-right: 12px; }
  .tarot-hero {
    min-height: 170px;
    padding: 16px 15px 20px;
    border-radius: 26px;
  }
  .tarot-hero-copy { padding-right: 64px; }
  .tarot-hero-copy h2 { font-size: 28px; }
  .tarot-hero-copy p { font-size: 12.5px; line-height: 1.62; }
  .tarot-compose,
  .tarot-result,
  .tarot-history { padding: 14px; border-radius: 22px; }
  .tarot-spread.count-3 { gap: 8px; }
  .tarot-card { width: min(104px, 27vw); border-radius: 16px; }
  .tarot-card-caption small { display: none; }
}


/* 2026.06.15 tarot mysterious-classic light-text refinement */
.tarot-page {
  color: #fbf3de;
  background:
    radial-gradient(circle at 18% 7%, rgba(214, 178, 105, .20), transparent 24%),
    radial-gradient(circle at 86% 4%, rgba(148, 171, 214, .12), transparent 28%),
    linear-gradient(180deg, #051126 0%, #091631 40%, #0e1a33 100%);
}

.tarot-hero {
  border-color: rgba(214, 176, 98, .42);
  background:
    linear-gradient(90deg, rgba(214, 176, 98, .22) 1px, transparent 1px),
    linear-gradient(0deg, rgba(214, 176, 98, .18) 1px, transparent 1px),
    radial-gradient(circle at 24% 28%, rgba(255, 243, 215, .18), transparent 4px),
    radial-gradient(circle at 66% 20%, rgba(255, 243, 215, .16), transparent 3px),
    radial-gradient(circle at 84% 74%, rgba(255, 243, 215, .12), transparent 4px),
    linear-gradient(135deg, rgba(7, 23, 53, .98), rgba(4, 11, 28, .98));
  box-shadow: 0 26px 56px rgba(1, 5, 16, .48), inset 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,233,188,.06);
}

.tarot-hero::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 224, 168, .06), transparent 40%),
    linear-gradient(180deg, rgba(4, 10, 27, .16), rgba(3, 8, 22, .50));
}

.tarot-hero::after {
  content: "☉  ☽  ☿  ♀  ♂  ♃  ♄";
  color: rgba(240, 210, 144, .72);
}

.tarot-back.settings-back {
  color: #fff3cf;
  background: rgba(255,255,255,.09);
  border-color: rgba(255, 240, 211, .18);
}

.tarot-hero-copy span {
  color: #edd5a4;
  text-shadow: 0 1px 4px rgba(0,0,0,.34);
}

.tarot-hero-copy h2 {
  color: #fff4d8;
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

.tarot-hero-copy p {
  color: rgba(255, 247, 229, .96);
  text-shadow: 0 1px 3px rgba(0,0,0,.34);
}

.tarot-compose,
.tarot-result,
.tarot-history {
  border-color: rgba(214, 176, 98, .24);
  background:
    linear-gradient(180deg, rgba(19, 31, 60, .95), rgba(10, 20, 44, .95));
  box-shadow: 0 18px 40px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,233,188,.04);
}

.tarot-compose label,
.tarot-history-head,
.tarot-reader strong,
.tarot-empty-oracle strong,
.tarot-loading strong {
  color: #fff2cf;
}

.tarot-reader small,
.tarot-card-caption small,
.tarot-empty-oracle,
.tarot-loading,
.tarot-empty-oracle p,
.tarot-loading p,
.tarot-history-list > p,
.tarot-history-row small {
  color: rgba(255, 245, 224, .86);
}

.tarot-compose textarea {
  color: #fdf7ea;
  border-color: rgba(224, 191, 118, .20);
  background:
    linear-gradient(180deg, rgba(12, 21, 42, .86), rgba(16, 28, 55, .90));
  box-shadow: inset 0 1px rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,235,198,.03);
}

.tarot-compose textarea::placeholder {
  color: rgba(255, 244, 220, .72);
}

.tarot-actions button,
.tarot-history-head button {
  color: #271d11;
  background: linear-gradient(145deg, #f8e3b2 0%, #ddb15b 56%, #b97f2c 100%);
}

.tarot-reader span,
.tarot-empty-oracle span,
.tarot-loading span {
  color: #ffe7b0;
  background: rgba(214, 176, 98, .14);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(255,238,200,.05);
}

.tarot-card {
  background: linear-gradient(160deg, #f2d699, #c7923b 48%, #7d5520 100%);
}

.tarot-card-inner {
  border-color: rgba(255, 235, 191, .62);
  background:
    linear-gradient(45deg, transparent calc(50% - .7px), rgba(255,231,177,.34) 50%, transparent calc(50% + .7px)),
    linear-gradient(-45deg, transparent calc(50% - .7px), rgba(255,231,177,.24) 50%, transparent calc(50% + .7px)),
    radial-gradient(circle at 50% 50%, rgba(255, 230, 176, .15), transparent 31%),
    linear-gradient(180deg, #081632, #0a1430 68%, #12172d);
}

.tarot-roman,
.tarot-card-caption span,
.tarot-history-row strong {
  color: #fff1cd;
}

.tarot-corner,
.tarot-sigil-ring,
.tarot-card-caption strong {
  color: #f7db9d;
}

.tarot-star-map i {
  background: #fff1ca;
  box-shadow: 0 0 14px rgba(255, 240, 201, .78);
}

.tarot-reading-text {
  color: #2b2115;
  background:
    linear-gradient(90deg, rgba(134, 91, 37, .12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(134, 91, 37, .10) 1px, transparent 1px),
    linear-gradient(180deg, #f5e7c7, #e4d0a7);
}

.tarot-history-row {
  color: #fff0cb;
  border-color: rgba(214, 176, 98, .20);
  background: linear-gradient(180deg, rgba(9, 17, 38, .58), rgba(8, 16, 36, .42));
}

.tarot-history-row.active {
  border-color: rgba(255, 229, 169, .56);
  background: linear-gradient(180deg, rgba(198, 152, 78, .18), rgba(23, 33, 68, .58));
}


/* 2026.06.15 tarot accessibility fix: title + history readability */
.tarot-hero {
  background:
    linear-gradient(90deg, rgba(218, 180, 105, .18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(218, 180, 105, .14) 1px, transparent 1px),
    linear-gradient(135deg, #061226 0%, #081a3b 55%, #050d1f 100%) !important;
}

.tarot-hero-copy {
  display: block;
  max-width: calc(100% - 72px);
  padding: 10px 14px 12px 14px;
  border-radius: 18px;
  background: rgba(2, 8, 22, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 178, .08), 0 10px 24px rgba(0,0,0,.18);
}

.tarot-hero-copy span {
  display: block;
  color: #ffe3a6 !important;
  opacity: 1 !important;
  font-weight: 900;
  letter-spacing: .18em;
  text-shadow: 0 2px 4px rgba(0,0,0,.65);
}

.tarot-hero-copy h2 {
  margin: 7px 0 8px;
  color: #fff8e6 !important;
  opacity: 1 !important;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 950;
  text-shadow: 0 2px 5px rgba(0,0,0,.72);
}

.tarot-hero-copy p {
  margin: 0;
  color: #fff3d6 !important;
  opacity: 1 !important;
  font-size: 13px;
  line-height: 1.62;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,.70);
}

.tarot-history {
  background: #091833 !important;
  border-color: rgba(234, 194, 115, .36) !important;
}

.tarot-history-head strong {
  color: #fff4d7 !important;
  opacity: 1 !important;
  font-size: 18px;
  font-weight: 950;
  text-shadow: 0 2px 4px rgba(0,0,0,.60);
}

.tarot-history-list > p {
  color: #fff0cd !important;
  opacity: 1 !important;
  font-weight: 800;
}

.tarot-history-row {
  background: #13264b !important;
  border-color: rgba(245, 213, 151, .58) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.16);
}

.tarot-history-row.active {
  background: #18335f !important;
  border-color: rgba(255, 226, 163, .78) !important;
}

.tarot-history-row strong {
  color: #fff6df !important;
  opacity: 1 !important;
  font-size: 14px;
  font-weight: 950;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

.tarot-history-row small {
  color: #ffe8b3 !important;
  opacity: 1 !important;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

@media (max-width: 390px) {
  .tarot-hero-copy {
    max-width: calc(100% - 58px);
    padding: 9px 12px 11px;
  }
  .tarot-hero-copy h2 {
    font-size: 27px;
  }
  .tarot-hero-copy p {
    font-size: 12.5px;
    line-height: 1.58;
  }
}


/* ============================================================
   2026.06.15 塔罗界面美学精修（覆盖层）
   方向：深靛紫夜空 · 古铜金 · 暖象牙羊皮纸 · 衬线点缀 · 克制微动效
   ============================================================ */
.tarot-page {
  --tarot-gold: #d8b676;
  --tarot-gold-deep: #b08438;
  --tarot-ink: #efe6d2;
  padding-top: 12px;
  background:
    radial-gradient(120% 80% at 18% -8%, rgba(176, 140, 92, .22), transparent 42%),
    radial-gradient(90% 70% at 88% 4%, rgba(108, 120, 196, .2), transparent 46%),
    radial-gradient(140% 120% at 50% 120%, rgba(86, 58, 96, .42), transparent 60%),
    linear-gradient(178deg, #0a1330 0%, #0d1230 40%, #15132e 72%, #1a1228 100%) !important;
}
/* 极淡星尘，给夜空一点纵深 */
.tarot-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,247,224,.7), transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255,247,224,.55), transparent),
    radial-gradient(1.1px 1.1px at 32% 42%, rgba(255,247,224,.45), transparent),
    radial-gradient(1.3px 1.3px at 64% 64%, rgba(255,247,224,.5), transparent),
    radial-gradient(1px 1px at 90% 48%, rgba(255,247,224,.4), transparent),
    radial-gradient(1.2px 1.2px at 46% 86%, rgba(255,247,224,.4), transparent);
  opacity: .8;
  z-index: 0;
}
.tarot-page > * { position: relative; z-index: 1; }

.tarot-hero {
  border-color: rgba(216, 182, 118, .3) !important;
  box-shadow: 0 26px 56px rgba(2, 6, 20, .5), inset 0 1px rgba(255, 244, 214, .12) !important;
}
.tarot-hero-copy span {
  font-size: 11.5px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(216, 182, 118, .82) !important;
}
.tarot-hero-copy h2 {
  font-family: "Songti SC", Georgia, "Times New Roman", serif;
  font-weight: 600; letter-spacing: .04em; font-size: 25px;
  color: #f6e6c0 !important;
}
.tarot-hero-copy p { font-size: 12.5px; line-height: 1.62; }
.tarot-hero::after { opacity: .55; letter-spacing: .36em; }

/* 玻璃面板：暖金调磨砂 + 顶部细高光 */
.tarot-compose, .tarot-result, .tarot-history {
  border-color: rgba(216, 182, 118, .2) !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(40, 36, 58, .46), rgba(20, 20, 40, .4)) !important;
  box-shadow: inset 0 1px rgba(255, 244, 214, .1), 0 18px 40px rgba(2, 6, 20, .3) !important;
}
.tarot-compose textarea {
  border-radius: 16px !important;
  background: rgba(8, 12, 30, .46) !important;
  border-color: rgba(216, 182, 118, .22) !important;
}
.tarot-compose textarea:focus {
  outline: none;
  border-color: rgba(216, 182, 118, .5) !important;
  box-shadow: 0 0 0 3px rgba(216, 182, 118, .14) !important;
}

/* 抽牌按钮：古铜金 + 内沿高光；三张牌做描边次级样式以示区分 */
.tarot-actions button {
  border: 1px solid rgba(255, 244, 214, .5);
  border-radius: 15px !important;
  letter-spacing: .04em;
  background: linear-gradient(150deg, #ecd29a 0%, #c79a4e 52%, #a9792f 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 -2px rgba(120, 82, 30, .35), 0 12px 24px rgba(0,0,0,.24) !important;
  transition: transform .12s ease, filter .12s ease;
}
.tarot-actions button:active { transform: translateY(1px) scale(.985); filter: brightness(.97); }
.tarot-actions button[data-tarot-draw="three"] {
  color: #f3e2b6 !important;
  background: linear-gradient(150deg, rgba(216,182,118,.16), rgba(216,182,118,.08)) !important;
  border-color: rgba(216, 182, 118, .5);
  box-shadow: inset 0 1px rgba(255, 244, 214, .14) !important;
}

/* 解读者一行：底部加一条细金线 */
.tarot-reader {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(216, 182, 118, .2);
}
.tarot-reader span {
  background: radial-gradient(circle at 50% 35%, rgba(216,182,118,.3), rgba(216,182,118,.1)) !important;
  box-shadow: 0 0 0 1px rgba(216,182,118,.3), 0 6px 16px rgba(0,0,0,.25);
}
.tarot-reader strong {
  font-family: "Songti SC", Georgia, serif; letter-spacing: .04em;
}

/* 牌面：更挺括的古金框 + 柔光 + 错位入场动效 */
.tarot-card {
  background: linear-gradient(150deg, #e7c887, #b98a3f 46%, #7c531c) !important;
  box-shadow: 0 20px 34px rgba(0,0,0,.42), 0 2px 0 rgba(255,244,214,.4) inset, inset 0 0 0 1px rgba(120,82,30,.5) !important;
  animation: tarotCardRise .6s cubic-bezier(.2,.7,.25,1) both;
  animation-delay: calc(var(--card-index, 0) * .12s + .05s);
}
.tarot-card-inner {
  border-color: rgba(247, 231, 191, .6) !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(216, 182, 118, .22), transparent 42%),
    linear-gradient(45deg, transparent calc(50% - .7px), rgba(244,217,159,.3) 50%, transparent calc(50% + .7px)),
    linear-gradient(-45deg, transparent calc(50% - .7px), rgba(244,217,159,.2) 50%, transparent calc(50% + .7px)),
    linear-gradient(180deg, #0a1c40, #0b1431 66%, #141430) !important;
}
.tarot-roman {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  color: #f6e6c0 !important; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.tarot-star-map i { box-shadow: 0 0 14px rgba(247, 231, 191, .85); animation: tarotTwinkle 3.2s ease-in-out infinite; }
.tarot-star-map i:nth-child(2) { animation-delay: .6s; }
.tarot-star-map i:nth-child(3) { animation-delay: 1.1s; }
.tarot-star-map i:nth-child(4) { animation-delay: 1.7s; }
.tarot-star-map i:nth-child(5) { animation-delay: 2.3s; }
.tarot-sigil-ring b { text-shadow: 0 0 14px rgba(244, 217, 159, .5); }
.tarot-card-caption strong {
  letter-spacing: .26em; text-transform: uppercase; font-size: 10.5px;
  color: var(--tarot-gold) !important;
}
.tarot-card-caption span { font-family: "Songti SC", Georgia, serif; }

@keyframes tarotCardRise {
  from { opacity: 0; transform: translateY(18px) rotateX(12deg) scale(.94); }
  to { opacity: 1; transform: none; }
}
.tarot-card.reversed { animation: none; }
@keyframes tarotTwinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* 羊皮纸解读：暖象牙、首行金线、衬线正文、柔和纸纹 */
.tarot-reading-text {
  border-radius: 20px !important;
  padding: 16px 16px 15px !important;
  color: #34281a !important;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.5), transparent 40%),
    linear-gradient(180deg, #f4e7c9, #e7d3a6) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.6), inset 0 0 0 1px rgba(176,132,56,.28), 0 14px 30px rgba(0,0,0,.26) !important;
}
.tarot-reading-text p { font-size: 14px; line-height: 1.74; }
.tarot-reading-text p:first-child {
  padding-bottom: 11px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(176, 132, 56, .3);
  font-weight: 700; color: #2c2114;
}

/* 空态：更有仪式感 */
.tarot-empty-oracle span {
  background: radial-gradient(circle at 50% 32%, rgba(216,182,118,.3), rgba(216,182,118,.08)) !important;
  box-shadow: 0 0 0 1px rgba(216,182,118,.28), 0 0 40px rgba(216,182,118,.18);
}
.tarot-empty-oracle strong { font-family: "Songti SC", Georgia, serif; font-size: 16px; letter-spacing: .04em; }

/* 记录行：左侧金条指示当前选中 */
.tarot-history-row { border-radius: 15px !important; background: rgba(10, 12, 30, .34) !important; transition: border-color .15s ease, background .15s ease; }
.tarot-history-row.active {
  border-color: rgba(216, 182, 118, .55) !important;
  background: linear-gradient(90deg, rgba(216,182,118,.2), rgba(216,182,118,.08)) !important;
  box-shadow: inset 3px 0 0 var(--tarot-gold);
}
.tarot-history-head strong { font-family: "Songti SC", Georgia, serif; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .tarot-card { animation: none; }
  .tarot-star-map i { animation: none; }
}
.shop-custom-button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  padding: 0 12px;
  color: var(--skin-button-text, #fff);
  background: linear-gradient(145deg, #6f7f63, #9aa57d);
  font-weight: 900;
}
@media (max-width: 420px) {
  .shop-toolbar-main.shop-toolbar-main-3 {
    grid-template-columns: 1fr;
  }
}


/* 2026.06.15 xiaohongshu link card */
.xhs-link-card {
  width: min(285px, 72vw);
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 10px;
  align-items: stretch;
  border: 0;
  border-radius: 18px;
  padding: 9px;
  background: color-mix(in srgb, var(--surface-strong, #fffdf7) 88%, #f7dfe3 12%);
  color: var(--skin-text, #2c241d);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--skin-text, #17181c) 8%, transparent);
  text-align: left;
}
.message-stack.user .xhs-link-card,
.xhs-link-card.user {
  background: linear-gradient(145deg, #fff7f8, #ffe7ec);
}
.xhs-link-card.failed {
  background: linear-gradient(145deg, #fff7ed, #f9e0c8);
}
.xhs-link-cover {
  width: 68px;
  min-height: 88px;
  border-radius: 13px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #ff2442, #b61e35);
  font-size: 13px;
  font-weight: 950;
}
.xhs-link-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xhs-link-info {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
}
.xhs-link-kicker {
  color: #d32941;
  font-size: 11px;
  font-weight: 950;
}
.xhs-link-info strong {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--skin-text, #251d18);
  font-size: 14px;
  line-height: 1.35;
}
.xhs-link-info small {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--skin-muted, #736456);
  font-size: 12px;
  line-height: 1.45;
}
.xhs-link-info em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a9404e;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}


.xhs-link-card.pending .xhs-link-kicker::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: xhsDots 1.1s steps(3, end) infinite;
}
@keyframes xhsDots {
  0% { content: ""; }
  33% { content: "·"; }
  66% { content: "··"; }
  100% { content: "···"; }
}


/* 2026.06.15 douyin link card */
.douyin-link-card {
  width: min(285px, 72vw);
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 10px;
  align-items: stretch;
  border: 0;
  border-radius: 18px;
  padding: 9px;
  background: linear-gradient(145deg, #111318, #252836);
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--skin-text, #17181c) 12%, transparent);
  text-align: left;
}
.message-stack.user .douyin-link-card,
.douyin-link-card.user {
  background: linear-gradient(145deg, #161820, #2a2632);
}
.douyin-link-card.failed {
  background: linear-gradient(145deg, #2b241e, #46322a);
}
.douyin-link-cover {
  width: 68px;
  min-height: 88px;
  border-radius: 13px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 70% 30%, rgba(37, 244, 238, .75), transparent 28%),
    radial-gradient(circle at 32% 72%, rgba(254, 44, 85, .72), transparent 28%),
    linear-gradient(145deg, #050506, #1b1d23);
  font-size: 13px;
  font-weight: 950;
}
.douyin-link-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.douyin-link-info {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
}
.douyin-link-kicker {
  color: #7ff8f3;
  font-size: 11px;
  font-weight: 950;
}
.douyin-link-info strong {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}
.douyin-link-info small {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height: 1.45;
}
.douyin-link-info em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ff8aa0;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.douyin-link-card.pending .douyin-link-kicker::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: douyinDots 1.1s steps(3, end) infinite;
}
@keyframes douyinDots {
  0% { content: ""; }
  33% { content: "·"; }
  66% { content: "··"; }
  100% { content: "···"; }
}

/* 2026.06.15 相册 + 收藏原格式 */
.discover-icon.album {
  background: linear-gradient(145deg, #7aa9ff, #6d78d8 58%, #b890ff);
}
.wechat-album-page {
  padding: 14px 14px 86px;
  gap: 12px;
}
.wechat-album-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(240,244,255,.78));
  box-shadow: 0 14px 36px rgba(31, 42, 68, .10);
  border: 1px solid rgba(255,255,255,.7);
}
.wechat-album-hero h2 {
  margin: 0 0 4px;
  font-size: 21px;
  color: rgba(31, 36, 48, .94);
}
.wechat-album-hero p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(31, 36, 48, .58);
}
.wechat-album-hero > button:last-child,
.wechat-album-actions button,
.wechat-album-category-tools button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(116, 129, 214, .13);
  color: rgba(67, 72, 128, .95);
  font-size: 12px;
  font-weight: 700;
}
.wechat-album-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.wechat-album-tabs::-webkit-scrollbar { display: none; }
.wechat-album-tabs button {
  flex: 0 0 auto;
  min-width: 72px;
  border: 0;
  border-radius: 16px;
  padding: 9px 12px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 22px rgba(31, 42, 68, .08);
  color: rgba(31, 36, 48, .72);
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.wechat-album-tabs button.active {
  background: rgba(97, 111, 214, .18);
  color: rgba(51, 59, 134, .98);
}
.wechat-album-tabs small {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  font-size: 10px;
}
.wechat-album-category-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  color: rgba(31,36,48,.62);
  font-size: 12px;
}
.wechat-album-category-tools span { flex: 1; }
.wechat-album-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.wechat-album-card {
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(31, 42, 68, .10);
  border: 1px solid rgba(255,255,255,.72);
}
.wechat-album-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border: 0;
  padding: 0;
  background: linear-gradient(145deg, rgba(226,230,244,.9), rgba(247,248,252,.9));
  overflow: hidden;
}
.wechat-album-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wechat-album-info {
  padding: 10px 10px 8px;
  display: grid;
  gap: 4px;
}
.wechat-album-info strong {
  font-size: 13px;
  color: rgba(31,36,48,.9);
}
.wechat-album-info small,
.wechat-album-info p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(31,36,48,.55);
}
.wechat-album-info em {
  justify-self: start;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(112, 125, 205, .12);
  color: rgba(72, 78, 142, .85);
  font-style: normal;
  font-size: 10px;
}
.wechat-album-actions {
  display: flex;
  gap: 6px;
  padding: 0 10px 10px;
  flex-wrap: wrap;
}
.wechat-album-actions button:last-child {
  background: rgba(31,36,48,.06);
  color: rgba(31,36,48,.58);
}
.wechat-album-empty {
  grid-column: 1 / -1;
  padding: 26px 18px;
  border-radius: 20px;
  text-align: center;
  background: rgba(255,255,255,.78);
  color: rgba(31,36,48,.56);
}
.favorite-voice-card {
  border-radius: 18px;
  padding: 13px;
  background: rgba(245, 248, 255, .92);
  border: 1px solid rgba(116, 129, 214, .16);
  display: grid;
  gap: 10px;
}
.favorite-voice-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  color: rgba(31, 36, 48, .72);
  font-size: 12px;
}
.favorite-voice-head strong {
  color: rgba(31,36,48,.9);
  font-size: 13px;
}
.favorite-voice-card audio {
  width: 100%;
  min-height: 34px;
}
.favorite-voice-card p,
.favorite-voice-card small {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(31,36,48,.62);
}
.favorite-original-card.transfer strong {
  font-size: 22px;
  color: rgba(194, 84, 84, .92);
}
.favorite-original-card.location {
  background: linear-gradient(145deg, rgba(236,249,244,.94), rgba(246,250,255,.92));
}
html[data-ui-mode="dark"] .wechat-album-hero,
html[data-ui-mode="dark"] .wechat-album-tabs button,
html[data-ui-mode="dark"] .wechat-album-category-tools,
html[data-ui-mode="dark"] .wechat-album-card,
html[data-ui-mode="dark"] .wechat-album-empty,
html[data-ui-mode="dark"] .favorite-voice-card {
  background: rgba(34, 37, 48, .82);
  border-color: rgba(255,255,255,.08);
  color: rgba(244,246,250,.86);
}
html[data-ui-mode="dark"] .wechat-album-hero h2,
html[data-ui-mode="dark"] .wechat-album-info strong,
html[data-ui-mode="dark"] .favorite-voice-head strong {
  color: rgba(244,246,250,.94);
}
html[data-ui-mode="dark"] .wechat-album-hero p,
html[data-ui-mode="dark"] .wechat-album-info small,
html[data-ui-mode="dark"] .wechat-album-info p,
html[data-ui-mode="dark"] .favorite-voice-card p,
html[data-ui-mode="dark"] .favorite-voice-card small {
  color: rgba(244,246,250,.62);
}

/* 2026.06.15 album-favorites-fix1: make album taps and preview reliable in iOS WebView */
.wechat-album-page :where(button, .wechat-album-photo) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.image-preview-overlay {
  z-index: 99970 !important;
  touch-action: manipulation;
}
.image-preview-save,
.image-preview-close {
  touch-action: manipulation;
}

/* ============================================================
   日记 / 情侣日记 —— 真·笔记本展现形式
   纸张质感 + 横格线 + 左侧红色装订线 + 手写体
   ============================================================ */
:root {
  --diary-ink: #3a2e22;
  --diary-ink-soft: #6f5f4c;
  --diary-rule: rgba(72, 96, 138, 0.18);
  --diary-margin: rgba(206, 92, 86, 0.55);
  --diary-paper-a: #fdf8ec;
  --diary-paper-b: #f6edd6;
  --diary-hand: "Kaiti SC", "STKaiti", "Kaiti TC", KaiTi, "楷体", "楷体_GB2312", "Songti SC", "宋体", ui-serif, Georgia, serif;
}

/* 列表间距：让一页页纸之间留白 */
.diary-entry-list.diary-timeline {
  gap: 18px !important;
}

/* 外层卡片彻底去壳，纸张本身才是视觉主体 */
:root .diary-card.diary-paper-card {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
:root .diary-card.diary-paper-card.favorite::before {
  display: none !important;
}

/* —— 纸张 —— */
.diary-paper {
  position: relative;
  border-radius: 4px 12px 12px 4px;
  padding: 16px 18px 20px 48px;
  color: var(--diary-ink);
  background:
    linear-gradient(180deg, var(--diary-paper-a), var(--diary-paper-b)),
    radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.55), transparent 42%);
  background-blend-mode: normal;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 10px 26px rgba(74, 52, 28, 0.16),
    0 2px 6px rgba(74, 52, 28, 0.1);
  overflow: hidden;
}
/* 左侧红色装订线 */
.diary-paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 34px;
  width: 1.5px;
  background: var(--diary-margin);
  opacity: 0.85;
}
/* 装订孔 / 线圈暗示 */
.diary-paper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 6px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 14px, rgba(120, 96, 64, 0.32) 0 2.4px, transparent 3px),
    radial-gradient(circle at 50% 52px, rgba(120, 96, 64, 0.28) 0 2.4px, transparent 3px),
    radial-gradient(circle at 50% 90px, rgba(120, 96, 64, 0.24) 0 2.4px, transparent 3px),
    radial-gradient(circle at 50% 128px, rgba(120, 96, 64, 0.2) 0 2.4px, transparent 3px);
  pointer-events: none;
}

/* 收藏星 —— 像盖在纸角的印记，无药丸底 */
.diary-paper .diary-favorite {
  position: absolute;
  top: 10px;
  right: 12px;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--diary-ink-soft) !important;
  font-size: 19px !important;
  line-height: 1 !important;
}
.diary-paper .diary-favorite.active {
  color: #d98a2b !important;
}

/* 日期抬头 —— 写在纸的最上一行 */
.diary-paper-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-right: 26px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(120, 96, 64, 0.16);
  font-family: var(--diary-hand);
}
.diary-paper-date {
  color: var(--diary-ink) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.diary-paper-time {
  color: var(--diary-ink-soft) !important;
  font-size: 12px;
}
.diary-paper-mood {
  margin-left: auto;
  color: #9a5d3a !important;
  font-size: 12.5px;
}

/* 横格区：标题 + 正文 + 标签都落在格线上 */
.diary-paper-sheet {
  --rule-h: 30px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule-h) - 1px),
    var(--diary-rule) calc(var(--rule-h) - 1px),
    var(--diary-rule) var(--rule-h)
  );
  background-position: left top;
}
.diary-paper-title {
  margin: 0 !important;
  color: var(--diary-ink) !important;
  font-family: var(--diary-hand);
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 30px !important;
  letter-spacing: 0.3px !important;
}
.diary-paper-body {
  margin: 0 !important;
  color: var(--diary-ink) !important;
  font-family: var(--diary-hand);
  font-size: 16px !important;
  line-height: 30px !important;
  letter-spacing: 0.2px;
  white-space: pre-wrap;
  word-break: break-word;
}
.diary-paper-card.compact .diary-paper-body {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.diary-paper-tags {
  color: #8a6a8c !important;
  font-family: var(--diary-hand);
  font-size: 13px;
  line-height: 30px !important;
}
.diary-paper-tags span {
  margin-right: 8px;
  white-space: nowrap;
}
/* 角落悄悄话 */
.diary-paper-aside {
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 2px dashed rgba(206, 92, 86, 0.5);
  background: rgba(206, 92, 86, 0.06);
  border-radius: 0 10px 10px 0;
  font-family: var(--diary-hand);
}
.diary-paper-aside span {
  display: block;
  color: #b06a52 !important;
  font-size: 12px;
  margin-bottom: 2px;
}
.diary-paper-aside p {
  margin: 0 !important;
  color: var(--diary-ink) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* —— 纸张下方的工具托盘（非纸面内容，弱化处理） —— */
.diary-tray {
  display: grid;
  gap: 10px;
  margin: 8px 6px 0;
  padding-top: 10px;
}
.diary-tray.compact-tray {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.diary-tray-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--skin-muted, #8a7a66);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diary-open-btn {
  flex: none;
  min-height: 30px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(150, 110, 70, 0.32) !important;
  background: rgba(255, 250, 238, 0.9) !important;
  color: #7a5a36 !important;
  font-size: 12px;
  font-weight: 800;
}

/* ===================== 情侣日记 · 共写本 ===================== */
:root .couple-diary-card.couple-diary-paper-card,
html[data-ui-mode="dark"] body.theme-apple .couple-diary-card.couple-diary-paper-card,
html[data-ui-mode="dark"] body.theme-aurora .couple-diary-card.couple-diary-paper-card {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
.couple-diary-list {
  gap: 16px !important;
}
.couple-diary-paper {
  position: relative;
  border-radius: 4px 12px 12px 4px;
  padding: 14px 16px 18px 44px;
  color: var(--diary-ink);
  background:
    linear-gradient(180deg, #fdf4f0, #f7e7df),
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.55), transparent 44%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 10px 26px rgba(120, 70, 70, 0.16);
  overflow: hidden;
}
.couple-diary-paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 1.5px;
  background: rgba(206, 110, 120, 0.55);
}
.couple-diary-heart {
  position: absolute;
  top: 10px;
  right: 13px;
  color: #d77a8a;
  font-size: 15px;
  line-height: 1;
}
.couple-diary-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-right: 24px;
  padding-bottom: 7px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(150, 90, 100, 0.16);
  font-family: var(--diary-hand);
}
.couple-diary-date {
  color: var(--diary-ink) !important;
  font-size: 13px;
  font-weight: 700;
}
.couple-diary-label {
  margin-left: auto;
  color: #b06a78 !important;
  font-size: 12px;
}
.couple-diary-sheet {
  --rule-h: 28px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule-h) - 1px),
    rgba(150, 90, 100, 0.15) calc(var(--rule-h) - 1px),
    rgba(150, 90, 100, 0.15) var(--rule-h)
  );
}
.couple-diary-title {
  display: block;
  margin: 0 !important;
  color: var(--diary-ink) !important;
  font-family: var(--diary-hand);
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 28px !important;
}
.couple-diary-body {
  margin: 0 !important;
  color: var(--diary-ink) !important;
  font-family: var(--diary-hand);
  font-size: 15px !important;
  line-height: 28px !important;
  white-space: pre-wrap;
  word-break: break-word;
}
.couple-diary-quote {
  margin: 6px 0 0 !important;
  padding-left: 10px;
  border-left: 2px solid rgba(206, 110, 120, 0.5);
  color: #9a5d6a !important;
  font-family: var(--diary-hand);
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* 深色模式下纸张仍然保留暖色，只把工具托盘文字调亮 */
:root[data-ui-mode="dark"] .diary-tray-meta {
  color: rgba(226, 214, 196, 0.78);
}

@media (max-width: 430px) {
  .diary-paper {
    padding: 14px 14px 18px 44px;
  }
  .couple-diary-paper {
    padding: 13px 13px 16px 40px;
  }
}

/* 颜色锁定：盖过 body.theme-apple :where(h1,h2,h3,strong,p…) 的标题/正文配色，
   确保深色主题下纸面字迹仍是暖墨色，不被改成近白色 */
:root .diary-paper .diary-paper-title { color: var(--diary-ink) !important; }
:root .diary-paper .diary-paper-aside p { color: var(--diary-ink) !important; }
:root .couple-diary-paper-card .couple-diary-paper .couple-diary-title { color: var(--diary-ink) !important; }
:root .couple-diary-paper-card .couple-diary-paper .couple-diary-body { color: var(--diary-ink) !important; }
:root .couple-diary-paper-card .couple-diary-paper .couple-diary-quote { color: #9a5d6a !important; }
:root .couple-diary-paper-card .couple-diary-paper .couple-diary-date { color: var(--diary-ink) !important; }
:root .couple-diary-paper-card .couple-diary-paper .couple-diary-label { color: #b06a78 !important; }

/* 20260615 theater game + fanfic polish */
.theater-home-app,
.fanfic-picker-app,
.theater-fanfic-app {
  min-height: 100%;
  padding-bottom: calc(18px + var(--safe-bottom));
}

.theater-home-hero,
.fanfic-head,
.theater-select-head {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(117, 91, 168, 0.16);
  background:
    radial-gradient(circle at 12% 0%, rgba(152, 126, 255, 0.22), transparent 36%),
    radial-gradient(circle at 86% 12%, rgba(113, 176, 128, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(246,240,255,.82));
  box-shadow: 0 18px 42px rgba(46, 36, 72, 0.10);
}

.theater-home-hero h2,
.fanfic-head h2,
.theater-select-head h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: .04em;
}

.theater-hero-orbit {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  border: 1px solid rgba(126, 94, 180, .16);
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.theater-hero-orbit span { position: absolute; color: rgba(91, 65, 132, .72); font-weight: 900; }
.theater-hero-orbit span:nth-child(1) { left: 12px; top: 10px; }
.theater-hero-orbit span:nth-child(2) { right: 13px; top: 25px; }
.theater-hero-orbit span:nth-child(3) { left: 26px; bottom: 9px; }

.theater-mode-entry-grid {
  grid-template-columns: 1fr;
}

.theater-entry-card {
  min-height: 150px;
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  align-content: end;
}
.theater-entry-card i {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  font-style: normal;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(30,36,44,.08);
}
.theater-entry-card.free {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 213, 139, .34), transparent 34%),
    linear-gradient(145deg, rgba(255, 251, 239, .94), rgba(238, 246, 232, .84));
}
.theater-entry-card.game {
  background:
    radial-gradient(circle at 18% 14%, rgba(104, 88, 190, .24), transparent 34%),
    linear-gradient(145deg, rgba(247, 245, 255, .96), rgba(234, 241, 255, .84));
}
.theater-entry-card.fanfic {
  background:
    radial-gradient(circle at 18% 14%, rgba(230, 122, 152, .24), transparent 34%),
    linear-gradient(145deg, rgba(255, 247, 251, .96), rgba(247, 241, 231, .86));
}

.theater-mini-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  color: var(--skin-muted, #7a6a58);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.theater-mode-badge.game {
  background: linear-gradient(135deg, rgba(114, 90, 210, .24), rgba(111, 170, 128, .20));
}

.theater-game-app {
  gap: 10px;
}
.theater-game-hud {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid rgba(114, 90, 210, .14);
  background:
    radial-gradient(circle at 90% 0%, rgba(122, 102, 220, .18), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(246, 247, 255, .78));
  box-shadow: 0 14px 38px rgba(48, 40, 86, .10);
}
.theater-game-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.theater-game-topline small {
  display: block;
  color: rgba(91, 71, 130, .72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.theater-game-topline strong { font-size: 17px; }
.theater-game-topline button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(36, 31, 48, .86);
  color: #fff;
  font-weight: 900;
}
.theater-game-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.theater-game-state-grid div {
  min-width: 0;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(100, 82, 146, .08);
}
.theater-game-state-grid span,
.theater-game-hooks span {
  display: block;
  color: rgba(93, 79, 120, .74);
  font-size: 11px;
  font-weight: 900;
}
.theater-game-state-grid strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.theater-game-hooks {
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.52);
}
.theater-game-hooks p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; }
.theater-game-theme-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.theater-game-theme {
  flex: 0 0 112px;
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 9px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  background: rgba(255,255,255,.70);
  color: var(--skin-text, #2c241d);
  box-shadow: inset 0 0 0 1px rgba(100,82,146,.08);
}
.theater-game-theme.active {
  background: rgba(38, 31, 58, .90);
  color: #fff;
}
.theater-game-theme b { font-size: 18px; }
.theater-game-theme strong { font-size: 12px; }
.theater-game-theme small { font-size: 10px; line-height: 1.3; opacity: .78; }
.theater-game-choice-row {
  display: grid;
  gap: 8px;
}
.theater-game-choice-row button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  background: rgba(38, 31, 58, .88);
  color: #fff;
  text-align: left;
  font-weight: 850;
}
.theater-game-choice-row button span {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
}
.theater-game-empty-choice {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  color: rgba(74, 61, 102, .74);
  font-size: 12px;
  font-weight: 800;
}
.theater-line.game-line {
  border-radius: 22px;
  background: rgba(255,255,255,.80);
  box-shadow: 0 12px 32px rgba(44, 34, 76, .08);
}

.theater-fanfic-app {
  display: grid;
  gap: 12px;
  overflow: auto;
}
.theater-fanfic-hero,
.theater-fanfic-card,
.theater-empty-pretty {
  border: 1px solid rgba(154, 108, 129, .14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 0%, rgba(222, 142, 170, .18), transparent 36%),
    rgba(255,255,255,.84);
  box-shadow: 0 14px 34px rgba(64, 48, 64, .08);
}
.theater-fanfic-hero {
  padding: 14px;
}
.theater-fanfic-hero > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.theater-fanfic-hero h2 { margin: 0 0 4px; font-size: 20px; }
.theater-fanfic-hero p { margin: 0; color: var(--skin-muted, #7b6b5a); font-size: 12px; }
.theater-fanfic-card { padding: 12px; }
.fanfic-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.fanfic-control-grid label,
.theater-fanfic-controls textarea {
  display: grid;
  gap: 5px;
}
.fanfic-control-grid span {
  color: var(--skin-muted, #7b6b5a);
  font-size: 11px;
  font-weight: 900;
}
.fanfic-control-grid select,
.theater-fanfic-controls textarea {
  width: 100%;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: var(--skin-text, #2c241d);
  padding: 9px;
  font-weight: 800;
}
.theater-fanfic-controls textarea {
  margin-top: 8px;
  resize: none;
  line-height: 1.45;
}
.fanfic-generate-button {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #2d2538, #78618e);
  color: #fff;
  font-weight: 900;
}
.fanfic-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 800;
}
.theater-fanfic-list { display: grid; gap: 10px; }
.fanfic-draft-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.fanfic-draft-card header small {
  display: block;
  margin-top: 3px;
  color: var(--skin-muted, #7b6b5a);
  font-size: 11px;
}
.fanfic-draft-card header button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(45,37,56,.88);
  color: #fff;
  font-weight: 900;
}
.fanfic-chapter-content {
  max-height: 360px;
  overflow: auto;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.56);
}
.theater-empty-pretty {
  display: grid;
  gap: 4px;
  padding: 18px;
  text-align: center;
  color: var(--skin-muted, #7b6b5a);
}
.theater-empty-pretty strong { color: var(--skin-text, #2c241d); }

@media (max-width: 430px) {
  .fanfic-control-grid { grid-template-columns: 1fr 1fr; }
  .theater-game-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theater-mini-chip { display: none; }
}


/* 20260615 theater game v2: readable cards, collapsible HUD, parallel game sessions */
.theater-entry-card {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 76px 18px 16px !important;
}
.theater-entry-card i { z-index: 1; }
.theater-entry-card strong,
.theater-entry-card span {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.theater-entry-card strong {
  color: var(--skin-text, #2c241d) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.theater-entry-card span {
  color: rgba(49, 45, 64, .72) !important;
  line-height: 1.55 !important;
}
.theater-session-grid { grid-template-columns: 1fr !important; }
.theater-game-session-card {
  min-height: 116px;
  justify-items: start !important;
  text-align: left !important;
  padding: 14px !important;
  border: 1px solid rgba(100, 82, 146, .12) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(122, 102, 220, .16), transparent 34%),
    rgba(255,255,255,.78) !important;
}
.theater-game-session-card b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.66);
  font-size: 21px;
}
.theater-game-session-card.active {
  outline: 2px solid rgba(114, 90, 210, .22);
  background: linear-gradient(145deg, rgba(248,245,255,.96), rgba(237,245,255,.84)) !important;
}
.theater-game-session-card.new { border-style: dashed !important; }
.app-body.date-mode .date-app.theater-game-app { grid-template-rows: auto auto minmax(0, 1fr) auto !important; }
.theater-game-hud {
  flex: 0 0 auto !important;
  max-height: min(54vh, 430px);
  overflow: hidden;
}
.theater-game-hud.collapsed {
  gap: 8px;
  padding: 10px;
  max-height: none;
}
.theater-game-topline strong { display: block; max-width: 100%; }
.theater-game-topline em {
  display: block;
  max-width: min(56vw, 360px);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(74, 61, 102, .68);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.theater-game-top-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.theater-game-top-actions button {
  min-height: 30px !important;
  padding: 0 10px !important;
}
.theater-game-choice-row {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 2px !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.theater-game-choice-row button {
  flex: 0 0 min(82%, 420px) !important;
  min-height: 52px !important;
  scroll-snap-align: start;
  line-height: 1.45 !important;
}
.theater-game-hud.collapsed .theater-game-choice-row button { flex-basis: min(76%, 380px) !important; }
.theater-game-theme-strip { max-height: 92px; }
.app-body.date-mode .date-app.theater-game-app .date-messages { padding-bottom: calc(150px + var(--safe-bottom)) !important; }
@media (max-width: 430px) {
  .theater-game-hud { max-height: 46vh; }
  .theater-game-topline { align-items: flex-start !important; }
  .theater-game-topline em { max-width: 48vw; }
  .theater-game-choice-row button { flex-basis: 84% !important; }
}


/* 20260615 theater game + fanfic v3: readable choices and collapsible fanfic controls */
.theater-game-choice-row button {
  border: 1px solid rgba(118, 95, 156, .16) !important;
  background:
    radial-gradient(circle at 6% 0%, rgba(154, 137, 220, .16), transparent 40%),
    rgba(255,255,255,.86) !important;
  color: var(--skin-text, #2c241d) !important;
  box-shadow: 0 10px 24px rgba(49, 40, 76, .08), inset 0 0 0 1px rgba(255,255,255,.58) !important;
  text-shadow: none !important;
}
.theater-game-choice-row button span {
  background: rgba(112, 91, 170, .14) !important;
  color: #5b4680 !important;
  font-weight: 950 !important;
}
.theater-game-choice-row button:active {
  transform: translateY(1px);
  background: rgba(246, 242, 255, .96) !important;
}
.theater-game-theme.active {
  border: 1px solid rgba(112, 91, 170, .20) !important;
  background:
    radial-gradient(circle at 10% 4%, rgba(154, 137, 220, .24), transparent 44%),
    linear-gradient(145deg, rgba(250, 247, 255, .96), rgba(238, 245, 255, .90)) !important;
  color: var(--skin-text, #2c241d) !important;
  box-shadow: 0 12px 28px rgba(54, 44, 86, .10), inset 0 0 0 1px rgba(255,255,255,.60) !important;
}
.theater-game-theme.active small,
.theater-game-theme.active strong {
  color: var(--skin-text, #2c241d) !important;
}
.theater-fanfic-controls {
  display: grid;
  gap: 10px;
}
.fanfic-controls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fanfic-controls-head strong {
  display: block;
  color: var(--skin-text, #2c241d);
  font-size: 15px;
}
.fanfic-controls-head span {
  display: block;
  margin-top: 3px;
  color: var(--skin-muted, #7b6b5a);
  font-size: 11px;
  font-weight: 850;
}
.fanfic-controls-head button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(45, 37, 56, .88);
  color: #fff;
  font-weight: 900;
}
.theater-fanfic-controls.collapsed {
  padding: 10px 12px;
  border-radius: 18px;
}
.fanfic-controls-body[hidden] {
  display: none !important;
}
.fanfic-controls-body {
  display: grid;
  gap: 8px;
}
.theater-fanfic-app .theater-fanfic-list {
  min-height: 0;
}


/* 20260615 theater game + fanfic v4: compact fanfic header rows */
.app-body.date-mode .theater-fanfic-app {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: 10px 12px calc(12px + var(--safe-bottom)) !important;
}
.theater-fanfic-hero {
  min-height: 58px !important;
  padding: 8px 10px !important;
  border-radius: 18px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}
.theater-fanfic-hero > div {
  min-width: 0 !important;
  margin-top: 0 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  align-items: center !important;
}
.theater-fanfic-hero .theater-flow-back {
  justify-self: start !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}
.theater-fanfic-hero .date-person-avatar {
  grid-row: 1 / span 2 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}
.theater-fanfic-hero h2 {
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.theater-fanfic-hero p {
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.theater-fanfic-controls.collapsed,
.theater-fanfic-card.theater-fanfic-controls.collapsed {
  min-height: 54px !important;
  padding: 8px 10px !important;
  border-radius: 18px !important;
}
.theater-fanfic-controls:not(.collapsed) {
  padding: 10px !important;
  border-radius: 18px !important;
}
.theater-fanfic-controls .fanfic-controls-head {
  min-height: 38px !important;
}
.fanfic-controls-head strong {
  font-size: 14px !important;
  line-height: 1.15 !important;
}
.fanfic-controls-head span {
  margin-top: 2px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fanfic-controls-head button {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
}
.theater-fanfic-app .theater-fanfic-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
}
.theater-fanfic-list .theater-empty-pretty {
  min-height: 180px !important;
  padding: 18px 14px !important;
  border-radius: 20px !important;
  align-content: center !important;
}
.theater-fanfic-list .fanfic-draft-card {
  min-height: min(520px, calc(100dvh - 310px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding: 10px !important;
  border-radius: 20px !important;
}
.theater-fanfic-list .fanfic-draft-card header {
  margin-bottom: 6px !important;
}
.fanfic-chapter-content {
  max-height: none !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 12px !important;
  border-radius: 14px !important;
}
@media (max-width: 430px) {
  .app-body.date-mode .theater-fanfic-app { padding-left: 10px !important; padding-right: 10px !important; }
  .theater-fanfic-hero { grid-template-columns: auto minmax(0, 1fr) !important; }
  .theater-fanfic-hero > div { grid-template-columns: 38px minmax(0, 1fr) !important; }
  .theater-fanfic-hero .date-person-avatar { width: 38px !important; height: 38px !important; border-radius: 11px !important; }
  .theater-fanfic-hero h2 { font-size: 16px !important; }
}

/* ============================================================
   约会/剧场 · 细状态条（仅当角色输出含状态块时出现）
   默认折叠成一行，点开看全部；心声二级折叠。对普通人设零影响。
   ============================================================ */
.date-status-bar {
  margin: 0 0 8px;
  border: 1px solid rgba(150, 110, 70, 0.22);
  border-radius: 12px;
  background: rgba(255, 251, 242, 0.72);
  overflow: hidden;
}
:root[data-ui-mode="dark"] .date-status-bar {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
.date-status-bar > summary.ds-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #7a5a36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-ui-mode="dark"] .date-status-bar > summary.ds-summary { color: rgba(232, 222, 206, 0.92); }
.date-status-bar > summary.ds-summary::-webkit-details-marker { display: none; }
.date-status-bar .ds-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c98a3a;
  box-shadow: 0 0 0 3px rgba(201, 138, 58, 0.18);
}
.date-status-bar[open] > summary.ds-summary {
  border-bottom: 1px solid rgba(150, 110, 70, 0.16);
  white-space: normal;
}
.date-status-bar .ds-body { padding: 8px 12px 10px; }
.date-status-bar .ds-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}
.date-status-bar .ds-item span {
  display: block;
  font-size: 11px;
  color: #b08a5a;
  margin-bottom: 1px;
}
:root[data-ui-mode="dark"] .date-status-bar .ds-item span { color: rgba(220, 200, 170, 0.7); }
.date-status-bar .ds-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--skin-text, #3a2f26);
  word-break: break-word;
}
.date-status-bar .ds-psyche {
  margin-top: 8px;
  border-top: 1px dashed rgba(150, 110, 70, 0.25);
  padding-top: 6px;
}
.date-status-bar .ds-psyche > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #9a6b52;
}
.date-status-bar .ds-psyche > summary::-webkit-details-marker { display: none; }
.date-status-bar .ds-psyche > summary::before { content: "› "; }
.date-status-bar .ds-psyche[open] > summary::before { content: "⌄ "; }
.date-status-bar .ds-psyche p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8a6a5a;
  font-style: italic;
}
.date-status-bar .ds-psyche p span {
  font-style: normal;
  font-weight: 700;
  margin-right: 6px;
  color: #9a6b52;
}

/* === 2026.06.16 ElevenLabs human-like voice adapter === */
.voice-number-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.eleven-human-card {
  display: grid;
  gap: 9px;
  margin: 10px 0;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(143,100,45,.16)) 78%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-strong, #fff) 72%, transparent), color-mix(in srgb, var(--phone-bg, #fbf2df) 54%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.eleven-human-head {
  display: grid;
  gap: 3px;
}
.eleven-human-head strong {
  color: var(--skin-title, var(--text-main));
  font-size: 14px;
}
.eleven-human-head small {
  color: var(--skin-muted, var(--text-soft));
  font-size: 11.5px;
  line-height: 1.45;
}
.eleven-preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.eleven-preset-buttons button {
  border: 0;
  border-radius: 999px;
  min-height: 30px;
  padding: 0 10px;
  color: var(--skin-text, #2c241d);
  background: color-mix(in srgb, var(--skin-accent, #b58a55) 14%, var(--surface-strong, #fff));
  font-size: 11.5px;
  font-weight: 900;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--skin-text, #2b2520) 7%, transparent);
}
.eleven-preset-buttons button:active {
  transform: scale(.98);
}
@media (max-width: 430px) {
  .voice-number-grid.two { grid-template-columns: 1fr; }
}

/* 20260616 fanfic tag selector v20 */
.fanfic-control-grid-basic {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fanfic-tag-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(154, 108, 129, .12);
  border-radius: 18px;
  background: rgba(255,255,255,.46);
}
.fanfic-tag-panel-title,
.fanfic-tag-group header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.fanfic-tag-panel-title strong,
.fanfic-tag-group header strong {
  display: block;
  color: var(--skin-text, #2c241d);
  font-size: 13px;
  font-weight: 950;
}
.fanfic-tag-panel-title small,
.fanfic-tag-group header span {
  display: block;
  margin-top: 2px;
  color: var(--skin-muted, #7b6b5a);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}
.fanfic-tag-panel-title button,
.fanfic-tag-group header button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: rgba(45,37,56,.08);
  color: var(--skin-muted, #7b6b5a);
  min-height: 26px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
}
.fanfic-tag-group {
  display: grid;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px dashed rgba(154, 108, 129, .16);
}
.fanfic-tag-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.fanfic-tag-chip {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid rgba(78, 61, 84, .11);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: var(--skin-text, #2c241d);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(64,48,64,.04);
}
.fanfic-tag-chip.active {
  border-color: rgba(80, 60, 96, .38);
  background: linear-gradient(135deg, rgba(45,37,56,.92), rgba(120,97,142,.88));
  color: #fff;
  box-shadow: 0 8px 18px rgba(80,60,96,.18);
}
.fanfic-custom-tag-field {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(154, 108, 129, .16);
}
.fanfic-custom-tag-field span {
  color: var(--skin-muted, #7b6b5a);
  font-size: 11px;
  font-weight: 900;
}
.fanfic-custom-tag-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: var(--skin-text, #2c241d);
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 800;
}
.theater-fanfic-controls.collapsed .fanfic-controls-head span {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 430px) {
  .fanfic-tag-panel { padding: 9px; gap: 9px; }
  .fanfic-tag-chip { min-height: 29px; padding: 0 10px; font-size: 11px; }
  .fanfic-control-grid-basic { grid-template-columns: 1fr 1fr; }
}

/* 20260616 fanfic tag library v21: more tags + reliable mobile scrolling */
.app-body.date-mode .theater-fanfic-app {
  min-height: 0 !important;
  overflow: hidden !important;
}
.theater-fanfic-controls:not(.collapsed),
.theater-fanfic-card.theater-fanfic-controls:not(.collapsed) {
  min-height: 0 !important;
  max-height: min(76dvh, 680px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}
.theater-fanfic-controls:not(.collapsed) .fanfic-controls-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding: 0 2px 4px 0 !important;
  overscroll-behavior: contain !important;
}
.fanfic-tag-panel {
  min-height: 0 !important;
  overflow: visible !important;
}
.fanfic-tag-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 8px;
  border-radius: 15px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(154, 108, 129, .10);
}
.fanfic-tag-search {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.fanfic-tag-search span {
  color: var(--skin-muted, #7b6b5a);
  font-size: 10.5px;
  font-weight: 950;
}
.fanfic-tag-search input {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.82);
  color: var(--skin-text, #2c241d);
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 850;
}
.fanfic-tag-tools small {
  white-space: nowrap;
  color: var(--skin-muted, #7b6b5a);
  font-size: 11px;
  font-weight: 900;
  padding-bottom: 9px;
}
.fanfic-tag-row {
  flex-wrap: wrap !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}
.fanfic-tag-chip {
  max-width: 100%;
  white-space: nowrap;
}
.fanfic-tag-chip[hidden],
.fanfic-tag-group[hidden] {
  display: none !important;
}
.fanfic-tag-group {
  scroll-margin-top: 8px;
}
.fanfic-tag-group header {
  position: sticky;
  top: -1px;
  z-index: 1;
  padding: 3px 0 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 430px) {
  .theater-fanfic-controls:not(.collapsed),
  .theater-fanfic-card.theater-fanfic-controls:not(.collapsed) {
    max-height: min(78dvh, calc(100dvh - 132px)) !important;
  }
  .fanfic-tag-tools {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .fanfic-tag-tools small {
    padding-bottom: 0;
  }
  .fanfic-tag-row {
    gap: 6px !important;
  }
  .fanfic-tag-chip {
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }
}

/* 20260616 fanfic tag layout v22: bottom-only custom panel + background generation */
.theater-fanfic-controls:not(.collapsed),
.theater-fanfic-card.theater-fanfic-controls:not(.collapsed) {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
.theater-fanfic-controls:not(.collapsed) .fanfic-controls-body {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, auto) auto !important;
  gap: 10px !important;
  align-content: start !important;
  padding-right: 2px !important;
}
.fanfic-tag-panel {
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 0 !important;
}
.fanfic-tag-group header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.fanfic-generate-footer {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  gap: 9px !important;
  margin-top: 2px !important;
  padding: 10px !important;
  border: 1px solid rgba(154, 108, 129, .13) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,250,242,.72)) !important;
  box-shadow: 0 -6px 22px rgba(64, 48, 64, .05) !important;
  clear: both !important;
}
.fanfic-brief-field {
  display: grid !important;
  gap: 6px !important;
}
.fanfic-brief-field span,
.fanfic-generate-footer > small {
  color: var(--skin-muted, #7b6b5a) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}
.fanfic-generate-footer > small {
  opacity: .82 !important;
  text-align: center !important;
}
.fanfic-brief-field textarea,
.theater-fanfic-controls .fanfic-brief-field textarea {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 76px !important;
  margin: 0 !important;
  resize: vertical !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.88) !important;
  color: var(--skin-text, #2c241d) !important;
  padding: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}
.fanfic-generate-footer .fanfic-custom-tag-field {
  border-top: 0 !important;
  padding-top: 0 !important;
}
.fanfic-generate-footer .fanfic-generate-button {
  margin-top: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
.theater-fanfic-controls.generating .fanfic-controls-head strong::after {
  content: " · 生成中";
  color: color-mix(in srgb, var(--skin-accent, #b58a55) 78%, #2d2538);
}
.theater-fanfic-controls.generating .fanfic-status,
.fanfic-status:not([hidden]) {
  display: block !important;
  margin-top: 8px !important;
  border: 1px solid rgba(154, 108, 129, .12) !important;
  background: rgba(255,255,255,.72) !important;
}
.fanfic-generate-button:disabled,
.fanfic-draft-card header button:disabled {
  opacity: .62 !important;
  filter: grayscale(.18) !important;
}
@media (max-width: 430px) {
  .theater-fanfic-controls:not(.collapsed),
  .theater-fanfic-card.theater-fanfic-controls:not(.collapsed) {
    max-height: min(80dvh, calc(100dvh - 122px)) !important;
  }
  .fanfic-generate-footer {
    padding: 9px !important;
    border-radius: 16px !important;
  }
  .fanfic-brief-field textarea,
  .theater-fanfic-controls .fanfic-brief-field textarea {
    min-height: 72px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   约会/剧场 · 美化 HTML（沙箱 iframe，默认折叠）
   仅当正文含 <style>/完整 HTML 文档时出现；不影响纯文本与对白加深。
   ============================================================ */
.date-beautify {
  margin: 8px 0;
  border: 1px solid rgba(150, 110, 70, 0.22);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 251, 242, 0.6);
}
:root[data-ui-mode="dark"] .date-beautify {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}
.date-beautify > summary.db-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #7a5a36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-ui-mode="dark"] .date-beautify > summary.db-summary { color: rgba(232, 222, 206, 0.92); }
.date-beautify > summary.db-summary::-webkit-details-marker { display: none; }
.date-beautify .db-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c98a3a;
  box-shadow: 0 0 0 3px rgba(201, 138, 58, 0.18);
}
.date-beautify[open] > summary.db-summary { border-bottom: 1px solid rgba(150, 110, 70, 0.16); }
.date-beautify .db-frame {
  width: 100%;
  border: 0;
  display: block;
  background: transparent;
  min-height: 60px;
}

/* ============================================================
   同人文设置面板 · 布局修复 v23
   病因：.fanfic-controls-body 用了 display:grid 但 grid-template-rows
   与子元素数量不匹配，自动布局把「生成 footer」与标签面板叠在一起。
   修法：面板整体 flex 竖向，body 改回自然块流（不再 grid），footer 回到
   正常文档流、落在最底部，所有 sticky/relative 浮层一并取消，消除重叠。
   ============================================================ */
.theater-fanfic-controls:not(.collapsed),
.theater-fanfic-card.theater-fanfic-controls:not(.collapsed) {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(80dvh, calc(100dvh - 122px)) !important;
  overflow: hidden !important;
}
.theater-fanfic-controls:not(.collapsed) > .fanfic-controls-head,
.theater-fanfic-controls:not(.collapsed) > .fanfic-status {
  flex: 0 0 auto !important;
}
.theater-fanfic-controls:not(.collapsed) .fanfic-controls-body {
  display: block !important;            /* 关键：取消错位的 grid，恢复自然竖向堆叠 */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding: 0 2px 4px 0 !important;
}
.theater-fanfic-controls:not(.collapsed) .fanfic-controls-body > * {
  margin: 0 0 10px !important;
}
.theater-fanfic-controls:not(.collapsed) .fanfic-controls-body > *:last-child {
  margin-bottom: 0 !important;
}
.fanfic-tag-panel {
  position: static !important;
  z-index: auto !important;
  overflow: visible !important;
}
.fanfic-tag-group header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.fanfic-generate-footer {
  position: static !important;          /* 之前 relative+z-index 造成浮层重叠 */
  z-index: auto !important;
  margin: 8px 0 0 !important;
  box-shadow: none !important;
}

/* date archive/session v31 */
.date-archive-button,.date-new-session-button,.date-switch-opening-button{min-height:34px;padding:0 11px;border:1px solid color-mix(in srgb,var(--skin-border,rgba(0,0,0,.12)) 80%,transparent);border-radius:999px;color:var(--skin-text,#344054);background:color-mix(in srgb,var(--surface-strong,#fff) 78%,transparent);box-shadow:0 8px 22px color-mix(in srgb,var(--skin-text,#2b2520) 7%,transparent);font-size:12px;font-weight:900;white-space:nowrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.date-switch-opening-button{color:var(--skin-accent,#b17a36);border-color:color-mix(in srgb,var(--skin-accent,#b17a36) 45%,transparent);background:color-mix(in srgb,var(--skin-accent,#b17a36) 10%,var(--surface-strong,#fff))}
.date-new-session-button{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--skin-accent,#b17a36),var(--skin-accent-2,#8f642d))}.date-new-session-button:disabled{opacity:.5}
.date-archive-page{min-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:14px;box-sizing:border-box;overflow:hidden;color:var(--skin-text,#2c241d);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-strong,#fff) 60%,transparent),color-mix(in srgb,var(--phone-bg,#f4ecdf) 92%,transparent)),var(--phone-bg,#f4ecdf)}
.date-archive-head,.date-archive-card{border:1px solid var(--skin-border,rgba(0,0,0,.1));border-radius:22px;background:color-mix(in srgb,var(--surface-strong,#fff) 86%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--skin-text,#2b2520) 8%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.date-archive-head{display:grid;gap:8px;padding:14px}.date-archive-head h2{margin:0;color:var(--skin-title,#1f1a16);font-size:20px}.date-archive-head p{margin:0;color:var(--skin-muted,#7a6d60);font-size:12.5px;line-height:1.55}
.date-archive-primary,.date-archive-secondary,.date-archive-actions button{min-height:38px;border:0;border-radius:14px;padding:0 12px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--skin-accent,#b17a36),var(--skin-accent-2,#8f642d))}.date-archive-secondary{color:var(--skin-text,#2c241d);background:color-mix(in srgb,var(--skin-muted,#7a6d60) 14%,transparent)}.date-archive-primary.danger,.date-archive-secondary.danger,.date-archive-actions .danger{background:color-mix(in srgb,#c0564a 18%,transparent);color:#8f3c33}
.date-archive-list{min-height:0;overflow-y:auto;display:grid;align-content:start;gap:10px;padding:0 0 calc(24px + var(--safe-bottom,0px))}.date-archive-card{display:grid;gap:8px;padding:12px}.date-archive-main{display:grid;gap:5px;text-align:left;border:0;background:transparent;color:inherit;padding:0}.date-archive-main strong{font-size:15px;color:var(--skin-title,#1f1a16)}.date-archive-main small{font-size:11.5px;color:var(--skin-muted,#7a6d60)}.date-archive-main p{margin:0;font-size:12.5px;line-height:1.5;color:var(--skin-muted,#7a6d60);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.date-archive-actions,.date-archive-head-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.date-archive-readonly{border-radius:22px;border:1px solid var(--skin-border,rgba(0,0,0,.1));background:color-mix(in srgb,var(--surface-strong,#fff) 76%,transparent);overflow-y:auto}.date-archive-detail{grid-template-rows:auto minmax(0,1fr)}
@media (max-width:390px){.date-tool-row{gap:6px}.date-archive-button,.date-new-session-button{padding:0 9px;font-size:11px}.date-writing-button{max-width:42%}.date-archive-page{padding:10px}}


/* date compact toolbar/sync v33: keep date controls and synced progress to one line */
.app-body.date-mode .date-app{
  gap:8px !important;
}
.app-body.date-mode .date-tool-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:0 1px 2px !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}
.app-body.date-mode .date-tool-row::-webkit-scrollbar{display:none !important}
.app-body.date-mode .date-object-back,
.app-body.date-mode .date-archive-button,
.app-body.date-mode .date-new-session-button,
.app-body.date-mode .date-writing-button{
  min-height:32px !important;
  height:32px !important;
  padding:0 9px !important;
  font-size:11.5px !important;
  line-height:32px !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
}
.app-body.date-mode .date-object-back,
.app-body.date-mode .date-archive-button,
.app-body.date-mode .date-new-session-button{
  flex:0 0 auto !important;
}
.app-body.date-mode .date-writing-button{
  flex:1 1 98px !important;
  min-width:86px !important;
  max-width:none !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.app-body.date-mode .date-sync-brief{
  min-height:32px !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  box-shadow:0 6px 16px rgba(42,54,78,.05) !important;
}
.app-body.date-mode .date-sync-brief strong{
  flex:0 0 auto !important;
  max-width:88px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:11px !important;
  line-height:1 !important;
}
.app-body.date-mode .date-sync-brief p{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:10.8px !important;
  line-height:1 !important;
}
@media (max-width:430px){
  .app-body.date-mode .date-tool-row{flex-wrap:nowrap !important}
  .app-body.date-mode .date-object-back,
  .app-body.date-mode .date-archive-button,
  .app-body.date-mode .date-new-session-button{padding:0 8px !important;font-size:11px !important}
  .app-body.date-mode .date-writing-button{max-width:none !important;font-size:11px !important}
}
.fanfic-saves-bar{padding:12px 14px}
.fanfic-saves-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.fanfic-saves-head strong{font-size:13px;font-weight:900;color:var(--skin-text,#344054)}
.fanfic-saves-head small{font-size:11px;color:color-mix(in srgb,var(--skin-text,#344054) 55%,transparent)}
.fanfic-saves-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fanfic-save-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--skin-border,rgba(0,0,0,.12)) 80%,transparent);background:color-mix(in srgb,var(--surface-strong,#fff) 70%,transparent);color:var(--skin-text,#344054);font-size:12px;font-weight:800;white-space:nowrap}
.fanfic-save-chip.active{border-color:color-mix(in srgb,var(--skin-accent,#b17a36) 55%,transparent);background:color-mix(in srgb,var(--skin-accent,#b17a36) 14%,var(--surface-strong,#fff));color:var(--skin-accent,#b17a36)}
.fanfic-save-del{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;font-style:normal;font-size:10px;line-height:1;background:color-mix(in srgb,var(--skin-accent,#b17a36) 22%,transparent);color:var(--skin-accent,#b17a36)}
.fanfic-save-new{min-height:30px;padding:0 12px;border-radius:999px;border:1px dashed color-mix(in srgb,var(--skin-border,rgba(0,0,0,.2)) 90%,transparent);background:transparent;color:color-mix(in srgb,var(--skin-text,#344054) 70%,transparent);font-size:12px;font-weight:800;white-space:nowrap}

/* 深夜电台 app */
.radio-gradient { background: linear-gradient(150deg, #11163a, #3a2a6e 50%, #6d4f9e); color: #ece7ff; }
.radio-app { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.radio-hero { padding: 18px 16px; border-radius: 18px; background: linear-gradient(150deg, #141a3c, #2a2156 60%, #3c2f63); color: #efe9ff; box-shadow: 0 14px 34px rgba(20,16,48,.28); }
.radio-dial { font-size: 16px; font-weight: 900; letter-spacing: .04em; }
.radio-hero p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(236,231,255,.78); }
.radio-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.radio-char-filter { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0,0,0,.14)) 85%, transparent); background: color-mix(in srgb, var(--surface-strong, #fff) 84%, transparent); color: color-mix(in srgb, var(--skin-text, #2c2740) 70%, transparent); font-size: 12px; font-weight: 800; }
.radio-char-filter input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--skin-text, #2c2740); font-size: 13px; font-weight: 800; }
.radio-char-filter input::placeholder { color: color-mix(in srgb, var(--skin-text, #2c2740) 38%, transparent); }
.radio-select { flex: 1 1 120px; min-height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0,0,0,.14)) 85%, transparent); background: var(--surface-strong, #fff); color: var(--skin-text, #2c2740); font-size: 13px; font-weight: 700; }
.radio-record { min-height: 38px; padding: 0 16px; border-radius: 999px; border: none; background: linear-gradient(135deg, #3a2a6e, #6d4f9e); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
.radio-record-all { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, #6d4f9e 45%, transparent); background: transparent; color: #6d4f9e; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.radio-status { min-height: 16px; font-size: 12px; color: color-mix(in srgb, var(--skin-text, #2c2740) 62%, transparent); }
.radio-list { display: flex; flex-direction: column; gap: 12px; }
.radio-empty { padding: 26px 18px; text-align: center; font-size: 13px; line-height: 1.7; color: color-mix(in srgb, var(--skin-text, #2c2740) 60%, transparent); border: 1px dashed color-mix(in srgb, var(--skin-border, rgba(0,0,0,.2)) 80%, transparent); border-radius: 16px; }
.radio-card { padding: 14px 15px; border-radius: 16px; background: var(--surface-strong, #fff); border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0,0,0,.1)) 80%, transparent); box-shadow: 0 10px 26px color-mix(in srgb, #2a2156 8%, transparent); }
.radio-card.fav { border-color: color-mix(in srgb, #6d4f9e 50%, transparent); }
.radio-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.radio-card-meta strong { font-size: 14px; font-weight: 900; color: var(--skin-text, #2c2740); }
.radio-card-meta small { display: block; margin-top: 2px; font-size: 11.5px; color: color-mix(in srgb, var(--skin-text, #2c2740) 58%, transparent); }
.radio-card time { font-size: 11px; color: color-mix(in srgb, var(--skin-text, #2c2740) 50%, transparent); white-space: nowrap; }
.radio-content { margin: 0 0 10px; font-size: 14px; line-height: 1.85; color: var(--skin-text, #2c2740); white-space: pre-wrap; }
.radio-player { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 8px 0 10px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, #6d4f9e 8%, var(--surface-strong, #fff)); border: 1px solid color-mix(in srgb, #6d4f9e 18%, transparent); }
.radio-progress { width: 100%; accent-color: #6d4f9e; }
.radio-progress:disabled { opacity: .42; }
.radio-time { font-size: 11px; font-weight: 800; color: color-mix(in srgb, var(--skin-text, #2c2740) 58%, transparent); white-space: nowrap; }
.radio-voice-error { margin: -2px 0 8px; font-size: 11.5px; line-height: 1.5; color: #9b3f3f; }
.radio-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-card-actions button { min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--skin-border, rgba(0,0,0,.12)) 80%, transparent); background: color-mix(in srgb, var(--surface-strong, #fff) 70%, transparent); color: var(--skin-text, #2c2740); font-size: 12px; font-weight: 700; }
.radio-card-actions button[data-radio-play] { color: #6d4f9e; border-color: color-mix(in srgb, #6d4f9e 40%, transparent); }

/* Persona Weaver / 面具工坊 */
.persona-weaver-panel {
  margin: 14px 0;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(143, 100, 45, .22)) 80%, transparent);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--skin-accent, #8f642d) 14%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-strong, #fffaf0) 86%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--skin-text, #3b2a18) 8%, transparent);
}
.persona-weaver-panel > header,
.persona-weaver-preview > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.persona-weaver-panel > header strong,
.persona-weaver-preview > header strong {
  display: block;
  font-size: 17px;
  color: var(--skin-text, #3b2a18);
}
.persona-weaver-panel > header small,
.persona-weaver-preview > header small {
  display: block;
  margin-top: 3px;
  color: var(--skin-muted, rgba(59, 42, 24, .62));
}
.persona-weaver-panel > header > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--skin-accent, #8f642d) 84%, #1d1438);
  background: color-mix(in srgb, var(--skin-accent, #8f642d) 10%, transparent);
}

.user-mask-detail-grid,
.persona-weaver-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.user-mask-detail-grid .field,
.persona-weaver-detail-grid .field {
  min-width: 0;
}
.persona-weaver-preview .field span,
.user-mask-panel .field span {
  word-break: keep-all;
}
.persona-weaver-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--skin-muted, rgba(59, 42, 24, .72));
  background: color-mix(in srgb, var(--surface, #fff) 72%, transparent);
  font-size: 13px;
  line-height: 1.45;
}
.persona-weaver-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--skin-accent, #8f642d);
}
.persona-weaver-actions {
  grid-template-columns: 1fr 1fr;
}
.persona-weaver-status {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--skin-accent, #8f642d) 10%, transparent);
  color: var(--skin-text, #3b2a18);
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
}
.persona-weaver-status[data-type="error"] {
  background: rgba(180, 64, 56, .12);
  color: #9f2f26;
}
.persona-weaver-status[data-type="ready"] {
  background: rgba(76, 136, 88, .13);
  color: #32673d;
}
.persona-weaver-preview {
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--skin-accent, #8f642d) 42%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 74%, transparent);
}
.persona-weaver-drafts {
  margin-top: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface, #fff) 62%, transparent);
  overflow: hidden;
}
.persona-weaver-drafts summary {
  padding: 11px 12px;
  cursor: pointer;
  font-weight: 700;
  color: var(--skin-text, #3b2a18);
}
#personaWeaverDraftList {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}
.persona-weaver-draft {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--skin-border, rgba(143, 100, 45, .22)) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong, #fffaf0) 82%, transparent);
  padding: 10px 12px;
  text-align: left;
  color: var(--skin-text, #3b2a18);
}
.persona-weaver-draft strong,
.persona-weaver-draft small {
  display: block;
}
.persona-weaver-draft small {
  margin-top: 3px;
  color: var(--skin-muted, rgba(59, 42, 24, .62));
}
@media (max-width: 430px) {
  .persona-weaver-actions,
  .user-mask-detail-grid,
  .persona-weaver-detail-grid {
    grid-template-columns: 1fr;
  }
  .persona-weaver-panel {
    padding: 12px;
  }
}