/* ==========================================================================
   LUMIÈRE OS — 高级半透风 (High-End Translucent Frosted Glass) 样式系统
   - 彻底剔除红/紫/黄俗气配色，采用凝霜冷银、云母透白、冰川雾灰、玄冰暗夜高定半透玻璃体系
   - 支持全局玻璃透明度 (--glass-alpha)、毛玻璃模糊度 (--glass-blur) 与圆角自由调节
   ========================================================================== */

:root,
[data-palette="frost"] {
  --glass-blur: 28px;
  --c-white: #fafbfc;
  --c-light: #eef1f5;
  --c-ink: #1e232b;
  --c-grey: #647080;
  --paper: #ebeff4;
  --card: rgba(255, 255, 255, 0.56);
  --card-solid: rgba(250, 251, 253, 0.92);
  --ink: #1e232b;
  --soft: #5a6575;
  --faint: #8c96a5;
  --edge: rgba(255, 255, 255, 0.84);
  --hairline: rgba(30, 35, 43, 0.075);
  --block: rgba(255, 255, 255, 0.48);
  --block-edge: rgba(255, 255, 255, 0.86);
  --block-on: rgba(215, 222, 232, 0.72);
  --accent: #2c3542;
  --accent-soft: rgba(44, 53, 66, 0.1);
}

[data-palette="mica"] {
  --c-white: #ffffff;
  --c-light: #f4f5f7;
  --c-ink: #202226;
  --c-grey: #6c7078;
  --paper: #f0f2f5;
  --card: rgba(255, 255, 255, 0.44);
  --card-solid: rgba(253, 254, 255, 0.9);
  --ink: #202226;
  --soft: #5e626a;
  --faint: #90959e;
  --edge: rgba(255, 255, 255, 0.88);
  --hairline: rgba(32, 34, 38, 0.07);
  --block: rgba(255, 255, 255, 0.4);
  --block-edge: rgba(255, 255, 255, 0.9);
  --block-on: rgba(226, 230, 236, 0.7);
  --accent: #25282e;
  --accent-soft: rgba(37, 40, 46, 0.09);
}

[data-palette="glacier"] {
  --c-white: #f7fafe;
  --c-light: #e6eef6;
  --c-ink: #1c2836;
  --c-grey: #5b6d82;
  --paper: #e8f0f7;
  --card: rgba(246, 250, 255, 0.54);
  --card-solid: rgba(248, 251, 255, 0.92);
  --ink: #1c2836;
  --soft: #53657a;
  --faint: #8496ab;
  --edge: rgba(255, 255, 255, 0.84);
  --hairline: rgba(28, 40, 54, 0.08);
  --block: rgba(244, 249, 255, 0.48);
  --block-edge: rgba(255, 255, 255, 0.86);
  --block-on: rgba(204, 218, 234, 0.72);
  --accent: #2c3e50;
  --accent-soft: rgba(44, 62, 80, 0.1);
}

[data-palette="linen"] {
  --c-white: #fcfbf9;
  --c-light: #efece6;
  --c-ink: #262422;
  --c-grey: #726c66;
  --paper: #f1eee9;
  --card: rgba(255, 253, 250, 0.56);
  --card-solid: rgba(251, 249, 246, 0.92);
  --ink: #262422;
  --soft: #66605a;
  --faint: #968f88;
  --edge: rgba(255, 255, 255, 0.84);
  --hairline: rgba(38, 36, 34, 0.075);
  --block: rgba(255, 253, 250, 0.48);
  --block-edge: rgba(255, 255, 255, 0.86);
  --block-on: rgba(224, 218, 210, 0.74);
  --accent: #383430;
  --accent-soft: rgba(56, 52, 48, 0.1);
}

[data-palette="matcha"] {
  --c-white: #f8faf8;
  --c-light: #e8eee9;
  --c-ink: #212b24;
  --c-grey: #5f6f63;
  --paper: #eaf0eb;
  --card: rgba(248, 252, 249, 0.56);
  --card-solid: rgba(247, 250, 248, 0.92);
  --ink: #212b24;
  --soft: #56665a;
  --faint: #859488;
  --edge: rgba(255, 255, 255, 0.82);
  --hairline: rgba(33, 43, 36, 0.08);
  --block: rgba(246, 251, 247, 0.48);
  --block-edge: rgba(255, 255, 255, 0.84);
  --block-on: rgba(206, 220, 209, 0.74);
  --accent: #2f4034;
  --accent-soft: rgba(47, 64, 52, 0.1);
}

[data-palette="obsidian"] {
  --c-white: #1c2028;
  --c-light: #12151b;
  --c-ink: #eef2f6;
  --c-grey: #9da6b4;
  --paper: #13161d;
  --card: rgba(28, 33, 43, 0.58);
  --card-solid: rgba(26, 30, 39, 0.92);
  --ink: #eef2f6;
  --soft: #a4aebc;
  --faint: #6e7785;
  --edge: rgba(255, 255, 255, 0.16);
  --hairline: rgba(255, 255, 255, 0.09);
  --block: rgba(32, 37, 48, 0.52);
  --block-edge: rgba(255, 255, 255, 0.18);
  --block-on: rgba(255, 255, 255, 0.2);
  --accent: #d8e0ea;
  --accent-soft: rgba(216, 224, 234, 0.12);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #dfe4ec;
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button,
input,
textarea,
select {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

.host-stage {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 18%, #f0f3f8 0%, #d5dce6 100%);
  position: relative;
}

.phone {
  position: relative;
  width: 412px;
  height: 915px;
  max-height: calc(100vh - 16px);
  max-width: calc(100vw - 12px);
  border-radius: 40px;
  background-color: var(--paper);
  background-size: cover;
  background-position: center;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.75),
    0 26px 70px rgba(18, 24, 34, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 500px) {
  .phone {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Desktop Quick Sidebar */
.desktop-side-tools {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  padding: 10px 8px;
  border-radius: var(--r-card, 22px);
  box-shadow: 0 12px 32px rgba(20, 26, 36, 0.08);
  z-index: 90;
}

@media (max-width: 760px) {
  .desktop-side-tools {
    display: none;
  }
}

.side-tool-btn {
  width: 50px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 9.5px;
  color: #262c36;
  transition: all 0.16s ease;
}

.side-tool-btn:hover {
  background: rgba(255, 255, 255, 0.72);
  transform: translateY(-1px);
}

/* Top Status Bar */
.sys-statusbar {
  height: 36px;
  padding: 8px 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  z-index: 60;
  flex-shrink: 0;
}

.sb-left,
.sb-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sb-bat-pill {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  border: 1px solid var(--edge);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3-PAGE DESKTOP PAGER & GRID
   ========================================================================== */
.desktop-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.pager {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  touch-action: pan-y;
  overflow: hidden;
}

.page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transform: translate3d(var(--desk-offset, 0%), 0, 0);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 10px 6px;
  padding: 10px 15px 4px;
  min-height: 0;
}

.slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
}

.block {
  width: 56px;
  height: 56px;
  color: var(--ink);
  background: var(--block) center / cover no-repeat;
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(150%);
  border: 1px solid var(--block-edge);
  border-radius: var(--r-icon, 19px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.14s ease, background 0.16s ease, box-shadow 0.16s ease;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 6px 20px rgba(20, 26, 36, 0.06);
}

.slot:hover .block {
  background: rgba(255, 255, 255, 0.68);
}

.slot:active .block {
  transform: scale(0.92);
}

.slot-label {
  color: var(--ink);
  opacity: 0.88;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 74px;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9);
}

[data-palette="obsidian"] .slot-label {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.witem {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
}

/* ==========================================================================
   NEW HIGH-END TRANSLUCENT HOME SCREEN WIDGETS (Replaces copied squares!)
   ========================================================================== */

/* 1. Row 1: Top Translucent Fluid Telemetry Island (.glass-island-bar) */
.glass-island-bar {
  width: 100%;
  height: calc(100% - 4px);
  margin: 2px 0;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 24px rgba(20, 26, 36, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gib-left {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.gib-time {
  font-family: "MagDisplay", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}
.gib-date-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.gib-date-stack span {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.gib-date-stack small {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.gib-weather-pill,
.gib-status-pill {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid var(--edge);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
[data-palette="obsidian"] .gib-weather-pill,
[data-palette="obsidian"] .gib-status-pill {
  background: rgba(255, 255, 255, 0.1);
}

/* 2. Row 2-3 Left: Translucent Acoustic Vinyl Stand (.glass-vinyl-tile) */
.glass-vinyl-tile {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 12px 13px;
  border-radius: var(--r-card, 26px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 26px rgba(20, 26, 36, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gvt-top {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.glass-vinyl-tile .desk-cd-shell {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
}
.glass-vinyl-tile .desk-cd {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #1e232b 0 2px, #323946 3px 4px);
  background-position: center;
  background-size: cover;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.desk-music.is-playing .desk-cd {
  animation: cdSpin 9s linear infinite;
}
@keyframes cdSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.glass-vinyl-tile .desk-cd::after {
  content: "";
  border: 3px solid rgba(255, 255, 255, 0.72);
  background: #f5f7fa;
  border-radius: 50%;
  position: absolute;
  inset: 34%;
}
.gvt-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gvt-meta small {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
  font-weight: 700;
}
.gvt-meta b {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gvt-meta em {
  font-size: 10px;
  font-style: normal;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gvt-lyric {
  font-size: 10.5px;
  color: var(--soft);
  padding: 5px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
[data-palette="obsidian"] .gvt-lyric {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}
.gvt-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.glass-vinyl-tile .desk-music-progress {
  position: relative;
  height: 4px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 35, 43, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.glass-vinyl-tile .desk-music-progress::before {
  display: none;
}
.glass-vinyl-tile .desk-music-progress > span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
}
.gvt-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gvt-btns button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--edge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

/* 3. Row 4-5: Panoramic Frosted Companion & Couple Avatar Deck (.glass-companion-deck) */
.glass-companion-deck {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: var(--card) center / cover no-repeat;
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 12px 32px rgba(20, 26, 36, 0.08);
  position: relative;
  overflow: hidden;
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.gcd-backdrop-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.68) 0%, rgba(240, 244, 250, 0.46) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  z-index: 0;
}
[data-palette="obsidian"] .gcd-backdrop-overlay {
  background: linear-gradient(135deg, rgba(22, 26, 34, 0.72) 0%, rgba(30, 35, 46, 0.56) 100%);
}
.gcd-header,
.gcd-body {
  position: relative;
  z-index: 2;
}
.gcd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gcd-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--edge);
  color: var(--ink);
}
.gcd-mini-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--edge);
  color: var(--ink);
}
[data-palette="obsidian"] .gcd-tag,
[data-palette="obsidian"] .gcd-mini-btn {
  background: rgba(255, 255, 255, 0.14);
}
.gcd-body {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 4px;
}
.gcd-dual-avatars {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.hc-heart-rim {
  width: 58px;
  height: 54px;
  clip-path: url(#hc-heart-clip);
  background: rgba(255, 255, 255, 0.92);
  padding: 2.5px;
  filter: drop-shadow(0 4px 10px rgba(20, 26, 36, 0.14));
  cursor: pointer;
}
.hc-heart-rim.shape-circle {
  width: 54px;
  height: 54px;
  clip-path: none;
  border-radius: 50%;
}
.hc-heart-rim.shape-squircle {
  width: 54px;
  height: 54px;
  clip-path: none;
  border-radius: var(--r-card, 18px);
}
.hc-heart {
  width: 100%;
  height: 100%;
  clip-path: inherit;
  border-radius: inherit;
  background: var(--block) center / cover no-repeat;
}
.gcd-sync-bridge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--edge);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.gcd-user-ava-rim {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px;
  box-shadow: 0 4px 10px rgba(20, 26, 36, 0.1);
}
.gcd-user-ava {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  background: var(--block) center / cover no-repeat;
}
.gcd-whisper-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.gcd-name-btn {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.gcd-whisper-pill {
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.88);
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcd-whisper-pill.sub {
  background: rgba(255, 255, 255, 0.52);
  color: var(--soft);
  font-size: 10.5px;
}
[data-palette="obsidian"] .gcd-whisper-pill {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
}

/* 4. Row 6-7 Left: Frosted Prism Dual Gallery Shutter (.glass-prism-gallery) */
.glass-prism-gallery {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 26px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  border: 1px solid var(--edge);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 24px rgba(20, 26, 36, 0.05);
}
.gpg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--soft);
}
.gpg-head button {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
}
.gpg-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 7px;
  min-height: 0;
}
.gpg-back-card,
.gpg-front-card {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 16px);
  background: rgba(255, 255, 255, 0.5) center / cover no-repeat;
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  position: relative;
}

/* 5. Page 2 Row 1-2: Live Anniversary & Pulse Tiles */
.glass-chrono-tile,
.glass-pulse-tile {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 26px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  border: 1px solid var(--edge);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 24px rgba(20, 26, 36, 0.06);
}
.gct-head,
.gpt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.gct-head i {
  font-style: normal;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--edge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 12px;
}
.gct-Title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.gct-days b {
  font-family: "MagDisplay", Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
}
.gct-days small {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--soft);
}
.gct-foot {
  font-size: 10px;
  color: var(--soft);
}
.gpt-head em {
  font-style: normal;
  color: var(--ink);
  font-weight: 800;
}
.gpt-ecg-svg {
  width: 100%;
  height: 32px;
  color: var(--ink);
  opacity: 0.78;
}
.gpt-thought {
  font-size: 10.5px;
  color: var(--soft);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 6. Page 3 Widgets: Telemetry Deck, Aperture Card & Holographic Console */
.glass-telemetry-deck {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 26px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  border: 1px solid var(--edge);
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 24px rgba(20, 26, 36, 0.06);
}
.gtd-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--hairline);
  padding-right: 10px;
  cursor: pointer;
}
.gtd-tag {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
  font-weight: 700;
}
.gtd-tag em {
  font-style: normal;
}
.gtd-left strong {
  font-family: "MagDisplay", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
}
.gtd-ph {
  font-size: 10px;
  color: var(--soft);
}
.gtd-left p {
  font-size: 10px;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtd-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.gtd-moon-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.gtd-moon-row i {
  font-style: normal;
  font-size: 11px;
  color: var(--soft);
}
.gtd-moon-sub {
  font-size: 10px;
  color: var(--soft);
}
.gtd-noise-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.gtd-noise-bar button {
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--edge);
  font-size: 12px;
}

.glass-aperture-card {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 26px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  border: 1px solid var(--edge);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.gac-head {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
  font-weight: 800;
}
.gac-viewport {
  flex: 1;
  width: 100%;
  border-radius: var(--r-card, 16px);
  background: rgba(255, 255, 255, 0.45) center / cover no-repeat;
  border: 1px solid var(--edge);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--soft);
}
.gac-viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gac-caption {
  font-size: 10.5px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glass-holo-console {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(165%);
  border: 1px solid var(--edge);
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 12px 30px rgba(20, 26, 36, 0.07);
}
.ghc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.ghc-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.ghc-date {
  font-size: 9.5px;
  color: var(--soft);
}
.ghc-main {
  flex: 1;
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 12px;
  padding: 8px 0;
  min-height: 0;
}
.ghc-visual {
  border-radius: var(--r-card, 18px);
  background: rgba(255, 255, 255, 0.45) center / cover no-repeat;
  border: 1px solid var(--edge);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  color: var(--soft);
}
.ghc-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ghc-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.ghc-head-btn {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ghc-head-btn small {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
  font-weight: 700;
}
.ghc-head-btn strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}
.ghc-head-btn span {
  font-size: 10px;
  color: var(--soft);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ghc-quote-box {
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid var(--edge);
  cursor: pointer;
}
[data-palette="obsidian"] .ghc-quote-box {
  background: rgba(255, 255, 255, 0.08);
}
.ghc-quote-meta {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: var(--faint);
}
.ghc-quote-meta i {
  font-style: normal;
}
.ghc-quote-box q {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.ghc-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
  font-size: 9.5px;
}
.ghc-footer > span {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--c-white);
  font-size: 8px;
  font-weight: 800;
}
.ghc-ticker {
  flex: 1;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Page Dots & Dock */
.dots { flex-shrink: 0; justify-content: center; align-items: center; gap: 7px; padding: 4px 0 8px; display: flex; }
.dot { background: rgba(100, 110, 125, 0.32); border-radius: 50%; width: 6px; height: 6px; transition: all 0.2s ease; }
.dot.on { background: var(--ink); border-radius: 3px; width: 16px; }

.dock {
  margin: 0 14px 12px;
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 26px);
  flex-shrink: 0;
  justify-content: space-around;
  align-items: center;
  padding: 8px 14px 7px;
  display: flex;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 24px rgba(20, 26, 36, 0.08);
}
.dock-btn { flex-direction: column; flex: 1; align-items: center; gap: 3px; display: flex; }
.dock-block { width: 44px; height: 44px; color: var(--soft); background-color: rgba(255, 255, 255, 0.45); background-position: 50%; background-size: cover; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.72); justify-content: center; align-items: center; display: flex; }
.dock-btn.on .dock-block { color: var(--ink); background-color: var(--block-on); }
.dock-label { font-size: 10px; color: var(--soft); }
.dock-btn.on .dock-label { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   APP OVERLAYS, DOUYIN, MODALS & TOAST
   ========================================================================== */
.app-screen-layer {
  position: absolute;
  inset: 0;
  padding-top: 36px;
  background: rgba(242, 245, 250, 0.74);
  backdrop-filter: blur(34px) saturate(165%);
  -webkit-backdrop-filter: blur(34px) saturate(165%);
  z-index: 45;
  display: none;
  flex-direction: column;
  animation: appSlideUp 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.app-screen-layer.open { display: flex; }

@keyframes appSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.topbar {
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--hairline);
  height: 46px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.topbar-btn { min-width: 38px; height: 36px; padding: 0 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.topbar-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.app-scroll-body { flex: 1; overflow-y: auto; padding: 12px 14px 22px; display: flex; flex-direction: column; gap: 10px; }

/* Douyin Full-Screen Layer (Clean Slate/Silver Glass Accents, zero harsh neon red/yellow) */
.douyin-shell {
  position: absolute;
  inset: 0;
  padding-top: 36px;
  background: #101318;
  color: #fff;
  z-index: 50;
  display: none;
  flex-direction: column;
}
.douyin-shell.open { display: flex; }
.dy-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #232832 0%, #12151c 100%);
  color: #f4f6fa;
}
.dy-top-tabs { position: absolute; top: 10px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; z-index: 10; }
.dy-tab-group { display: flex; gap: 16px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.62); background: rgba(15, 18, 24, 0.42); backdrop-filter: blur(14px); padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); }
.dy-tab-group span.active { color: #ffffff; }
.dy-story-card {
  width: 82%;
  min-height: 210px;
  margin: 0 auto;
  background: rgba(24, 28, 36, 0.66);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-card, 24px);
  padding: 24px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.72;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  position: relative;
}
.dy-story-step-hint { position: absolute; bottom: 10px; right: 14px; font-size: 10px; opacity: 0.72; font-weight: 400; }
.dy-right-rail { position: absolute; right: 12px; bottom: 92px; display: flex; flex-direction: column; align-items: center; gap: 15px; z-index: 10; }
.dy-rail-avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); background-size: cover; background-position: center; cursor: pointer; }
.dy-rail-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); cursor: pointer; }
.dy-bottom-info { position: absolute; left: 14px; right: 74px; bottom: 16px; display: flex; flex-direction: column; gap: 5px; z-index: 10; background: rgba(15, 18, 24, 0.45); backdrop-filter: blur(14px); padding: 10px 13px; border-radius: var(--r-card, 18px); border: 1px solid rgba(255, 255, 255, 0.14); }
.dy-author-name { font-size: 15px; font-weight: 800; color: #ffffff; cursor: pointer; }
.dy-desc-text { font-size: 12.5px; color: rgba(255, 255, 255, 0.92); line-height: 1.5; }
.dy-tags-line { font-size: 11.5px; font-weight: 700; color: #cbd5e1; }
.dy-bgm-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 10.5px; padding: 3px 10px; border-radius: 999px; width: fit-content; }
.dy-comment-sheet { position: absolute; left: 0; right: 0; bottom: 48px; height: 64%; background: rgba(20, 24, 32, 0.92); backdrop-filter: blur(28px); color: #fff; border-top-left-radius: 22px; border-top-right-radius: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); z-index: 30; display: none; flex-direction: column; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45); }
.dy-comment-sheet.open { display: flex; }
.dy-bottom-nav { height: 48px; background: rgba(14, 17, 22, 0.94); backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.dy-bottom-nav span.active { color: #ffffff; font-weight: 800; }
.dy-plus-btn { width: 42px; height: 30px; margin: 0 auto; border-radius: 10px; background: rgba(255, 255, 255, 0.92); color: #12151c; font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Modal & Toast */
.modal-mask { position: absolute; inset: 0; background: rgba(15, 20, 28, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 80; display: none; align-items: flex-end; justify-content: center; }
.modal-mask.open { display: flex; }
.modal-panel { width: 100%; max-height: 86%; background: var(--card-solid); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); border-top: 1px solid var(--edge); border-top-left-radius: 28px; border-top-right-radius: 28px; padding: 16px 18px 24px; overflow-y: auto; box-shadow: 0 -10px 36px rgba(15, 20, 28, 0.16); }
.toast-float { position: absolute; top: 44px; left: 50%; transform: translateX(-50%) translateY(-10px); background: rgba(28, 33, 42, 0.88); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 999px; z-index: 95; opacity: 0; pointer-events: none; transition: all 0.22s ease; white-space: nowrap; }
.toast-float.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   TRANSLUCENT MINIMALIST INNER-APP DESIGN SYSTEM
   ========================================================================== */
:root {
  --ink-dark: var(--ink, #1e232b);
  --ink-mid: var(--soft, #5a6575);
  --ink-soft: var(--faint, #8c96a5);
  --accent-rose: #475569;
  --font-serif: "MagDisplay", "MagText", Georgia, "Noto Serif SC", serif;
}

[data-palette="obsidian"] .app-screen-layer {
  background: rgba(18, 22, 30, 0.82);
}

[data-palette="obsidian"] .topbar {
  background: rgba(26, 30, 40, 0.68);
}

.topbar-action-btn {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.16s ease;
}
[data-palette="obsidian"] .topbar-action-btn {
  background: rgba(255, 255, 255, 0.12);
}
.topbar-action-btn:active {
  transform: scale(0.95);
}

.topbar-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-palette="obsidian"] .topbar-icon-circle {
  background: rgba(255, 255, 255, 0.12);
}

/* Frosted Glass Cards & Minimalist List Groups */
.glass-card {
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(155%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(155%);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 22px);
  padding: 14px 15px;
  box-shadow: var(--shadow-card, inset 0 1px 0 rgba(255,255,255,0.72), 0 8px 24px rgba(20,26,36,0.045));
  color: var(--ink);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.card-sub {
  font-size: 11.5px;
  color: var(--soft);
  margin-top: 2px;
  line-height: 1.45;
}
.card-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(30, 35, 43, 0.07);
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
}
[data-palette="obsidian"] .card-tag {
  background: rgba(255, 255, 255, 0.14);
}

/* Form Controls & Buttons */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 11px;
}
.field-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--soft);
}
.field-input,
.field-select,
.field-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(30, 35, 43, 0.1);
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}
[data-palette="obsidian"] .field-input,
[data-palette="obsidian"] .field-select,
[data-palette="obsidian"] .field-textarea {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
.field-input:focus,
.field-textarea:focus {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
}
.field-textarea {
  min-height: 82px;
  resize: vertical;
  line-height: 1.55;
}

.btn-solid {
  background: var(--ink);
  color: var(--c-white);
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(20, 26, 36, 0.12);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
[data-palette="obsidian"] .btn-ghost {
  background: rgba(255, 255, 255, 0.1);
}

.modal-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  text-align: center;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.modal-actions > button {
  flex: 1;
}

/* iOS Minimalist Toggle Switch */
.ui-switch {
  width: 44px;
  height: 25px;
  border-radius: 999px;
  background: rgba(120, 128, 140, 0.26);
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.ui-switch.on {
  background: var(--ink);
}
.ui-switch::after {
  content: "";
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ui-switch.on::after {
  transform: translateX(19px);
}

/* ==========================================================================
   WECHAT (消息 / 联系人 / 朋友圈 / 我 + 个人聊天室 + 自由HTML卡片 + 情侣头像)
   ========================================================================== */
#appBottomBarWrap {
  height: 58px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-top: 1px solid var(--hairline);
  display: none;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px 4px;
  flex-shrink: 0;
}
[data-palette="obsidian"] #appBottomBarWrap {
  background: rgba(22, 26, 35, 0.78);
}

.wx-tab-btn {
  flex: 1;
  height: 46px;
  border-radius: var(--r-card, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--soft);
  font-size: 10.5px;
  font-weight: 500;
  transition: all 0.18s ease;
}
.wx-tab-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.65;
}
.wx-tab-btn.active {
  color: var(--ink);
  font-weight: 700;
  background: rgba(30, 35, 43, 0.07);
}

.wx-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(18px);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--soft);
  font-size: 12px;
}
.wx-search-pill input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 12px;
  color: var(--ink);
}

.wx-conv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wx-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 20px);
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease;
}
.wx-conv-item:active {
  transform: scale(0.985);
}
.wx-conv-ava {
  width: 48px;
  height: 48px;
  border-radius: var(--r-card, 16px);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  position: relative;
}
.wx-conv-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wx-conv-main {
  flex: 1;
  min-width: 0;
}
.wx-conv-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wx-conv-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wx-conv-time {
  font-size: 10.5px;
  color: var(--faint);
}
.wx-conv-preview {
  font-size: 12px;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

/* Redesigned High-End Translucent WeChat Me Tab */
.wx-me-hero {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(240, 244, 250, 0.48));
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 26px);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 10px 28px rgba(20, 26, 36, 0.06);
}
[data-palette="obsidian"] .wx-me-hero {
  background: linear-gradient(145deg, rgba(32, 37, 48, 0.72), rgba(22, 26, 34, 0.56));
}
.wx-me-ava {
  width: 68px;
  height: 68px;
  border-radius: var(--r-card, 22px);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(20, 26, 36, 0.1);
  cursor: pointer;
}
.wx-me-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wx-me-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.wx-me-sig {
  font-size: 12px;
  color: var(--soft);
}

.wx-me-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wx-me-row {
  background: var(--card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 20px);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease;
}
.wx-me-row:active {
  transform: scale(0.985);
}
.wx-me-row-left {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.wx-me-row-ico {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
[data-palette="obsidian"] .wx-me-row-ico {
  background: rgba(255, 255, 255, 0.1);
}
.wx-me-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--soft);
}

/* Individual Chat Room & Interactive HTML Card */
.chat-room-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: -12px -14px -22px;
  padding: 10px 12px 10px;
  background-size: cover;
  background-position: center;
}
.chat-messages-box {
  flex: 1;
  overflow-y: auto;
  padding: 6px 2px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.chat-msg-row.user {
  flex-direction: row-reverse;
}
.chat-msg-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.chat-msg-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 原创基础气泡：非对称大圆角 + 一侧收窄贴边，左右两侧形态不同，和微信方圆气泡明显区分 */
.chat-bubble {
  position: relative;
  max-width: 248px;
  padding: 10px 14px;
  font-size: inherit;
  line-height: 1.62;
  color: var(--ink);
  word-break: break-word;
  /* 对方：左上贴边收窄，右侧大圆弧 */
  border-radius: 6px 18px 18px 18px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(20, 26, 36, 0.05);
}
/* 对方气泡左缘一条细强调线，是我们自己的记号 */
.chat-msg-row.ai .chat-bubble::before { display: none; }
.chat-msg-row.user .chat-bubble {
  /* 我：右上贴边收窄，整体用主题强调色，与对方浅色气泡对比明显 */
  border-radius: 18px 6px 18px 18px;
  background: linear-gradient(135deg, var(--accent, #3a4150), rgba(34,40,50,0.92));
  color: #fff;
  border: none;
  box-shadow: 0 3px 12px rgba(20, 26, 36, 0.12);
}

/* Free Interactive HTML Card in Chat (JRSY style) */
.chat-html-card-box {
  max-width: 268px;
  min-width: 210px;
  margin-top: 6px;
  border-radius: var(--r-card, 18px);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(20, 26, 36, 0.07);
  overflow: hidden;
  color: var(--ink);
}
.chat-html-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--hairline);
  font-size: 10px;
  color: var(--soft);
}

.chat-transfer-card {
  width: 215px;
  border-radius: var(--r-card, 18px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(242, 245, 250, 0.82));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  padding: 12px 14px 9px;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(20, 26, 36, 0.06);
  cursor: pointer;
}
.ct-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ct-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}
.ct-amount {
  font-size: 15px;
  font-weight: 700;
}
.ct-note {
  font-size: 11px;
  color: var(--soft);
}
.ct-foot {
  font-size: 10px;
  color: var(--faint);
  padding-top: 6px;
  display: flex;
  justify-content: space-between;
}

/* Bottom Capsule Input Bar & Plus Drawer */
.chat-bottom-dock {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 26px);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 22px rgba(20, 26, 36, 0.05);
}
[data-palette="obsidian"] .chat-bottom-dock {
  background: rgba(28, 33, 44, 0.76);
}
.chat-circle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(30, 35, 43, 0.06);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  transition: transform 0.18s ease, background 0.18s ease;
}
.chat-circle-btn.active {
  background: var(--ink);
  color: #fff;
}
.chat-capsule-inp {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.chat-pill-send {
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(30, 35, 43, 0.08);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.chat-plus-drawer {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 24px);
  padding: 14px 12px 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  animation: appSlideUp 0.18s ease;
}
.chat-plus-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.chat-plus-ico {
  width: 52px;
  height: 52px;
  border-radius: var(--r-card, 16px);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 12px rgba(20, 26, 36, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform 0.14s ease;
}
.chat-plus-tile:active .chat-plus-ico {
  transform: scale(0.92);
}
.chat-plus-label {
  font-size: 11px;
  color: var(--soft);
}

.chat-sticker-drawer {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 22px);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 165px;
  overflow-y: auto;
}
.sticker-cell {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   CHECK-PHONE TRACE SYSTEM — V7 REALISTIC NATIVE APP UI & TRANSLUCENT GLASS
   ========================================================================== */
.pk-Container {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pk-hero-card {
  background: linear-gradient(145deg, rgba(30, 35, 45, 0.86) 0%, rgba(44, 52, 66, 0.78) 100%);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-card, 24px);
  padding: 15px 17px;
  color: #f4f6fa;
  box-shadow: 0 14px 32px rgba(20, 26, 36, 0.16);
}
.pk-hero-top {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #cbd5e1;
  opacity: 0.9;
}
.pk-hero-main {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 11px 0 12px;
}
.pk-hero-ava-wrap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.pk-hero-ava-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.pk-ava-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: #e2e8f0;
  color: #1e232b;
  font-size: 8px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.pk-hero-info {
  flex: 1;
  min-width: 0;
}
.pk-hero-info small {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #cbd5e1;
  display: block;
}
.pk-hero-info h2 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
  color: #ffffff;
}
.pk-hero-info h2 span {
  font-size: 12.5px;
  font-weight: 400;
  opacity: 0.8;
}
.pk-hero-clock {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #f8fafc;
}
.pk-hero-thought {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11.5px;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #e2e8f0;
}

.pk-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.pk-mode-btn {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px);
  border: 1px solid var(--edge);
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
}
.pk-mode-btn.active {
  background: var(--ink);
  color: var(--c-white);
  box-shadow: 0 6px 16px rgba(20, 26, 36, 0.14);
}

.pk-12-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  padding: 4px 0;
}
.pk-grid-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pk-tile-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-card, 19px);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 6px 16px rgba(20, 26, 36, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  position: relative;
  transition: transform 0.14s ease;
}
.pk-grid-tile:active .pk-tile-icon {
  transform: scale(0.92);
}
.pk-seen-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
}
.pk-tile-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--ink);
  color: var(--c-white);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5.5px;
  border-radius: 999px;
}
.pk-tile-label {
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 600;
}

.pk-finish-btn {
  padding: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  border: 1px solid var(--edge);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.pk-folder-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
}
.pk-folder-pill {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--soft);
  white-space: nowrap;
}
.pk-folder-pill.active {
  background: var(--ink);
  color: var(--c-white);
  box-shadow: 0 3px 10px rgba(20, 26, 36, 0.14);
}
.pk-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  border: 1px solid var(--edge);
  color: var(--soft);
}
.pk-search-inp {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 12px;
  color: var(--ink);
}

/* Realistic Native App Cards inside Check-Phone */
.pk-record-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pk-record-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 20px);
  padding: 14px 15px;
  cursor: pointer;
  transition: transform 0.14s ease;
  box-shadow: 0 6px 20px rgba(20, 26, 36, 0.045);
}
.pk-record-card:active {
  transform: scale(0.985);
}
.pk-rec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pk-rec-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pk-rec-avatar {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(30, 35, 43, 0.08);
  border: 1px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.pk-rec-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.pk-rec-meta {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 1px;
}
.pk-rec-body {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.68;
}
.pk-rec-thought {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(30, 35, 43, 0.05);
  border-left: 2.5px solid #475569;
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.58;
}
.pk-rec-thought span {
  font-weight: 800;
  color: #334155;
}

/* Check-Phone Realistic WeChat Bubble Preview */
.pk-wx-thread-card {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 22px);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 26, 36, 0.055);
  cursor: pointer;
}
.pk-wx-topbar {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pk-wx-chat-body {
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, rgba(240, 244, 249, 0.45), rgba(255, 255, 255, 0.35));
}
.pk-wx-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.pk-wx-row.mine {
  flex-direction: row-reverse;
}
.pk-wx-ava {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(30, 35, 43, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}
.pk-wx-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pk-wx-bub {
  max-width: 78%;
  padding: 7px 11px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.96);
  font-size: 12px;
  line-height: 1.52;
  color: #1e232b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.pk-wx-row.mine .pk-wx-bub {
  border-radius: 14px 14px 4px 14px;
  background: #28303d;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.14);
}
.pk-wx-draft-box {
  margin: 4px 12px 10px;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px dashed #64748b;
  font-size: 11.5px;
  line-height: 1.55;
  color: #1e232b;
}

/* Check-Phone Polaroid Photo Card */
.pk-album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pk-album-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 20px);
  padding: 10px 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(20, 26, 36, 0.05);
}
.pk-polaroid-art {
  height: 112px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2b3340 0%, #475569 55%, #1e242d 100%) center / cover no-repeat;
  position: relative;
  overflow: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f8fafc;
}

/* Check-Phone Safari Browser Bar & Card */
.pk-browser-bar {
  padding: 8px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--soft);
  margin-bottom: 4px;
}

/* Check-Phone Titanium Bank Card */
.pk-titanium-card {
  background: linear-gradient(135deg, #1e232b 0%, #333d4b 52%, #181c23 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-card, 22px);
  padding: 16px 18px;
  color: #f8fafc;
  box-shadow: 0 12px 28px rgba(18, 22, 30, 0.18);
  margin-bottom: 6px;
}

/* Check-Phone CCTV Viewfinder Card */
.pk-cctv-card {
  background: #141820;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-card, 22px);
  padding: 14px 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 18, 24, 0.22);
}

.pk-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 12px;
}
.pk-modal-body {
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--ink);
  white-space: pre-wrap;
  padding: 8px 2px;
}
.pk-modal-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}
.pk-modal-bub {
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(30, 35, 43, 0.05);
  font-size: 12.5px;
  line-height: 1.62;
}
.pk-modal-bub.mine {
  background: #28303d;
  color: #f8fafc;
}
.pk-modal-role {
  font-size: 10px;
  font-weight: 800;
  color: var(--soft);
  margin-bottom: 3px;
}
.pk-modal-bub.mine .pk-modal-role {
  color: #cbd5e1;
}
.pk-detail-thought {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--edge);
  color: var(--ink);
}

/* ==========================================================================
   STATUS BAR DOSSIER & COLLAPSIBLE <thinking> COT PILLS
   ========================================================================== */
.chat-msg-ava.clickable-ava {
  cursor: pointer;
  position: relative;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.chat-msg-ava.clickable-ava:hover,
.chat-msg-ava.clickable-ava:active {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--ink), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dossier-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
}
.dossier-header-card {
  background: linear-gradient(145deg, #1d222b 0%, #2c3442 100%);
  color: #f8fafc;
  border-radius: var(--r-card, 22px);
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 28px rgba(18, 22, 30, 0.16);
}
.dossier-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.dossier-metric-tile {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 9px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.dossier-metric-tile small {
  font-size: 9.5px;
  color: var(--soft);
  font-weight: 700;
}
.dossier-metric-num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.dossier-metric-delta {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(30, 35, 43, 0.07);
  color: var(--ink);
}
.dossier-hairline-bar {
  width: 100%;
  height: 2.5px;
  background: rgba(30, 35, 43, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.dossier-hairline-bar > span {
  display: block;
  height: 100%;
  background: var(--ink);
}

.dossier-section-card {
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 18px);
  padding: 14px 15px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}
.dossier-section-card.obsidian {
  background: linear-gradient(145deg, #1d222b 0%, #2a313d 100%);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.18);
}
.dossier-sec-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--soft);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dossier-section-card.obsidian .dossier-sec-tag {
  color: #cbd5e1;
}
.dossier-prose {
  font-size: 13px;
  line-height: 1.82;
  color: inherit;
  white-space: pre-wrap;
}
.dossier-organ-row {
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(30, 35, 43, 0.035);
  border: 1px solid rgba(30, 35, 43, 0.06);
  font-size: 12.5px;
  line-height: 1.72;
}
.dossier-organ-row b {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 2px;
}

/* Clean Collapsible <thinking> CoT Pill & Structured Steps */
.cot-bubble-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 5px;
  max-width: 248px;
}
.cot-pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--edge);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--soft);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035);
  cursor: pointer;
  transition: all 0.15s ease;
}
.cot-pill-toggle:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}
.cot-expanded-card {
  margin-top: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 16px);
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.62;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(20, 26, 36, 0.06);
}
.cot-step-row {
  padding: 5px 0;
  border-bottom: 1px dashed var(--hairline);
}
.cot-step-row:last-child {
  border-bottom: none;
}
.cot-step-title {
  font-weight: 800;
  color: var(--ink);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 2px;
}

.wb-alabaster-card {
  background: var(--card);
  backdrop-filter: blur(24px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 20px);
  padding: 14px 15px;
  box-shadow: 0 8px 24px rgba(20, 26, 36, 0.045);
}
.wb-priority-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(30, 35, 43, 0.05);
  padding: 4px;
  border-radius: 12px;
}
.wb-priority-btn {
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--soft);
  text-align: center;
}
.wb-priority-btn.active {
  background: var(--ink);
  color: var(--c-white);
}

.preset-block-item {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 16px);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   MALL / SHOP PRODUCT CARDS & VISUAL BEAUTIFICATION
   ========================================================================== */
.shop-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.shop-prod-card {
  background: var(--card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 20px rgba(20, 26, 36, 0.05);
}
.shop-prod-img {
  height: 118px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(226, 232, 240, 0.6)) center / cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shop-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-prod-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  font-size: 9.5px;
  font-weight: 700;
  color: #1e232b;
}
.shop-prod-body {
  padding: 10px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

/* ==========================================================================
   SPINNING REFRESH ICON, OFFLINE SCENE MODE & TEXT-IMAGE POLAROID CARDS
   ========================================================================== */
.topbar-icon-circle.spinning svg {
  animation: cdSpin 0.85s linear infinite;
}

.wb-mount-item {
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(18px);
  border: 1px solid var(--edge);
  color: var(--ink);
  border-radius: var(--r-card, 16px);
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.offline-scene-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: -12px -14px -22px;
  padding: 12px 16px 12px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.offline-scroll-box {
  flex: 1;
  overflow-y: auto;
  padding: 6px 2px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.offline-turn-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 22px);
  padding: 14px 16px;
  line-height: 1.84;
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(20, 26, 36, 0.045);
}
.offline-turn-card.user-turn {
  background: rgba(30, 35, 43, 0.86);
  color: #ffffff;
  align-self: flex-end;
  max-width: 86%;
  padding: 10px 15px;
  border-radius: var(--r-card, 18px);
}
.offline-quote-underline {
  border-bottom: 1.5px dashed rgba(71, 85, 105, 0.65);
  padding-bottom: 1px;
  font-weight: 600;
}
.offline-menu-dropdown {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 182px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 22px);
  padding: 8px 6px;
  box-shadow: 0 14px 36px rgba(20, 26, 36, 0.14);
  z-index: 65;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.offline-menu-item {
  padding: 9px 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}
.offline-menu-item:hover,
.offline-menu-item:active {
  background: rgba(30, 35, 43, 0.06);
}

.chat-ai-trigger-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--c-white);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(20, 26, 36, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.16s ease;
}
.chat-ai-trigger-circle:active {
  transform: scale(0.92);
}
.chat-ai-trigger-circle.spinning svg {
  animation: cdSpin 0.85s linear infinite;
}

.text-image-polaroid {
  width: 228px;
  border-radius: var(--r-card, 18px);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(20px);
  border: 1px solid var(--edge);
  padding: 10px 11px 11px;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(20, 26, 36, 0.06);
}
.tip-canvas {
  border-radius: 12px;
  background: linear-gradient(140deg, #222730 0%, #384152 52%, #1a1e26 100%);
  color: #f8fafc;
  padding: 13px 12px;
  position: relative;
  overflow: hidden;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tip-canvas::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  pointer-events: none;
}
.tip-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  opacity: 0.8;
  margin-bottom: 6px;
}
.tip-scene-desc {
  font-size: 12px;
  line-height: 1.62;
  color: #fff;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.tip-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  font-size: 10.5px;
  color: var(--soft);
}

.seg-pill-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(30, 35, 43, 0.06);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.seg-pill-btn {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--soft);
  text-align: center;
  transition: all 0.16s ease;
}
.seg-pill-btn.active {
  background: var(--ink);
  color: var(--c-white);
  box-shadow: 0 4px 12px rgba(20, 26, 36, 0.12);
}

.studio-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--soft);
  margin: 10px 0 6px;
  letter-spacing: 0.06em;
}
.studio-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.studio-field-box {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 8px 10px;
}
.studio-field-box.full,
.studio-field-box.highlight {
  grid-column: 1 / span 2;
}
.studio-field-box small {
  display: block;
  font-size: 10px;
  color: var(--soft);
  margin-bottom: 3px;
}
.studio-field-box div {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

/* ==========================================================================
   V8 TRANSLUCENT PRO — NEW DESKTOP HORIZON, ACOUSTIC RIBBON & STATUS DOSSIER
   ========================================================================== */
.gcd-chrono-group {
  display: flex;
  align-items: baseline;
  gap: 7px;
  cursor: pointer;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.gcd-clock-inline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.gcd-date-inline {
  font-size: 10px;
  font-weight: 600;
  color: var(--soft);
}
.gcd-weather-inline {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink);
  padding-left: 5px;
  border-left: 1px solid var(--hairline);
}

.glass-acoustic-ribbon {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 22px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-spec);
  padding: 8px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.gar-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gar-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.gar-title-row b {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gar-title-row small {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
  font-weight: 700;
}
.gar-lyric {
  font-size: 10.5px;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gar-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.glass-mini-strip {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 20px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-spec);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.glass-mini-strip small {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--faint);
  font-weight: 700;
}
.gms-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
}
.gms-val b {
  font-family: Georgia, serif;
  font-size: 16px;
}
.gms-val span {
  font-size: 9px;
  color: var(--soft);
  letter-spacing: 0.08em;
}
.gms-plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(30, 35, 43, 0.08);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.gms-bpm {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(30, 35, 43, 0.08);
  color: var(--ink);
  white-space: nowrap;
}

.glass-film-panorama {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 24px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-spec);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.gfp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--soft);
}
.gfp-head button {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid var(--edge);
}
.gfp-frames {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-height: 0;
}
.gfp-frame-item {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.45);
  background-size: cover;
  background-position: center;
  border: 1.5px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 4px 12px rgba(20, 26, 36, 0.06);
  cursor: pointer;
}
.gfp-caption {
  font-size: 10.5px;
  color: var(--soft);
  text-align: left;
  padding: 3px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* High-End Translucent Frosted Status Dossier (No garish colored bars!) */
.sheer-status-dossier {
  border-radius: var(--r-card, 22px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.78), rgba(241, 245, 249, 0.62));
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 16px;
  color: var(--ink);
}
.ssd-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.ssd-metric-tile {
  padding: 10px 10px 9px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.76);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ssd-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: var(--soft);
  font-weight: 700;
}
.ssd-metric-val {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.ssd-delta-pill {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.08);
  color: var(--ink);
}
.ssd-sheer-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.08);
  overflow: hidden;
}
.ssd-sheer-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.45), rgba(30, 41, 59, 0.85));
}
.ssd-long-block {
  padding: 12px 14px;
  border-radius: var(--r-card, 16px);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.78);
  margin-top: 9px;
}
.ssd-long-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--soft);
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ssd-long-text {
  font-size: 12.8px;
  line-height: 1.78;
  color: var(--ink);
  white-space: pre-wrap;
}

/* Bubble Studio & Version Switcher */
.msg-reroll-ver-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--edge);
  font-size: 10px;
  color: var(--soft);
  font-weight: 700;
}
.msg-reroll-ver-bar button {
  font-size: 10px;
  padding: 0 3px;
  color: var(--ink);
  font-weight: 800;
}

/* Tavern-Style Modular Preset Block Cards */
.tp-block-card {
  padding: 11px 13px;
  border-radius: var(--r-card, 16px);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px);
  border: 1px solid var(--edge);
  margin-bottom: 8px;
  transition: all 0.16s ease;
}
.tp-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.tp-role-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.08);
  color: var(--ink);
  text-transform: uppercase;
}


/* ==========================================================================
   V9 SUPREME OVERHAUL — 4-PAGE ORIGINAL WIDGETS, ELEVATED WECHAT,
   STANDALONE HTML MESSAGE BUBBLES, BENTO CHECK-PHONE, THEATER & SUMMARY APP
   ========================================================================== */

/* 1. Page 1 Left Widget: Frosted Polaroid Darkroom Frame */
.lum-polaroid-widget {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 26px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.76) 0%, rgba(242, 245, 250, 0.58) 100%);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(165%);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 28px rgba(18, 24, 34, 0.07);
  padding: 10px 11px 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.lum-polaroid-widget:hover {
  transform: translateY(-1px);
}
[data-palette="obsidian"] .lum-polaroid-widget {
  background: linear-gradient(155deg, rgba(32, 38, 49, 0.78) 0%, rgba(22, 26, 35, 0.64) 100%);
}
.lpw-clip {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(203, 213, 225, 0.8), rgba(255, 255, 255, 0.95), rgba(203, 213, 225, 0.8));
  border: 1px solid rgba(30, 41, 59, 0.14);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.lpw-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--soft);
}
.lpw-top-meta button {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--edge);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink);
}
.lpw-photo-frame {
  flex: 1;
  margin: 6px 0;
  border-radius: var(--r-card, 16px);
  background: rgba(255, 255, 255, 0.5) center / cover no-repeat;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.lpw-film-badge {
  position: absolute;
  bottom: 6px;
  right: 7px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(8px);
  color: #f8fafc;
  font-size: 8px;
  font-family: monospace;
  letter-spacing: 0.08em;
}
.lpw-caption-bar {
  width: 100%;
  text-align: center;
  padding: 4px 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-palette="obsidian"] .lpw-caption-bar,
[data-palette="obsidian"] .lpw-top-meta button {
  background: rgba(255, 255, 255, 0.12);
}

/* 2. Page 1 Right Widget: Soul Resonance & Daily Fortune Capsule */
.lum-resonance-widget {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 26px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.74) 0%, rgba(238, 243, 250, 0.56) 100%);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(165%);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(18, 24, 34, 0.07);
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
[data-palette="obsidian"] .lum-resonance-widget {
  background: linear-gradient(155deg, rgba(32, 38, 49, 0.78) 0%, rgba(22, 26, 35, 0.64) 100%);
}
.lrw-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.lrw-clock-box {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.lrw-clock-box strong {
  font-family: "MagDisplay", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.lrw-clock-box small {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--soft);
  margin-top: 3px;
}
.lrw-couple-btn {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--edge);
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.lrw-wave-box {
  flex: 1;
  margin: 6px 0;
  padding: 7px 9px;
  border-radius: var(--r-card, 16px);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
[data-palette="obsidian"] .lrw-wave-box,
[data-palette="obsidian"] .lrw-couple-btn {
  background: rgba(255, 255, 255, 0.1);
}
.lrw-wave-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.lrw-wave-top em {
  font-style: normal;
  color: var(--ink);
  font-weight: 800;
}
.lrw-wave-svg {
  width: 100%;
  height: 24px;
  color: var(--ink);
}
.lrw-fortune-text {
  font-size: 9.8px;
  line-height: 1.38;
  color: var(--ink);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lrw-foot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.lrw-mini-pill {
  padding: 5px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--edge);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}
[data-palette="obsidian"] .lrw-mini-pill {
  background: rgba(255, 255, 255, 0.12);
}

/* 3. Page 1 Bottom Widget: Whisper & Quick-Launch Dock Card */
.lum-whisper-dock-card {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 24px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(165%);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 10px 26px rgba(18, 24, 34, 0.06);
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.lwdc-top {
  display: flex;
  align-items: center;
  gap: 11px;
}
.lwdc-avatars {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.lwdc-link-sym {
  font-size: 11px;
  font-weight: 800;
  color: var(--soft);
}
.lwdc-text-col {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.lwdc-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lwdc-title-row strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.lwdc-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1.5px 7px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.08);
  color: var(--ink);
}
.lwdc-text-col p {
  font-size: 10.5px;
  color: var(--soft);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lwdc-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}
.lwdc-pills button {
  padding: 5px 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--edge);
  font-size: 9.8px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-palette="obsidian"] .lwdc-pills button {
  background: rgba(255, 255, 255, 0.1);
}

/* 4. Page 2 Checklist & Page 3 Lunar/Custom HTML Widgets */
.lum-checklist-widget,
.lum-lunar-lexicon-pod,
.lum-custom-html-widget {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 24px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 24px rgba(18, 24, 34, 0.06);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.lcw-head,
.lchw-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--soft);
}
.lcw-head button,
.lchw-head button {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--edge);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink);
}
.lcw-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.lcw-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid var(--edge);
  font-size: 10.5px;
  color: var(--ink);
  cursor: pointer;
}
.lcw-item small {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lllp-top {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lllp-top small {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
  font-weight: 800;
}
.lllp-top i {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: var(--ink);
}
.lllp-top strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.lllp-top span {
  font-size: 9.5px;
  color: var(--soft);
}
.lllp-bottom {
  padding-top: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lllp-bottom strong {
  font-family: "MagDisplay", Georgia, serif;
  font-size: 19px;
  color: var(--ink);
}
.lchw-stage {
  flex: 1;
  margin-top: 6px;
  border-radius: var(--r-card, 16px);
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid var(--edge);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
[data-palette="obsidian"] .lcw-item,
[data-palette="obsidian"] .lchw-stage,
[data-palette="obsidian"] .lcw-head button,
[data-palette="obsidian"] .lchw-head button {
  background: rgba(255, 255, 255, 0.1);
}

.lum-bottom-util-strip {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 20px);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur, 28px));
  border: 1px solid var(--edge);
  padding: 6px 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  align-items: center;
}
.lum-bottom-util-strip button {
  padding: 7px 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--edge);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
}

/* ==========================================================================
   ELEVATED WECHAT CHAT INTERFACE & 12 HIGH-CRAFT BUBBLE THEMES
   ========================================================================== */
.wx-story-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 10px;
  background: var(--card);
  backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  border-radius: var(--r-card, 20px);
}
.wx-story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  width: 58px;
}
.wx-story-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #334155, #94a3b8, #1e293b);
  position: relative;
}
.wx-story-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}
.wx-story-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #fff;
}
.wx-story-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
}

/* WeChat Chat Room Live Status Ribbon */
.wx-live-status-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 8px 13px;
  margin-bottom: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(244, 248, 252, 0.72));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 16px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 11px;
  position: relative;
  overflow: hidden;
}
/* 顶端一条极细的渐变高光，精致感来源 */
.wx-live-status-ribbon::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
/* BPM 胶囊：心跳脉动 */
.wx-live-status-ribbon > div > span:first-child {
  position: relative;
  box-shadow: 0 2px 8px rgba(20,26,36,0.14);
  animation: bpmPulse 1.3s ease-in-out infinite;
}
@keyframes bpmPulse {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.07); }
  24% { transform: scale(1); }
}
.wx-live-status-ribbon > span:last-child {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(127,127,127,0.09);
}
[data-palette="obsidian"] .wx-live-status-ribbon {
  background: linear-gradient(135deg, rgba(30, 36, 48, 0.82), rgba(20, 24, 34, 0.72));
}

/* Elevated Bubble Styling & 12 Presets */
.chat-bubble {
  max-width: 252px;
  padding: 10px 14px;
  border-radius: var(--r-card, 18px) 18px 18px 5px;
  font-size: inherit;
  line-height: 1.62;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(246, 248, 252, 0.78));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 5px 16px rgba(15, 23, 42, 0.055);
  position: relative;
  transition: transform 0.14s ease;
}
.chat-msg-row.user .chat-bubble {
  border-radius: var(--r-card, 18px) 18px 5px 18px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(51, 65, 85, 0.88));
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 18px rgba(15, 23, 42, 0.14);
}

/* 12 Bubble Theme Presets */
.bstyle-champagne .chat-msg-row.ai .chat-bubble { background: linear-gradient(145deg, rgba(255,253,248,0.92), rgba(245,239,228,0.84)); color: #292524; border-color: rgba(214,203,186,0.6); }
.bstyle-champagne .chat-msg-row.user .chat-bubble { background: linear-gradient(135deg, #44403c, #292524); color: #fafaf9; }

.bstyle-sakura .chat-msg-row.ai .chat-bubble { background: linear-gradient(145deg, rgba(255,250,251,0.92), rgba(252,235,240,0.82)); color: #3f2e34; border-color: rgba(244,212,222,0.7); }
.bstyle-sakura .chat-msg-row.user .chat-bubble { background: linear-gradient(135deg, #835664, #5e3b47); color: #fff5f7; }

.bstyle-matcha .chat-msg-row.ai .chat-bubble { background: linear-gradient(145deg, rgba(250,253,250,0.92), rgba(232,243,235,0.84)); color: #1e2e23; border-color: rgba(198,222,205,0.7); }
.bstyle-matcha .chat-msg-row.user .chat-bubble { background: linear-gradient(135deg, #3b5243, #27382d); color: #f4fbf6; }

.bstyle-glacier .chat-msg-row.ai .chat-bubble { background: linear-gradient(145deg, rgba(248,252,255,0.92), rgba(226,238,250,0.84)); color: #1e293b; border-color: rgba(191,219,254,0.7); }
.bstyle-glacier .chat-msg-row.user .chat-bubble { background: linear-gradient(135deg, #334e68, #1e3a5f); color: #f0f9ff; }

.bstyle-obsidian .chat-msg-row.ai .chat-bubble { background: linear-gradient(145deg, rgba(39,46,59,0.92), rgba(26,32,44,0.88)); color: #f1f5f9; border-color: rgba(255,255,255,0.14); }
.bstyle-obsidian .chat-msg-row.user .chat-bubble { background: linear-gradient(135deg, #0f172a, #1e293b); color: #e2e8f0; border-color: rgba(255,255,255,0.22); }

/* Quote Block inside Bubble */
.msg-quote-block {
  margin-bottom: 6px;
  padding: 5px 9px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.06);
  border-left: 2.5px solid rgba(51, 65, 85, 0.55);
  font-size: 11px;
  opacity: 0.86;
  line-height: 1.4;
}
.chat-msg-row.user .msg-quote-block {
  background: rgba(255, 255, 255, 0.14);
  border-left-color: rgba(255, 255, 255, 0.75);
}

/* Micro Action Bar under each Message Bubble */
.msg-micro-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.msg-micro-toolbar:hover {
  opacity: 1;
}
.msg-micro-toolbar button {
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--hairline);
  color: var(--soft);
  font-weight: 600;
}

/* Standalone HTML Message Bubble in Chat Stream (.chat-standalone-html-bubble) */
.chat-standalone-html-bubble {
  width: 276px;
  max-width: 100%;
  border-radius: var(--r-card, 20px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(244, 247, 252, 0.82));
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 28px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  color: var(--ink);
}
[data-palette="obsidian"] .chat-standalone-html-bubble {
  background: linear-gradient(155deg, rgba(32, 38, 50, 0.92), rgba(22, 26, 36, 0.86));
  border-color: rgba(255, 255, 255, 0.18);
}
.cshb-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  background: rgba(30, 41, 59, 0.05);
  border-bottom: 1px solid var(--hairline);
  font-size: 10px;
  font-weight: 800;
  color: var(--soft);
}
.cshb-toolbar-btns {
  display: flex;
  gap: 5px;
}
.cshb-toolbar-btns button {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--edge);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink);
}
.cshb-body {
  padding: 10px 12px;
  overflow-x: hidden;
}

/* Poke System Pill */
.msg-poke-pill {
  align-self: center;
  margin: 2px auto;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
  font-size: 10.5px;
  color: var(--soft);
  font-weight: 600;
  text-align: center;
}

/* ==========================================================================
   CHECK-PHONE (查手机) V9 REDESIGNED BENTO SPATIAL ARCHITECTURE
   ========================================================================== */
.pk-bento-header {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap: 10px;
}
.pk-clock-pillar {
  border-radius: var(--r-card, 24px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.78), rgba(241, 245, 249, 0.6));
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 26px rgba(15, 23, 42, 0.06);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
[data-palette="obsidian"] .pk-clock-pillar,
[data-palette="obsidian"] .pk-id-pill-card,
[data-palette="obsidian"] .pk-featured-card,
[data-palette="obsidian"] .pk-floating-dock {
  background: linear-gradient(155deg, rgba(32, 38, 50, 0.78), rgba(22, 26, 36, 0.64));
}
.pk-clock-big {
  font-family: "MagDisplay", Georgia, serif;
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.pk-id-pill-card {
  border-radius: var(--r-card, 24px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.8), rgba(242, 246, 252, 0.64));
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 26px rgba(15, 23, 42, 0.06);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.pk-featured-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.pk-featured-card {
  border-radius: var(--r-card, 22px);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.76), rgba(244, 247, 252, 0.58));
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 8px 22px rgba(15, 23, 42, 0.05);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.pk-featured-card:active {
  transform: scale(0.975);
}

.pk-archive-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pk-archive-cell {
  border-radius: var(--r-card, 18px);
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  padding: 10px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.14s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 4px 14px rgba(15, 23, 42, 0.04);
}
[data-palette="obsidian"] .pk-archive-cell {
  background: rgba(32, 38, 50, 0.66);
}
.pk-archive-cell:active {
  transform: scale(0.96);
}

.pk-floating-dock {
  border-radius: var(--r-card, 24px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(240, 244, 250, 0.64));
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--edge);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 26px rgba(15, 23, 42, 0.07);
}
.pk-dock-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
}
.pk-dock-pill.active {
  background: var(--ink);
  color: var(--c-white);
}

/* Floating Bottom Capsule for Inner Monologue inside Check Phone Modules */
.pk-floating-thought-capsule {
  position: sticky;
  bottom: 4px;
  z-index: 25;
  padding: 10px 13px;
  border-radius: var(--r-card, 20px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(242, 246, 252, 0.82));
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--edge);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
[data-palette="obsidian"] .pk-floating-thought-capsule {
  background: linear-gradient(145deg, rgba(30, 36, 48, 0.92), rgba(20, 24, 34, 0.88));
}

/* ==========================================================================
   STANDALONE SUMMARY APP (独立「总结」软件) & MINI THEATER PAGES
   ========================================================================== */
.summary-char-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 6px;
}
.summary-char-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--r-card, 18px);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(18px);
  border: 1px solid var(--edge);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.16s ease;
}
.summary-char-pill.active {
  background: var(--ink);
  color: var(--c-white);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
}
.summary-char-pill img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}

.memory-table-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.memory-table-row {
  display: grid;
  grid-template-columns: 34% 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--edge);
  font-size: 12px;
}
[data-palette="obsidian"] .summary-char-pill:not(.active),
[data-palette="obsidian"] .memory-table-row {
  background: rgba(255, 255, 255, 0.1);
}


/* ==========================================================================
   V10 ORIGINAL COMPANION WIDGETS & PARTICLE OVERLAY
   ========================================================================== */
.desk-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.orig-twin-star-hub {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 24px);
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(241, 245, 249, 0.68));
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 28px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.otsh-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.otsh-avatars {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.otsh-link-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--c-white);
}

.otsh-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.otsh-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.otsh-name-row strong {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}

.otsh-rel-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.09);
  color: var(--ink);
}

.otsh-aff-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 999px;
  background: rgba(190, 18, 60, 0.1);
  color: #9f1239;
}

.otsh-aff-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.08);
  margin: 4px 0;
  overflow: hidden;
}

.otsh-aff-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ink), #64748b);
  transition: width 0.35s ease;
}

.otsh-status-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.otsh-status-line em {
  font-style: normal;
  font-weight: 800;
  color: var(--ink);
}

.otsh-clock {
  text-align: right;
  cursor: pointer;
  flex-shrink: 0;
}

.otsh-clock strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}

.otsh-clock small {
  font-size: 9px;
  color: var(--soft);
}

.otsh-whisper-box {
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--edge);
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.otsh-whisper-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--c-white);
  flex-shrink: 0;
}

.otsh-whisper-box p {
  margin: 0;
  font-size: 10.8px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.otsh-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.otsh-actions button {
  padding: 5px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--edge);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transition: transform 0.12s ease;
}

.otsh-actions button:active {
  transform: scale(0.96);
}

/* Original Widget 2: Proactive & Offline Probability Capsule */
.orig-proactive-capsule {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 24px);
  padding: 12px 14px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(241, 245, 249, 0.66));
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.opc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.opc-eyebrow {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--soft);
  display: block;
}

.opc-head h4 {
  margin: 2px 0 0;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
}

.opc-stream-pill {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--c-white);
  font-size: 9.5px;
  font-weight: 800;
  flex-shrink: 0;
}

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

.opc-slider-box {
  padding: 6px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--edge);
}

.opc-slider-top {
  display: flex;
  justify-content: space-between;
  font-size: 9.8px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.opc-slider-box input[type="range"] {
  width: 100%;
  height: 4px;
  accent-color: var(--ink);
}

.opc-foot-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.opc-foot-btns button {
  padding: 6px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--edge);
  font-size: 10px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

/* Original Widget 3: Shared Earbud Audio Deck */
.orig-earbud-deck {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 24px);
  padding: 11px 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(241, 245, 249, 0.66));
  backdrop-filter: blur(26px);
  border: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oed-top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.oed-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.oed-earbud-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  color: var(--soft);
  margin-bottom: 2px;
}

.oed-earbud-tags span {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.07);
  color: var(--ink);
}

.oed-title-row b {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.oed-lyric {
  font-size: 10.5px;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 4px;
}

.oed-noise-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}

.oed-noise-bar button {
  padding: 4px 4px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--edge);
  font-size: 9.8px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Original Widget 4: Mood Signal Sensor */
.orig-mood-signal-bar,
.orig-anni-capsule,
.orig-linkage-hub,
.orig-nexus-dashboard {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 24px);
  padding: 11px 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(241, 245, 249, 0.66));
  backdrop-filter: blur(26px);
  border: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.omsb-head,
.oac-top,
.olh-head,
.ond-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--soft);
}

.omsb-pills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.omsb-pills button {
  padding: 6px 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--edge);
  font-size: 10px;
  font-weight: 800;
  color: var(--ink);
}

.omsb-feedback {
  font-size: 10.5px;
  color: var(--ink);
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oac-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}

.oac-days b {
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
}

.oac-foot {
  font-size: 9.5px;
  color: var(--soft);
}

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

.olh-grid button {
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--edge);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}

.ond-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.ond-desc {
  font-size: 11px;
  color: var(--soft);
  line-height: 1.45;
  margin: 0 0 8px;
}

.ond-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.ond-stat-box {
  padding: 7px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--edge);
  text-align: center;
  cursor: pointer;
}

.ond-stat-box small {
  display: block;
  font-size: 9px;
  color: var(--soft);
}

.ond-stat-box strong {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}

/* ==========================================================================
   10 DISTINCT STRUCTURAL & DECORATIVE WECHAT BUBBLE STYLES (造型级异形气泡)
   ========================================================================== */
.chat-messages-box .chat-bubble {
  position: relative;
  transition: all 0.2s ease;
}

/* 1. 猫耳软垫气泡 (cat_ear) */
.chat-messages-box.bshape-cat_ear .chat-bubble {
  border-radius: var(--r-card, 20px) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  padding: 11px 15px !important;
  margin-top: 7px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07) !important;
}
.chat-messages-box.bshape-cat_ear .chat-bubble::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 12px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-top: 1.5px solid rgba(30, 41, 59, 0.2);
  border-left: 1.5px solid rgba(30, 41, 59, 0.2);
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}
.chat-messages-box.bshape-cat_ear .chat-bubble::after {
  content: "🐾";
  position: absolute;
  right: 6px;
  bottom: 2px;
  font-size: 9px;
  opacity: 0.42;
  pointer-events: none;
}

/* 2. 35mm 银盐胶片齿孔气泡 (film_strip) */
.chat-messages-box.bshape-film_strip .chat-bubble {
  border-radius: 8px !important;
  padding: 14px 14px !important;
  border-top: 5px dashed rgba(148, 163, 184, 0.55) !important;
  border-bottom: 5px dashed rgba(148, 163, 184, 0.55) !important;
  border-left: 1.5px solid rgba(30, 41, 59, 0.2) !important;
  border-right: 1.5px solid rgba(30, 41, 59, 0.2) !important;
  font-family: system-ui, monospace, sans-serif;
}
.chat-messages-box.bshape-film_strip .chat-bubble::after {
  content: "35MM · KODAK";
  position: absolute;
  top: 2px;
  right: 7px;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  opacity: 0.45;
  font-weight: 800;
}

/* 3. 火漆复古信笺气泡 (wax_letter) */
.chat-messages-box.bshape-wax_letter .chat-bubble {
  border-radius: 4px 16px 4px 16px !important;
  padding: 12px 16px !important;
  border-width: 1px !important;
  border-style: solid !important;
  outline: 1px dashed rgba(120, 90, 60, 0.22);
  outline-offset: -4px;
  background-image: repeating-linear-gradient(transparent, transparent 23px, rgba(120, 90, 60, 0.07) 24px) !important;
}
.chat-messages-box.bshape-wax_letter .chat-bubble::after {
  content: "✦";
  position: absolute;
  top: -6px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2c4d75;
  color: #fff;
  font-size: 9px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(136, 19, 55, 0.35);
}

/* 4. 赛博终端机甲气泡 (cyber_hud) */
.chat-messages-box.bshape-cyber_hud .chat-bubble {
  border-radius: 2px 14px 2px 14px !important;
  border-left: 3.5px solid #38bdf8 !important;
  border-top: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-right: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35) !important;
  padding: 12px 14px 10px !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.12) !important;
}
.chat-messages-box.bshape-cyber_hud .chat-bubble::before {
  content: "SYS//LINK";
  position: absolute;
  top: 2px;
  right: 8px;
  font-size: 7.5px;
  font-family: monospace;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

/* 5. 奶油云朵花边气泡 (cloud_lace) */
.chat-messages-box.bshape-cloud_lace .chat-bubble {
  border-radius: var(--r-card, 24px) 12px 26px 10px !important;
  border-width: 2px !important;
  border-style: dotted !important;
  padding: 11px 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06), inset 0 0 0 3px rgba(255, 255, 255, 0.35) !important;
}
.chat-messages-box.bshape-cloud_lace .chat-bubble::after {
  content: "☁️";
  position: absolute;
  top: -8px;
  right: 8px;
  font-size: 11px;
}

/* 6. 高定杂志引文气泡 (magazine_quote) */
.chat-messages-box.bshape-magazine_quote .chat-bubble {
  border-radius: 6px 16px 16px 6px !important;
  border-left: 4px solid currentColor !important;
  padding: 11px 16px !important;
  font-family: Georgia, "Noto Serif SC", serif !important;
}
.chat-messages-box.bshape-magazine_quote .chat-bubble::before {
  content: "“";
  position: absolute;
  top: -4px;
  left: 5px;
  font-size: 22px;
  opacity: 0.22;
  font-family: Georgia, serif;
}

/* 7. 锯齿小票存根气泡 (receipt_ticket) */
.chat-messages-box.bshape-receipt_ticket .chat-bubble {
  border-radius: 12px !important;
  border-left: 3px dotted rgba(100, 116, 139, 0.45) !important;
  border-right: 3px dotted rgba(100, 116, 139, 0.45) !important;
  padding: 11px 16px !important;
}
.chat-messages-box.bshape-receipt_ticket .chat-bubble::after {
  content: "TICKET · NO.01";
  position: absolute;
  bottom: 2px;
  right: 8px;
  font-size: 7.5px;
  font-family: monospace;
  opacity: 0.42;
}

/* 8. 冰晶双层棱镜气泡 (crystal_prism) */
.chat-messages-box.bshape-crystal_prism .chat-bubble {
  border-radius: var(--r-card, 18px) 4px 18px 4px !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) !important;
}
.chat-messages-box.bshape-crystal_prism .chat-bubble::after {
  content: "◇";
  position: absolute;
  top: 4px;
  right: 7px;
  font-size: 9px;
  opacity: 0.45;
}

/* 9. 手账和纸胶带气泡 (ribbon_bow) */
.chat-messages-box.bshape-ribbon_bow .chat-bubble {
  border-radius: 14px !important;
  margin-top: 8px !important;
  padding: 12px 15px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07) !important;
}
.chat-messages-box.bshape-ribbon_bow .chat-bubble::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 38px;
  height: 11px;
  background: rgba(148, 163, 184, 0.38);
  border-left: 1px dashed rgba(255, 255, 255, 0.6);
  border-right: 1px dashed rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   REDESIGNED CONTACT GALLERY & CHARACTER ONBOARDING DOSSIER
   ========================================================================== */
.wx-contact-gallery-card {
  border-radius: var(--r-card, 20px);
  padding: 13px 15px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(244, 247, 252, 0.68));
  backdrop-filter: blur(22px);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 9px;
  cursor: pointer;
  transition: transform 0.14s ease;
}
.wx-contact-gallery-card:active {
  transform: scale(0.985);
}

.rel-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.rel-stage-chip {
  padding: 7px 6px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--edge);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}
.rel-stage-chip.active {
  background: var(--ink);
  color: var(--c-white);
  border-color: var(--ink);
}

/* ==========================================================================
   UNIVERSAL COMPANION STUDIO CONFIG BAR & FORWARDED CARDS
   ========================================================================== */
.companion-studio-bar {
  border-radius: var(--r-card, 18px);
  padding: 11px 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(241, 245, 249, 0.72));
  border: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wx-forwarded-app-card {
  max-width: 270px;
  border-radius: var(--r-card, 16px);
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.88));
  border: 1px solid rgba(30, 41, 59, 0.14);
  color: #1e293b;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* ===== Companion Pulse: unread badge + relationship stage tag (清透) =====
   The base .wx-conv-ava clips with overflow:hidden, which would cut the badge
   off. Keep the avatar rounded via the inner <img> instead. */
.wx-conv-ava {
  position: relative;
  overflow: visible;
}
.wx-conv-ava img {
  border-radius: 15px;
}
.wx-unread-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(145deg, #fb7185, #4673a8);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 2px 7px rgba(225, 29, 72, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  pointer-events: none;
}
.wx-rel-tag {
  background: rgba(255, 255, 255, 0.55) !important;
  color: #475569 !important;
  border: 1px solid rgba(148, 163, 184, 0.3);
  backdrop-filter: blur(6px);
  font-weight: 700;
}

/* Relationship milestone line inside a chat thread (清透居中药丸) */
.msg-relation-shift {
  align-self: center;
  max-width: 82%;
  margin: 8px auto;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #9f1239;
  text-align: center;
  background: rgba(255, 228, 236, 0.5);
  border: 1px solid rgba(244, 114, 182, 0.28);
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   气泡「形状 × 配色」正交修复
   原来形状规则用 border 简写 + !important 写死了边框颜色，把配色方案的
   border-color 覆盖掉，导致两组设置看起来只有一组生效。
   现在：形状只管圆角/边框宽度/装饰，配色只管背景与颜色，互不干扰。
   ========================================================================== */
.chat-messages-box[class*="bstyle-"] .chat-msg-row.ai .chat-bubble,
.chat-messages-box[class*="bstyle-"] .chat-msg-row.user .chat-bubble {
  border-color: inherit;
}
/* 让配色方案的边框色与背景同级生效（与形状的 !important 宽度共存） */
.chat-messages-box.bstyle-champagne .chat-msg-row.ai .chat-bubble { border-color: rgba(214,203,186,0.75) !important; }
.chat-messages-box.bstyle-champagne .chat-msg-row.user .chat-bubble { border-color: rgba(68,64,60,0.5) !important; }
.chat-messages-box.bstyle-sakura .chat-msg-row.ai .chat-bubble { border-color: rgba(244,212,222,0.85) !important; }
.chat-messages-box.bstyle-sakura .chat-msg-row.user .chat-bubble { border-color: rgba(131,86,100,0.5) !important; }
.chat-messages-box.bstyle-matcha .chat-msg-row.ai .chat-bubble { border-color: rgba(198,222,205,0.85) !important; }
.chat-messages-box.bstyle-matcha .chat-msg-row.user .chat-bubble { border-color: rgba(59,82,67,0.5) !important; }
.chat-messages-box.bstyle-glacier .chat-msg-row.ai .chat-bubble { border-color: rgba(191,219,254,0.85) !important; }
.chat-messages-box.bstyle-glacier .chat-msg-row.user .chat-bubble { border-color: rgba(51,78,104,0.5) !important; }
.chat-messages-box.bstyle-obsidian .chat-msg-row.ai .chat-bubble { border-color: rgba(255,255,255,0.2) !important; }
.chat-messages-box.bstyle-obsidian .chat-msg-row.user .chat-bubble { border-color: rgba(255,255,255,0.28) !important; }
.chat-messages-box.bstyle-clean .chat-msg-row.ai .chat-bubble { border-color: rgba(30,41,59,0.14) !important; }
.chat-messages-box.bstyle-clean .chat-msg-row.user .chat-bubble { border-color: rgba(30,41,59,0.3) !important; }

/* 形状的尖角/装饰继承气泡背景，这样换配色时装饰也跟着变 */
.chat-messages-box[class*="bshape-"] .chat-bubble::before {
  border-color: inherit !important;
}

/* ==========================================================================
   沉浸阅读器 (Immersive Reader) — 长文全屏阅读
   ========================================================================== */
#immersiveReader .imr-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#immersiveReader .imr-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
  backdrop-filter: blur(8px);
}
#immersiveReader .imr-title {
  flex: 1;
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#immersiveReader .imr-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}
#immersiveReader .imr-panel {
  flex-shrink: 0;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
  background: rgba(128, 128, 128, 0.06);
}
#immersiveReader .imr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
#immersiveReader .imr-row span { flex-shrink: 0; min-width: 62px; }
#immersiveReader .imr-row input[type="range"] { flex: 1; }
#immersiveReader .imr-themes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
#immersiveReader .imr-theme {
  padding: 7px 4px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 800;
  border: 2px solid transparent;
}
#immersiveReader .imr-theme.on { border-color: #0284c7; }
#immersiveReader .imr-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 60px;
  -webkit-overflow-scrolling: touch;
}
#immersiveReader .imr-meta {
  font-size: 11px;
  opacity: 0.55;
  margin-bottom: 18px;
  text-align: center;
}
#immersiveReader .imr-body p { margin: 0 0 1.1em; }
#immersiveReader .imr-end {
  text-align: center;
  opacity: 0.45;
  font-size: 12px;
  margin: 26px 0 14px;
  letter-spacing: 0.3em;
}
#immersiveReader .imr-fwd {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  background: rgba(128, 128, 128, 0.1);
  color: inherit;
  font-size: 12.5px;
  font-weight: 800;
}

/* ==========================================================================
   LUMIÈRE 清透组件组 (lw-*)
   设计原则：几乎全透明的玻璃底 + 极细边 + 大留白，所有色彩来自用户自己的
   桌面背景图，所以换背景就等于换整套配色。
   ========================================================================== */
.lw-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-card, 22px);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-card, 0 8px 28px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.45));
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lw-card:active { transform: scale(0.985); }

/* ---------- 组件1：相框卡 ---------- */
.lw-frame { display: flex; flex-direction: column; }
.lw-frame-media {
  flex: 1;
  min-height: 0;
  position: relative;
  margin: 10px 10px 0;
  border-radius: var(--r-card, 16px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  border: 1px dashed rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
}
.lw-frame-media.has-img {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.4);
  background-size: cover;
  background-position: center;
}
.lw-frame-media.has-img .lw-frame-empty { display: none; }
.lw-frame-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: 0.72;
}
.lw-frame-plus {
  font-size: 26px;
  font-weight: 200;
  line-height: 1;
  color: var(--ink, #1f2430);
  opacity: 0.5;
}
.lw-frame-hint { font-size: 10.5px; color: var(--soft, #64748b); letter-spacing: 0.04em; }
.lw-frame-foot { padding: 10px 14px 12px; }
.lw-frame-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #1f2430);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lw-frame-sub { font-size: 9.5px; color: var(--faint, #94a3b8); margin-top: 3px; }

/* ---------- 组件2：双栏便签 ---------- */
.lw-duo { display: flex; align-items: stretch; }
.lw-duo-img {
  width: 38%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.32);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}
.lw-duo-empty span {
  font-size: 22px;
  font-weight: 200;
  color: var(--ink, #1f2430);
  opacity: 0.4;
}
.lw-duo-img.has-img .lw-duo-empty { display: none; }
.lw-duo-body { flex: 1; min-width: 0; padding: 11px 13px; display: flex; flex-direction: column; justify-content: center; }
.lw-duo-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--faint, #94a3b8);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lw-duo-main {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink, #1f2430);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lw-duo-meta { font-size: 9.5px; color: var(--faint, #94a3b8); margin-top: 4px; }

/* ---------- 组件3：计数牌 ---------- */
.lw-count { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.lw-count-label { font-size: 10px; font-weight: 700; color: var(--soft, #64748b); letter-spacing: 0.1em; }
.lw-count-num {
  font-size: 34px;
  font-weight: 200;
  line-height: 1.05;
  color: var(--ink, #1f2430);
  font-variant-numeric: tabular-nums;
}
.lw-count-unit { font-size: 10px; color: var(--faint, #94a3b8); letter-spacing: 0.2em; }

/* ---------- 组件4：标签云 ---------- */
.lw-tags { padding: 12px 13px; display: flex; flex-direction: column; }
.lw-tags-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--faint, #94a3b8);
  margin-bottom: 7px;
}
.lw-tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; overflow: hidden; }
.lw-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink, #1f2430);
  white-space: nowrap;
}

/* 深色背景下自动反色，保证在任意背景图上都看得清 */
@media (prefers-color-scheme: dark) {
  .lw-card { background: rgba(20, 24, 32, 0.3); border-color: rgba(255, 255, 255, 0.16); }
  .lw-tag { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
}

/* ==========================================================================
   线下见面邀约卡 — 夜色清透版
   ========================================================================== */
.offline-invite-card {
  position: relative;
  max-width: 280px;
  border-radius: var(--r-card, 20px);
  padding: 14px 16px 12px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(150deg, rgba(30, 27, 56, 0.9), rgba(17, 24, 39, 0.94));
  border: 1px solid rgba(167, 139, 250, 0.3);
  box-shadow: 0 10px 30px rgba(15, 12, 41, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #ede9fe;
  transition: transform 0.18s ease;
}
.offline-invite-card:active { transform: scale(0.98); }
.offline-invite-card .oic-glow {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 181, 253, 0.3), transparent 70%);
  pointer-events: none;
}
.offline-invite-card .oic-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
}
.offline-invite-card .oic-moon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: rgba(167, 139, 250, 0.18);
  border: 1px solid rgba(196, 181, 253, 0.32);
}
.offline-invite-card .oic-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f5f3ff;
}
.offline-invite-card .oic-sub {
  font-size: 9.5px;
  color: rgba(221, 214, 254, 0.72);
  margin-top: 2px;
}
.offline-invite-card .oic-scene {
  font-size: 12.5px;
  line-height: 1.72;
  color: rgba(237, 233, 254, 0.94);
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
  position: relative;
}
.offline-invite-card .oic-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.offline-invite-card .oic-cta {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #c4b5fd;
}
.offline-invite-card .oic-arrow {
  font-size: 14px;
  color: #c4b5fd;
  animation: oicNudge 1.6s ease-in-out infinite;
}
@keyframes oicNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* ==========================================================================
   统一排版系统 (Typography & Rhythm)
   解决「排版杂乱」：给卡片内部的信息建立固定层级与间距节奏，
   所有软件复用同一套，不再每处自己定字号和边距。
   ========================================================================== */

/* —— 卡片内的垂直节奏：子元素之间自动留白 —— */
.glass-card > * + * { margin-top: 10px; }
.glass-card { padding: 16px 16px; }

/* —— 信息层级 —— */
.ty-eyebrow {            /* 最上面的小标签：分类/来源 */
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: uppercase;
  line-height: 1.2;
}
.ty-title {              /* 卡片主标题 */
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ty-subtitle {           /* 副标题 */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--soft);
}
.ty-body {               /* 正文 */
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
}
.ty-body-lg {            /* 长文正文：更松 */
  font-size: 13.5px;
  line-height: 2;
  color: var(--ink);
  white-space: pre-wrap;
}
.ty-meta {               /* 时间/字数等辅助信息 */
  font-size: 10px;
  color: var(--faint);
  line-height: 1.4;
}
.ty-quote {              /* 引用/心声 */
  font-size: 12px;
  line-height: 1.75;
  color: var(--ink);
  padding: 10px 13px;
  border-radius: 13px;
  background: rgba(127, 127, 127, 0.06);
  border-left: 3px solid var(--accent, var(--ink));
}

/* —— 区块：把一张卡内的不同内容真正分开 —— */
.ty-sect {
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(127, 127, 127, 0.045);
}
.ty-sect + .ty-sect { margin-top: 8px; }
.ty-sect-label {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--soft);
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}
.ty-divider {
  height: 1px;
  background: var(--hairline);
  margin: 12px 0;
  border: 0;
}

/* —— 头部：标题行 + 右侧操作 —— */
.ty-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ty-head-main { flex: 1; min-width: 0; }
.ty-head-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

/* —— 标签行 —— */
.ty-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* —— 底部操作条 —— */
.ty-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

/* —— 空状态 —— */
.ty-empty {
  text-align: center;
  padding: 30px 18px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--soft);
}
.ty-empty-icon { font-size: 30px; opacity: 0.4; display: block; margin-bottom: 8px; }

/* —— 列表项 —— */
.ty-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
}
.ty-row + .ty-row { border-top: 1px solid var(--hairline); }
.ty-row-main { flex: 1; min-width: 0; }

/* —— 两列栅格 —— */
.ty-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ty-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }

/* —— 让页面整体有呼吸：app 内容区的卡片间距 —— */
.app-scroll-body > .glass-card + .glass-card { margin-top: 11px; }

/* ==========================================================================
   主页面精修：减轻视觉噪音，拉开层次
   ========================================================================== */
/* app 标签更轻、更淡，不跟图标抢注意力 */
.slot-label {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  opacity: 0.7 !important;
  letter-spacing: 0.02em;
}
/* 图标统一轻投影，hover 更克制 */
.block {
  box-shadow: 0 4px 14px rgba(20, 26, 36, 0.05), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.slot:active .block { transform: scale(0.9); }

/* 桌面组件与图标区的呼吸：组件之间统一间距 */
.witem { display: flex; }
.witem > div, .witem > section, .witem > button { width: 100%; }

/* 顶部状态条更清透 */
.sb-left, .sb-right { font-weight: 600; }

/* 分页圆点更精致 */
.pager-dots .dot, .page-dot {
  width: 5px !important; height: 5px !important;
  opacity: 0.35;
}
.pager-dots .dot.active, .page-dot.active { opacity: 0.9 !important; width: 14px !important; border-radius: 3px !important; }

/* card-tag 统一成清透胶囊，不再一堆实色块 */
.card-tag {
  background: rgba(127,127,127,0.09);
  color: var(--soft);
  font-size: 10px;
  font-weight: 700;
  padding: 2.5px 9px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  border: none;
}


/* ==========================================================================
   美化系统 2.0 — 四个独立维度，组合出真正不同的观感
   字体(data-font) × 文字色(--user-ink) × 底纹(data-texture) × 密度(data-density)
   ========================================================================== */

/* ——————————————— 维度一：字体族（整机换字，观感立变）——————————————— */
[data-font="rounded"] { font-family: "PingFang SC", "Hiragino Sans GB", "Nunito", system-ui, sans-serif; letter-spacing: 0.01em; }
[data-font="serif"]   { font-family: Georgia, "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif; }
[data-font="serif"] .ty-title, [data-font="serif"] .card-title, [data-font="serif"] .modal-title { letter-spacing: 0.02em; }
[data-font="mono"]    { font-family: "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, "Courier New", monospace; letter-spacing: -0.01em; }
[data-font="hand"]    { font-family: "Comic Sans MS", "Yuanti SC", "DFKai-SB", "KaiTi", cursive; letter-spacing: 0.02em; }
[data-font="elegant"] { font-family: "Optima", "Didot", "STSong", "Noto Serif SC", serif; font-weight: 300; }
[data-font="elegant"] .ty-title, [data-font="elegant"] b { font-weight: 600; }

/* ——————————————— 维度二：全局文字主色（用户自定义，CSS 变量覆盖）——————————————— */
/* 在 applyThemeAndAppearance 里把 --user-ink 写到 root，这里消费 */
[style*="--user-ink"] .ty-title,
[style*="--user-ink"] .ty-body,
[style*="--user-ink"] .card-title { color: var(--user-ink); }

/* ——————————————— 维度三：底纹（直接作为容器背景，随内容滚动）——————————————— */
[data-texture="dots"] .desktop-body,
[data-texture="dots"] .app-scroll-body {
  background-image: radial-gradient(rgba(127,127,127,0.11) 1px, transparent 1px);
  background-size: 18px 18px;
}
[data-texture="grid"] .desktop-body,
[data-texture="grid"] .app-scroll-body {
  background-image: linear-gradient(rgba(127,127,127,0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(127,127,127,0.075) 1px, transparent 1px);
  background-size: 26px 26px;
}
[data-texture="paper"] .desktop-body,
[data-texture="paper"] .app-scroll-body {
  background-image: repeating-linear-gradient(0deg, rgba(120,100,70,0.05) 0, rgba(120,100,70,0.05) 1px, transparent 1px, transparent 5px);
}
[data-texture="noise"] .desktop-body,
[data-texture="noise"] .app-scroll-body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2770%27 height=%2770%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence baseFrequency=%270.85%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%2770%27 height=%2770%27 filter=%27url%28%23n%29%27 opacity=%270.05%27/%3E%3C/svg%3E");
}

/* ——————————————— 维度四：密度（紧凑 / 标准 / 疏朗）——————————————— */
[data-density="compact"] .glass-card { padding: 11px 12px; }
[data-density="compact"] .glass-card > * + * { margin-top: 6px; }
[data-density="compact"] .ty-body { line-height: 1.6; }
[data-density="compact"] .app-scroll-body > .glass-card + .glass-card { margin-top: 7px; }

[data-density="airy"] .glass-card { padding: 22px 20px; }
[data-density="airy"] .glass-card > * + * { margin-top: 15px; }
[data-density="airy"] .ty-body { line-height: 2.1; }
[data-density="airy"] .app-scroll-body > .glass-card + .glass-card { margin-top: 18px; }
[data-density="airy"] .ty-title { font-size: 16.5px; }

/* ==========================================================================
   布局骨架切换 (data-layout) — 改的是整页结构，不是配色
   样板第一套：magazine（杂志 feed 流）
   ========================================================================== */

/* —— magazine：桌面从「图标网格」变成「竖向大卡片流」—— */
[data-layout="magazine"] .grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 14px 18px !important;
  overflow-y: auto !important;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
}
/* 每个 app 变成一张横向大卡，图标在左、名字在右、整行可点 */
[data-layout="magazine"] .slot {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: var(--r-card, 18px) !important;
  background: var(--card) !important;
  backdrop-filter: blur(var(--glass-blur, 26px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 26px)) saturate(150%);
  border: 1px solid var(--edge) !important;
  box-shadow: 0 6px 20px rgba(20,26,36,0.05) !important;
  grid-column: unset !important;
  grid-row: unset !important;
}
[data-layout="magazine"] .slot .block {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  flex-shrink: 0;
  box-shadow: none !important;
  background: rgba(127,127,127,0.07) !important;
  border: none !important;
  backdrop-filter: none !important;
}
[data-layout="magazine"] .slot .block svg { width: 21px; height: 21px; }
[data-layout="magazine"] .slot-label {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-align: left !important;
  flex: 1;
}
/* 右侧箭头，强化「列表条目」语义 */
[data-layout="magazine"] .slot::after {
  content: "›";
  font-size: 20px;
  color: var(--faint);
  font-weight: 300;
  flex-shrink: 0;
}
/* 大组件在 feed 流里占满整行、自然高度 */
[data-layout="magazine"] .witem {
  width: 100% !important;
  grid-column: unset !important;
  grid-row: unset !important;
  min-height: 150px;
}
/* 分页器在 feed 模式下不需要横向滑动 */
[data-layout="magazine"] .pager {
  flex-direction: column !important;
  overflow-y: auto !important;
  transform: none !important;
  width: 100% !important;
}
[data-layout="magazine"] .page {
  width: 100% !important;
  flex-shrink: 0;
  transform: none !important;
  position: relative !important;
}

/* —— 布局二：zen（禅意净屏）—— 大留白 + 图标缩小居中 + 只保留必要元素 —— */
[data-layout="zen"] .grid {
  gap: 20px 14px !important;
  padding: 28px 26px 16px !important;
  align-content: center !important;
}
[data-layout="zen"] .block {
  width: 46px !important; height: 46px !important;
  border-radius: var(--r-card, 23px) !important;
  background: rgba(127,127,127,0.05) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
[data-layout="zen"] .block svg { width: 19px; height: 19px; opacity: 0.75; }
[data-layout="zen"] .slot-label { font-size: 9.5px !important; font-weight: 400 !important; opacity: 0.55 !important; }
/* 组件去掉重边框，融进背景 */
[data-layout="zen"] .glass-card,
[data-layout="zen"] .lw-card {
  box-shadow: none !important;
  border: 1px solid var(--hairline) !important;
  background: rgba(127,127,127,0.03) !important;
}

/* —— 布局三：editorial（排版杂志）—— 衬线标题 + 细线分隔 + 克制单色 —— */
[data-layout="editorial"] .grid {
  gap: 2px 10px !important;
  padding: 14px 20px !important;
}
[data-layout="editorial"] .block {
  width: 40px !important; height: 40px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
[data-layout="editorial"] .block svg { width: 22px; height: 22px; stroke-width: 1.3; }
[data-layout="editorial"] .slot {
  border-bottom: 1px solid var(--hairline);
  padding: 6px 0 !important;
}
[data-layout="editorial"] .slot-label {
  font-family: Georgia, "Noto Serif SC", serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.8 !important;
  letter-spacing: 0.04em;
}
[data-layout="editorial"] .glass-card,
[data-layout="editorial"] .lw-card {
  border-radius: 2px !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}

/* magazine 模式：四页纵向连成一条 feed，隐藏分页圆点 */
[data-layout="magazine"] .dots,
[data-layout="magazine"] .pager-dots { display: none !important; }
[data-layout="magazine"] .desktop-body { overflow-y: auto !important; }

/* —— 布局四：bento（便当格）—— 大小不一的方格拼贴 —— */
[data-layout="bento"] .grid { gap: 8px !important; padding: 10px 12px !important; }
[data-layout="bento"] .slot {
  background: var(--card) !important;
  border: 1px solid var(--edge) !important;
  border-radius: var(--r-card, 20px) !important;
  padding: 10px 6px !important;
  backdrop-filter: blur(var(--glass-blur,24px));
  box-shadow: 0 4px 14px rgba(20,26,36,0.04) !important;
}
[data-layout="bento"] .slot:nth-child(4n+1) { grid-column: span 2 !important; }
[data-layout="bento"] .block { width: 38px !important; height: 38px !important; border-radius: 13px !important; background: rgba(127,127,127,0.07) !important; border: none !important; box-shadow: none !important; }
[data-layout="bento"] .slot-label { font-size: 10px !important; font-weight: 600 !important; }

/* —— 布局五：sidebar（侧栏竖排）—— 图标靠左竖列，右侧留给组件 —— */
[data-layout="sidebar"] .grid {
  grid-template-columns: 64px 1fr !important;
  gap: 8px 12px !important;
  padding: 10px 12px !important;
  align-content: start !important;
}
[data-layout="sidebar"] .slot { grid-column: 1 !important; grid-row: auto !important; }
[data-layout="sidebar"] .witem { grid-column: 2 !important; grid-row: auto !important; }
[data-layout="sidebar"] .block { width: 44px !important; height: 44px !important; border-radius: 15px !important; }
[data-layout="sidebar"] .slot-label { font-size: 8.5px !important; opacity: 0.6 !important; }

/* —— 布局六：compactrow（三列密排）—— 小图标高密度 —— */
[data-layout="compactrow"] .grid {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px 2px !important;
  padding: 10px 8px !important;
}
[data-layout="compactrow"] .block { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
[data-layout="compactrow"] .block svg { width: 18px; height: 18px; }
[data-layout="compactrow"] .slot-label { font-size: 8.5px !important; font-weight: 500 !important; }
[data-layout="compactrow"] .witem { grid-column: 1 / span 5 !important; }

/* —— 布局七：frame（画框）—— 每个图标带画框边线，像展墙 —— */
[data-layout="frame"] .grid { gap: 12px 8px !important; padding: 14px 16px !important; }
[data-layout="frame"] .slot { padding: 8px 4px !important; }
[data-layout="frame"] .block {
  width: 52px !important; height: 52px !important;
  border-radius: 2px !important;
  background: transparent !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--hairline) !important;
  backdrop-filter: none !important;
  opacity: 0.82;
}
[data-layout="frame"] .block svg { stroke-width: 1.4; }
[data-layout="frame"] .slot-label { font-size: 9.5px !important; font-weight: 500 !important; letter-spacing: 0.06em; margin-top: 5px; }
[data-layout="frame"] .glass-card, [data-layout="frame"] .lw-card {
  border-radius: 2px !important;
  border: 1.5px solid var(--hairline) !important;
  box-shadow: 4px 4px 0 rgba(127,127,127,0.07) !important;
}

/* 非网格布局统一清掉组件的固定栅格定位，避免错位 */
[data-layout="bento"] .witem,
[data-layout="sidebar"] .witem,
[data-layout="compactrow"] .witem,
[data-layout="frame"] .witem { grid-row: auto !important; }
[data-layout="bento"] .slot { grid-row: auto !important; }
[data-layout="compactrow"] .slot { grid-row: auto !important; }
[data-layout="frame"] .slot { grid-column: auto !important; grid-row: auto !important; }

/* ==========================================================================
   四套素雅配色（低饱和耐看，无艳色）— 与界面风格正交
   ========================================================================== */
[data-palette="daiqing"] {
  --c-white: #f3f5f6; --c-light: #e6eaec; --c-ink: #20292e; --c-grey: #5c6a70;
  --paper: #e3e8ea; --card: rgba(246,248,249,0.6); --card-solid: rgba(243,245,246,0.94);
  --ink: #20292e; --soft: #556168; --faint: #8a969c;
  --edge: rgba(255,255,255,0.8); --hairline: rgba(32,41,46,0.09);
  --block: rgba(246,248,249,0.5); --block-edge: rgba(255,255,255,0.85); --block-on: rgba(210,220,224,0.7);
  --accent: #3a5a63; --accent-soft: rgba(58,90,99,0.1); --glass-blur: 26px;
}
[data-palette="oatmeal"] {
  --c-white: #faf6f0; --c-light: #f0e8dd; --c-ink: #3a322a; --c-grey: #7a6e60;
  --paper: #ece2d4; --card: rgba(250,246,240,0.64); --card-solid: rgba(250,246,240,0.95);
  --ink: #3a322a; --soft: #6e6256; --faint: #a89a88;
  --edge: rgba(255,255,255,0.85); --hairline: rgba(58,50,42,0.08);
  --block: rgba(250,246,240,0.5); --block-edge: rgba(255,255,255,0.88); --block-on: rgba(232,222,208,0.72);
  --accent: #a67c52; --accent-soft: rgba(166,124,82,0.1); --glass-blur: 24px;
}
[data-palette="ouhe"] {
  --c-white: #f7f4f8; --c-light: #ece5ef; --c-ink: #332b38; --c-grey: #6b5f72;
  --paper: #e8dfec; --card: rgba(247,244,248,0.62); --card-solid: rgba(247,244,248,0.95);
  --ink: #332b38; --soft: #645870; --faint: #9a8ea4;
  --edge: rgba(255,255,255,0.84); --hairline: rgba(51,43,56,0.08);
  --block: rgba(247,244,248,0.5); --block-edge: rgba(255,255,255,0.86); --block-on: rgba(226,216,232,0.72);
  --accent: #8a6d99; --accent-soft: rgba(138,109,153,0.1); --glass-blur: 26px;
}
[data-palette="pinemoss"] {
  --c-white: #1c2420; --c-light: #141a17; --c-ink: #e4ebe6; --c-grey: #8fa098;
  --paper: #10150f; --card: rgba(28,36,32,0.6); --card-solid: rgba(24,31,27,0.95);
  --ink: #e4ebe6; --soft: #9fb0a7; --faint: #6b7a72;
  --edge: rgba(255,255,255,0.12); --hairline: rgba(255,255,255,0.08);
  --block: rgba(30,38,34,0.56); --block-edge: rgba(255,255,255,0.14); --block-on: rgba(255,255,255,0.16);
  --accent: #7fa690; --accent-soft: rgba(127,166,144,0.14); --glass-blur: 28px;
}
[data-palette="pinemoss"] .field-input,
[data-palette="pinemoss"] .field-textarea,
[data-palette="pinemoss"] .field-select {
  background: rgba(255,255,255,0.06); color: #e4ebe6; border-color: rgba(255,255,255,0.14);
}

/* ==========================================================================
   让主题真正改变「长相」：每套定义自己的圆角/阴影/模糊
   （上面已把 88 处卡片圆角、卡片阴影改成变量，这里才能生效）
   ========================================================================== */

/* 暮山黛：中等圆角 + 极淡阴影，水墨的轻 */
[data-palette="daiqing"] {
  --r-card: 14px; --r-icon: 15px;
  --shadow-card: 0 2px 10px rgba(32,41,46,0.05);
  --glass-blur: 18px;
}

/* 燕麦杏：大圆角 + 柔和厚影，温润 */
[data-palette="oatmeal"] {
  --r-card: 26px; --r-icon: 24px;
  --shadow-card: 0 10px 26px rgba(120,95,60,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 22px;
}

/* 藕荷灰：超大圆角 + 柔雾，温柔 */
[data-palette="ouhe"] {
  --r-card: 30px; --r-icon: 28px;
  --shadow-card: 0 8px 22px rgba(90,70,105,0.09);
  --glass-blur: 30px;
}

/* 松墨夜：小圆角 + 近乎无影 + 低模糊，沉稳 */
[data-palette="pinemoss"] {
  --r-card: 8px; --r-icon: 10px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.3);
  --glass-blur: 14px;
}

/* 给原有 6 套也各自定形状，不再千篇一律 */
[data-palette="frost"]    { --r-card: 22px; --r-icon: 19px; --shadow-card: inset 0 1px 0 rgba(255,255,255,0.72), 0 8px 24px rgba(20,26,36,0.045); }
[data-palette="mica"]     { --r-card: 18px; --r-icon: 17px; --shadow-card: 0 4px 16px rgba(20,26,36,0.04); --glass-blur: 34px; }
[data-palette="glacier"]  { --r-card: 12px; --r-icon: 13px; --shadow-card: 0 3px 12px rgba(30,58,95,0.07); --glass-blur: 20px; }
[data-palette="linen"]    { --r-card: 24px; --r-icon: 22px; --shadow-card: 0 9px 24px rgba(90,80,65,0.08); --glass-blur: 24px; }
[data-palette="matcha"]   { --r-card: 20px; --r-icon: 50%; --shadow-card: 0 5px 18px rgba(50,70,55,0.07); --glass-blur: 26px; }
[data-palette="obsidian"] { --r-card: 10px; --r-icon: 12px; --shadow-card: 0 2px 8px rgba(0,0,0,0.35); --glass-blur: 16px; }

/* ===== 底部输入栏重做：更轻盈的全圆胶囊 ===== */
.chat-bottom-dock {
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: 999px !important;
  padding: 7px 9px !important;
  gap: 7px !important;
  box-shadow: 0 4px 18px rgba(20,26,36,0.07), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
.chat-circle-btn {
  width: 36px !important; height: 36px !important;
  background: rgba(127,127,127,0.08) !important;
  font-size: 17px !important;
  border: none !important;
}
.chat-circle-btn.active { background: var(--ink) !important; color: var(--c-white) !important; }
.chat-capsule-inp {
  background: transparent !important;
  border: none !important;
  font-size: 13.5px !important;
  padding: 0 6px !important;
}
.chat-pill-send {
  background: rgba(127,127,127,0.1) !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border: none !important;
}
.chat-ai-trigger-circle {
  width: 40px !important; height: 40px !important;
  background: var(--accent, var(--ink)) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(20,26,36,0.18) !important;
}
[data-palette="pinemoss"] .chat-bottom-dock,
[data-palette="obsidian"] .chat-bottom-dock { background: rgba(28,33,44,0.8) !important; border-color: rgba(255,255,255,0.1) !important; }

/* ===== 双语对照：气泡上方原文，下方译文 ===== */
.msg-bilingual {
  margin-top: 6px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(127,127,127,0.07);
  border-left: 2.5px solid rgba(127,127,127,0.3);
}
.msg-bi-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 3px;
}
.msg-bi-text {
  font-size: 12px;
  line-height: 1.7;
  color: var(--soft);
  white-space: pre-wrap;
}

/* ===== 流式思维链实时气泡（在聊天流里就地显示，不弹浮窗）===== */
.cot-stream-live {
  align-self: flex-start;
  max-width: 80%;
  margin: 4px 0 4px 44px;
  padding: 9px 13px;
  border-radius: 14px;
  background: rgba(127,127,127,0.08);
  border: 1px dashed rgba(127,127,127,0.3);
}
.cot-stream-head {
  font-size: 10px;
  font-weight: 800;
  color: var(--soft);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.cot-stream-head::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent, #22c55e);
  animation: cotPulse 1s ease-in-out infinite;
}
@keyframes cotPulse { 0%,100%{opacity:0.3;} 50%{opacity:1;} }
.cot-stream-body {
  font-size: 11px;
  line-height: 1.6;
  color: var(--soft);
  max-height: 72px;
  overflow: hidden;
}

/* 极简气泡（默认）：保留原创非对称形态，只去掉装饰伪元素里的尾巴标 */
.chat-messages-box.bshape-clean .chat-bubble::after { display: none !important; }

/* ==========================================================================
   聊天输入栏 · 轻盈分离式（去掉大白胶囊外框）
   ========================================================================== */
.chat-bottom-dock {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 8px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: center;
}
/* 左侧裸露圆钮：半透明小圆，不抢眼 */
.chat-icon-btn {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(127,127,127,0.1);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.16s ease, background 0.16s ease;
}
.chat-icon-btn.active { background: var(--ink); color: var(--c-white); }
.chat-icon-btn:active { transform: scale(0.9); }
/* 输入框：独立的扁圆胶囊，带轻微内阴影 */
.chat-flat-inp {
  flex: 1; min-width: 0;
  height: 40px;
  border: none;
  border-radius: 20px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--ink);
  background: var(--card-solid, rgba(255,255,255,0.92));
  box-shadow: inset 0 1px 3px rgba(20,26,36,0.06), 0 1px 0 rgba(255,255,255,0.5);
}
.chat-flat-inp::placeholder { color: var(--faint); }
/* 发送键：主题色实心小圆 */
.chat-send-btn {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent, var(--ink));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(20,26,36,0.16);
  transition: transform 0.16s ease;
}
.chat-send-btn:active { transform: scale(0.9); }
/* 让角色回复键：描边小圆，次要 */
.chat-reply-btn {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border: 1.5px solid var(--hairline);
  border-radius: 50%;
  background: rgba(127,127,127,0.06);
  color: var(--soft);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.16s ease;
}
.chat-reply-btn:active { transform: scale(0.94); }
.chat-reply-btn.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 暗色主题适配 */
[data-palette="pinemoss"] .chat-flat-inp,
[data-palette="obsidian"] .chat-flat-inp { background: rgba(255,255,255,0.08); color: var(--ink); }

/* ===== 小说式长文排版（多人线下 / 小剧场 / 线下模式）===== */
.novel-body {
  font-size: 13.5px;
  line-height: 2.05;
  color: var(--ink);
  white-space: pre-wrap;
  text-align: justify;
}
.novel-body p, .novel-body > div { margin-bottom: 1.1em; }
/* 小剧场卡片的几套内置美化 */
.skit-theme-plain  { }
.skit-theme-paper  { background: linear-gradient(#fdfbf5,#f7f2e7) !important; border-color: rgba(150,120,70,0.18) !important; }
.skit-theme-paper .ty-body, .skit-theme-paper .novel-body { font-family: Georgia,"Noto Serif SC",serif; color:#3a3228; }
.skit-theme-night  { background: linear-gradient(#1b2027,#141a20) !important; border-color: rgba(255,255,255,0.1) !important; color:#dbe2ea !important; }
.skit-theme-night .ty-body, .skit-theme-night .novel-body, .skit-theme-night .ty-title { color:#dbe2ea !important; }
.skit-theme-pink   { background: linear-gradient(#fff6f9,#ffeef4) !important; border-color: rgba(236,72,153,0.16) !important; }
.skit-theme-mint   { background: linear-gradient(#f4fbf7,#e9f6ef) !important; border-color: rgba(16,185,129,0.16) !important; }

/* ==========================================================================
  box-shadow: 0 2px 10px rgba(20, 26, 36, 0.045);
}
[data-palette="pinemoss"] .msg-trans-inner,
[data-palette="obsidian"] .msg-trans-inner {
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  color: var(--ink);
}
/* 用户侧气泡的译文靠右对齐 */
.chat-msg-row.user .msg-trans-wrap { text-align: right; }
/* ==========================================================================
   译文在气泡内：默认只有一个小「译」钮，点一下气泡变大、译文在原文下方展开
   ========================================================================== */
.chat-bubble.has-trans { display: flex; flex-direction: column; }
.bubble-main-text { display: block; }
.bubble-trans { margin-top: 6px; }
.bubble-trans-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px 1px 2px; border: none; border-radius: 999px;
  background: rgba(127,127,127,0.1); cursor: pointer;
}
.bubble-trans-btn:active { transform: scale(0.94); }
.bubble-trans-btn.open { background: rgba(127,127,127,0.16); }
.bubble-trans-btn .btb-ico {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent, var(--ink)); color: #fff;
  font-size: 8.5px; font-weight: 800;
  display: grid; place-items: center;
}
.bubble-trans-btn .btb-arrow { font-size: 9px; color: var(--faint); transition: transform 0.2s ease; }
.bubble-trans-body {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed rgba(127,127,127,0.25);
  font-size: 0.86em; line-height: 1.7; color: var(--soft); white-space: pre-wrap;
  animation: transIn 0.2s ease;
}
@keyframes transIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   原创：今日互动卡（替代撞脸的报纸风 Nexus）
   ========================================================================== */
.lw-today { display: flex; flex-direction: column; overflow: hidden; }
.lwt-cover {
  position: relative; flex: 1; min-height: 0;
  background: linear-gradient(145deg, rgba(199,210,254,0.5), rgba(251,207,232,0.4));
  background-size: cover; background-position: center;
  display: grid; place-items: center;
}
.lwt-cover.has-img .lwt-cover-empty { display: none; }
.lwt-cover.has-img .lwt-cover-grad { opacity: 1; }
.lwt-cover-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(0,0,0,0.3); }
.lwt-cover-empty span:first-child { font-size: 30px; font-weight: 200; }
.lwt-hint { font-size: 10px; color: var(--soft); }
.lwt-cover-grad {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.42), transparent 55%);
  pointer-events: none;
}
.lwt-cover-cap {
  position: absolute; left: 13px; bottom: 11px;
  font-size: 12px; font-weight: 800; color: #fff; letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4); z-index: 1;
}
.lw-today .lwt-cover:not(.has-img) .lwt-cover-cap { color: var(--ink); text-shadow: none; }
.lwt-body { padding: 12px 14px 13px; flex-shrink: 0; }
.lwt-line {
  font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lwt-stats { display: flex; gap: 16px; margin-top: 10px; }
.lwt-stat { display: flex; flex-direction: column; }
.lwt-stat b { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1; }
.lwt-stat span { font-size: 9px; color: var(--faint); margin-top: 3px; letter-spacing: 0.05em; }

/* ==========================================================================
   原创设计感组件：明信片 + 票根（可换图换字）
   ========================================================================== */
.lw-postcard {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden; cursor: pointer;
  background: linear-gradient(145deg, #c7d2fe, #fbcfe8);
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,0.5);
}
.lwp-place {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  writing-mode: vertical-rl; font-size: 20px; font-weight: 800; color: #fff;
  letter-spacing: 0.22em; text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  font-family: Georgia, "Noto Serif SC", serif;
}
.lwp-date {
  position: absolute; right: 13px; top: 14px; z-index: 2;
  writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.9); text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.lwp-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 50%); }
.lwp-note {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.lw-postcard:not(.has-img) .lwp-place,
.lw-postcard:not(.has-img) .lwp-note { color: rgba(255,255,255,0.95); }

.lw-ticket {
  display: flex; width: 100%; height: 100%; cursor: pointer;
  border-radius: 16px; overflow: hidden;
  background: var(--card-solid, #fff);
  border: 1px solid var(--edge);
  box-shadow: 0 4px 16px rgba(20,26,36,0.06);
}
.lwk-stub {
  width: 38%; flex-shrink: 0; position: relative;
  background: linear-gradient(145deg, #e0e7ff, #ddd6fe);
  background-size: cover; background-position: center;
  border-right: 2px dashed var(--hairline);
  display: grid; place-items: end center;
}
.lwk-no {
  writing-mode: vertical-rl; margin-bottom: 8px;
  font-size: 9px; letter-spacing: 0.15em; color: rgba(0,0,0,0.45); font-weight: 700;
}
.lwk-stub.has-img .lwk-no { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.lwk-body { flex: 1; padding: 13px 14px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.lwk-sub { font-size: 9px; letter-spacing: 0.22em; color: var(--faint); font-weight: 800; }
.lwk-title { font-size: 18px; font-weight: 800; color: var(--ink); margin: 3px 0 6px; font-family: Georgia, "Noto Serif SC", serif; }
.lwk-foot { font-size: 10.5px; color: var(--soft); line-height: 1.5; }

/* ==========================================================================
   原创朋友圈：大封面 + 悬浮头像 + 错落动态卡（和微信朋友圈布局不同）
   ========================================================================== */
/* ===== 微信朋友圈（真·微信样式大改）===== */
.mo-cover {
  position: relative; height: 210px; margin: -12px -14px 0;
  background-size: cover; background-position: center; cursor: pointer;
}
.mo-cover-empty {
  background-image: linear-gradient(145deg, #1f2733 0%, #2b3442 45%, #3a4556 100%);
}
.mo-cover-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.28), transparent 52%); }
.mo-cover-me {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: flex; align-items: flex-end; gap: 12px;
}
.mo-cover-txt { text-align: right; padding-bottom: 6px; }
.mo-cover-name { font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.mo-cover-sign { font-size: 10.5px; color: rgba(255,255,255,0.88); text-shadow: 0 1px 4px rgba(0,0,0,0.45); margin-top: 2px; }
.mo-cover-ava { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; border: 3px solid var(--card-solid,#fff); box-shadow: 0 6px 18px rgba(0,0,0,0.22); }

/* 动态流：微信式，无卡片底、细分隔线 */
.mo-feed { display: flex; flex-direction: column; padding-top: 6px; }
.mo-item { display: flex; gap: 10px; padding: 16px 0 6px; }
.mo-item + .mo-item { border-top: 1px solid var(--hairline); }
.mo-ava { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.mo-main { flex: 1; min-width: 0; }
.mo-author { font-size: 14px; font-weight: 700; color: #5b6b8c; margin-bottom: 4px; letter-spacing: 0.01em; }
.mo-text { font-size: 14.5px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

/* 九宫格配图 */
.mo-grid { display: grid; gap: 5px; margin-top: 9px; }
.mo-grid.one { grid-template-columns: minmax(0, 62%); }
.mo-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 72%; }
.mo-grid.three { grid-template-columns: repeat(3, 1fr); }
.mo-cell { position: relative; width: 100%; padding-top: 100%; border-radius: 6px; overflow: hidden; background: rgba(127,127,127,0.08); }
.mo-grid.one .mo-cell { padding-top: 75%; }
.mo-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* 配图文字描述（没有真图时的文字配图卡） */
.mo-imgdesc { margin-top: 9px; padding: 9px 12px; border-radius: 8px; background: rgba(127,127,127,0.06); font-size: 11.5px; line-height: 1.6; color: var(--soft); }

/* 时间 + 右侧「⋯」互动按钮 */
.mo-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.mo-time { font-size: 11px; color: var(--faint); }
.mo-dots { border: none; background: transparent; color: #5b6b8c; padding: 2px 4px; cursor: pointer; line-height: 0; border-radius: 6px; }
.mo-dots:active { background: rgba(91,107,140,0.12); }

/* 点赞 / 评论区：微信式浅灰块，带小三角 */
.mo-interact {
  position: relative; margin-top: 9px; padding: 7px 11px; border-radius: 7px;
  background: var(--moments-interact, rgba(247,247,247,0.92));
  border: 1px solid var(--hairline);
}
[data-palette$="dark"] .mo-interact,
.mo-interact { background: rgba(127,127,127,0.07); }
.mo-interact::before {
  content: ""; position: absolute; top: -5px; left: 16px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(127,127,127,0.07);
}
.mo-likeline { font-size: 12.5px; line-height: 1.6; color: #5b6b8c; font-weight: 600; word-break: break-word; }
.mo-like-ico { color: #e0528a; margin-right: 5px; }
.mo-interact-div { height: 1px; background: var(--hairline); margin: 6px 0; }
.mo-commentlist { display: flex; flex-direction: column; gap: 3px; }
.mo-comment { font-size: 13px; line-height: 1.6; color: var(--ink); word-break: break-word; }
.mo-comment b { color: #5b6b8c; font-weight: 600; }
.mo-comment span { color: var(--soft); }

/* ==========================================================================
   角色主动发来的关系邀请卡（好友/情侣/换头像/合照）
   ========================================================================== */
/* 关系邀请卡 — 重做为与全机一致的冷调玻璃拟态 */
.rel-invite-card {
  max-width: 252px; padding: 14px 15px 13px;
  border-radius: 18px;
  background: var(--card, rgba(255,255,255,0.56));
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--edge, rgba(255,255,255,0.7));
  box-shadow: 0 10px 30px rgba(20,28,40,0.10);
  color: var(--ink);
}
.ric-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid rgba(120,135,155,0.14); }
.ric-icon {
  width: 28px; height: 28px; border-radius: 9px;
  background: rgba(120,135,155,0.12); display: grid; place-items: center; font-size: 15px;
}
.ric-label { font-size: 9px; font-weight: 800; color: var(--soft); letter-spacing: 0.14em; text-transform: uppercase; }
.ric-text { font-size: 13px; line-height: 1.62; color: var(--ink); margin-bottom: 12px; }
.ric-btns { display: flex; gap: 8px; }
.ric-yes, .ric-no { flex: 1; padding: 9px 0; border: none; border-radius: 11px; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .12s ease; }
.ric-yes { background: var(--accent, #2c3542); color: #fff; }
.ric-no { background: rgba(120,135,155,0.12); color: var(--soft); }
.ric-yes:active, .ric-no:active { transform: scale(0.96); }
.ric-done { font-size: 11px; font-weight: 700; color: var(--soft); text-align: center; padding: 6px 0; border-radius: 9px; background: rgba(120,135,155,0.08); }

/* ==========================================================================
   银行卡卡面（商城/外卖可充值）
   ========================================================================== */
.bank-card {
  position: relative; border-radius: 18px; padding: 15px 17px;
  color: #fff; overflow: hidden;
  box-shadow: 0 8px 22px rgba(20,26,36,0.16);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 132px;
}
.bank-card::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.bank-aurora { background: linear-gradient(135deg, #3b6fd4, #5fa8e8 55%, #7ed0f0); }
.bank-dusk   { background: linear-gradient(135deg, #5b4a8a, #8a6bb0 55%, #c08fc8); }
.bank-jade   { background: linear-gradient(135deg, #2f6b5e, #4f9a82 55%, #86c7ad); }
.bank-rose   { background: linear-gradient(135deg, #b06a76, #d79099 55%, #f0bfc2); }
.bank-ink    { background: linear-gradient(135deg, #22252c, #3c424e 55%, #596273); }
.bank-sand   { background: linear-gradient(135deg, #9a7b45, #c3a268 55%, #e3cf9e); }
.bkc-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.bkc-bank { font-size: 14.5px; font-weight: 800; letter-spacing: 0.02em; }
.bkc-type { font-size: 9.5px; opacity: 0.82; margin-top: 2px; letter-spacing: 0.1em; }
.bkc-chip {
  width: 30px; height: 22px; border-radius: 5px;
  background: linear-gradient(145deg, #f3dca0, #c9a85f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.bkc-no {
  font-size: 13px; letter-spacing: 0.12em; font-weight: 700;
  opacity: 0.95; position: relative; z-index: 1; margin: 10px 0 4px;
  font-variant-numeric: tabular-nums;
}
.bkc-foot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 1; }
.bkc-label { font-size: 9px; opacity: 0.75; letter-spacing: 0.1em; }
.bkc-bal { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bkc-acts { display: flex; gap: 5px; }
.bkc-acts button {
  font-size: 10px; font-weight: 700; padding: 4px 9px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.16); color: #fff;
}

/* ==========================================================================
   语音气泡：波形条 + 时长，点一下播放/展开文字
   ========================================================================== */
.voice-bubble {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; cursor: pointer;
  border-radius: 6px 18px 18px 18px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 10px rgba(20,26,36,0.05);
  position: relative;
}
.voice-bubble::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2.5px; border-radius: 2px; background: var(--accent, #8b8ff5); opacity: 0.55;
}
.voice-bubble.mine {
  border-radius: 18px 6px 18px 18px;
  background: linear-gradient(135deg, var(--accent, #3a4150), rgba(34,40,50,0.92));
  border: none; color: #fff;
}
.voice-bubble.mine::before { display: none; }
.vb-play { font-size: 12px; flex-shrink: 0; opacity: 0.85; }
.vb-wave { flex: 1; display: flex; align-items: center; gap: 2.5px; height: 18px; }
.vb-wave i {
  display: block; width: 2.5px; border-radius: 2px;
  background: currentColor; opacity: 0.45;
  animation: vbPulse 1.1s ease-in-out infinite;
}
.vb-wave i:nth-child(2n) { animation-delay: 0.15s; }
.vb-wave i:nth-child(3n) { animation-delay: 0.3s; }
@keyframes vbPulse { 0%,100% { opacity: 0.32; } 50% { opacity: 0.85; } }
.vb-sec { font-size: 10.5px; font-weight: 700; opacity: 0.7; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.voice-text {
  margin-top: 6px; padding: 9px 12px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.7; color: var(--ink);
  background: rgba(127,127,127,0.07);
  border-left: 2.5px solid var(--accent, var(--ink));
}

/* ==========================================================================
   总结 · 真·结构化记忆表格
   ========================================================================== */
.mem-table-wrap {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--card-solid, rgba(255,255,255,0.9));
  box-shadow: 0 4px 16px rgba(20,26,36,0.05);
}
.mem-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mem-table thead th {
  text-align: left; padding: 10px 12px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--faint); text-transform: uppercase;
  background: rgba(127,127,127,0.06);
  border-bottom: 1px solid var(--hairline);
}
.mem-table tbody tr { border-bottom: 1px solid var(--hairline); }
.mem-table tbody tr:last-child { border-bottom: none; }
.mem-table tbody tr:nth-child(even):not(.mem-group) { background: rgba(127,127,127,0.025); }
.mem-table td { padding: 10px 12px; vertical-align: top; }
.mem-table tr.mem-group td {
  padding: 7px 12px; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.1em; color: var(--accent, var(--ink));
  background: rgba(127,127,127,0.055);
  border-top: 1px solid var(--hairline);
}
.mem-key { font-weight: 800; color: var(--ink); line-height: 1.5; }
.mem-val { color: var(--soft); line-height: 1.72; }
.mem-ops { white-space: nowrap; }
.mem-ops button {
  width: 22px; height: 22px; border: none; border-radius: 7px;
  background: rgba(127,127,127,0.09); color: var(--soft);
  font-size: 11px; cursor: pointer; margin-right: 2px;
}
.mem-empty { text-align: center; padding: 26px 14px !important; color: var(--soft); font-size: 11.5px; }

/* ==========================================================================
   原创异形组件：不是方/正/圆，而是组合、错位、斜切、拼贴
   ========================================================================== */

/* 1. 斜切双栏卡：左图右字被一条斜线分开 */
.lw-slant {
  position: relative; width: 100%; height: 100%; cursor: pointer;
  border-radius: 20px; overflow: hidden;
  background: var(--card-solid, #fff);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 20px rgba(20,26,36,0.07);
}
.lws-img {
  position: absolute; inset: 0 42% 0 0;
  background-size: cover; background-position: center;
  background-color: rgba(127,127,127,0.1);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
.lws-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 55%, rgba(0,0,0,0.12));
}
.lws-body {
  position: absolute; right: 0; top: 0; bottom: 0; width: 56%;
  padding: 14px 14px 14px 6px;
  display: flex; flex-direction: column; justify-content: center;
}
.lws-eyebrow { font-size: 8.5px; letter-spacing: 0.2em; font-weight: 800; color: var(--faint); }
.lws-title {
  font-size: 19px; font-weight: 800; line-height: 1.18; color: var(--ink);
  margin: 5px 0 6px; font-family: Georgia, "Noto Serif SC", serif;
}
.lws-sub { font-size: 10.5px; color: var(--soft); line-height: 1.55; }
.lws-dot { position: absolute; left: 14px; bottom: 12px; width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.9; }

/* 2. 拱门卡：上圆下方的门形，图在拱内 */
.lw-arch {
  width: 100%; height: 100%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 12px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.12));
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(14px);
}
.lwa-win {
  flex: 1; width: 100%; min-height: 0;
  border-radius: 999px 999px 14px 14px;
  background-size: cover; background-position: center;
  background-color: rgba(127,127,127,0.12);
  border: 1px solid rgba(255,255,255,0.5);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.lwa-win::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.28), transparent 60%);
}
.lwa-plus { font-size: 24px; font-weight: 200; color: var(--ink); opacity: 0.4; }
.lwa-cap {
  margin-top: 9px; font-size: 11.5px; font-weight: 700; color: var(--ink);
  text-align: center; letter-spacing: 0.04em;
}
.lwa-sub { font-size: 9px; color: var(--faint); margin-top: 2px; }

/* 3. 错位拼贴卡：两个方块一大一小错开叠，右侧竖排字 */
.lw-collage {
  position: relative; width: 100%; height: 100%; cursor: pointer;
  border-radius: 18px; padding: 12px;
  background: var(--card-solid, #fff);
  border: 1px solid var(--edge);
  box-shadow: 0 5px 18px rgba(20,26,36,0.06);
  overflow: hidden;
}
.lwc-a, .lwc-b {
  position: absolute; background-size: cover; background-position: center;
  background-color: rgba(127,127,127,0.12);
  border: 2px solid var(--card-solid, #fff);
}
.lwc-a { left: 12px; top: 12px; width: 52%; height: 62%; border-radius: 14px 14px 14px 3px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.lwc-b { left: 34%; top: 36%; width: 40%; height: 52%; border-radius: 3px 14px 14px 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.lwc-vert {
  position: absolute; right: 12px; top: 12px; bottom: 12px;
  writing-mode: vertical-rl; font-size: 13px; font-weight: 800;
  color: var(--ink); letter-spacing: 0.18em;
  font-family: Georgia, "Noto Serif SC", serif;
}
.lwc-num {
  position: absolute; right: 12px; bottom: 12px;
  font-size: 9px; color: var(--faint); letter-spacing: 0.1em;
  writing-mode: horizontal-tb;
}

/* ==========================================================================
   穿搭衣橱
   ========================================================================== */
.wd-today { padding: 16px !important; }
.wd-today-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.wd-pair { display: flex; align-items: center; justify-content: center; gap: 14px; }
.wd-pair-col { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 100px; }
.wd-pair-label { font-size: 10px; font-weight: 800; color: var(--faint); letter-spacing: 0.1em; }
.wd-pair-x { font-size: 16px; font-weight: 200; color: var(--faint); }
.wd-mini {
  padding: 10px 14px; border-radius: 14px;
  background: rgba(127,127,127,0.06); text-align: center; width: 100%;
}
.wd-mini-name { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.wd-mini-tag { font-size: 9.5px; color: var(--soft); margin-top: 2px; }
.wd-mini-empty { font-size: 11px; color: var(--faint); padding: 16px 8px; }

.wd-card {
  display: flex; gap: 12px; padding: 14px 15px;
  border-radius: 18px; border: 1.5px solid var(--hairline);
  background: var(--card); margin-bottom: 8px;
  transition: border-color 0.18s ease;
}
.wd-card.on { border-color: var(--accent, var(--ink)); background: rgba(127,127,127,0.05); }
.wd-card-img {
  width: 72px; height: 96px; flex-shrink: 0;
  border-radius: 13px; background-size: cover; background-position: center;
  background-color: rgba(127,127,127,0.1);
}
.wd-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wd-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.wd-card-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.wd-card-meta { font-size: 10px; color: var(--faint); margin-top: 2px; }
.wd-card-desc { font-size: 12px; line-height: 1.7; color: var(--soft); margin-bottom: 8px; flex: 1; }
.wd-card-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.wd-on-badge {
  font-size: 9px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; background: var(--accent, var(--ink)); color: #fff;
  white-space: nowrap;
}

/* ==========================================================================
   商城/外卖 · 淘宝式瀑布流重做
   ========================================================================== */
/* 商品双列瀑布流：大图卡片、圆角、阴影、价格醒目 */
.shop-grid-2col {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  padding: 4px 0 !important;
}
.shop-prod-card {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: var(--card-solid, #fff) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 4px 14px rgba(20,26,36,0.06) !important;
  cursor: pointer;
  transition: transform 0.16s ease;
}
.shop-prod-card:active { transform: scale(0.97); }

/* 商品图区：占卡片上半部，固定高度 */
.shop-prod-card .shop-prod-art {
  height: 120px !important;
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden;
  position: relative;
}
/* 商品信息区：紧凑 */
.shop-prod-body {
  padding: 10px 11px 12px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
/* 价格醒目：大号红色 */
.shop-price-tag {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #e0284f !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.shop-price-tag::before { content: "¥"; font-size: 12px; }
/* 店名/销量：淡灰小字 */
.shop-prod-meta {
  font-size: 9.5px;
  color: var(--faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 心声气泡：小字淡底 */
.shop-thought {
  font-size: 10px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(127,127,127,0.06);
  color: var(--soft);
  line-height: 1.5;
  margin-top: 4px;
}
/* 分类标签横滑条 */
.shop-cat-scroll {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 0 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shop-cat-scroll::-webkit-scrollbar { display: none; }
.shop-cat-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1.5px solid var(--hairline);
  background: rgba(127,127,127,0.04);
  color: var(--ink);
  cursor: pointer;
}
.shop-cat-pill.on {
  background: var(--accent, var(--ink));
  color: #fff;
  border-color: transparent;
}
/* 顶部搜索条 */
.shop-search-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(127,127,127,0.07);
  margin-bottom: 8px;
}
.shop-search-bar input {
  flex: 1; border: none; background: transparent;
  font-size: 13px; color: var(--ink); outline: none;
}
.shop-search-bar input::placeholder { color: var(--faint); }
/* 外卖分类图标网格 */
.tk-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.tk-cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: 14px;
  background: rgba(127,127,127,0.04); cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s ease;
}
.tk-cat-item.on { background: rgba(127,127,127,0.1); border-color: var(--accent, var(--ink)); }
.tk-cat-item:active { transform: scale(0.95); }
.tk-cat-ico { font-size: 22px; }
.tk-cat-name { font-size: 10px; font-weight: 700; color: var(--ink); }
/* 底栏 tab 改成淘宝式 5 列 */
.shop-bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px 6px;
  border-top: 1px solid var(--hairline);
  background: var(--card-solid, rgba(255,255,255,0.95));
  border-radius: 0 0 var(--r-card, 22px) var(--r-card, 22px);
  margin: 10px -14px -22px;
}
.shop-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; cursor: pointer;
  font-size: 10px; font-weight: 700; color: var(--soft);
  border-radius: 10px;
}
.shop-nav-item.on { color: var(--accent, var(--ink)); background: rgba(127,127,127,0.06); }
.shop-nav-ico { font-size: 18px; }

/* ==========================================================================
   闲鱼
   ========================================================================== */
.flea-income {
  text-align: center; padding: 18px 14px !important;
  background: linear-gradient(145deg, rgba(255,248,220,0.8), rgba(255,240,200,0.6)) !important;
  border-color: rgba(234,179,8,0.25) !important;
}
.flea-income-num {
  font-size: 28px; font-weight: 800; color: #365f91;
  font-variant-numeric: tabular-nums; margin: 6px 0 4px;
}
.flea-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.flea-card {
  border-radius: 16px; overflow: hidden;
  background: var(--card-solid, #fff);
  border: 1px solid var(--hairline);
  box-shadow: 0 4px 14px rgba(20,26,36,0.06);
}
.flea-card-img {
  height: 110px; background-size: cover; background-position: center;
  background-color: rgba(127,127,127,0.08);
  display: grid; place-items: center;
}
.flea-no-img span { font-size: 32px; opacity: 0.3; }
.flea-card-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 4px; }
.flea-card-name {
  font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.flea-card-desc { font-size: 10.5px; color: var(--soft); line-height: 1.45; }
.flea-from {
  font-size: 9.5px; color: #365f91; font-weight: 700;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(234,179,8,0.12); align-self: flex-start;
}
.flea-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 4px; }
.flea-price { font-size: 16px; font-weight: 900; color: #e0284f; }
.flea-price::before { content: "¥"; font-size: 11px; }
.flea-card-acts { display: flex; gap: 4px; }

/* ==========================================================================
   情侣空间 · QQ 式主页头
   ========================================================================== */
/* ==========================================================================
   情侣空间 · QQ 空间式头部（大封面 / 悬浮双头像 / 恋爱天数 / 亲密度环）
   ========================================================================== */
.couple-hero {
  position: relative; border-radius: 22px; overflow: hidden;
  background: var(--card-solid, rgba(250,251,253,0.94));
  padding-bottom: 14px; margin-bottom: 10px;
  box-shadow: 0 10px 30px rgba(20,26,36,0.1);
}
.ch-cover {
  height: 164px; background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, #f3c7d6 0%, #d5c7f0 48%, #c2dcf0 100%);
  cursor: pointer; position: relative;
}
.ch-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 38%, rgba(255,255,255,0.08) 70%, var(--card-solid, #fafbfd) 100%);
}
.ch-cover-hint {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font-size: 9.5px; padding: 4px 9px; border-radius: 99px;
  background: rgba(0,0,0,0.3); color: #fff; backdrop-filter: blur(6px);
}
/* 悬浮双头像 + 中间连心 */
.ch-avas {
  display: flex; align-items: flex-start; justify-content: center; gap: 10px;
  margin-top: -40px; position: relative; z-index: 3;
}
.ch-ava-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ch-ava {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 3.5px solid var(--card-solid, #fff);
  box-shadow: 0 6px 20px rgba(20,26,36,0.18);
}
.ch-ava-name { font-size: 11.5px; font-weight: 800; color: var(--ink); }
.ch-heart {
  font-size: 22px; margin-top: 22px; position: relative;
  animation: chBeat 1.8s ease-in-out infinite;
}
@keyframes chBeat { 0%,100%{transform:scale(1)} 45%{transform:scale(1.18)} }
/* 恋爱天数（大字 + 环） */
.ch-days {
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
  margin: 12px 0 2px;
}
.ch-days-num {
  font-family: var(--font-serif); font-size: 40px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ch-days-label { font-size: 11px; color: var(--faint); letter-spacing: 0.14em; font-weight: 700; }
.ch-days-cap { text-align: center; font-size: 9.5px; color: var(--faint); letter-spacing: 0.16em; font-weight: 700; margin-bottom: 10px; }
/* 亲密度进度条 */
.ch-intimacy { padding: 0 20px; margin-bottom: 11px; }
.ch-int-head { display: flex; justify-content: space-between; font-size: 10px; color: var(--soft); font-weight: 700; margin-bottom: 4px; }
.ch-int-bar { height: 8px; border-radius: 99px; background: rgba(127,127,127,0.12); overflow: hidden; }
.ch-int-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #e8a0b8, #c98fd0, #9fb6e8);
  transition: width 0.4s ease;
}
/* 三栏统计 */
.ch-stats {
  display: flex; justify-content: center; gap: 0; margin: 0 16px 10px;
  padding: 10px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.ch-stat { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.ch-stat + .ch-stat::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: var(--hairline);
}
.ch-stat b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.ch-stat span { font-size: 9px; color: var(--faint); margin-top: 3px; letter-spacing: 0.08em; }
/* 情侣签名 */
.ch-sign {
  text-align: center; font-size: 12px; color: var(--soft); line-height: 1.65;
  padding: 0 22px; margin: 4px 0 11px; cursor: pointer; font-style: italic;
}
.ch-sign::before { content: "\201C"; } .ch-sign::after { content: "\201D"; }
.ch-acts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 14px; }
/* QQ 式横滑 tab */
.ch-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 7px 2px;
  margin-bottom: 8px;
  -ms-overflow-style: none; scrollbar-width: none;
  flex-wrap: nowrap; flex-shrink: 0;
}
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tab {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700;
  padding: 8px 15px; border-radius: 99px; white-space: nowrap; line-height: 1;
  background: var(--card-solid, rgba(255,255,255,0.9)); border: 1px solid var(--hairline); color: var(--soft);
}
.ch-tab.on {
  background: linear-gradient(135deg, #d98aa8, #9f8fd0); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(201,111,137,0.28);
}
/* 情侣邀请横幅 */
.ch-invite {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 16px; margin-bottom: 9px;
  background: linear-gradient(135deg, rgba(224,112,138,0.14), rgba(154,127,212,0.1));
  border: 1px solid rgba(224,112,138,0.26);
}
.ch-invite-ico { font-size: 22px; flex-shrink: 0; }
.ch-invite-mid { flex: 1; min-width: 0; }
.ch-invite-title { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.ch-invite-sub { font-size: 10px; color: var(--soft); margin-top: 2px; line-height: 1.5; }
.ch-invite-btn {
  font-size: 10.5px; font-weight: 800; padding: 7px 12px; border-radius: 99px;
  background: var(--ink); color: var(--c-white); border: none; flex-shrink: 0;
}

/* ==========================================================================
   交换日记 · 真·双栏交替信纸风
   ========================================================================== */
.diary-book { position: relative; padding-left: 18px; }
.diary-book::before {
  content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--hairline), rgba(127,127,127,0.18), var(--hairline));
  border-radius: 2px;
}
.diary-entry { position: relative; margin-bottom: 14px; }
.diary-date-line {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; margin-left: -18px;
}
.diary-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent, var(--ink)); border: 2px solid var(--card-solid, #fff);
  box-shadow: 0 0 0 1px var(--hairline);
}
.diary-entry.mine .diary-dot { background: #0ea5e9; }
.diary-entry.theirs .diary-dot { background: #ec4899; }
.diary-date { font-size: 10px; color: var(--faint); font-weight: 700; letter-spacing: 0.1em; }

.diary-page {
  padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,253,248,0.96), rgba(248,246,240,0.92));
  border: 1px solid rgba(210,200,180,0.35);
  box-shadow: 0 4px 16px rgba(20,26,36,0.05);
  /* 信纸横线 */
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 27px, rgba(180,160,130,0.12) 27px, rgba(180,160,130,0.12) 28px);
  background-position: 0 14px;
}
.diary-entry.theirs .diary-page {
  background: linear-gradient(180deg, rgba(255,248,252,0.96), rgba(252,242,248,0.92));
  border-color: rgba(220,180,200,0.35);
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 27px, rgba(200,160,180,0.12) 27px, rgba(200,160,180,0.12) 28px);
  background-position: 0 14px;
}
[data-palette="pinemoss"] .diary-page,
[data-palette="obsidian"] .diary-page { background: rgba(30,36,32,0.9); border-color: rgba(255,255,255,0.1); }

.diary-who { font-size: 9.5px; font-weight: 800; color: var(--faint); letter-spacing: 0.14em; margin-bottom: 6px; }
.diary-title { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 8px; font-family: Georgia, "Noto Serif SC", serif; }
.diary-content { font-size: 13.5px; line-height: 28px; color: var(--ink); white-space: pre-wrap; }
.diary-margin {
  margin-top: 10px; padding: 9px 12px; border-radius: 11px;
  background: rgba(255,255,255,0.7); border: 1px dashed rgba(127,127,127,0.2);
  font-size: 12px; line-height: 1.7; color: var(--soft);
}
.diary-highlight {
  margin-top: 7px; padding: 8px 11px; border-radius: 10px;
  background: rgba(251,191,36,0.08); border-left: 2.5px solid #fbbf24;
}
.diary-hl-quote { font-size: 11.5px; line-height: 1.6; color: var(--ink); border-bottom: 1.5px solid rgba(251,191,36,0.5); display: inline; }
.diary-hl-note { font-size: 11px; color: #2d527c; margin-top: 5px; }
.diary-unsent {
  margin-top: 9px; padding: 8px 11px; border-radius: 10px;
  background: rgba(190,24,93,0.06); border: 1px solid rgba(244,114,182,0.2);
  font-size: 11.5px; color: #be185d; line-height: 1.6;
}
.diary-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(127,127,127,0.1); }
.diary-wc { font-size: 9.5px; color: var(--faint); }

/* ==========================================================================
   论坛自定义：板块简介 + 楼层分区 + 字数控制
   ========================================================================== */
.forum-section-intro {
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(127,127,127,0.06), rgba(127,127,127,0.03));
  margin-bottom: 10px;
}
.forum-section-intro .fsi-title { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.forum-section-intro .fsi-desc { font-size: 11.5px; color: var(--soft); line-height: 1.65; }
.forum-floor {
  padding: 14px 15px; border-radius: 14px;
  background: var(--card); margin-bottom: 8px;
  border-left: 3px solid var(--hairline);
}
.forum-floor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.forum-floor-author { display: flex; align-items: center; gap: 8px; }
.forum-floor-ava { width: 28px; height: 28px; border-radius: 50%; background: rgba(127,127,127,0.15); }
.forum-floor-name { font-size: 12px; font-weight: 800; color: var(--ink); }
.forum-floor-meta { font-size: 9.5px; color: var(--faint); }
.forum-floor-body { font-size: 13px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; }

/* ==========================================================================
   手帐 · 翻页 + 精致信纸
   ========================================================================== */
.notebook-page {
  position: relative; padding: 20px 18px; min-height: 280px;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #fdfbf5, #f5f0e6);
  border: 1px solid rgba(200,185,160,0.4);
  box-shadow: 0 6px 20px rgba(20,26,36,0.08);
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 29px, rgba(170,150,120,0.1) 29px, rgba(170,150,120,0.1) 30px);
  background-position: 0 18px;
}
.notebook-page::before {
  content: ""; position: absolute; left: 48px; top: 0; bottom: 0; width: 1px;
  background: rgba(220,100,100,0.2);
}
.nb-title {
  font-size: 18px; font-weight: 800; color: var(--ink);
  font-family: Georgia, "Noto Serif SC", serif;
  margin-bottom: 12px; padding-left: 38px;
}
.nb-body {
  font-size: 13.5px; line-height: 30px; color: var(--ink);
  white-space: pre-wrap; padding-left: 38px;
}
.nb-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(127,127,127,0.15);
}
.nb-page-num { font-size: 10px; color: var(--faint); letter-spacing: 0.12em; }
.nb-nav { display: flex; gap: 8px; }
.nb-nav button {
  padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--hairline); background: rgba(127,127,127,0.06); color: var(--ink);
}

/* ==========================================================================
   陪伴钟 · 视频通话式
   ========================================================================== */
.comp-video-card {
  position: relative; border-radius: 22px; overflow: hidden;
  background: linear-gradient(145deg, rgba(127,127,127,0.08), rgba(127,127,127,0.04));
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 18px; margin-bottom: 8px;
}
.comp-video-ava {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--card-solid, #fff);
  box-shadow: 0 8px 26px rgba(20,26,36,0.14);
}
.comp-video-name { font-size: 16px; font-weight: 800; color: var(--ink); margin-top: 12px; }
.comp-video-status { font-size: 11px; color: var(--soft); margin-top: 4px; letter-spacing: 0.05em; }

/* 纪念日卡片 */
.mem-card { text-align: center; padding: 18px 12px !important; }
.mem-card-days { font-size: 30px; font-weight: 200; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.mem-card-unit { font-size: 10px; color: var(--faint); letter-spacing: 0.15em; margin-top: 4px; }
.mem-card-title { font-size: 13px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.mem-card-note { font-size: 10.5px; color: var(--soft); margin-top: 3px; line-height: 1.5; }
.mem-countdown .mem-card-days { color: #e0528a; }

/* 聊天室占满可视高度，输入栏贴到最底部而不是浮在半空 */
.chat-room-wrap {
  min-height: 100%;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* 消息区自动撑开，把输入栏顶到底部 */
.chat-room-wrap .chat-messages-box { flex: 1 1 auto; }
/* 输入栏固定在底部，带安全区内边距 */
.chat-bottom-dock {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: auto;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ==========================================================================
   微信视频 / 语音通话界面
   ========================================================================== */
.call-layer {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: #0d1016; color: #fff;
  overflow: hidden;
  animation: callIn 0.25s ease;
}
@keyframes callIn { from { opacity: 0; } to { opacity: 1; } }
.call-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #1a1f2b;
}
.call-video .call-bg { filter: brightness(0.82); }
.call-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 25%, transparent 55%, rgba(0,0,0,0.72) 100%);
}
.call-top {
  position: relative; z-index: 3;
  text-align: center; padding: 46px 16px 10px;
}
.call-name { font-size: 20px; font-weight: 800; letter-spacing: 0.02em; }
.call-sub { font-size: 12px; opacity: 0.82; margin-top: 4px; }
/* 视频：角色大图铺满舞台 */
.call-char-stage { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; }
.call-char-img { width: 100%; height: 100%; object-fit: cover; }
/* 语音：中央头像 + 声波 */
.call-voice-center { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.call-voice-ava { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.call-wave { display: flex; gap: 5px; align-items: flex-end; height: 26px; }
.call-wave span { width: 4px; background: rgba(255,255,255,0.8); border-radius: 2px; animation: callWave 1s ease-in-out infinite; }
.call-wave span:nth-child(1){height:40%;animation-delay:0s}
.call-wave span:nth-child(2){height:90%;animation-delay:.15s}
.call-wave span:nth-child(3){height:60%;animation-delay:.3s}
.call-wave span:nth-child(4){height:100%;animation-delay:.45s}
.call-wave span:nth-child(5){height:50%;animation-delay:.6s}
@keyframes callWave { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }
/* 对话气泡浮层 */
.call-log {
  position: relative; z-index: 3;
  margin-top: auto; padding: 10px 14px 6px;
  display: flex; flex-direction: column; gap: 7px;
  max-height: 42vh; overflow-y: auto;
}
.call-bubble {
  max-width: 78%; padding: 9px 13px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.55; backdrop-filter: blur(8px);
}
.call-bubble.theirs { align-self: flex-start; background: rgba(255,255,255,0.18); border-bottom-left-radius: 5px; }
.call-bubble.mine { align-self: flex-end; background: rgba(90,140,255,0.75); border-bottom-right-radius: 5px; }
/* 顶部控制 chips */
.call-controls-top {
  position: relative; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 8px;
  justify-content: center;
}
.call-chip {
  font-size: 11px; padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.16); color: #fff; border: none; backdrop-filter: blur(8px);
}
.call-chip.on { background: rgba(90,180,120,0.8); }
/* 输入条 */
.call-inputbar {
  position: relative; z-index: 4;
  display: flex; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom,0px));
}
.call-input {
  flex: 1; height: 42px; border: none; border-radius: 21px;
  padding: 0 16px; font-size: 14px; color: #fff;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(10px);
}
.call-input::placeholder { color: rgba(255,255,255,0.6); }
.call-send {
  height: 42px; padding: 0 20px; border: none; border-radius: 21px;
  background: #5a8cff; color: #fff; font-weight: 800; font-size: 13px;
}
/* 挂断 */
.call-hangup {
  position: relative; z-index: 4;
  align-self: center; width: 58px; height: 58px; border-radius: 50%;
  background: #e5484d; border: none; display: grid; place-items: center;
  margin: 2px auto 18px; box-shadow: 0 6px 20px rgba(229,72,77,0.5);
}

/* ==========================================================================
   记账钱包
   ========================================================================== */
.lg-hero {
  border-radius: var(--r-card, 20px);
  padding: 16px 17px 14px;
  background: linear-gradient(135deg, #3a4660 0%, #2b3548 55%, #222a3a 100%);
  color: #fff;
  box-shadow: 0 8px 26px rgba(20, 26, 36, 0.18);
  position: relative;
  overflow: hidden;
}
.lg-hero::before {
  content: "";
  position: absolute; right: -40px; top: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
}
.lg-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: relative; z-index: 1; }
.lg-hero-label { font-size: 10px; letter-spacing: 0.12em; opacity: 0.7; font-weight: 700; }
.lg-hero-num { font-family: var(--font-serif); font-size: 28px; font-weight: 700; margin-top: 3px; }
.lg-hero-side { text-align: right; display: flex; flex-direction: column; gap: 5px; }
.lg-hero-side div { font-size: 10.5px; opacity: 0.86; }
.lg-hero-side b { display: block; font-size: 13.5px; font-weight: 800; margin-top: 1px; }
.lg-hero-side b.in { color: #9ae0b0; }
.lg-budget { margin-top: 13px; position: relative; z-index: 1; }
.lg-budget-head { display: flex; justify-content: space-between; font-size: 10.5px; opacity: 0.88; margin-bottom: 5px; }
.lg-budget-head .over { color: #ff9ba0; font-weight: 800; }
.lg-budget-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.18); overflow: hidden; }
.lg-budget-bar i { display: block; height: 100%; border-radius: 99px; transition: width 0.35s ease; }
.lg-budget-edit {
  margin-top: 8px; font-size: 10px; padding: 4px 10px; border-radius: 99px;
  background: rgba(255,255,255,0.16); color: #fff; border: none;
}
/* 快捷记账 */
.lg-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lg-quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px; border-radius: 13px; border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.6); font-size: 11px; font-weight: 700; color: var(--ink);
}
.lg-quick-btn span { font-size: 17px; }
.lg-quick-btn i { font-style: normal; font-size: 9.5px; color: var(--soft); font-weight: 600; }
.lg-quick-btn:active { transform: scale(0.94); }
/* 明细行 */
.lg-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-card, 16px);
  background: var(--card, rgba(255,255,255,0.56));
  border: 1px solid var(--hairline);
  margin-bottom: 7px; cursor: pointer;
}
.lg-row:active { transform: scale(0.99); }
.lg-row-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.lg-row-mid { flex: 1; min-width: 0; }
.lg-row-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.lg-row-meta { font-size: 10px; color: var(--soft); margin-top: 2px; }
.lg-row-amt { font-size: 14.5px; font-weight: 800; color: var(--ink); flex-shrink: 0; }
.lg-row-amt.in { color: #2f9e62; }
.lg-priv { font-size: 8.5px; padding: 1px 5px; border-radius: 6px; background: rgba(127,127,127,0.14); color: var(--soft); font-weight: 700; }
/* 统计条 */
.lg-stat-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.lg-stat-name { width: 84px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 4px; }
.lg-stat-bar { flex: 1; height: 9px; border-radius: 99px; background: rgba(127,127,127,0.1); overflow: hidden; }
.lg-stat-bar i { display: block; height: 100%; border-radius: 99px; }
.lg-stat-amt { width: 62px; text-align: right; font-size: 12px; font-weight: 800; color: var(--ink); flex-shrink: 0; }
.lg-stat-amt small { display: block; font-size: 9px; color: var(--faint); font-weight: 600; }
.lg-ta-sum {
  padding: 10px 12px; border-radius: 13px; margin-bottom: 9px;
  background: linear-gradient(135deg, rgba(224,112,138,0.12), rgba(224,112,138,0.05));
  border: 1px solid rgba(224,112,138,0.22);
  font-size: 11.5px; color: var(--ink);
}
.lg-ta-sum b { font-size: 15px; }

/* ==========================================================================
   纪念日 · 即将到来提醒 & 卡片状态
   ========================================================================== */
.anni-upcoming {
  border-radius: var(--r-card, 18px);
  padding: 13px 14px;
  background: linear-gradient(135deg, rgba(224,112,138,0.13), rgba(154,127,212,0.09));
  border: 1px solid rgba(224,112,138,0.22);
}
.anni-up-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 9px;
}
.anni-up-toggle {
  font-size: 9.5px; padding: 4px 9px; border-radius: 99px;
  background: rgba(127,127,127,0.12); color: var(--soft); border: none; font-weight: 700;
}
.anni-up-toggle.on { background: var(--ink); color: var(--c-white); }
.anni-up-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 13px;
  background: rgba(255,255,255,0.62); margin-bottom: 6px;
}
.anni-up-ava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.anni-up-mid { flex: 1; min-width: 0; }
.anni-up-title { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.anni-up-meta { font-size: 10px; color: var(--soft); margin-top: 1px; }
.anni-up-meta b { color: #c9456b; }
.anni-up-btn {
  font-size: 10px; font-weight: 800; padding: 6px 10px; border-radius: 99px;
  background: var(--ink); color: var(--c-white); border: none; flex-shrink: 0; white-space: nowrap;
}
.anni-up-tip { font-size: 9.5px; color: var(--soft); line-height: 1.5; margin-top: 4px; }
/* 纪念日卡片状态 */
.anni-card { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.anni-card.today { border-color: rgba(224,112,138,0.6) !important; box-shadow: 0 6px 20px rgba(224,112,138,0.18); }
.anni-card.soon { border-color: rgba(224,112,138,0.3) !important; }
.anni-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 8.5px; font-weight: 800; padding: 2px 7px; border-radius: 99px;
  background: #c9456b; color: #fff;
}
.anni-badge.soon { background: rgba(127,127,127,0.5); }

/* ==========================================================================
   私密手账本（纸张质感 / 装订线 / 胶带贴纸 / 翻页）
   ========================================================================== */
.nb-book { display: flex; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(20,26,36,0.12); }
.nb-spine {
  width: 16px; flex-shrink: 0;
  background: linear-gradient(180deg, #2f3a4d, #1f2733);
  position: relative;
}
.nb-spine::after {
  content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px;
  width: 2px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.3) 0 4px, transparent 4px 14px);
}
.nb-paper {
  flex: 1; position: relative; padding: 20px 17px 14px;
  background-color: #fdfbf6;
  background-image: linear-gradient(rgba(30,35,43,0.055) 1px, transparent 1px);
  background-size: 100% 27px;
  background-position: 0 38px;
}
[data-palette="obsidian"] .nb-paper, [data-palette="pinemoss"] .nb-paper {
  background-color: #262c38;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
}
.nb-tape {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 76px; height: 20px; border-radius: 2px;
  background: rgba(200,190,170,0.42);
  border-left: 1px dashed rgba(255,255,255,0.5);
  border-right: 1px dashed rgba(255,255,255,0.5);
}
.nb-head { display: flex; justify-content: space-between; font-family: monospace; font-size: 10px; color: var(--soft); margin-bottom: 7px; }
.nb-page-no { letter-spacing: 0.08em; font-weight: 700; }
.nb-meta-row { display: flex; gap: 5px; margin-bottom: 9px; flex-wrap: wrap; }
.nb-chip {
  font-size: 9.5px; padding: 3px 8px; border-radius: 99px;
  background: rgba(30,35,43,0.06); color: var(--soft); font-weight: 700;
}
.nb-chip.mood { background: rgba(224,112,138,0.14); color: #b4597a; }
.nb-title {
  font-size: 15.5px; font-weight: 800; color: var(--ink); margin-bottom: 9px;
  border-bottom: 1.5px solid rgba(30,35,43,0.1); padding-bottom: 6px;
}
.nb-body { font-size: 13px; line-height: 27px; white-space: pre-wrap; color: var(--ink); min-height: 110px; }
.nb-sec-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 3px; }
.nb-sec-text { font-size: 12px; line-height: 1.75; }
.nb-unsaid {
  margin-top: 13px; padding: 10px 12px; border-radius: 11px;
  background: rgba(127,127,127,0.07); border-left: 3px solid rgba(100,110,130,0.5);
}
.nb-unsaid .nb-sec-label { color: #5a6575; }
.nb-unsaid .nb-sec-text { color: var(--ink); font-style: italic; }
.nb-possess {
  margin-top: 9px; padding: 10px 12px; border-radius: 11px;
  background: rgba(30,30,40,0.07); border-left: 3px solid #4a4f5e;
}
.nb-possess .nb-sec-label { color: #4a4f5e; }
.nb-possess .nb-sec-text { color: var(--ink); }
.nb-stickers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.nb-sticker {
  font-size: 9.5px; padding: 5px 9px; border-radius: 3px;
  color: #4a4335; line-height: 1.4; max-width: 46%;
}
.nb-sticker.s0 { background: rgba(232,196,150,0.42); transform: rotate(-1.5deg); }
.nb-sticker.s1 { background: rgba(190,214,198,0.42); transform: rotate(1.2deg); }
.nb-sticker.s2 { background: rgba(214,190,204,0.42); transform: rotate(-0.8deg); }
[data-palette="obsidian"] .nb-sticker { color: #e8e4dc; }
.nb-pinned {
  margin-top: 11px; font-size: 10.5px; color: var(--soft);
  padding: 7px 10px; border: 1px dashed rgba(127,127,127,0.35); border-radius: 9px;
}
.nb-doodle {
  margin-top: 11px; padding: 9px 12px; border-radius: 12px;
  background: rgba(30,35,43,0.05); font-size: 11.5px; color: var(--soft); font-style: italic;
}
.nb-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 11px; border-top: 1px dashed rgba(127,127,127,0.25); }
.nb-nav-btn {
  font-size: 11px; font-weight: 700; padding: 6px 13px; border-radius: 99px;
  background: rgba(30,35,43,0.07); color: var(--ink); border: none;
}
.nb-nav-btn:disabled { opacity: 0.35; }
.nb-dots { display: flex; gap: 4px; align-items: center; }
.nb-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(127,127,127,0.3); cursor: pointer;
}
.nb-dots i.on { background: var(--ink); width: 16px; border-radius: 99px; }

/* ==========================================================================
   情侣空间 · QQ 空间式说说卡片
   ========================================================================== */
.qz-post {
  display: flex; gap: 10px; padding: 13px 14px;
  border-radius: var(--r-card, 18px);
  background: var(--card, rgba(255,255,255,0.58));
  border: 1px solid var(--hairline);
  margin-bottom: 9px;
}
.qz-ava {
  width: 42px; height: 42px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 2px 8px rgba(20,26,36,0.08);
}
.qz-main { flex: 1; min-width: 0; }
.qz-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qz-name { font-size: 13px; font-weight: 800; color: #5a6fa8; }
[data-palette="obsidian"] .qz-name, [data-palette="pinemoss"] .qz-name { color: #9fb6e8; }
.qz-mood {
  font-size: 9.5px; padding: 2px 7px; border-radius: 99px;
  background: rgba(224,112,138,0.14); color: #b4597a; font-weight: 700;
}
.qz-time { font-size: 10px; color: var(--faint); margin-top: 2px; }
.qz-text { font-size: 13px; line-height: 1.75; color: var(--ink); margin-top: 7px; white-space: pre-wrap; }
/* 评论块 */
.qz-comment {
  display: flex; gap: 7px; margin-top: 9px; padding: 9px 11px;
  border-radius: 12px; background: rgba(127,127,127,0.07);
}
.qz-c-ava { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.qz-c-body { font-size: 11.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.qz-c-body b { color: #5a6fa8; }
[data-palette="obsidian"] .qz-c-body b { color: #9fb6e8; }
/* 底部操作栏 */
.qz-bar {
  display: flex; gap: 6px; margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.qz-act {
  flex: 1; font-size: 10.5px; font-weight: 700; padding: 6px 4px; border-radius: 10px;
  background: transparent; color: var(--soft); border: none;
}
.qz-act:active { background: rgba(127,127,127,0.1); }
.qz-act.on { color: #d9486b; }

/* 情侣空间 · 联动数据面板 */
/* QQ 情侣空间式四格联动卡 —— 每格带柔和色调与小角标质感 */
.ch-link-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 12px; }
.ch-link-card {
  position: relative; text-align: center; padding: 13px 4px 11px; border-radius: 17px; cursor: pointer;
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(248,244,250,0.72));
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 6px 16px rgba(201,111,137,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform .16s ease, box-shadow .16s ease;
  overflow: hidden;
}
.ch-link-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
}
.ch-link-grid .ch-link-card:nth-child(1)::before { background: linear-gradient(160deg, rgba(255,214,165,0.28), transparent 60%); }
.ch-link-grid .ch-link-card:nth-child(2)::before { background: linear-gradient(160deg, rgba(246,160,190,0.26), transparent 60%); }
.ch-link-grid .ch-link-card:nth-child(3)::before { background: linear-gradient(160deg, rgba(240,130,130,0.24), transparent 60%); }
.ch-link-grid .ch-link-card:nth-child(4)::before { background: linear-gradient(160deg, rgba(170,150,230,0.26), transparent 60%); }
.ch-link-card:active { transform: scale(0.95); }
.ch-link-card:hover { box-shadow: 0 8px 22px rgba(201,111,137,0.16); }
.ch-link-ico { position: relative; font-size: 21px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); }
.ch-link-v { position: relative; font-size: 14px; font-weight: 800; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.ch-link-l { position: relative; font-size: 9px; color: var(--soft); margin-top: 2px; letter-spacing: 0.04em; }

/* 今日心动指数卡 */
.ch-beat {
  display: flex; align-items: center; gap: 14px; margin: 2px 0 12px;
  padding: 13px 15px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(246,160,190,0.16), rgba(170,150,230,0.14));
  border: 1px solid rgba(246,160,190,0.28);
  box-shadow: 0 6px 18px rgba(201,111,137,0.1);
}
.ch-beat-ring {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(#e86aa0 calc(var(--p) * 1%), rgba(127,127,127,0.14) 0);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.ch-beat-ring::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--card-solid, #fff);
}
.ch-beat-num { position: relative; z-index: 1; font-size: 17px; font-weight: 800; color: #d14e86; font-variant-numeric: tabular-nums; }
.ch-beat-num small { font-size: 9px; font-weight: 700; }
.ch-beat-mid { flex: 1; min-width: 0; }
.ch-beat-title { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.ch-beat-line { font-size: 11.5px; line-height: 1.6; color: var(--soft); font-style: italic; }

/* 默契大考验 */
.ch-sync-score { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 13px; background: rgba(224,82,138,0.07); }
.ch-sync-score-v { font-size: 24px; font-weight: 800; color: #d14e86; font-variant-numeric: tabular-nums; }
.ch-sync-score-v span { font-size: 13px; color: var(--soft); font-weight: 700; }
.ch-sync-score-l { font-size: 10.5px; color: var(--soft); font-weight: 700; }
.ch-sync-item { border-left: 3.5px solid rgba(127,127,127,0.2); }
.ch-sync-item.hit { border-left-color: #e0528a; }
.ch-sync-item.miss { border-left-color: #94a3b8; }
.ch-sync-item.wait { border-left-color: #cbb6e8; }
.ch-sync-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.ch-sync-opt {
  padding: 9px 10px; border-radius: 11px; font-size: 12px; line-height: 1.4; color: var(--ink);
  background: rgba(127,127,127,0.06); border: 1.5px solid transparent;
}
.ch-sync-opt b { color: var(--soft); margin-right: 5px; }
.ch-sync-opt.me { border-color: #0284c7; background: rgba(2,132,199,0.08); }
.ch-sync-opt.ta { box-shadow: inset 0 0 0 1.5px rgba(224,82,138,0.5); }
.ch-sync-opt.me.ta { background: rgba(224,82,138,0.12); border-color: #e0528a; }
.ch-sync-res { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--ink); }
.ch-sync-res b { color: #d14e86; }
.ch-sync-badge { font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.ch-sync-badge.hit { background: rgba(224,82,138,0.14); color: #c04578; }
.ch-sync-badge.miss { background: rgba(127,127,127,0.12); color: var(--soft); }
.ch-sync-reason { margin-top: 8px; padding: 8px 11px; border-radius: 11px; background: rgba(190,24,93,0.06); font-size: 12px; line-height: 1.65; color: var(--ink); }

/* 通用：app 顶部横滑切换角色条 */
.app-charswitch {
  margin: 2px 0 10px; padding: 9px 11px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(244,244,250,0.7));
  border: 1px solid var(--hairline);
}
.app-charswitch-label { display: block; font-size: 9.5px; font-weight: 800; color: var(--soft); letter-spacing: 0.1em; margin-bottom: 7px; }
.app-charswitch-row { display: flex; gap: 10px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.app-charswitch-row::-webkit-scrollbar { display: none; }
.app-charswitch-ava {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 54px; padding: 3px; border: none; background: transparent; cursor: pointer;
}
.app-charswitch-ava img {
  width: 46px; height: 46px; border-radius: 14px; object-fit: cover;
  border: 2px solid transparent; transition: border-color .15s, transform .15s;
  opacity: 0.6;
}
.app-charswitch-ava span { font-size: 9.5px; color: var(--soft); max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-charswitch-ava.on img { border-color: #e0528a; opacity: 1; transform: scale(1.04); box-shadow: 0 4px 12px rgba(224,82,138,0.25); }
.app-charswitch-ava.on span { color: var(--ink); font-weight: 800; }

/* 小剧场创作卡精致化 */
.sy-create-card {
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(245,243,250,0.82));
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 10px 28px rgba(60,50,90,0.1);
}

/* ======================================================================
   多人线下剧场 · 长文小说模式（原创排版，非票根/楼层风）
   ====================================================================== */
/* 参演角色条（轻量，放参数条下方）*/
.mo2-cast2 { margin: 2px 0 12px; padding: 11px 13px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(245,243,251,0.78)); border: 1px solid var(--hairline); box-shadow: 0 6px 16px rgba(60,50,90,0.07); }
.mo2-cast2-head { font-size: 10.5px; font-weight: 800; color: var(--soft); margin-bottom: 9px; }
.mo2-cast2-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
.mo2-cast2-row::-webkit-scrollbar { display: none; }
.mo2-cast2-item { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 54px; cursor: pointer; }
.mo2-cast2-item img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2.5px solid transparent; opacity: 0.4; filter: grayscale(0.35); transition: all .16s; }
.mo2-cast2-item span { font-size: 10px; color: var(--soft); max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo2-cast2-item.on img { opacity: 1; filter: none; border-color: #9b86c8; box-shadow: 0 4px 12px rgba(155,134,200,0.4); }
.mo2-cast2-item.on span { color: var(--ink); font-weight: 800; }
.mo2-cast2-item.thought img { border-color: #f0b43a; box-shadow: 0 0 0 2px rgba(240,180,58,0.3), 0 4px 12px rgba(240,180,58,0.4); }
.mo2-cast2-dot { position: absolute; top: -3px; right: 2px; font-size: 10px; background: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.22); }
.mo2-cast2-scene { width: 100%; margin-top: 10px; border: none; border-bottom: 1.5px solid var(--hairline); background: transparent; font-size: 13px; font-weight: 800; color: var(--ink); padding: 4px 2px; outline: none; }
.mo2-cast2-open { width: 100%; margin-top: 8px; border: none; background: rgba(127,127,127,0.06); border-radius: 11px; padding: 8px 11px; font-size: 11px; line-height: 1.6; color: var(--ink); min-height: 42px; resize: vertical; outline: none; }

/* 书卷：一整篇连续长文 */
.mo2-book { border-radius: 20px; padding: 20px 20px 22px; margin-bottom: 14px; background: linear-gradient(180deg, rgba(253,252,250,0.97), rgba(250,248,246,0.95)); border: 1px solid rgba(220,214,228,0.6); box-shadow: 0 10px 30px rgba(60,50,90,0.1); }
.mo2-book-head { text-align: center; margin-bottom: 18px; }
.mo2-book-title { font-family: var(--font-serif); font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: 0.04em; }
.mo2-book-sub { font-size: 10px; color: var(--soft); margin-top: 6px; letter-spacing: 0.08em; }
.mo2-book-rule { margin-top: 10px; color: #c9b9a0; font-size: 13px; letter-spacing: 0.3em; }
.mo2-empty { text-align: center; padding: 26px 16px; font-size: 12.5px; color: var(--soft); line-height: 1.9; }

/* 小说正文排版 */
.mo2-novel { }
.mo2-nv-div { text-align: center; color: #c3b4d6; font-size: 12px; letter-spacing: 0.3em; margin: 20px 0; }
.mo2-nv-scene { }
.mo2-nv-act { margin: 0 0 12px; padding: 9px 13px; border-radius: 12px; background: rgba(2,132,199,0.07); border-left: 3px solid #0284c7; font-size: 13px; line-height: 1.8; color: #0f3550; font-style: italic; }
.mo2-nv-act::before { content: "我 · "; font-weight: 800; font-style: normal; color: #0284c7; }
.mo2-nv-p { margin: 0 0 13px; font-size: 14.5px; line-height: 2.05; color: #2a2733; text-indent: 2em; font-family: var(--font-serif, inherit); }
.mo2-nv-p.dlg { text-indent: 0; margin-left: 0.4em; }
.mo2-nv-p:last-child { margin-bottom: 0; }
.mo2-nv-th { margin: 14px 0 4px; }
.mo2-nv-th summary { font-size: 11px; font-weight: 800; color: #9b86c8; cursor: pointer; padding: 6px 11px; background: rgba(155,134,200,0.1); border-radius: 10px; display: inline-block; }
.mo2-nv-th-item { margin-top: 7px; padding: 8px 12px; border-radius: 11px; background: rgba(30,41,59,0.04); font-size: 12px; line-height: 1.7; color: var(--ink); }
.mo2-nv-th-item b { color: #6b5b9a; }
.mo2-nv-tools { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hairline); }
.mo2-nv-tools button { border: none; background: rgba(127,127,127,0.1); border-radius: 9px; padding: 5px 12px; font-size: 10.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.mo2-nv-tools button.danger { color: #3b6699; background: rgba(190,18,60,0.08); }

/* 底部固定：我的发言永远在最下面 */
.mo2-mebar { position: sticky; bottom: 0; z-index: 5; margin: 6px -14px -12px; padding: 10px 14px 14px; background: linear-gradient(to top, var(--card-solid, #fff) 72%, transparent); backdrop-filter: blur(6px); }
.mo2-mebar-tip { font-size: 9.5px; color: var(--soft); font-weight: 700; margin-bottom: 6px; padding-left: 4px; }
.mo2-mebar-row { display: flex; gap: 8px; align-items: center; }
.mo2-mebar-inp { flex: 1; border: 1px solid var(--hairline); background: rgba(127,127,127,0.06); border-radius: 999px; padding: 11px 16px; font-size: 12.5px; color: var(--ink); outline: none; }
.mo2-mebar-send { flex-shrink: 0; border: none; border-radius: 999px; padding: 11px 20px; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#3a3652,#5b4f7e); cursor: pointer; }

/* ======================================================================
   养娃 · 成长信箱（天赋养成 + 娃的来信，玩法区别于喂养数值）
   ====================================================================== */
.bb-card { padding: 15px; border-radius: 20px; margin-bottom: 12px; background: linear-gradient(160deg, rgba(255,251,245,0.97), rgba(247,250,246,0.92)); border: 1px solid rgba(230,224,212,0.7); box-shadow: 0 10px 26px rgba(120,100,70,0.1); }
.bb-top { display: flex; gap: 13px; align-items: center; margin-bottom: 13px; }
.bb-ava { width: 60px; height: 60px; border-radius: 20px; flex-shrink: 0; display: grid; place-items: center; font-size: 30px; background: linear-gradient(145deg,#fde9c8,#d8ecd0); box-shadow: inset 0 2px 6px rgba(255,255,255,0.6); }
.bb-info { flex: 1; min-width: 0; }
.bb-name { font-size: 17px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.bb-stage { font-size: 10px; font-weight: 800; color: #047857; background: rgba(52,211,153,0.16); padding: 2px 9px; border-radius: 999px; }
.bb-sub { font-size: 11px; color: var(--soft); margin-top: 3px; }
.bb-stageline { display: flex; gap: 6px; margin-top: 8px; }
.bb-stage-dot { width: 22px; height: 5px; border-radius: 999px; background: rgba(120,100,70,0.14); }
.bb-stage-dot.on { background: linear-gradient(90deg,#fbbf24,#34d399); }
.bb-talents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 11px; }
.bb-tal-head { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.bb-tal-head b { color: #d08a2a; }
.bb-tal-bar { height: 6px; border-radius: 999px; background: rgba(120,100,70,0.1); overflow: hidden; }
.bb-tal-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#fcd34d,#34d399); }
.bb-traits { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.bb-traits span { font-size: 9.5px; font-weight: 700; color: #7c5a2a; background: rgba(251,191,36,0.16); padding: 3px 9px; border-radius: 999px; }
.bb-room { font-size: 12px; line-height: 1.65; color: var(--ink); padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,0.7); border-left: 3px solid #d8b86a; }

.bb-act { padding: 14px 15px; border-radius: 18px; margin-bottom: 12px; background: var(--card-solid, rgba(252,252,254,0.95)); border: 1px solid var(--hairline); }
.bb-act-title { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.bb-act-row { display: flex; gap: 8px; margin-bottom: 10px; }
.bb-lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.bb-lesson { text-align: left; border: 1px solid var(--hairline); background: rgba(127,127,127,0.04); border-radius: 13px; padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.bb-lesson b { font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.bb-lesson span { font-size: 9px; font-weight: 800; color: #047857; }
.bb-lesson:active { transform: scale(0.97); }

.bb-mail { padding: 15px; border-radius: 20px; margin-bottom: 12px; background: linear-gradient(170deg, rgba(255,250,242,0.97), rgba(253,247,238,0.95)); border: 1px solid rgba(235,214,180,0.65); box-shadow: 0 8px 22px rgba(150,110,60,0.1); }
.bb-mail-head { font-size: 12.5px; font-weight: 800; color: #9a6b3a; margin-bottom: 12px; }
.bb-empty { text-align: center; padding: 20px 14px; font-size: 11.5px; color: var(--soft); line-height: 1.8; }
.bb-letter { position: relative; padding: 13px 15px; border-radius: 14px; margin-bottom: 11px; background: #fffdf8; border: 1px dashed #e4cda0; box-shadow: 0 3px 10px rgba(150,110,60,0.08); }
.bb-letter:last-child { margin-bottom: 0; }
.bb-letter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.bb-letter-title { font-size: 13px; font-weight: 800; color: #8a5a2a; font-family: var(--font-serif, inherit); }
.bb-letter-date { font-size: 9.5px; color: #b89a6a; }
.bb-letter-body { font-size: 13px; line-height: 1.85; color: #4a3f30; white-space: pre-wrap; }
.bb-letter-tools { display: flex; gap: 10px; margin-top: 10px; }
.bb-letter-tools button { border: none; background: rgba(154,107,58,0.1); color: #8a5a2a; border-radius: 8px; padding: 4px 11px; font-size: 10px; font-weight: 700; cursor: pointer; }
.bb-letter-tools button.danger { color: #3b6699; background: rgba(190,18,60,0.08); }

.bb-logs { padding: 14px 15px; border-radius: 18px; background: var(--card-solid, rgba(252,252,254,0.95)); border: 1px solid var(--hairline); }
.bb-logs-head { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.bb-log { padding: 10px 12px; border-radius: 13px; background: rgba(127,127,127,0.04); border: 1px solid var(--hairline); margin-bottom: 8px; }
.bb-log.pending { opacity: 0.65; font-style: italic; }
.bb-log-act { font-size: 11px; color: #0f3550; background: rgba(2,132,199,0.07); border-left: 3px solid #0284c7; padding: 5px 9px; border-radius: 8px; margin-bottom: 6px; }
.bb-log-text { font-size: 12.5px; line-height: 1.75; color: var(--ink); white-space: pre-wrap; }
.bb-log-words { margin-top: 7px; padding: 6px 10px; border-radius: 10px; background: rgba(251,191,36,0.12); font-size: 11.5px; line-height: 1.6; color: var(--ink); }
.bb-log-words b { color: #365f91; }

/* 可折叠参数条（情侣空间默认收起） */
.studio-bar-collapsible { padding: 0; overflow: hidden; }
.studio-bar-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: transparent; border: none; cursor: pointer; text-align: left;
}
.studio-bar-toggle:active { background: rgba(127,127,127,0.06); }
.studio-bar-collapsible.is-open .studio-bar-toggle { border-bottom: 1px solid var(--hairline); }
.studio-bar-panel { display: flex; flex-direction: column; gap: 8px; padding: 11px 13px; }




/* ======================================================================
   v22 高定半透凝霜美学重塑 (LUMIÈRE ATELIER EDITION)
   涵盖：1. 养娃·阿蓝 (银盐育儿手记 & 专属育儿参数 & 一家三口群)
        2. 约会剧场 (高定画报双视角感官切片 & 五维张力传感器)
        3. 情侣头像高定工坊 & 微信双图情头邀约卡
   严禁廉价红黄绿配色，全线采用凝霜白、云母透灰、冷银深墨与微光玻璃层次
   ====================================================================== */

.rv3-wrap, .ab3-wrap {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 18px;
}
.rv3-wrap > *, .ab3-wrap > * {
  flex-shrink: 0;
}

/* 顶部高定磨砂主控舱 */
.atelier-hero-card {
  position: relative;
  padding: 15px 16px;
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(255,255,255,0.78) 0%, rgba(244,247,251,0.62) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow: 0 12px 32px rgba(24,32,44,0.06), inset 0 1px 0 rgba(255,255,255,0.95);
}

.atelier-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.atelier-role-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 1px 6px;
  scrollbar-width: none;
}
.atelier-role-strip::-webkit-scrollbar { display: none; }

.atelier-role-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 5px;
  border-radius: 999px;
  border: 1px solid rgba(30,35,43,0.08);
  background: rgba(255,255,255,0.65);
  color: var(--ink);
  cursor: pointer;
  transition: all .18s ease;
}
.atelier-role-chip img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.9);
}
.atelier-role-chip b {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.atelier-role-chip small {
  font-size: 9.5px;
  opacity: 0.68;
}
.atelier-role-chip.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 6px 16px rgba(24,30,40,0.16);
}
.atelier-role-chip.on small { color: rgba(255,255,255,0.78); }

/* 专属参数抽屉与胶囊矩阵 */
.atelier-param-box {
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(238,242,247,0.58);
  border: 1px solid rgba(255,255,255,0.82);
}
.atelier-param-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.atelier-param-item label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--soft);
  margin-bottom: 3px;
  letter-spacing: 0.02em;
}
.atelier-select {
  width: 100%;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid rgba(30,35,43,0.09);
  background: rgba(255,255,255,0.86);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  outline: none;
}

.atelier-wc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(30,35,43,0.06);
}
.atelier-wc-pills {
  display: flex;
  gap: 4px;
}
.atelier-wc-pill {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(30,35,43,0.09);
  background: rgba(255,255,255,0.72);
  font-size: 10px;
  font-weight: 800;
  color: var(--soft);
  cursor: pointer;
}
.atelier-wc-pill.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* 五维感官切片 / 银盐遥测条 */
.atelier-telemetry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.atelier-tele-cell {
  padding: 8px 9px;
  border-radius: 13px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(255,255,255,0.88);
  text-align: left;
}
.atelier-tele-lbl {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--faint);
  text-transform: uppercase;
  display: block;
}
.atelier-tele-val {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 极简分段导航 */
.atelier-seg-nav {
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 15px;
  background: rgba(226,232,240,0.52);
  border: 1px solid rgba(255,255,255,0.8);
}
.atelier-seg-btn {
  flex: 1;
  padding: 7px 4px;
  border-radius: 11px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  color: var(--soft);
  cursor: pointer;
  transition: all .16s ease;
}
.atelier-seg-btn.on {
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(24,32,44,0.06);
}

/* 银盐杂志叙事画报卡 */
.atelier-story-card {
  padding: 15px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.74);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 28px rgba(24,32,44,0.05);
}
.atelier-scene-banner {
  padding: 13px 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(30,36,46,0.92), rgba(48,56,70,0.88));
  color: #f8fafc;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(20,26,36,0.14);
}
.atelier-scene-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: rgba(226,232,240,0.72);
  margin-bottom: 5px;
}
.atelier-scene-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.atelier-scene-desc {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(241,245,249,0.88);
}

/* 叙事段落与双视角凝视切片 */
.atelier-turn-item {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(30,35,43,0.065);
  margin-bottom: 10px;
}
.atelier-turn-item.mine {
  background: rgba(235,240,247,0.72);
  border-left: 2.5px solid var(--ink);
}
.atelier-turn-item.open-hook {
  background: rgba(244,246,250,0.75);
  border-left: 2.5px solid #64748b;
}
.atelier-turn-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--soft);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.atelier-turn-prose {
  font-size: 13px;
  line-height: 1.82;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.atelier-gaze-slice {
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(30,36,46,0.045);
  border: 1px solid rgba(30,36,46,0.08);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink);
}
.atelier-gaze-slice b {
  font-weight: 800;
  color: #334155;
}

/* 分支与微互动选项 */
.atelier-choice-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.atelier-choice-btn {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 13px;
  border: 1px solid rgba(30,35,43,0.09);
  background: rgba(255,255,255,0.86);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.atelier-choice-btn:active {
  transform: scale(0.985);
  background: rgba(226,232,240,0.65);
}
.atelier-choice-num {
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(30,35,43,0.08);
  color: var(--ink);
  flex-shrink: 0;
}

/* 画廊网格卡 */
.atelier-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.atelier-card-btn {
  text-align: left;
  padding: 11px 12px;
  border-radius: 15px;
  border: 1px solid rgba(30,35,43,0.08);
  background: rgba(255,255,255,0.82);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .16s ease;
}
.atelier-card-btn.on {
  border-color: var(--ink);
  background: rgba(30,35,43,0.06);
  box-shadow: 0 4px 14px rgba(20,25,35,0.07);
}
.atelier-card-btn b {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.atelier-card-btn span {
  font-size: 10px;
  color: var(--soft);
  line-height: 1.45;
}

/* 养娃·阿蓝 高定潜能微条与家庭群聊气泡 */
.ab3-portrait-row {
  display: flex;
  gap: 13px;
  align-items: center;
}
.ab3-ava-frame {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(226,232,240,0.8), rgba(248,250,252,0.95));
  border: 1.5px solid rgba(255,255,255,0.95);
  box-shadow: 0 6px 16px rgba(24,32,44,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.ab3-ava-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab3-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}
.ab3-stat-pill {
  padding: 6px 9px;
  border-radius: 11px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(30,35,43,0.06);
}
.ab3-stat-top {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--soft);
  margin-bottom: 3px;
}
.ab3-stat-top b { color: var(--ink); }
.ab3-stat-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(30,35,43,0.08);
  overflow: hidden;
}
.ab3-stat-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #475569, #1e293b);
}

/* 家庭三人群聊窗口 */
.ab3-chat-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 290px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 16px;
  background: rgba(238,242,246,0.65);
  border: 1px solid rgba(255,255,255,0.85);
}
.ab3-chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ab3-chat-msg.mine {
  flex-direction: row-reverse;
}
.ab3-chat-ava {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(30,35,43,0.08);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}
.ab3-chat-ava img { width: 100%; height: 100%; object-fit: cover; }
.ab3-chat-bub {
  max-width: 78%;
  padding: 8px 11px;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(30,35,43,0.06);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
}
.ab3-chat-msg.mine .ab3-chat-bub {
  background: var(--ink);
  color: #fff;
}
.ab3-chat-who {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--soft);
  margin-bottom: 2px;
}

/* 情侣头像高定工坊 & 微信双图情头邀约卡 */
.cpa3-stage {
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(30,36,46,0.94), rgba(45,53,68,0.9));
  color: #fff;
  margin-bottom: 12px;
  box-shadow: 0 10px 26px rgba(20,26,36,0.16);
}
.cpa3-pair-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 12px 0;
}
.cpa3-ava-card {
  text-align: center;
}
.cpa3-ava-img {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.88);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.1);
}
.cpa3-link-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(226,232,240,0.8);
}

/* 微信聊天内的双图情侣头像邀约卡 */
.wx-cpava-invite-card {
  width: 242px;
  padding: 13px 14px;
  border-radius: 18px;
  background: var(--card, rgba(255,255,255,0.56));
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--edge, rgba(255,255,255,0.7));
  box-shadow: 0 10px 30px rgba(20,28,40,0.10);
  color: var(--ink);
}
.wx-cpava-pair-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 8px;
  border-radius: 14px;
  background: rgba(120,135,155,0.08);
  margin: 9px 0;
}
.wx-cpava-pair-row img {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  object-fit: cover;
  border: 2px solid var(--card, #fff);
  box-shadow: 0 4px 12px rgba(20,28,40,0.14);
}

/* 微信线下模式顶部角色自选与联动快捷栏 */
.off-char-bar {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 12px; border-radius: 16px; margin-bottom: 8px;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(16px);
  border: 1px solid var(--edge);
}
.off-char-top {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.off-quick-pills {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
}
.off-quick-pill {
  flex-shrink: 0; border: 1px solid var(--hairline);
  background: rgba(30,41,59,0.06); color: var(--ink);
  font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; cursor: pointer;
}


/* ==========================================================================
   LUMIÈRE v23 · NATIVE MOBILE VISUAL & ILLUSTRATED CARD SYSTEM
   Fixes squished buttons, pure-text cards, and modal clipping
   ========================================================================== */
.atelier-wc-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(30, 35, 43, 0.1) !important;
}
.atelier-wc-pills {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 5px !important;
  width: 100% !important;
}
.atelier-wc-pill {
  padding: 6px 2px !important;
  border-radius: 9px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Visual Hero Stage Banner with Real Illustrated Cover */
.v23-stage-banner {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 178px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 14px;
  color: #fff;
}
.v23-stage-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 24, 0.42) 0%, rgba(10, 14, 24, 0.22) 40%, rgba(10, 14, 24, 0.86) 100%);
  pointer-events: none;
}
.v23-stage-top, .v23-stage-bottom {
  position: relative;
  z-index: 2;
}
.v23-stage-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.v23-glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* 2-Column Visual Poster Cards (Date Gallery / Mini-Theater / Baby Care) */
.v23-poster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.v23-poster-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  padding: 0;
}
.v23-poster-card:active {
  transform: scale(0.98);
}
.v23-poster-card.on {
  border: 2px solid #1e232b;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
}
.v23-poster-cover {
  height: 92px;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}
.v23-poster-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.62) 100%);
}
.v23-poster-tag {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.v23-poster-body {
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.v23-poster-title {
  font-size: 12px;
  font-weight: 800;
  color: #1e232b;
  line-height: 1.3;
}
.v23-poster-sub {
  font-size: 10px;
  color: #64748b;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Visual Ticket Stub Card */
.v23-ticket-stub {
  display: flex;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(30, 35, 43, 0.1);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  margin-bottom: 10px;
}
.v23-ticket-img {
  width: 96px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  position: relative;
}
.v23-ticket-main {
  flex: 1;
  padding: 10px 12px;
  min-width: 0;
  border-left: 2px dashed rgba(30, 35, 43, 0.12);
}

/* Couple Avatar Gallery Card (Large Clickable Diptych) */
.v23-cp-card {
  border-radius: 20px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.v23-cp-card.on {
  border: 2px solid #1e232b;
  background: rgba(255, 255, 255, 0.96);
}
.v23-cp-diptych {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.09));
  cursor: pointer;
}
.v23-cp-img-box {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
  flex-shrink: 0;
}
.v23-cp-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v23-cp-img-lbl {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  background: rgba(15, 23, 42, 0.65);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
}


/* ==========================================================================
   LUMIÈRE v24 · LUXURY MODAL SYSTEM, ENHANCED BANNERS & BOUTIQUE MALL
   ========================================================================== */
.modal-sheet {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 247, 252, 0.92) 100%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  padding: 14px 16px 18px !important;
}
.modal-sheet::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(30, 35, 43, 0.16);
  margin: 0 auto 10px;
}
.modal-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: #181c23 !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(30, 35, 43, 0.08) !important;
}

/* Lighter, crystal-clear gradient overlay on stage banners & poster covers */
.v23-stage-banner::before {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0.08) 42%, rgba(15, 23, 42, 0.72) 100%) !important;
}
.v23-poster-cover::after {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.38) 100%) !important;
}

/* LUMIÈRE BOUTIQUE v24 Mall Cards */
.v24-cat-rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 1px 6px;
  scrollbar-width: none;
}
.v24-cat-rail::-webkit-scrollbar {
  display: none;
}
.v24-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(30, 35, 43, 0.08);
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.16s ease;
}
.v24-cat-chip.on {
  background: #1e232b;
  color: #fff;
  border-color: #1e232b;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}

.v24-prod-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.v24-prod-card {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.v24-prod-card:active {
  transform: scale(0.985);
}
.v24-prod-cover {
  height: 124px;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}
.v24-prod-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.18) 0%, transparent 45%, rgba(15,23,42,0.52) 100%);
}
.v24-prod-cat-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.v24-prod-price-badge {
  position: absolute;
  bottom: 7px;
  left: 9px;
  z-index: 2;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.v24-prod-cart-mini {
  position: absolute;
  bottom: 7px;
  right: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1e232b;
  font-size: 9.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
}
.v24-prod-body {
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.v24-prod-title {
  font-size: 12.2px;
  font-weight: 800;
  color: #1e232b;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v24-prod-desc {
  font-size: 9.8px;
  color: #64748b;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v24-prod-thought {
  font-size: 9.8px;
  line-height: 1.45;
  padding: 5px 7px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.04), rgba(30, 41, 59, 0.08));
  border-left: 2.5px solid #1e232b;
  color: #1e232b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v24-prod-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
}
.v24-prod-btn {
  padding: 5px 2px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 800;
  border: 1px solid rgba(30, 35, 43, 0.1);
  background: rgba(255, 255, 255, 0.85);
  color: #1e232b;
  cursor: pointer;
  text-align: center;
}
.v24-prod-btn.primary {
  background: #1e232b;
  color: #fff;
  border-color: #1e232b;
}


/* ==========================================================================
   LUMIÈRE v25 · GIFT PAVILION, REAL KINSHIP CARD & FLEA MARKET v25
   ========================================================================== */
.v25-gift-card {
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
  margin-bottom: 12px;
}
.v25-gift-ribbon {
  padding: 10px 13px;
  background: linear-gradient(135deg, rgba(30, 35, 43, 0.04), rgba(30, 35, 43, 0.09));
  border-left: 3px solid #1e232b;
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.65;
  color: #1e232b;
  margin-top: 8px;
}
.v25-trace-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(2, 132, 199, 0.06);
  border: 1px dashed rgba(2, 132, 199, 0.28);
  font-size: 10.5px;
  color: #0f172a;
  margin-top: 8px;
  cursor: pointer;
}
.v25-flea-reaction-card {
  border-radius: 18px;
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(254, 242, 242, 0.65));
  border: 1px solid rgba(244, 63, 94, 0.2);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  margin-bottom: 10px;
}


/* ==========================================================================
   LUMIÈRE v26 — HIGH-AESTHETIC FLEA MARKET (闲鱼 5-TAB) & CHAR LIBRARY DOSSIER
   ========================================================================== */
.v26-flea-shell {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 78px;
}
.v26-flea-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(30, 35, 43, 0.14);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.v26-flea-city-pill {
  font-size: 11.5px;
  font-weight: 800;
  color: #1e232b;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-right: 8px;
  border-right: 1px solid rgba(30, 35, 43, 0.12);
  white-space: nowrap;
  cursor: pointer;
}
.v26-flea-searchbar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 11.5px;
  color: #1e232b;
  outline: none;
  min-width: 0;
}
.v26-flea-search-btn {
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
  background: #1e232b;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.v26-flea-kingkong {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  padding: 11px 10px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.v26-flea-kk-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
}
.v26-flea-kk-ico {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.06), rgba(30, 41, 59, 0.12));
  border: 1px solid rgba(30, 41, 59, 0.08);
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: transform 0.16s ease;
}
.v26-flea-kk-item:active .v26-flea-kk-ico {
  transform: scale(0.93);
}
.v26-flea-kk-item span {
  font-size: 10px;
  font-weight: 700;
  color: #1e232b;
  white-space: nowrap;
}
.v26-flea-tabs-rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}
.v26-flea-tabs-rail::-webkit-scrollbar { display: none; }
.v26-flea-tab-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(30, 35, 43, 0.08);
  background: rgba(255, 255, 255, 0.78);
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.16s ease;
}
.v26-flea-tab-pill.on {
  background: #1e232b;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(30, 35, 43, 0.18);
}
.v26-flea-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.v26-flea-card {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.16s ease;
}
.v26-flea-card:active {
  transform: scale(0.985);
}
.v26-flea-cover {
  height: 132px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
}
.v26-flea-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.12) 0%, rgba(15,23,42,0.02) 45%, rgba(15,23,42,0.62) 100%);
  pointer-events: none;
}
.v26-flea-loc-badge {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.v26-flea-body {
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.v26-flea-title {
  font-size: 12px;
  font-weight: 800;
  color: #1e232b;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v26-flea-ship-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 5px;
  background: linear-gradient(135deg, #d4e6fb, #f59e0b);
  color: #1e232b;
  font-size: 9px;
  font-weight: 900;
  margin-right: 4px;
  vertical-align: 1px;
}
.v26-flea-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  margin-top: 1px;
}
.v26-flea-price {
  font-size: 15px;
  font-weight: 900;
  color: #4673a8;
  letter-spacing: -0.02em;
}
.v26-flea-Price-sym {
  font-size: 10px;
  font-weight: 800;
  margin-right: 1px;
}
.v26-flea-wants {
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 600;
}
.v26-flea-subtag {
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(225, 29, 72, 0.25);
  color: #3b6699;
  background: rgba(254, 242, 242, 0.7);
  font-size: 8.5px;
  font-weight: 700;
}
.v26-flea-seller-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: auto;
  padding-top: 5px;
  border-top: 1px dashed rgba(148, 163, 184, 0.2);
}
.v26-flea-seller-left {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.v26-flea-seller-ava {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e2e8f0;
}
.v26-flea-seller-name {
  font-size: 9.5px;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v26-flea-credit-tag {
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.13);
  color: #365f91;
  font-size: 8.5px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 闲鱼底部 5-Tab 导航栏 */
.v26-flea-dock {
  position: sticky;
  bottom: 4px;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 6px 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  margin-top: 8px;
}
.v26-flea-dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 0;
  color: #64748b;
  position: relative;
}
.v26-flea-dock-btn.on {
  color: #1e232b;
  font-weight: 800;
}
.v26-flea-dock-ico {
  font-size: 17px;
  line-height: 1;
}
.v26-flea-dock-lbl {
  font-size: 9.5px;
  font-weight: 700;
}
.v26-flea-dock-sell {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e232b, #334155);
  color: #d4e6fb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(30, 35, 43, 0.28);
  margin-top: -14px;
  border: 2.5px solid #fff;
}
.v26-flea-dock-sell span {
  font-size: 8.5px;
  font-weight: 800;
  color: #fff;
  margin-top: 1px;
}
.v26-flea-badge {
  position: absolute;
  top: 0;
  right: 12px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #4673a8;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* 卖闲置中心 (53054.jpg 高定版) */
.v26-sell-hub-card {
  padding: 15px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(254, 249, 195, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.v26-sell-big-btn {
  width: 100%;
  padding: 15px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fefce8, #eaf3fc);
  border: 1px solid rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 9px;
  text-align: left;
}
.v26-sell-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.v26-sell-sub-btn {
  padding: 13px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 35, 43, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

/* 消息中心 & 私聊列表 (53055.jpg 高定版) */
.v26-msg-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 5px 15px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  margin-bottom: 8px;
}
.v26-msg-ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid #fff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}
.v26-msg-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid rgba(30, 35, 43, 0.08);
}

/* 角色库高定档案卡 (53057/53058 升级) */
.v26-lib-card {
  padding: 12px 13px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.85));
  border: 1px solid rgba(30, 41, 59, 0.1);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v26-wxid-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 11px;
  background: rgba(30, 41, 59, 0.05);
  border: 1px dashed rgba(30, 41, 59, 0.18);
  font-size: 11px;
}
.v26-wxid-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.02em;
}


/* ==========================================================================
   LUMIÈRE v27 — EDITORIAL FLEA MARKET REFINEMENT (FIXED DOCK + SVG + ALT BADGE)
   ========================================================================== */
.v26-flea-shell {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 18px;
}
.v27-svg-squircle {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fafc, #f1f5f9);
  border: 1px solid rgba(30, 41, 59, 0.09);
  color: #1e232b;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
  transition: all 0.16s ease;
}
.v27-svg-squircle svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}
.v27-svg-squircle.active {
  background: #1e232b;
  color: #fff;
  border-color: #1e232b;
  box-shadow: 0 6px 14px rgba(30, 35, 43, 0.22);
}
.v27-alt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(190, 18, 60, 0.1), rgba(190, 18, 60, 0.18));
  border: 1px solid rgba(190, 18, 60, 0.28);
  color: #9f1239;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.v27-my-item-card {
  border-radius: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(30, 41, 59, 0.09);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.v27-my-item-card:active {
  transform: scale(0.99);
}
.v27-my-item-actions {
  display: grid;
  grid-template-columns: 1.35fr 1.15fr 0.8fr 0.8fr;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(148, 163, 184, 0.24);
}
.v27-my-item-btn {
  padding: 6px 6px;
  border-radius: 10px;
  border: 1px solid rgba(30, 41, 59, 0.12);
  background: #fff;
  color: #1e232b;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
}
.v27-my-item-btn.primary {
  background: #1e232b;
  color: #fff;
  border-color: #1e232b;
}
.v27-my-item-btn.danger {
  color: #3b6699;
  border-color: rgba(190, 18, 60, 0.22);
  background: rgba(254, 242, 242, 0.6);
}
.v27-flea-nav-sell {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #1e232b;
  color: #d4e6fb;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(30, 35, 43, 0.22);
}


/* ==========================================================================
   v29 FULL-SCREEN PHONE PAGE MODALS & HIGH-CRAFT WECHAT / XIANYU OVERHAUL
   ========================================================================== */

/* Full-screen phone modal mode: fits 100% inside the phone frame below statusbar */
.modal-mask.full-phone-mask {
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: #f5f6fa !important;
  backdrop-filter: none !important;
  padding-top: 36px !important;
}
.modal-panel.full-phone-panel {
  width: 100% !important;
  height: calc(100% - 36px) !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.v29-phone-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
  z-index: 10;
}
.v29-phone-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.07);
  color: #0f172a;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}
.v29-phone-page-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.v29-phone-page-title strong {
  font-size: 14.5px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.v29-phone-page-title small {
  font-size: 9.5px;
  color: #64748b;
  font-weight: 600;
}
.v29-phone-page-body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 13px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v29-phone-page-body > * {
  flex-shrink: 0 !important;
}

/* Fix v26-lib-card shrinking bug from screenshot 53091.jpg */
.v26-lib-card {
  flex-shrink: 0 !important;
}

/* WeChat Contacts (名册) Luxury Editorial Styling */
.v29-wx-contacts-hero {
  position: relative;
  border-radius: 22px;
  padding: 14px 15px;
  background: linear-gradient(135deg, #e8f1fb 0%, #dce9f7 58%, #d2e2f4 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  flex-shrink: 0;
}
.v29-wx-contacts-hero::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.24) 0%, transparent 70%);
  pointer-events: none;
}
.v29-wx-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 11px;
}
.v29-wx-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease;
}
.v29-wx-quick-btn:active {
  transform: scale(0.96);
}
.v29-wx-quick-btn span.ico {
  font-size: 15px;
  line-height: 1;
}

.v29-contact-card {
  position: relative;
  border-radius: 22px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.v29-contact-card:active {
  transform: scale(0.99);
}
.v29-contact-ava-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.v29-contact-ava-wrap img {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.1);
}
.v29-contact-online-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #10b981;
  border: 2.5px solid #ffffff;
}
.v29-contact-quote {
  font-size: 11px;
  color: #334155;
  padding: 7px 10px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(241, 245, 249, 0.9) 0%, rgba(248, 250, 252, 0.65) 100%);
  border-left: 3px solid #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v29-contact-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.v29-contact-act-btn {
  padding: 7px 4px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 800;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  color: #1e293b;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.v29-contact-act-btn.primary {
  background: #1e293b;
  color: #ffffff;
  border-color: #1e293b;
}

/* WeChat "Me" (我) Luxury Porcelain & Gold Identity Card */
.v29-me-hero-card {
  position: relative;
  border-radius: 24px;
  padding: 16px 15px 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.v29-me-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 8px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.05);
}
.v29-me-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.v29-me-stat-cell strong {
  font-size: 13.5px;
  font-weight: 900;
  color: #0f172a;
}
.v29-me-stat-cell span {
  font-size: 9.5px;
  color: #64748b;
  font-weight: 700;
}
.v29-me-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.v29-me-bento-card {
  border-radius: 18px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Roster (大名册) Cards */
.v29-roster-card {
  border-radius: 18px;
  padding: 12px 13px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0 !important;
}
.v29-roster-monogram {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
  flex-shrink: 0;
}

/* Xianyu (闲鱼 v29) Feed, Detail & Bottom Chat Styles */
.v28-flea-alt-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1.5px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  background: linear-gradient(135deg, #eef5fc 0%, #e3eefa 100%);
  color: #3b6699;
  border: 1px solid rgba(190, 18, 60, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
}
.v28-flea-corner-alt {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 900;
  background: rgba(190, 18, 60, 0.92);
  color: #ffffff;
  backdrop-filter: blur(6px);
  box-shadow: 0 3px 8px rgba(190, 18, 60, 0.25);
}

/* Xianyu v29 Feed, Category Pills, Masonry Cards & Bounty Cards */
.v26-flea-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
}
.v26-flea-cats {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 2px 5px;
  scrollbar-width: none;
}
.v26-flea-cats::-webkit-scrollbar {
  display: none;
}
.v26-flea-cat-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.v26-flea-cat-pill.active {
  background: #0f172a;
  color: #cfe2fa;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}
.v26-flea-masonry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.v26-flea-card-img {
  position: relative;
  height: 142px;
  background: #f1f5f9;
  overflow: hidden;
}
.v26-flea-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v26-flea-cond-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 2.5px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  backdrop-filter: blur(6px);
}
.v26-flea-loc-pill {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  padding: 2.5px 7px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
}
.v26-flea-sold-stamp {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.v26-flea-card-body {
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.v26-flea-card-title {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v26-flea-seller-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}
.v26-flea-bounty-hero {
  border-radius: 20px;
  padding: 13px 14px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}
.v26-flea-bounty-card {
  border-radius: 18px;
  padding: 12px 13px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.v28-flea-detail-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: #f6f7fb;
  overflow: hidden;
}
.v28-flea-detail-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 11px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v28-flea-detail-scroll > * {
  flex-shrink: 0;
}
.v28-flea-detail-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 12px 13px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}
.v28-flea-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 9px 10px;
  border-radius: 13px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.05);
  margin: 10px 0;
}
.v28-flea-spec-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v28-flea-spec-cell small {
  font-size: 9.5px;
  color: #94a3b8;
}
.v28-flea-spec-cell strong {
  font-size: 11px;
  color: #0f172a;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v28-flea-detail-bottom {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}
.v28-flea-chat-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: #f4f5f9;
  overflow: hidden;
}
.v28-flea-chat-msgs {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v28-flea-chat-inputbar {
  flex-shrink: 0;
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ==========================================================================
   LUMIÈRE OS v30 · HAUTE COUTURE VISUAL & INTERACTION UPGRADE
   1. 修复微信「我」顶部折叠裁剪 Bug (flex-shrink: 0)
   2. 角色库 (Character Vault) 独立画册级奢华模板（与微信名册彻底区分）
   3. 新建/编辑角色档案：五大详细分区 + 本名/备注名独立双栏 + 独立专属名册工作台
   4. 微信「名册」：高定丝绒半透通讯录（独立分组、星标偏爱、备注名/本名双显、微信号与名片抽屉）
   5. 微信「我」+ 亲密称呼工坊（去除特定人名、分角色专属爱称）+ 实时预览美化中心
   6. 独立「礼物库」软件（高定玻璃丝绒展柜、留白呼吸感、多角色分仓、总结/聊天提取礼物）
   7. 闲鱼集市全面升级：8宫格精致重做、去除提示语残留、有梗活人小号、私信实时回复、卖礼物概率触发微信API质问
   ========================================================================== */

.v29-me-hero-card,
.v29-me-bento-grid,
.wx-me-list,
.v30-no-shrink {
  flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   1. 角色库 (CHARACTER ARCHIVE VAULT) — 独立黑金珍珠典藏画廊视觉 (与微信名册完全不同模板)
   -------------------------------------------------------------------------- */
.v30-vault-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
}

.v30-vault-hero {
  position: relative;
  border-radius: 24px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, #eaf2fb 0%, #dfeaf7 52%, #d5e4f5 100%);
  color: #f8fafc;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  flex-shrink: 0;
}
.v30-vault-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -30px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 180, 114, 0.26) 0%, rgba(244, 114, 182, 0.12) 45%, transparent 72%);
  pointer-events: none;
}
.v30-vault-eyebrow {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cbe0f8;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v30-vault-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 6px;
  gap: 10px;
}
.v30-vault-title-row h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.v30-vault-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}
.v30-vault-metric-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.v30-vault-metric-cell strong {
  font-size: 14px;
  font-weight: 900;
  color: #d4e6fb;
}
.v30-vault-metric-cell span {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.72);
}

.v30-vault-cat-rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  flex-shrink: 0;
}
.v30-vault-cat-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.86);
  color: #475569;
  border: 1px solid rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: all 0.18s ease;
}
.v30-vault-cat-pill.active {
  background: linear-gradient(135deg, #355886 0%, #456b9c 100%);
  color: #d4e6fb;
  border-color: rgba(253, 230, 138, 0.35);
  box-shadow: 0 4px 12px rgba(30, 27, 46, 0.18);
}

/* 角色库独立塔罗画册式档案卡 */
.v30-vault-card {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(160deg, #ffffff 0%, #faf8f6 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.v30-vault-card-banner {
  padding: 12px 14px 10px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.85) 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.v30-vault-portrait {
  position: relative;
  width: 64px;
  height: 76px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  cursor: pointer;
}
.v30-vault-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v30-vault-portrait-badge {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 8.5px;
  text-align: center;
  padding: 2px 0;
  font-weight: 800;
}
.v30-vault-name-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.v30-vault-dual-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.v30-vault-realname {
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.v30-vault-remark-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0f6fd 0%, #e5effa 100%);
  color: #355c8a;
  border: 1px solid rgba(157, 23, 77, 0.15);
}
.v30-vault-cat-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: #355886;
  color: #d4e6fb;
}
.v30-vault-trait-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.v30-vault-trait-chip {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: #334155;
}
.v30-vault-body {
  padding: 11px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v30-vault-bio {
  font-size: 11.5px;
  color: #334155;
  line-height: 1.6;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.9);
  border-left: 3px solid #456b9c;
}
.v30-vault-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 7px 9px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.05);
  font-size: 10px;
}
.v30-vault-wxbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 14px;
  background: linear-gradient(135deg, #181824 0%, #27273a 100%);
  color: #ffffff;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   2. 新建/编辑角色档案 (DOSSIER STUDIO) — 五大详细分类 + 名字备注名分开 + 独立名册区
   -------------------------------------------------------------------------- */
.v30-dossier-nav {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 4px 2px;
  flex-shrink: 0;
}
.v30-dossier-nav-pill {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid rgba(15, 23, 42, 0.06);
  cursor: pointer;
}
.v30-dossier-nav-pill.active {
  background: #0f172a;
  color: #ffffff;
}
.v30-dossier-section {
  border-radius: 20px;
  padding: 13px 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-shrink: 0;
}
.v30-dossier-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
}
.v30-dossier-sec-title {
  font-size: 12.5px;
  font-weight: 900;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.v30-dossier-roster-zone {
  border-radius: 20px;
  padding: 13px 14px;
  background: linear-gradient(150deg, #fffbfe 0%, #fdf4ff 50%, #f8fafc 100%);
  border: 1.5px solid rgba(157, 23, 77, 0.18);
  box-shadow: 0 8px 22px rgba(157, 23, 77, 0.06);
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. 微信中的「名册」 (WECHAT SILK ROSTER) — 丝绒瓷白高定通讯录（与角色库截然不同）
   -------------------------------------------------------------------------- */
.v30-wx-roster-header-card {
  border-radius: 22px;
  padding: 12px 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}
.v30-wx-entry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.v30-wx-entry-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 4px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.03);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.v30-wx-entry-tile:active {
  transform: scale(0.96);
}
.v30-wx-entry-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.v30-wx-entry-tile span {
  font-size: 10.5px;
  font-weight: 800;
  color: #1e293b;
}
.v30-wx-entry-tile small {
  font-size: 8.5px;
  color: #64748b;
  margin-top: -2px;
}

.v30-wx-contact-item {
  position: relative;
  border-radius: 20px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.065);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.v30-wx-contact-item:active {
  transform: scale(0.99);
}
.v30-wx-ava-ring {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  padding: 2px;
  background: linear-gradient(135deg, #0f172a 0%, #4673a8 100%);
  flex-shrink: 0;
}
.v30-wx-ava-ring img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
  border: 1.5px solid #ffffff;
}
.v30-wx-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #10b981;
  border: 2.5px solid #ffffff;
}

/* --------------------------------------------------------------------------
   4. 微信中的「我」 (WECHAT ME STUDIO) — 杂志级个人中心与美化预演
   -------------------------------------------------------------------------- */
.v30-me-profile-card {
  position: relative;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  flex-shrink: 0 !important;
}
.v30-me-cover {
  height: 82px;
  background: linear-gradient(125deg, #355886 0%, #334155 48%, #4c1d95 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 10px 12px;
}
.v30-me-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.45) 100%);
}
.v30-me-body {
  padding: 0 15px 14px;
  position: relative;
  z-index: 2;
}
.v30-me-ava-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -28px;
  margin-bottom: 10px;
}
.v30-me-ava-box {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  background: #f8fafc;
  cursor: pointer;
}
.v30-me-ava-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v30-me-asset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 12px;
}
.v30-me-asset-pill {
  padding: 9px 6px;
  border-radius: 15px;
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: transform 0.14s ease;
}
.v30-me-asset-pill:active {
  transform: scale(0.96);
}
.v30-me-asset-pill strong {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}
.v30-me-asset-pill span {
  font-size: 9.5px;
  color: #64748b;
  font-weight: 700;
}

.v30-me-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  flex-shrink: 0 !important;
}
.v30-me-feature-card {
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.065);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s ease;
}
.v30-me-feature-card:active {
  transform: scale(0.98);
}
.v30-me-feat-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5. 独立「礼物库」软件 (GIFT VAULT MUSEUM) — 留白呼吸感 + 高定丝绒玻璃展柜
   -------------------------------------------------------------------------- */
.v30-giftvault-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px 24px;
  flex-shrink: 0;
}
.v30-gv-hero {
  position: relative;
  border-radius: 26px;
  padding: 20px 18px 16px;
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.v30-gv-theme-pearl {
  background: linear-gradient(135deg, #e8f1fb 0%, #dce9f7 52%, #d0e1f4 100%);
}
.v30-gv-theme-velvet {
  background: linear-gradient(135deg, #0f172a 0%, #355886 55%, #3b1d38 100%);
}
.v30-gv-theme-rose {
  background: linear-gradient(135deg, #e6f0fa 0%, #d8e7f7 52%, #355c8a 100%);
}
.v30-gv-curio-card {
  position: relative;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.v30-gv-curio-showcase {
  height: 148px;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
  color: #ffffff;
}
.v30-gv-curio-Body {
  padding: 14px 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v30-gv-ribbon-card {
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef5fc 0%, #f0f6fd 100%);
  border-left: 3.5px solid #4673a8;
  font-size: 11.5px;
  color: #2c4d75;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. 闲鱼 8 宫格高定图标与雷达扫描动效
   -------------------------------------------------------------------------- */
.v30-flea-kk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}
.v30-flea-kk-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.v30-flea-kk-btn:active {
  transform: scale(0.94);
}
.v30-flea-kk-ico {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.v30-flea-kk-ico svg {
  width: 21px;
  height: 21px;
}
.v30-flea-kk-btn strong {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}
.v30-flea-kk-btn small {
  font-size: 8.5px;
  color: #64748b;
  font-weight: 600;
}

.v30-clue-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eaf3fc 0%, #d4e6fb 100%);
  color: #2d527c;
  font-size: 9.5px;
  font-weight: 800;
  border: 1px solid rgba(217, 119, 6, 0.22);
}

.v30-wx-push-banner {
  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: min(350px, 92vw);
  z-index: 9999;
  padding: 11px 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  animation: v30SlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes v30SlideDown {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}


/* ==================== V31 SHEER FROSTED PEEK & REVERSE STUDIO ==================== */
/* 清透高级风 (Pure Glacial & Champagne Editorial Glass) — 极简留白 · 晶透毛玻璃 · 零廉价堆砌 */

.v31-peek-shell,
.cp-sheer-shell {
  position: relative;
  min-height: 100%;
  border-radius: 28px;
  overflow: hidden;
  padding: 14px 13px 26px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 16px 40px rgba(15, 23, 42, 0.05);
}

.v31-peek-shell::before,
.cp-sheer-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(250, 252, 255, 0.72) 0%,
    rgba(244, 247, 252, 0.80) 48%,
    rgba(239, 244, 251, 0.88) 100%
  );
  backdrop-filter: blur(34px) saturate(165%);
  -webkit-backdrop-filter: blur(34px) saturate(165%);
  pointer-events: none;
  z-index: 0;
}

.v31-peek-shell > *,
.cp-sheer-shell > * {
  position: relative;
  z-index: 1;
}

/* 清透高定玻璃基座 */
.v31-frost-card,
.cp-glass-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.48) 100%);
  backdrop-filter: blur(30px) saturate(175%);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  border-radius: 22px;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}

.cp-glass-card.interactive:active,
.v31-frost-card:active {
  transform: scale(0.988);
}

.v31-frost-pill,
.cp-glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.035), inset 0 1px 0 #fff;
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.02em;
}

.cp-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

/* 极简清透锁屏卡片 (去除杂乱小图条，保留纯粹留白与高级光影) */
.v31-device-lockcard,
.cp-lock-card {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  padding: 20px 18px 16px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v31-device-lockcard::before,
.cp-lock-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(248, 250, 255, 0.68) 52%,
    rgba(255, 255, 255, 0.90) 100%
  );
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  z-index: 0;
}

.v31-device-lockcard > *,
.cp-lock-card > * {
  position: relative;
  z-index: 1;
}

.v31-lock-clock,
.cp-lock-clock {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0f172a;
}

/* 顶部清透灵动岛 (Live Thought & Biometric Island) */
.v31-dynamic-island,
.cp-dynamic-island {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.56));
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05), inset 0 1px 0 #fff;
  cursor: pointer;
}

/* 角色手机顶部 4-Tab 视图胶囊栏 */
.cp-mode-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.88);
}

.cp-mode-btn {
  padding: 6px 4px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.cp-mode-btn.active {
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

/* 清透高定双联桌面组件 (Bento Widgets) */
.v31-hero-bento,
.cp-bento-stage {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: 10px;
}

.v31-polaroid-widget,
.cp-widget-polaroid {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 9px 9px 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.54));
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.v31-polaroid-photo-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
}

.v31-polaroid-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v31-vinyl-widget {
  position: relative;
  border-radius: 20px;
  padding: 10px 11px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48));
  backdrop-filter: blur(26px) saturate(175%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045), inset 0 1px 0 #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.v31-vinyl-disc {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  padding: 5px;
  background: radial-gradient(circle, #1e293b 0%, #0f172a 70%, #334155 100%);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
}

.v31-vinyl-disc img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.75);
}

/* 纯净冰透水滴矩阵图标 (彻底移除底层杂图 v31-icon-bg!) */
.v31-app-matrix-4,
.cp-crystal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  padding: 15px 11px;
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34));
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.v31-squircle-app,
.cp-crystal-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.v31-squircle-app:active,
.cp-crystal-app:active {
  transform: scale(0.93);
}

.v31-squircle-icon,
.cp-crystal-icon {
  width: 50px;
  height: 50px;
  border-radius: 17px;
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 255, 0.56) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(148, 163, 184, 0.12);
  color: #1e293b;
}

.v31-squircle-icon svg,
.cp-crystal-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.6;
}

.v31-squircle-badge,
.cp-crystal-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4.5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* 模块内页极简清透头部 (不再堆砌花哨背景图) */
.v31-module-hero,
.cp-module-header {
  position: relative;
  border-radius: 22px;
  padding: 15px 16px 13px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 255, 0.58));
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045), inset 0 1px 0 #fff;
}

/* 纯净档案卡片 (无冗余缩略图，靠排版与留白显高级) */
.v31-media-record,
.cp-clean-record {
  border-radius: 20px;
  padding: 14px 15px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.52));
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04), inset 0 1px 0 #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.16s ease;
}

.v31-media-record:active,
.cp-clean-record:active {
  transform: scale(0.99);
}

.v31-thought-glass,
.cp-subtext-box {
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.90);
  border-left: 2.5px solid #64748b;
  font-size: 11.2px;
  line-height: 1.62;
  color: #334155;
}

/* 拍立得画廊网格（专用于相册/关于你） */
.v31-polaroid-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.v31-polaroid-card {
  border-radius: 20px;
  padding: 8px 8px 12px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58));
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05), inset 0 1px 0 #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.v31-polaroid-img {
  position: relative;
  width: 100%;
  height: 128px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.v31-polaroid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 角色黑卡与未来基金清透卡面 */
.cp-black-card {
  border-radius: 22px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.94) 100%);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f8fafc;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

/* 24h 时间轴轨道 */
.cp-timeline-wrap {
  position: relative;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-timeline-wrap::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(100, 116, 139, 0.35), rgba(148, 163, 184, 0.12));
}

.cp-timeline-dot {
  position: absolute;
  left: -15px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #334155;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25);
}

/* ==================== 反查手机 · 清透高级 HTML 美化弹窗体系 ==================== */
.v31-rev-stage,
.rev-html-popup {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 16px 15px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.065), inset 0 1px 0 #fff;
}

/* 5 套反查手机 HTML 弹窗清透美化主题 */
.rev-theme-glacial {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.88) 0%, rgba(241, 245, 252, 0.76) 100%);
  backdrop-filter: blur(32px) saturate(175%);
  color: #0f172a;
}

.rev-theme-champagne {
  background: linear-gradient(160deg, rgba(253, 251, 247, 0.90) 0%, rgba(245, 239, 230, 0.80) 100%);
  backdrop-filter: blur(32px) saturate(160%);
  color: #1c1917;
  border-color: rgba(255, 252, 245, 0.95);
}

.rev-theme-moonlight {
  background: linear-gradient(160deg, rgba(244, 248, 255, 0.88) 0%, rgba(226, 236, 248, 0.76) 100%);
  backdrop-filter: blur(32px) saturate(180%);
  color: #0f172a;
}

.rev-theme-rosewater {
  background: linear-gradient(160deg, rgba(255, 250, 251, 0.90) 0%, rgba(249, 240, 244, 0.78) 100%);
  backdrop-filter: blur(32px) saturate(170%);
  color: #1e293b;
}

.v31-jealousy-meter {
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.v31-jealousy-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #64748b 0%, #334155 60%, #0f172a 100%);
  transition: width 0.35s ease;
}

.v31-evidence-card {
  border-radius: 20px;
  padding: 13px 14px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.56));
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 微信聊天室内的「反查手机请求 & 反查 HTML 报告卡片」 */
.wx-rev-html-card {
  width: 268px;
  max-width: 100%;
  border-radius: 20px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06), inset 0 1px 0 #fff;
  backdrop-filter: blur(26px) saturate(175%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  text-align: left;
}

/* ==================== V31.2 BESPOKE NATIVE APPS & HTML POPUP ==================== */
/* 角色顶部清透切换条与状态栏 */
.cp-top-status-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.02em;
}

.cp-char-switcher-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 控制中心 (iOS VisionOS Control Center) 卡片 */
.cp-cc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.cp-cc-tile {
  border-radius: 20px;
  padding: 12px 13px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52));
  backdrop-filter: blur(26px);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 加密暗房 0-9 数字圆键密码盘 */
.cp-pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 16px;
}

.cp-pin-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid #0f172a;
  background: transparent;
  transition: all 0.15s ease;
}

.cp-pin-dot.filled {
  background: #0f172a;
  transform: scale(1.1);
}

.cp-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 62px);
  justify-content: center;
  gap: 10px 14px;
  margin: 0 auto;
}

.cp-keypad-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.cp-keypad-btn:active {
  transform: scale(0.92);
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
}

/* 声波条动画与录音匣 */
.cp-wave-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 8px;
}

.cp-wave-bar span {
  display: inline-block;
  width: 2.5px;
  border-radius: 999px;
  background: #334155;
  opacity: 0.65;
}

/* 实时监控取景框 */
.cp-cam-viewport {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 15px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.92));
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.cp-cam-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(255, 255, 255, 0.55);
  border-style: solid;
  pointer-events: none;
}

/* 旋转黑胶唱机大舞台 */
@keyframes cpSpinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cp-vinyl-platter {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  padding: 14px;
  background: radial-gradient(circle, #1e293b 0%, #0f172a 68%, #334155 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  animation: cpSpinSlow 18s linear infinite;
  flex-shrink: 0;
}

.cp-vinyl-platter img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
}



/* ==========================================================================
   LILY BLUE OS (百合蓝机) · PALE BLUE-WHITE FROSTED GLASS & SPLASH OVERHAUL
   - 淡雅清透冰川雾蓝与云母纯白配色体系 (Pale Lily-Blue & Pure White Frosted Glass)
   - 原创「百合蓝机」水波微光开屏 (Lily Blue Splash Screen)
   - 全软件视觉统一：微信、线下、多人线下、查手机、反查手机、总结、世界书、情侣空间、小剧场、约会剧场、商城、外卖、闲鱼、礼物库、角色库等全部统一为淡蓝白高定半透风
   ========================================================================== */

:root,
[data-palette="glacier"],
[data-palette="frost"] {
  --glass-blur: 28px;
  --c-white: #f9fbff;
  --c-light: #eaf2fb;
  --c-ink: #1e2e42;
  --c-grey: #5d738d;
  --paper: #eaf2fb;
  --card: rgba(250, 253, 255, 0.78);
  --card-solid: rgba(252, 254, 255, 0.94);
  --ink: #1e2e42;
  --soft: #586f89;
  --faint: #849bb5;
  --edge: rgba(255, 255, 255, 0.94);
  --hairline: rgba(30, 46, 66, 0.075);
  --block: rgba(248, 252, 255, 0.74);
  --block-edge: rgba(255, 255, 255, 0.96);
  --block-on: rgba(212, 227, 245, 0.85);
  --accent: #3b6598;
  --accent-soft: rgba(74, 122, 178, 0.12);
  --champagne: #5c85b8;
}

[data-palette="mica"] {
  --c-white: #ffffff;
  --c-light: #f2f6fb;
  --c-ink: #1f2d3d;
  --c-grey: #63768d;
  --paper: #f1f6fc;
  --card: rgba(255, 255, 255, 0.72);
  --card-solid: rgba(255, 255, 255, 0.94);
  --ink: #1f2d3d;
  --soft: #5b6e84;
  --faint: #8a9db3;
  --edge: rgba(255, 255, 255, 0.95);
  --hairline: rgba(31, 45, 61, 0.065);
  --block: rgba(255, 255, 255, 0.68);
  --block-edge: rgba(255, 255, 255, 0.96);
  --block-on: rgba(220, 232, 246, 0.8);
  --accent: #3d6494;
  --accent-soft: rgba(61, 100, 148, 0.1);
}

[data-palette="linen"] {
  --c-white: #fafcff;
  --c-light: #edf3fa;
  --c-ink: #213042;
  --c-grey: #60758c;
  --paper: #eef4fb;
  --card: rgba(252, 254, 255, 0.76);
  --card-solid: rgba(253, 254, 255, 0.94);
  --ink: #213042;
  --soft: #5c7188;
  --faint: #879bb2;
  --edge: rgba(255, 255, 255, 0.94);
  --hairline: rgba(33, 48, 66, 0.07);
  --block: rgba(250, 253, 255, 0.72);
  --block-edge: rgba(255, 255, 255, 0.95);
  --block-on: rgba(216, 229, 244, 0.82);
  --accent: #3e6796;
  --accent-soft: rgba(62, 103, 150, 0.11);
}

html,
body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  background: radial-gradient(circle at 50% 15%, #f4f8fd 0%, #d8e4f2 100%);
}

.host-stage {
  background: radial-gradient(circle at 50% 18%, #f5f9fe 0%, #d6e3f2 100%);
}

.phone {
  border-radius: 42px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 6px rgba(212, 226, 244, 0.58),
    0 28px 75px rgba(28, 48, 74, 0.18);
}

/* ==================== 百合蓝机 · 原创水波微光开屏 (LILY BLUE SPLASH SCREEN) ==================== */
.lily-splash-screen {
  position: absolute;
  inset: 0;
  z-index: 9500;
  border-radius: inherit;
  background:
    linear-gradient(165deg, #fbfdff 0%, #eef6ff 38%, #dcebfb 70%, #cfe3f7 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.65s;
}

.lily-splash-screen.is-hidden {
  opacity: 0;
  transform: scale(1.035);
  visibility: hidden;
  pointer-events: none;
}

.lily-splash-aura {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 220, 248, 0.45) 0%, rgba(225, 238, 252, 0.18) 55%, transparent 75%);
  filter: blur(18px);
  animation: lilyAuraBreathe 5s ease-in-out infinite;
  pointer-events: none;
}

.lily-splash-rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.lily-splash-rings span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(130, 168, 212, 0.22);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.85);
}

.lily-splash-rings .ring-1 {
  width: 220px;
  height: 220px;
  animation: lilyRingRipple 6s ease-in-out infinite;
}

.lily-splash-rings .ring-2 {
  width: 310px;
  height: 310px;
  border-color: rgba(130, 168, 212, 0.14);
  animation: lilyRingRipple 6s ease-in-out 1.2s infinite;
}

.lily-splash-rings .ring-3 {
  width: 410px;
  height: 410px;
  border-color: rgba(130, 168, 212, 0.08);
  animation: lilyRingRipple 6s ease-in-out 2.4s infinite;
}

@keyframes lilyAuraBreathe {
  0%, 100% { transform: scale(0.94); opacity: 0.75; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes lilyRingRipple {
  0%, 100% { transform: scale(0.97); opacity: 0.55; }
  50% { transform: scale(1.03); opacity: 0.92; }
}

.lily-splash-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}

.lily-splash-emblem {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(206, 224, 245, 0.9);
  box-shadow: 0 10px 28px rgba(60, 100, 150, 0.08), inset 0 1px 0 #ffffff;
  display: grid;
  place-items: center;
  color: #4a75a8;
  margin-bottom: 22px;
}

.lily-splash-title {
  font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  color: #2b425e;
  letter-spacing: 0.28em;
  margin-right: -0.28em;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.95);
}

.lily-splash-en {
  margin-top: 14px;
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.36em;
  margin-right: -0.36em;
  color: #88a2c0;
}

.lily-splash-sub {
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  margin-right: -0.22em;
  color: #a1b7d0;
}

.lily-splash-foot {
  position: absolute;
  bottom: 44px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #90a8c4;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(45, 78, 118, 0.05);
}

/* ==================== TOP STATUS BAR & SYSTEM PILLS ==================== */
.sb-brand-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(248, 252, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: #1e2e42;
  cursor: pointer;
}

.sb-icon-btn {
  cursor: pointer;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 8px;
  background: rgba(248, 252, 255, 0.62);
}

/* ==================== CRITICAL SCROLL FIX FOR PEEK & REVERSE ==================== */
.app-screen-layer {
  min-height: 0;
}

.app-scroll-body {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 32px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.app-scroll-body > * {
  flex-shrink: 0;
}

.v31-peek-shell,
.cp-sheer-shell {
  position: relative;
  flex-shrink: 0 !important;
  width: 100%;
  height: auto !important;
  min-height: max-content !important;
  border-radius: 26px;
  overflow: visible !important;
  padding: 14px 13px 34px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 14px 36px rgba(30, 52, 82, 0.06);
}

.v31-peek-shell::before,
.cp-sheer-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: linear-gradient(
    180deg,
    rgba(248, 252, 255, 0.80) 0%,
    rgba(238, 246, 255, 0.86) 50%,
    rgba(230, 241, 253, 0.92) 100%
  );
  backdrop-filter: blur(32px) saturate(165%);
  -webkit-backdrop-filter: blur(32px) saturate(165%);
  pointer-events: none;
  z-index: 0;
}

/* 查手机/反查手机卡片：清透淡蓝白雾面玻璃 */
.v31-frost-card,
.cp-glass-card,
.v31-media-record,
.cp-clean-record,
.cp-module-header {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.90) 0%, rgba(242, 248, 255, 0.74) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 26px rgba(30, 52, 82, 0.045), inset 0 1px 0 #ffffff !important;
  color: #1e2e42;
}

.cp-subtext-box {
  background: rgba(238, 245, 254, 0.84) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-left: 2.5px solid #5c85b8 !important;
  color: #324860 !important;
}

.cp-glass-pill {
  background: rgba(248, 252, 255, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  color: #1e2e42 !important;
}

.cp-crystal-grid {
  background: linear-gradient(155deg, rgba(252, 254, 255, 0.80), rgba(238, 246, 255, 0.58)) !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
}

.cp-crystal-icon {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 246, 255, 0.82) 100%) !important;
  border: 1px solid #ffffff !important;
  color: #2b4562 !important;
  box-shadow: 0 6px 16px rgba(30, 52, 82, 0.055), inset 0 1px 0 #fff !important;
}

.cp-crystal-badge {
  background: #3b6598 !important;
  color: #ffffff !important;
}

/* ==================== DESKTOP PAGE 1 & 2 (PALE LILY-BLUE & WHITE FROSTED GLASS) ==================== */
.v32-clock-header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.v32-big-clock {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 44px;
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #1e2e42;
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.88);
}

.v32-date-greeting-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4.5px 14px;
  border-radius: 999px;
  background: rgba(250, 253, 255, 0.84);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(30, 52, 82, 0.045), inset 0 1px 0 #fff;
  font-size: 10.8px;
  font-weight: 700;
  color: #2b425b;
}

.v32-pill-sep {
  opacity: 0.35;
}

/* 第一屏中央圆窗拍立得主卡 */
.v32-hero-portrait-card {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 26px !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.90) 0%, rgba(238, 246, 255, 0.76) 100%) !important;
  backdrop-filter: blur(28px) saturate(165%);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 30px rgba(30, 52, 82, 0.055), inset 0 1px 0 #fff !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px !important;
  overflow: hidden;
  cursor: pointer;
}

.v32-hero-dots {
  position: absolute;
  top: 12px;
  right: 14px;
  display: grid;
  grid-template-columns: repeat(6, 3px);
  gap: 4px;
  opacity: 0.25;
  pointer-events: none;
}

.v32-hero-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #6a88ab;
}

.v32-hero-circle-shell {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  padding: 6px;
  background: #ffffff;
  box-shadow:
    0 10px 26px rgba(30, 52, 82, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.98),
    inset 0 1px 3px rgba(30, 52, 82, 0.04);
  flex-shrink: 0;
}

.v32-hero-circle-media {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1.5px solid rgba(226, 236, 248, 0.95) !important;
}

.v32-hero-live-dot {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #68a4d8;
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(30, 52, 82, 0.12);
}

.v32-hero-side-tag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 96px;
  z-index: 1;
}

.v32-hero-side-tag.right {
  text-align: right;
  align-items: flex-end;
}

.v32-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7d95b0;
}

.v32-hero-side-tag strong {
  font-size: 12px;
  font-weight: 800;
  color: #1e2e42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
}

/* 第一屏双联卡：TA的日记 + 一起听 */
.v32-bento-diary-card,
.v32-bento-music-card {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  padding: 12px 13px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.90) 0%, rgba(239, 246, 255, 0.75) 100%);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(30, 52, 82, 0.05), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  overflow: hidden;
}

.v32-bdc-top,
.v32-bmc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.v32-bdc-badge,
.v32-bmc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #1e2e42;
}

.v32-bdc-top small {
  font-size: 9.5px;
  color: #7289a4;
  font-weight: 700;
}

.v32-bdc-title {
  font-size: 12.2px;
  font-weight: 800;
  color: #1e2e42;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.v32-bdc-excerpt {
  font-size: 10.2px;
  color: #546b85;
  line-height: 1.48;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 5px 7px;
  border-radius: 10px;
  background: rgba(232, 242, 253, 0.62);
}

.v32-bdc-foot,
.v32-bmc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.8px;
  color: #7289a4;
  font-weight: 700;
}

.v32-bdc-link {
  color: #365f91;
  font-weight: 800;
}

.v32-bmc-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.v32-bmc-wave i {
  width: 2px;
  border-radius: 99px;
  background: #5c85b8;
  display: inline-block;
}
.v32-bmc-wave i:nth-child(1) { height: 5px; }
.v32-bmc-wave i:nth-child(2) { height: 10px; }
.v32-bmc-wave i:nth-child(3) { height: 7px; }
.v32-bmc-wave i:nth-child(4) { height: 11px; }

.v32-bmc-mid {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0;
}

.v32-vinyl-shell {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
}

.v32-bmc-meta {
  min-width: 0;
  flex: 1;
}

.v32-bmc-song {
  font-size: 12px;
  font-weight: 800;
  color: #1e2e42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v32-bmc-sub {
  font-size: 9.8px;
  color: #627994;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.v32-bmc-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.v32-mini-icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #365f91;
  color: #ffffff;
  display: grid;
  place-items: center;
}

/* 第二屏：专注计时 + 今日天气 + 随手便签 + 今日心语 */
.v32-focus-card,
.v32-weather-card {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  padding: 12px 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.90) 0%, rgba(239, 246, 255, 0.75) 100%);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(30, 52, 82, 0.05), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.v32-fc-head,
.v32-wc-head,
.v32-snc-head,
.v32-wh-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #1e2e42;
}

.v32-fc-head small,
.v32-wc-head small,
.v32-wh-head small {
  font-size: 9.5px;
  color: #7289a4;
  font-weight: 600;
}

.v32-fc-clock {
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #1e2e42;
  line-height: 1.05;
}

.v32-fc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.v32-fc-sub {
  font-size: 9.8px;
  color: #7289a4;
  font-weight: 700;
}

.v32-fc-reset {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(54, 95, 145, 0.09);
  color: #2b4562;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.v32-fc-start {
  padding: 4px 10px;
  border-radius: 999px;
  background: #365f91;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

.v32-wc-temp-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.v32-wc-temp {
  font-size: 28px;
  font-weight: 400;
  color: #1e2e42;
  line-height: 1;
}

.v32-wc-wind {
  font-size: 10.5px;
  color: #546b85;
  font-weight: 700;
}

.v32-wc-desc {
  font-size: 10.5px;
  color: #425870;
  font-weight: 600;
}

.v32-wc-foot {
  font-size: 9.5px;
  color: #7289a4;
  font-weight: 600;
  padding-top: 4px;
  border-top: 1px dashed rgba(30, 52, 82, 0.08);
}

.v32-sticky-note-card {
  width: 100%;
  height: 100%;
  border-radius: 22px !important;
  padding: 12px 14px !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 246, 255, 0.78) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.v32-snc-status {
  font-size: 9.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(74, 122, 178, 0.14);
  color: #365f91;
  font-weight: 800;
}

.v32-snc-paper {
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(235, 244, 253, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v32-snc-main {
  font-size: 11.2px;
  color: #1e2e42;
  font-weight: 600;
  line-height: 1.48;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v32-snc-reply {
  font-size: 10px;
  color: #365f91;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v32-snc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.8px;
  color: #7289a4;
  font-weight: 700;
}

.v32-snc-btn {
  padding: 3.5px 9px;
  border-radius: 999px;
  background: rgba(54, 95, 145, 0.08);
  color: #2b4562;
  font-size: 10px;
  font-weight: 700;
}

.v32-snc-btn.primary {
  background: #365f91;
  color: #ffffff;
}

.v32-whisper-card {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  padding: 9px 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.90) 0%, rgba(239, 246, 255, 0.75) 100%);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(30, 52, 82, 0.045), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.v32-wh-body {
  font-size: 11px;
  color: #263b54;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v32-wh-author {
  font-size: 9.5px;
  color: #7289a4;
  font-weight: 700;
  text-align: right;
}

.v32-util-pill {
  padding: 8px 6px;
  border-radius: 14px;
  background: rgba(250, 253, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.96);
  font-weight: 800;
  font-size: 10.8px;
  color: #1e2e42;
  box-shadow: 0 4px 12px rgba(30, 52, 82, 0.04);
}

/* 桌面图标：清透冰川雾蓝微立体圆角块 */
.slot .block {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.94) 0%, rgba(235, 244, 254, 0.80) 100%);
  border: 1px solid rgba(255, 255, 255, 0.98);
  color: #2b4562;
  box-shadow:
    0 8px 20px rgba(30, 52, 82, 0.055),
    inset 0 1px 0 #ffffff;
}

.slot-label {
  color: #1e2e42;
  font-size: 10.8px;
  font-weight: 700;
}

/* ==================== WECHAT 私信 (MSGS) LILY-BLUE GLASS ==================== */
.v32-wx-couple-banner {
  border-radius: 22px;
  padding: 14px 15px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.94) 0%, rgba(236, 245, 254, 0.84) 100%);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 26px rgba(30, 52, 82, 0.055), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v32-wcb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.v32-wcb-pair {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  cursor: pointer;
}

.v32-wcb-avas {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.v32-wcb-ava {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  object-fit: cover;
  background: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(30, 52, 82, 0.08);
}

.v32-wcb-ava.char {
  margin-left: -12px;
}

.v32-wcb-info {
  min-width: 0;
}

.v32-wcb-eyebrow {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #7289a4;
}

.v32-wcb-names {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 800;
  color: #1e2e42;
  margin-top: 1px;
}

.v32-wcb-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.2px;
  color: #365f91;
  font-weight: 700;
  margin-top: 2px;
}

.v32-wcb-enter {
  padding: 6px 12px;
  border-radius: 999px;
  background: #365f91;
  color: #ffffff;
  font-size: 10.8px;
  font-weight: 700;
  flex-shrink: 0;
}

.v32-wcb-whisper {
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(235, 244, 253, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.94);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.8px;
  color: #2b425b;
  cursor: pointer;
}

.v32-wcb-tag {
  padding: 1.5px 7px;
  border-radius: 999px;
  background: rgba(74, 122, 178, 0.15);
  color: #365f91;
  font-size: 9.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.v32-wcb-quote {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.v32-wcb-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.v32-wcb-actions button {
  padding: 6px 4px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.96);
  font-size: 10px;
  font-weight: 700;
  color: #1e2e42;
  box-shadow: 0 2px 6px rgba(30, 52, 82, 0.03);
}

.v32-story-pill {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: #365f91;
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid #fff;
}

.v32-wx-bento-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v32-wx-mini-widget {
  border-radius: 18px;
  padding: 10px 12px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(238, 246, 255, 0.76));
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 16px rgba(30, 52, 82, 0.04);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.v32-wmw-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.8px;
  color: #627994;
  font-weight: 700;
}

.v32-wmw-top b {
  color: #365f91;
}

.v32-wmw-title {
  font-size: 11.8px;
  font-weight: 800;
  color: #1e2e42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v32-wmw-sub {
  font-size: 9.5px;
  color: #7289a4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v32-wx-filter-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.v32-wx-fpill {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(250, 253, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: #475d75;
}

.v32-wx-fpill.active {
  background: #365f91;
  color: #ffffff;
  border-color: #365f91;
}

.v32-conv-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px !important;
  padding: 13px 14px !important;
  border-radius: 20px !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 246, 255, 0.78) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 22px rgba(30, 52, 82, 0.045), inset 0 1px 0 #fff !important;
}

.v32-conv-card.is-pinned {
  border-color: rgba(92, 133, 184, 0.42) !important;
}

.v32-conv-main-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.v32-conv-ava {
  position: relative;
}

.v32-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #68a4d8;
  border: 2px solid #ffffff;
}

.v32-conv-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #1e2e42;
}

.v32-conv-rel-pill {
  padding: 1.5px 8px;
  border-radius: 999px;
  background: rgba(74, 122, 178, 0.14);
  color: #365f91;
  font-size: 9.5px;
  font-weight: 700;
}

.v32-conv-pin-tag {
  padding: 1.5px 6px;
  border-radius: 6px;
  background: rgba(54, 95, 145, 0.08);
  color: #475d75;
  font-size: 9px;
  font-weight: 700;
}

.v32-conv-foot-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(30, 52, 82, 0.08);
  font-size: 10px;
}

.v32-cfb-status {
  color: #5d738d;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.v32-cfb-btns {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.v32-cfb-btns button {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(54, 95, 145, 0.12);
  font-size: 9.5px;
  font-weight: 700;
  color: #1e2e42;
}

.v32-cfb-btns button.primary {
  background: #365f91;
  color: #ffffff;
  border-color: #365f91;
}

/* ==================== WECHAT 我 (ME TAB) LILY-BLUE GLASS DOSSIER ==================== */
.v32-me-editorial-card {
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 246, 255, 0.86) 100%);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 32px rgba(30, 52, 82, 0.06), inset 0 1px 0 #fff;
}

.v32-me-cover {
  position: relative;
  height: 118px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.v32-me-cover-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 52, 82, 0.08) 0%, rgba(250, 253, 255, 0.94) 100%);
}

.v32-me-cover-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  color: #2b4562;
  border: 1px solid rgba(255, 255, 255, 0.95);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.v32-me-body {
  padding: 0 16px 15px;
  position: relative;
}

.v32-me-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: -34px;
  margin-bottom: 10px;
}

.v32-me-avatar-group {
  display: flex;
  align-items: flex-end;
  position: relative;
}

.v32-me-main-ava {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  padding: 3px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(30, 52, 82, 0.10);
  cursor: pointer;
}

.v32-me-main-ava img {
  width: 100%;
  height: 100%;
  border-radius: 19px;
  object-fit: cover;
  background: #ffffff;
}

.v32-me-couple-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 2px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(30, 52, 82, 0.10);
  margin-left: -12px;
  cursor: pointer;
}

.v32-me-couple-ava img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
}

.v32-me-head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.v32-me-status-pill {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(92, 133, 184, 0.32);
  color: #1e2e42;
  font-size: 10.5px;
  font-weight: 700;
}

.v32-me-edit-btn {
  padding: 5px 11px;
  border-radius: 999px;
  background: #365f91;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
}

.v32-me-identity {
  cursor: pointer;
}

.v32-me-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.v32-me-name {
  font-size: 18px;
  font-weight: 900;
  color: #1e2e42;
  letter-spacing: -0.02em;
}

.v32-me-id-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  color: #6e849e;
  padding: 1.5px 7px;
  border-radius: 6px;
  background: rgba(54, 95, 145, 0.06);
}

.v32-me-role-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1.5px 8px;
  border-radius: 999px;
  background: rgba(74, 122, 178, 0.14);
  color: #365f91;
}

.v32-me-sig {
  font-size: 11.8px;
  color: #324860;
  font-weight: 600;
  margin-top: 5px;
  line-height: 1.5;
}

.v32-me-persona-preview {
  margin-top: 7px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(235, 244, 253, 0.68);
  font-size: 10.5px;
  color: #546b85;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v32-me-persona-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(30, 52, 82, 0.09);
}

.v32-mpr-label {
  font-size: 10px;
  font-weight: 800;
  color: #5d738d;
  white-space: nowrap;
}

.v32-mpr-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1;
}

.v32-mpr-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(54, 95, 145, 0.12);
  color: #475d75;
  white-space: nowrap;
}

.v32-mpr-pill.active {
  background: #365f91;
  color: #ffffff;
  border-color: #365f91;
}

.v32-mpr-pill.add {
  border-style: dashed;
  color: #365f91;
}

/* 四维同频统计卡 */
.v32-me-stats-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 10px;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(238, 246, 255, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(30, 52, 82, 0.045);
}

.v32-msc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.v32-msc-item strong {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #1e2e42;
  line-height: 1.05;
}

.v32-msc-item strong small {
  font-size: 10px;
  font-weight: 700;
  margin-left: 1px;
  color: #627994;
}

.v32-msc-item span {
  font-size: 10px;
  font-weight: 700;
  color: #627994;
}

/* 冰川雾蓝数字钱包卡 (摒弃黑金，改为清透冰蓝渐变) */
.v32-me-wallet-banner {
  border-radius: 22px;
  padding: 15px 16px;
  background: linear-gradient(135deg, #dfeaf8 0%, #eef5fc 55%, #d4e3f6 100%);
  color: #1e2e42;
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(45, 78, 118, 0.08), inset 0 1px 0 #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v32-mwb-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.v32-mwb-eyebrow {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #587393;
  font-weight: 700;
}

.v32-mwb-bal {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 23px;
  font-weight: 800;
  color: #1e2e42;
  margin-top: 2px;
}

.v32-mwb-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.98);
  color: #365f91;
  font-size: 10px;
  font-weight: 800;
}

.v32-mwb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(54, 95, 145, 0.1);
  font-size: 10px;
  color: #47607c;
}

.v32-mwb-foot button {
  padding: 3.5px 9px;
  border-radius: 8px;
  background: #ffffff;
  color: #2b4562;
  border: 1px solid rgba(255, 255, 255, 0.95);
  font-size: 10px;
  font-weight: 800;
}

/* 三格拍立得日常胶卷展架 */
.v32-me-polaroid-strip-card {
  border-radius: 22px;
  padding: 13px 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(238, 246, 255, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(30, 52, 82, 0.045);
}

.v32-mpsc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.v32-mpsc-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #1e2e42;
  display: block;
}

.v32-mpsc-head small {
  font-size: 9.8px;
  color: #7289a4;
}

.v32-mpsc-head button {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(74, 122, 178, 0.14);
  color: #365f91;
  font-size: 10px;
  font-weight: 800;
}

.v32-mpsc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.v32-mpsc-item {
  padding: 6px 6px 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(54, 95, 145, 0.08);
  box-shadow: 0 4px 12px rgba(30, 52, 82, 0.04);
  cursor: pointer;
}

.v32-mpsc-img {
  width: 100%;
  height: 76px;
  border-radius: 10px;
  background-color: #f4f8fd;
  background-size: cover;
  background-position: center;
}

.v32-mpsc-cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.8px;
  font-weight: 700;
  color: #324860;
  margin-top: 5px;
  padding: 0 2px;
}

.v32-mpsc-cap i {
  font-style: normal;
  cursor: pointer;
  opacity: 0.75;
}

.v32-me-bento-grid .v29-me-bento-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(238, 246, 255, 0.78)) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
}

.v32-bento-eyebrow {
  font-size: 8.5px;
  color: #7289a4;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.v32-bento-title {
  font-size: 12.8px;
  font-weight: 800;
  color: #1e2e42;
}

.v32-bento-sub {
  font-size: 10px;
  color: #627994;
}

.v32-me-list {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(238, 246, 255, 0.78)) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
}

.v32-me-list .wx-me-row-ico {
  background: rgba(74, 122, 178, 0.13) !important;
  color: #365f91 !important;
  border-radius: 10px !important;
}

/* ==================== GLOBAL ALL-APP PALE LILY-BLUE & WHITE UNIFICATION ==================== */
/* 统一小剧场、约会剧场、商城、外卖、闲鱼、礼物库、情侣空间、记账、多人线下、直播间等所有头部横幅与卡片 */
.v23-stage-banner,
.v30-vault-hero,
.v29-wx-contacts-hero,
.lg-hero,
.couple-hero {
  background-color: #eaf2fb !important;
  color: #1e2e42 !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 30px rgba(30, 52, 82, 0.06), inset 0 1px 0 #ffffff !important;
}

.v23-stage-banner::before {
  background: linear-gradient(180deg, rgba(248, 252, 255, 0.55) 0%, rgba(235, 244, 254, 0.88) 100%) !important;
}

.v23-stage-bottom,
.v23-stage-bottom div,
.v23-stage-bottom span,
.v30-vault-hero h3,
.v30-vault-hero strong,
.v30-vault-hero span,
.lg-hero div,
.lg-hero span,
.lg-hero b {
  color: #1e2e42 !important;
  text-shadow: none !important;
}

.v23-glass-badge {
  background: rgba(255, 255, 255, 0.86) !important;
  color: #2b4562 !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 4px 12px rgba(30, 52, 82, 0.05) !important;
}

.v30-gv-theme-pearl,
.v30-gv-theme-velvet,
.v30-gv-theme-rose {
  background: linear-gradient(135deg, #eef5fc 0%, #dfeaf8 52%, #d2e2f5 100%) !important;
}

.v30-gv-curio-showcase {
  color: #1e2e42 !important;
}

.v30-gv-ribbon-card {
  background: linear-gradient(135deg, #f0f6fd 0%, #e5effa 100%) !important;
  border-left: 3px solid #5c85b8 !important;
  color: #2b4562 !important;
}

.atelier-hero-card,
.atelier-story-card,
.v24-prod-card,
.v26-flea-card,
.v28-flea-detail-card,
.v30-gv-curio-card,
.v30-vault-card,
.v30-wx-roster-header-card,
.v30-wx-contact-item,
.v30-me-profile-card,
.v30-me-feature-card,
.mo2-cast2,
.mo2-book,
.nb-paper {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 247, 255, 0.78) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 26px rgba(30, 52, 82, 0.045), inset 0 1px 0 #ffffff !important;
  color: #1e2e42 !important;
}

.btn-solid,
.v24-prod-btn.primary,
.v24-cat-chip.on,
.atelier-seg-btn.on,
.atelier-wc-pill.on,
.seg-pill-btn.active,
.pk-folder-pill.active,
.mo2-mebar-send {
  background: linear-gradient(135deg, #3b6598 0%, #527eb3 100%) !important;
  color: #ffffff !important;
  border-color: rgba(59, 101, 152, 0.3) !important;
  box-shadow: 0 6px 16px rgba(59, 101, 152, 0.18) !important;
}

.chat-msg-row.user .chat-bubble {
  background: linear-gradient(135deg, #dfeaf8 0%, #d0e1f5 100%) !important;
  color: #1e2e42 !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 18px rgba(30, 52, 82, 0.05) !important;
}

.chat-msg-row.ai .chat-bubble {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1e2e42 !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 6px 18px rgba(30, 52, 82, 0.04) !important;
}

.chat-msg-ava img,
.wx-conv-ava img,
.wx-story-ring img {
  background: #ffffff;
}

/* Toast Float & Flea Search Button Pale Blue-White Polish */
.toast-float {
  background: rgba(248, 252, 255, 0.94) !important;
  color: #1e2e42 !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 10px 28px rgba(30, 52, 82, 0.12) !important;
}
.v26-flea-search-btn {
  background: linear-gradient(135deg, #3b6598 0%, #527eb3 100%) !important;
  color: #ffffff !important;
}
.v26-flea-bounty-hero {
  background: linear-gradient(135deg, #dfeaf8 0%, #eef5fc 100%) !important;
  color: #1e2e42 !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
}
.v26-flea-bounty-hero div {
  color: #1e2e42 !important;
}

/* Light Ice-Blue Role Chip Active State */
.atelier-role-chip.on {
  background: linear-gradient(135deg, #3b6598 0%, #527eb3 100%) !important;
  border-color: rgba(59, 101, 152, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(59, 101, 152, 0.16) !important;
}




/* ==================== LILY BLUE OS v34 MASTER OVERHAUL ==================== */

/* 1. 全局顶栏返回键 (<) 灵动防卡死与高优先级点击热区 */
.topbar {
  position: relative !important;
  z-index: 80 !important;
  background: rgba(248, 252, 255, 0.82) !important;
  backdrop-filter: blur(26px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
  border-bottom: 1px solid rgba(168, 198, 230, 0.35) !important;
}
.topbar-btn {
  position: relative !important;
  z-index: 85 !important;
  min-width: 44px !important;
  height: 38px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.14s ease !important;
}
.topbar-btn:hover {
  background: rgba(148, 184, 226, 0.16) !important;
}
.topbar-btn:active {
  transform: scale(0.9) !important;
  background: rgba(148, 184, 226, 0.28) !important;
}

/* 2. 微信聊天室底部输入框彻底沉底贴合（解决输入框偏上浮空问题） */
.chat-room-wrap {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 4px 2px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.chat-room-wrap .chat-messages-box,
.chat-room-wrap .offline-scroll-box {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 6px 4px 10px !important;
}
.chat-room-wrap .chat-bottom-dock {
  position: relative !important;
  bottom: auto !important;
  flex-shrink: 0 !important;
  margin: 4px 2px calc(2px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 6px 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(168, 198, 232, 0.68) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(35, 72, 114, 0.08), inset 0 1px 0 #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* 3. 线下见面邀约卡片 — 百合蓝机·冰川雾蓝银辉通行证（彻底告别黑紫块） */
.offline-invite-card.lily-oic-card {
  position: relative;
  max-width: 288px;
  border-radius: 22px !important;
  padding: 13px 15px 12px !important;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 243, 255, 0.94) 55%, rgba(214, 233, 252, 0.92) 100%) !important;
  border: 1.5px solid rgba(138, 178, 224, 0.65) !important;
  box-shadow: 0 10px 26px rgba(43, 84, 132, 0.12), inset 0 1px 0 #ffffff !important;
  color: #1e2e42 !important;
}
.offline-invite-card.lily-oic-card .oic-glow {
  background: radial-gradient(circle, rgba(125, 179, 238, 0.35), transparent 70%) !important;
}
.lily-oic-top-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
}
.lily-oic-gps-pill {
  font-size: 9.5px;
  font-weight: 800;
  color: #234872;
  background: rgba(186, 214, 247, 0.45);
  border: 1px solid rgba(138, 178, 224, 0.5);
  padding: 2px 8px;
  border-radius: 999px;
}
.lily-oic-phase-pill {
  font-size: 9px;
  font-weight: 700;
  color: #527196;
}
.offline-invite-card.lily-oic-card .oic-moon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 4px 10px rgba(43, 84, 132, 0.12) !important;
  overflow: hidden;
  padding: 0;
}
.offline-invite-card.lily-oic-card .oic-title {
  color: #1a3250 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}
.offline-invite-card.lily-oic-card .oic-sub {
  color: #4d6b8e !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
.offline-invite-card.lily-oic-card .oic-scene {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(168, 198, 232, 0.5) !important;
  color: #233b59 !important;
  font-size: 12.2px !important;
  line-height: 1.68 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  margin-bottom: 9px !important;
  font-weight: 600;
}
.lily-oic-ticket-dash {
  border-top: 1px dashed rgba(138, 178, 224, 0.65);
  margin: 4px 0 9px;
}
.offline-invite-card.lily-oic-card .oic-foot {
  display: flex;
  gap: 7px;
}
.lily-oic-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 11px;
  font-size: 10.8px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: transform 0.14s ease;
}
.lily-oic-btn.primary {
  background: linear-gradient(135deg, #2b5484, #4573a8);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(43, 84, 132, 0.22);
}
.lily-oic-btn.ghost {
  flex: 0.78;
  background: rgba(255, 255, 255, 0.88);
  color: #2b5484;
  border: 1px solid rgba(138, 178, 224, 0.55);
}

/* 4. 微信·私信 正统清爽一竖列会话列表 (Clean Vertical WeChat Conversation List) */
.lily-wx-top-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.lily-wx-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(186, 212, 240, 0.65);
  color: #5d738d;
  box-shadow: 0 2px 10px rgba(30, 52, 82, 0.04);
}
.lily-wx-search-box input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 12.2px;
  color: #1e2e42;
}
.lily-wx-filter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.lily-wx-ftab {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(186, 212, 240, 0.55);
  color: #476282;
  cursor: pointer;
}
.lily-wx-ftab.active {
  background: #2b5484;
  color: #ffffff;
  border-color: #2b5484;
}
.lily-wx-vertical-list {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 26px rgba(30, 52, 82, 0.06);
  overflow: hidden;
}
.lily-wx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(168, 198, 232, 0.25);
  cursor: pointer;
  transition: background 0.15s ease;
}
.lily-wx-row:last-child {
  border-bottom: none;
}
.lily-wx-row.is-pinned {
  background: linear-gradient(90deg, rgba(226, 240, 255, 0.55), rgba(255, 255, 255, 0.65));
}
.lily-wx-row:active {
  background: rgba(204, 226, 248, 0.45);
}
.lily-wx-ava-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.lily-wx-ava {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 10px rgba(30, 52, 82, 0.08);
}
.lily-wx-service-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 21px;
  border: 1px solid #ffffff;
  box-shadow: 0 3px 10px rgba(30, 52, 82, 0.06);
}
.lily-wx-online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid #ffffff;
}
.lily-wx-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f43f5e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 1.5px solid #ffffff;
}
.lily-wx-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lily-wx-r1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.lily-wx-name-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.lily-wx-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #1e2e42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lily-wx-rel-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1.5px 7px;
  border-radius: 999px;
  background: rgba(186, 214, 247, 0.4);
  color: #2b5484;
  white-space: nowrap;
}
.lily-wx-pin-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(43, 84, 132, 0.12);
  color: #2b5484;
}
.lily-wx-time {
  font-size: 10.5px;
  color: #8298b0;
  font-weight: 600;
  flex-shrink: 0;
}
.lily-wx-r2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.lily-wx-preview {
  font-size: 12.2px;
  color: #5d738d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.lily-wx-mini-acts {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.lily-wx-mini-acts button {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(232, 242, 252, 0.85);
  border: 1px solid rgba(168, 198, 232, 0.5);
  font-size: 11px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* 5. 百合蓝机原创【查手机】冰川棱镜声波监听与四卷折页私密档案舱 */
.lily-cp-sonic-deck {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 9px;
}
.lily-cp-sonic-left {
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(226, 240, 255, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(30, 52, 82, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.lily-cp-vinyl-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 0deg, #2b5484, #7db3ee, #dcebfb, #2b5484);
  position: relative;
  flex-shrink: 0;
  animation: cdSpin 9s linear infinite;
}
.lily-cp-vinyl-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #ffffff;
}
.lily-cp-vinyl-center {
  position: absolute;
  inset: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #2b5484;
}
.lily-cp-sonic-meta {
  min-width: 0;
  flex: 1;
}
.lily-cp-tag-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #2b5484;
}
.lily-cp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}
.lily-cp-sonic-title {
  font-size: 12px;
  font-weight: 800;
  color: #1e2e42;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lily-cp-sonic-sub {
  font-size: 9.5px;
  color: #5d738d;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lily-cp-draft-slip {
  padding: 11px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px dashed rgba(118, 158, 206, 0.72);
  box-shadow: 0 8px 22px rgba(30, 52, 82, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.lily-cp-slip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  color: #476582;
  font-weight: 700;
}
.lily-cp-slip-head b {
  color: #2b5484;
}
.lily-cp-slip-quote {
  font-size: 11px;
  font-weight: 700;
  color: #1e2e42;
  line-height: 1.45;
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lily-cp-slip-foot {
  font-size: 8.8px;
  color: #748da8;
  font-weight: 600;
}
.lily-cp-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.lily-cp-qbtn {
  padding: 8px 4px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.96);
  font-size: 10px;
  font-weight: 800;
  color: #1e2e42;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(30, 52, 82, 0.05);
}
.lily-cp-qbtn.primary {
  background: linear-gradient(135deg, #2b5484, #4776ad);
  color: #ffffff;
  border-color: transparent;
}
.lily-cp-drawer-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.lily-cp-dtab {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10.8px;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.94);
  color: #476282;
  cursor: pointer;
}
.lily-cp-dtab.on {
  background: #1e2e42;
  color: #ffffff;
  border-color: #1e2e42;
}
.lily-cp-dossier-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lily-cp-dossier-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
}
.lily-cp-dossier-num {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #2b5484;
  background: rgba(186, 214, 247, 0.45);
  padding: 2px 8px;
  border-radius: 999px;
}
.lily-cp-dossier-name {
  font-size: 12px;
  font-weight: 800;
  color: #1e2e42;
}
.lily-cp-dossier-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(138, 178, 224, 0.55), transparent);
}
.lily-cp-strip-card {
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(30, 52, 82, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.lily-cp-strip-card.featured {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(226, 240, 255, 0.88));
  border-left: 3.5px solid #2b5484;
}
.lily-cp-strip-left {
  flex: 1;
  min-width: 0;
}
.lily-cp-pill-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  color: #2b5484;
  background: rgba(186, 214, 247, 0.42);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.lily-cp-strip-title {
  font-size: 13px;
  font-weight: 800;
  color: #1e2e42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lily-cp-strip-preview {
  font-size: 11px;
  color: #4d6785;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lily-cp-enter-tag {
  font-size: 10.5px;
  font-weight: 800;
  color: #2b5484;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 184, 226, 0.5);
  white-space: nowrap;
}
.lily-cp-asym-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lily-cp-cassette-card {
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(30, 52, 82, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  cursor: pointer;
}
.lily-cp-cassette-card.glacier-card {
  background: linear-gradient(145deg, #23436b, #386294);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}
.lily-cp-cassette-card.glacier-card .lily-cp-mini-head,
.lily-cp-cassette-card.glacier-card .lily-cp-mini-title,
.lily-cp-cassette-card.glacier-card .lily-cp-mini-desc,
.lily-cp-cassette-card.glacier-card .lily-cp-mini-sub {
  color: #ffffff !important;
}
.lily-cp-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #2b5484;
}
.lily-cp-mini-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #1e2e42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lily-cp-mini-desc {
  font-size: 10.5px;
  color: #526c88;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lily-cp-mini-sub {
  font-size: 9.5px;
  font-weight: 700;
  color: #365f91;
  margin-top: 2px;
}
.lily-cp-wave-strip {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  margin: 2px 0;
}
.lily-cp-wave-strip i {
  flex: 1;
  background: #5b87b8;
  border-radius: 99px;
  height: 8px;
}
.lily-cp-wave-strip i:nth-child(odd) { height: 14px; }
.lily-cp-wave-strip i:nth-child(3n) { height: 6px; }
.lily-cp-film-reel {
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(235, 245, 255, 0.94), rgba(255, 255, 255, 0.92));
  border: 1.5px solid rgba(168, 198, 232, 0.65);
  padding: 6px 12px;
  cursor: pointer;
}
.lily-cp-film-holes {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px;
}
.lily-cp-film-holes span {
  width: 12px;
  height: 5px;
  border-radius: 2px;
  background: rgba(71, 108, 150, 0.22);
}
.lily-cp-film-body {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
}
.lily-cp-film-thumb {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(30, 52, 82, 0.12);
  flex-shrink: 0;
}
.lily-cp-film-info {
  flex: 1;
  min-width: 0;
}
.lily-cp-search-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.lily-cp-search-chip {
  font-size: 10.5px;
  font-weight: 700;
  color: #1e2e42;
  background: rgba(232, 243, 255, 0.85);
  border: 1px solid rgba(158, 192, 230, 0.55);
  padding: 3px 9px;
  border-radius: 999px;
}

/* 6. 抖音式全屏上下滑动多直播间样式 (.lily-dy-*) */
.lily-dy-live-stage {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px 10px;
  color: #ffffff;
  overflow: hidden;
  user-select: none;
}
.lily-dy-live-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 20, 34, 0.65) 0%, rgba(15, 25, 42, 0.38) 45%, rgba(10, 18, 32, 0.86) 100%);
  pointer-events: none;
}
.lily-dy-top-hud,
.lily-dy-sub-hud,
.lily-dy-room-dots,
.lily-dy-pk-wrap,
.lily-dy-combo-banner,
.lily-dy-center-stage,
.lily-dy-danmaku-box,
.lily-dy-bottom-bar {
  position: relative;
  z-index: 2;
}
.lily-dy-top-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.lily-dy-host-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.lily-dy-host-ava-wrap {
  position: relative;
  width: 34px;
  height: 34px;
}
.lily-dy-host-ava-wrap img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #f43f5e;
}
.lily-dy-live-badge {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  background: #f43f5e;
  color: #ffffff;
  font-size: 7.5px;
  font-weight: 900;
  padding: 0 4px;
  border-radius: 4px;
}
.lily-dy-host-name {
  font-size: 11.8px;
  font-weight: 800;
  color: #ffffff;
  max-width: 105px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lily-dy-host-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.78);
}
.lily-dy-follow-btn {
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  border: none;
  cursor: pointer;
}
.lily-dy-vip-seats {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.lily-dy-vip-ava {
  position: relative;
  width: 28px;
  height: 28px;
}
.lily-dy-vip-ava img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #fde047;
}
.lily-dy-vip-ava i {
  position: absolute;
  top: -5px;
  right: -3px;
  font-style: normal;
  font-size: 10px;
}
.lily-dy-viewer-pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.56);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.lily-dy-sub-hud {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  overflow-x: auto;
}
.lily-dy-rank-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 9.8px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}
.lily-dy-room-dots {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  margin-top: 6px;
  padding-bottom: 2px;
}
.lily-dy-rm-chip {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9.8px;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.45);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  cursor: pointer;
}
.lily-dy-rm-chip.on {
  background: rgba(56, 189, 248, 0.35);
  color: #ffffff;
  border-color: #7dd3fc;
}
.lily-dy-pk-wrap {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.lily-dy-pk-top {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 4px;
}
.lily-dy-pk-timer {
  color: #fde047;
}
.lily-dy-pk-bar {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f43f5e, #ec4899);
  overflow: hidden;
}
.lily-dy-pk-left {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #60a5fa);
  transition: width 0.3s ease;
}
.lily-dy-pk-sub {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 3px;
  text-align: center;
}
.lily-dy-combo-banner {
  margin-top: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.88), rgba(168, 85, 247, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(244, 63, 94, 0.35);
  animation: appSlideUp 0.25s ease;
}
.lily-dy-combo-ico {
  font-size: 22px;
}
.lily-dy-combo-txt {
  flex: 1;
  font-size: 11px;
  display: flex;
  flex-direction: column;
}
.lily-dy-combo-x {
  font-size: 18px;
  font-weight: 900;
  color: #fde047;
  font-style: italic;
}
.lily-dy-center-stage {
  margin: auto 0;
  padding: 8px 0;
  position: relative;
}
.lily-dy-cam-card {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.lily-dy-cam-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  color: #7dd3fc;
  margin-bottom: 6px;
}
.lily-dy-audio-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.lily-dy-audio-bars i {
  width: 2.5px;
  height: 8px;
  background: #38bdf8;
  border-radius: 2px;
}
.lily-dy-audio-bars i:nth-child(2n) { height: 12px; }
.lily-dy-cam-body {
  font-size: 12.4px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.96);
}
.lily-dy-cam-thought {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.16);
  border-left: 3px solid #38bdf8;
  font-size: 11.2px;
  color: #e0f2fe;
  line-height: 1.55;
}
.lily-dy-heart-zone {
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 60px;
  height: 160px;
  pointer-events: none;
}
@keyframes dyHeartRise {
  0% { transform: translateY(0) scale(0.7); opacity: 1; }
  100% { transform: translateY(-135px) scale(1.35); opacity: 0; }
}
.lily-live-float-heart {
  position: absolute;
  bottom: 10px;
  font-size: 22px;
  animation: dyHeartRise 1.15s ease-out forwards;
}
.lily-dy-danmaku-box {
  max-height: 155px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 4px;
  margin-bottom: 8px;
}
.lily-dy-sys-notice {
  font-size: 10.5px;
  color: #7dd3fc;
  background: rgba(15, 23, 42, 0.55);
  padding: 5px 10px;
  border-radius: 10px;
  line-height: 1.45;
}
.lily-dy-dm-row {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  font-size: 11.5px;
  width: fit-content;
  max-width: 96%;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.lily-dy-dm-row.mine {
  background: rgba(56, 189, 248, 0.28);
  border-color: rgba(125, 211, 252, 0.55);
}
.lily-dy-dm-row.gift-row {
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.45), rgba(234, 179, 8, 0.35));
  border-color: rgba(253, 224, 71, 0.6);
}
.lily-dy-dm-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  color: #0f172a;
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 4px;
}
.lily-dy-dm-user {
  color: #bae6fd;
}
.lily-dy-dm-txt {
  color: #ffffff;
}
.lily-dy-bottom-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 4px;
}
.lily-dy-inp-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 4px 5px 4px 12px;
}
.lily-dy-inp-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 12px;
}
.lily-dy-inp-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}
.lily-dy-inp-wrap button {
  padding: 5px 11px;
  border-radius: 999px;
  background: #38bdf8;
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
  border: none;
  cursor: pointer;
}
.lily-dy-act-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-size: 16px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.lily-dy-act-circle.gift-btn {
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  border-color: #fda4af;
}
.lily-dy-gift-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px 22px 0 0;
  padding: 12px 14px 16px;
  animation: appSlideUp 0.2s ease;
}
.lily-dy-gd-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 10px;
}
.lily-dy-gd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
}
.lily-dy-gift-cell {
  position: relative;
  padding: 8px 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.lily-dy-gift-cell:active {
  transform: scale(0.95);
  background: rgba(56, 189, 248, 0.25);
}
.lily-dy-g-tag {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.75);
  color: #ffffff;
}
.lily-dy-g-ico {
  font-size: 22px;
  margin: 2px 0;
}
.lily-dy-g-name {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lily-dy-g-price {
  font-size: 9px;
  color: #fde047;
  font-weight: 700;
}

/* 7. 商城与心动外卖冰川蓝白精致美化 */
.lily-prod-eta-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #234872;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(30, 52, 82, 0.1);
}
.v24-prod-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(186, 214, 247, 0.65) !important;
  box-shadow: 0 8px 22px rgba(43, 84, 132, 0.06) !important;
}
.v24-prod-thought {
  background: linear-gradient(135deg, rgba(226, 240, 255, 0.55), rgba(240, 247, 255, 0.75)) !important;
  border-left: 2.5px solid #2b5484 !important;
  color: #1e2e42 !important;
}


/* ==================== LILY BLUE OS v35 PURE API & NOVEL OVERHAUL ==================== */

/* 1. 铁律：在小手机任何界面彻底隐藏思维链外露展示（100%作为底层隐秘引擎运转） */
.cot-bubble-wrap,
.cot-stream-live,
.cot-pill-toggle,
.cot-expanded-card {
  display: none !important;
}

/* 2. 对标 P3 (53162.jpg) 冰川蓝白纯正长文小说排版 + 字号大小调节拉条 */
.lily-offline-novel-wrap {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.97) 0%, rgba(235, 244, 254, 0.95) 100%);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.lily-novel-slider-bar {
  padding: 9px 13px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(168, 198, 232, 0.38);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.lily-nsb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #234872;
}
.lily-nsb-row input[type="range"] {
  flex: 1;
  accent-color: #2b5484;
  height: 5px;
  cursor: pointer;
}
.lily-nsb-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-top: 2px;
}
.lily-novel-sheet {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 24px;
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.96) 0%, rgba(240, 247, 255, 0.94) 100%);
  color: #1e293b;
  line-height: 1.92;
  letter-spacing: 0.02em;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 #ffffff;
}
.lily-novel-chapter {
  margin-bottom: 18px;
}
.lily-novel-para {
  margin: 0 0 14px 0;
  text-align: justify;
  color: #1e293b;
  line-height: 1.92;
  font-weight: 400;
}
.lily-novel-dlg {
  color: #153254;
  font-weight: 600;
}
.lily-novel-divider {
  text-align: center;
  font-size: 11px;
  color: #7b96b5;
  letter-spacing: 0.2em;
  margin: 18px 0 14px;
  font-weight: 700;
}
.lily-novel-user-turn {
  margin: 14px 0 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(218, 235, 252, 0.52);
  border-left: 3px solid #2b5484;
}
.lily-novel-user-tag {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  color: #2b5484;
  margin-bottom: 3px;
  letter-spacing: 0.08em;
}
.lily-novel-user-text {
  font-size: 0.94em;
  color: #1e2e42;
  line-height: 1.7;
}
.lily-novel-bottom-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid rgba(168, 198, 232, 0.4);
  flex-shrink: 0;
}
.lily-nbb-plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(148, 184, 226, 0.6);
  color: #2b5484;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.lily-nbb-inp {
  flex: 1;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(240, 246, 253, 0.9);
  border: 1px solid rgba(186, 212, 240, 0.65);
  font-size: 13px;
  color: #1e2e42;
  outline: none;
}
.lily-nbb-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2b5484, #4776ad);
  color: #ffffff;
  border: none;
  font-size: 15px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(43, 84, 132, 0.2);
}

/* 3. 查手机双页切换器 & 防右侧溢出 & 底部自适应栏 */
.lily-cp-page-switcher {
  display: flex;
  gap: 6px;
  width: 100%;
}
.lily-cp-page-btn {
  flex: 1;
  padding: 8px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(168, 198, 232, 0.55);
  color: #334e68;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lily-cp-page-btn.on {
  background: linear-gradient(135deg, #2b5484, #4776ad);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(43, 84, 132, 0.22);
}
.lily-cp-drawer-tabs-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.lily-cp-drawer-tabs-wrap .lily-cp-dtab {
  width: 100%;
  text-align: center;
  padding: 6px 4px;
  font-size: 10.2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lily-cp-bottom-dock {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 7px 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(250, 253, 255, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
}
.lily-cp-bottom-dock .pk-dock-pill {
  padding: 5px 2px !important;
  font-size: 9.8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  justify-content: center !important;
}

/* 4. 查手机内置【真实浏览器 UI】样式 (.lily-browser-*) */
.lily-browser-shell {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(168, 198, 232, 0.68);
  box-shadow: 0 10px 28px rgba(30, 52, 82, 0.08);
  overflow: hidden;
}
.lily-browser-topbar {
  padding: 9px 12px;
  background: linear-gradient(90deg, #dcebfb, #eaf3fc);
  border-bottom: 1px solid rgba(168, 198, 232, 0.55);
  display: flex;
  align-items: center;
  gap: 9px;
}
.lily-browser-dots {
  display: flex;
  gap: 4px;
}
.lily-browser-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #93b8e0;
}
.lily-browser-urlbar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(168, 198, 232, 0.6);
  font-size: 10px;
  color: #334e68;
  min-width: 0;
}
.lily-browser-url {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, monospace;
}
.lily-browser-incog {
  padding: 1px 6px;
  border-radius: 999px;
  background: #1e2e42;
  color: #ffffff;
  font-size: 8.8px;
  font-weight: 800;
  flex-shrink: 0;
}
.lily-browser-search-area {
  padding: 12px 13px;
  background: rgba(242, 248, 255, 0.78);
  border-bottom: 1px solid rgba(168, 198, 232, 0.38);
}
.lily-browser-chip-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}
.lily-browser-hot-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(148, 184, 226, 0.6);
  color: #2b5484;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.lily-browser-history-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lily-browser-item {
  padding: 12px 13px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(186, 212, 240, 0.65);
  box-shadow: 0 4px 12px rgba(30, 52, 82, 0.04);
  cursor: pointer;
}
.lily-browser-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.8px;
  color: #64748b;
  margin-bottom: 4px;
}
.lily-browser-count {
  color: #2b5484;
  font-weight: 800;
}
.lily-browser-query {
  font-size: 13.5px;
  font-weight: 800;
  color: #1a365d;
  margin-bottom: 5px;
}
.lily-browser-snippet {
  font-size: 11.8px;
  color: #334e68;
  line-height: 1.62;
  margin-bottom: 8px;
}
.lily-browser-conflict {
  padding: 8px 11px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(226, 240, 255, 0.72), rgba(240, 248, 255, 0.9));
  border-left: 3px solid #2b5484;
}
.lily-bc-title {
  font-size: 10px;
  font-weight: 800;
  color: #2b5484;
  margin-bottom: 2px;
}
.lily-bc-body {
  font-size: 11.2px;
  color: #1e2e42;
  line-height: 1.55;
}

/* 5. 查手机内置【真实高梗匿名论坛 UI】样式 (.lily-forum-*) */
.lily-forum-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lily-forum-banner {
  padding: 13px 15px;
  border-radius: 20px;
  background: linear-gradient(135deg, #23436b, #3b699e);
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(35, 67, 107, 0.2);
}
.lily-forum-eyebrow {
  font-size: 8.8px;
  letter-spacing: 0.14em;
  opacity: 0.8;
  font-weight: 700;
}
.lily-forum-title {
  font-size: 14px;
  font-weight: 800;
  margin-top: 2px;
}
.lily-forum-sub {
  font-size: 10px;
  opacity: 0.88;
  margin-top: 2px;
}
.lily-forum-thread-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.lily-forum-card {
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(186, 212, 240, 0.72);
  box-shadow: 0 6px 20px rgba(30, 52, 82, 0.06);
  cursor: pointer;
}
.lily-forum-op-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.lily-forum-op-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #2b5484;
}
.lily-forum-op-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(43, 84, 132, 0.12);
  color: #2b5484;
}
.lily-forum-post-title {
  font-size: 14px;
  font-weight: 800;
  color: #1e2e42;
  margin-bottom: 6px;
  line-height: 1.4;
}
.lily-forum-post-body {
  font-size: 12.2px;
  color: #334e68;
  line-height: 1.68;
}
.lily-forum-stats-row {
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
  margin: 10px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(168, 198, 232, 0.5);
}
.lily-forum-comments-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(242, 248, 255, 0.85);
  padding: 10px;
  border-radius: 14px;
}
.lily-forum-cmt-row {
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11.2px;
  line-height: 1.5;
}
.lily-forum-cmt-row.op-reply {
  background: rgba(218, 235, 252, 0.65);
  border-left: 2.5px solid #2b5484;
}
.lily-forum-cmt-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #2b5484;
  margin-bottom: 2px;
}
.lily-forum-floor-tag {
  font-size: 9px;
  color: #64748b;
  font-weight: 700;
}
.lily-forum-cmt-txt {
  color: #1e2e42;
}

/* 6. 纪念日横向顺畅滑动卡片流 (.lily-anni-hscroll) */
.lily-anni-hscroll {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px !important;
  scroll-snap-type: x mandatory;
}
.lily-anni-hscroll > .anni-card {
  min-width: 175px !important;
  max-width: 195px !important;
  flex: 0 0 180px !important;
  scroll-snap-align: start;
}

/* ============================================================================
   LILY BLUE v36 · MINI WECHAT PHONE-IN-PHONE, 2-PAGE DESKTOP, OFFLINE COT,
   SLEEK DOUYIN REPLY CAPSULE & ANNIVERSARY HORIZONTAL CAROUSEL
   ============================================================================ */

/* 1. 查手机 · 小巧小手机微信聊天界面 (Mini WeChat Phone-in-Phone) */
.lily-mini-wx-phone {
  border-radius: 26px;
  background: linear-gradient(180deg, #f4f9ff 0%, #edf4fc 100%);
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(30, 52, 82, 0.11), inset 0 1px 0 #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lily-mwx-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px 4px;
  font-size: 9.5px;
  font-weight: 800;
  color: #476582;
  background: rgba(255, 255, 255, 0.72);
}
.lily-mwx-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(148, 184, 226, 0.32);
}
.lily-mwx-badge {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  background: rgba(54, 95, 145, 0.12);
  color: #2b5484;
  white-space: nowrap;
}
.lily-mwx-badge.pin {
  background: linear-gradient(135deg, #2b5484, #4776ad);
  color: #ffffff;
}
.lily-mwx-badge.draft {
  background: #fef3c7;
  color: #92400e;
}
.lily-mwx-topbtn {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid rgba(71, 118, 173, 0.35);
  background: #ffffff;
  color: #2b5484;
  cursor: pointer;
}
.lily-mwx-topbtn.primary {
  background: linear-gradient(135deg, #2b5484, #4776ad);
  color: #ffffff;
  border: none;
}
.lily-mwx-session-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 11px;
  background: rgba(240, 247, 255, 0.78);
  border-bottom: 1px solid rgba(148, 184, 226, 0.25);
  scrollbar-width: none;
}
.lily-mwx-session-strip::-webkit-scrollbar {
  display: none;
}
.lily-mwx-session-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.84);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.16s ease;
}
.lily-mwx-session-chip.on {
  background: linear-gradient(135deg, #2b5484, #4776ad);
  color: #ffffff;
  border-color: #2b5484;
  box-shadow: 0 5px 14px rgba(43, 84, 132, 0.22);
}
.lily-mwx-session-chip img {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}
.lily-mwx-sc-name {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.lily-mwx-sc-sub {
  font-size: 9px;
  opacity: 0.72;
  white-space: nowrap;
}
.lily-mwx-MessageViewport {
  padding: 12px 12px 14px;
  max-height: 290px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: radial-gradient(circle at top right, rgba(219, 234, 254, 0.42), transparent 65%), #f6faff;
}
.lily-mwx-time-pill {
  align-self: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: #5d738d;
  font-size: 9.5px;
  font-weight: 700;
}
.lily-mwx-bub-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.lily-mwx-bub-row.mine {
  flex-direction: row-reverse;
}
.lily-mwx-ava {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
  border: 1.5px solid #ffffff;
  box-shadow: 0 3px 8px rgba(30, 52, 82, 0.08);
  flex-shrink: 0;
}
.lily-mwx-bub-wrap {
  max-width: 76%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lily-mwx-bub-row.mine .lily-mwx-bub-wrap {
  align-items: flex-end;
}
.lily-mwx-sender-lbl {
  font-size: 9px;
  color: #64748b;
  font-weight: 700;
  padding: 0 3px;
}
.lily-mwx-bub {
  padding: 8px 12px;
  border-radius: 4px 15px 15px 15px;
  background: #ffffff;
  color: #1e2e42;
  font-size: 12px;
  line-height: 1.58;
  border: 1px solid rgba(226, 238, 252, 0.95);
  box-shadow: 0 3px 10px rgba(30, 52, 82, 0.05);
}
.lily-mwx-bub-row.mine .lily-mwx-bub {
  border-radius: 15px 4px 15px 15px;
  background: linear-gradient(135deg, #2b5484, #3e6b9e);
  color: #ffffff;
  border-color: transparent;
}
.lily-mwx-draft-paper {
  padding: 12px 14px;
  border-radius: 15px;
  background: #ffffff;
  border: 1.5px dashed rgba(71, 118, 173, 0.55);
}
.lily-mwx-thought-bar {
  padding: 8px 13px;
  background: rgba(224, 242, 254, 0.65);
  border-top: 1px solid rgba(148, 184, 226, 0.35);
  font-size: 11px;
  color: #1e3a5f;
  line-height: 1.55;
}
.lily-mwx-inputbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #ffffff;
  border-top: 1px solid rgba(148, 184, 226, 0.28);
}
.lily-mwx-inp {
  flex: 1;
  min-width: 0;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(148, 184, 226, 0.48);
  background: #f4f9ff;
  font-size: 11.5px;
  color: #1e2e42;
  outline: none;
}
.lily-mwx-sendbtn {
  padding: 6px 11px;
  border-radius: 999px;
  background: #1e2e42;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.lily-mwx-askbtn {
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2b5484, #4776ad);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

/* 2. 查手机 · 双页 4x2 拟真应用图标网格 (绝不溢出右侧) */
.lily-cp-icon-grid-page {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(30, 52, 82, 0.06);
}
.lily-cp-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px;
  border-radius: 16px;
  background: rgba(244, 249, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.95);
  cursor: pointer;
  min-width: 0;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.lily-cp-app-tile:active {
  transform: scale(0.95);
}
.lily-cp-app-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 19px;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(30, 52, 82, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.lily-cp-app-name {
  font-size: 10.5px;
  font-weight: 800;
  color: #1e2e42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lily-cp-app-sub {
  font-size: 8.8px;
  color: #5d738d;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 3. 线下剧场 & 约会剧场 · 冰川蓝白可折叠思维链卡片 (<thinking>) */
.lily-offline-cot-card {
  margin-bottom: 12px;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(240, 247, 255, 0.94), rgba(228, 240, 253, 0.82));
  border: 1px solid rgba(148, 184, 226, 0.52);
  overflow: hidden;
}
.lily-offline-cot-card summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  color: #234872;
  cursor: pointer;
  user-select: none;
}
.lily-offline-cot-card summary::-webkit-details-marker {
  display: none;
}
.lily-offline-cot-card summary small {
  font-size: 9.5px;
  color: #5d738d;
  font-weight: 700;
  flex-shrink: 0;
}
.lily-offline-cot-body {
  padding: 8px 12px 10px;
  border-top: 1px dashed rgba(148, 184, 226, 0.45);
  font-size: 11.5px;
  line-height: 1.65;
  color: #1e3a5f;
}

/* 4. 抖音评论区 & 直播间 · 小巧精致冰川流光「✦ 回复」胶囊按钮与互动标签 */
.lily-dy-sleek-reply-btn {
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(59, 130, 246, 0.34));
  border: 1px solid rgba(186, 230, 253, 0.55);
  backdrop-filter: blur(12px);
  color: #f0f9ff;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.18);
  transition: transform 0.14s ease, background 0.14s ease;
}
.lily-dy-sleek-reply-btn:active {
  transform: scale(0.94);
}
.lily-dy-mini-tag,
.lily-dy-dm-poke {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(125, 211, 252, 0.38);
  color: #bae6fd;
  font-size: 9px;
  font-weight: 700;
  vertical-align: middle;
}

/* 5. 纪念日 · 顺滑左右滑动轮播卡片 */
.lily-anni-hscroll {
  display: flex !important;
  gap: 10px;
  overflow-x: auto !important;
  overflow-y: hidden;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.lily-anni-slide-card {
  flex: 0 0 168px;
  min-width: 168px;
  max-width: 180px;
  scroll-snap-align: start;
  text-align: center;
  cursor: pointer;
  position: relative;
}


/* ==========================================================================
   V37 OVERHAUL 1: 线下单人 & 线下多人 · 横线信笺手记长文排版 (Ruled Letter Notebook)
   ========================================================================== */
.lily-ruled-manuscript-card {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(252, 254, 255, 0.98) 0%, rgba(245, 250, 255, 0.96) 100%);
  border: 1px solid rgba(176, 204, 236, 0.55);
  box-shadow: 0 8px 26px rgba(24, 52, 86, 0.06), inset 0 1px 0 #ffffff;
  padding: 20px 20px 22px 26px;
  margin-bottom: 16px;
  overflow: hidden;
}
.lily-ruled-manuscript-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 2px;
  background: linear-gradient(180deg, rgba(162, 196, 234, 0.35), rgba(140, 180, 224, 0.65), rgba(162, 196, 234, 0.35));
  border-radius: 2px;
}
.lily-rmc-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: #6482a3;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(168, 198, 232, 0.45);
}
.lily-rmc-headline {
  font-size: 1.15em;
  font-weight: 800;
  color: #1a2b40;
  line-height: 1.52;
  letter-spacing: 0.02em;
  margin: 4px 0 14px;
  font-family: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
}
.lily-rmc-ruled-body {
  position: relative;
  line-height: 2.15em;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent calc(2.15em - 1px),
    rgba(176, 202, 230, 0.34) calc(2.15em - 1px),
    rgba(176, 202, 230, 0.34) 2.15em
  );
  background-attachment: local;
  padding-top: 1px;
}
.lily-rmc-para {
  margin: 0 0 2.15em 0;
  color: #243447;
  line-height: 2.15em;
  text-align: justify;
  letter-spacing: 0.025em;
  font-weight: 400;
}
.lily-rmc-para:last-child {
  margin-bottom: 0;
}
.lily-rmc-dlg {
  color: #143559;
  font-weight: 600;
}
.lily-rmc-dlg.underlined {
  border-bottom: 1px dashed rgba(43, 84, 132, 0.42);
  padding-bottom: 1px;
}
.lily-rmc-cast-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.lily-rmc-cast-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  background: rgba(226, 239, 253, 0.72);
  border: 1px solid rgba(164, 196, 232, 0.55);
  font-size: 10.5px;
  font-weight: 700;
  color: #1e3a5f;
}
.lily-rmc-cast-pill img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
.lily-rmc-foot-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(176, 202, 230, 0.36);
}

/* ==========================================================================
   V37 OVERHAUL 2: 匿名提问箱 · 纸飞机塞信 & 马甲声呐破译台 (Anonymous Whisper Box)
   ========================================================================== */
.qa37-hero-banner {
  position: relative;
  border-radius: 20px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, rgba(232, 243, 255, 0.96) 0%, rgba(244, 249, 255, 0.94) 55%, rgba(226, 238, 254, 0.95) 100%);
  border: 1px solid rgba(164, 198, 236, 0.6);
  box-shadow: 0 10px 26px rgba(28, 60, 98, 0.07);
  margin-bottom: 10px;
  overflow: hidden;
}
.qa37-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.qa37-ava-ring {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, #5b8fd4, #9bc2f0);
  flex-shrink: 0;
}
.qa37-ava-ring img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  background: #fff;
}
.qa37-hero-meta {
  flex: 1;
  min-width: 0;
}
.qa37-hero-title {
  font-size: 15px;
  font-weight: 800;
  color: #162a42;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qa37-hero-sub {
  font-size: 11px;
  color: #52708f;
  margin-top: 3px;
  line-height: 1.45;
}
.qa37-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(160, 192, 228, 0.38);
  text-align: center;
}
.qa37-stat-cell b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #1a3352;
}
.qa37-stat-cell span {
  font-size: 9.5px;
  color: #5c7896;
}
.qa37-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(222, 236, 252, 0.55);
  border: 1px solid rgba(168, 198, 232, 0.45);
  margin-bottom: 10px;
}
.qa37-mode-btn {
  padding: 7px 4px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  color: #4b6888;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.16s ease;
}
.qa37-mode-btn.on {
  background: #ffffff;
  color: #183252;
  box-shadow: 0 3px 10px rgba(24, 52, 86, 0.09);
}
.qa37-composer-card {
  border-radius: 18px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(168, 198, 232, 0.55);
  box-shadow: 0 6px 18px rgba(24, 52, 86, 0.05);
  margin-bottom: 12px;
}
.qa37-tag-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.qa37-tag-chip {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(232, 242, 254, 0.8);
  color: #355880;
  border: 1px solid transparent;
  cursor: pointer;
}
.qa37-tag-chip.on {
  background: #1e3a5f;
  color: #ffffff;
}
.qa37-envelope-card {
  position: relative;
  border-radius: 18px;
  padding: 15px 15px 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 251, 255, 0.95) 100%);
  border: 1px solid rgba(172, 202, 236, 0.55);
  box-shadow: 0 7px 20px rgba(24, 52, 86, 0.06);
  margin-bottom: 11px;
}
.qa37-env-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.qa37-wax-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(30, 58, 95, 0.08);
  color: #1e3a5f;
}
.qa37-wax-badge.mine {
  background: rgba(2, 132, 199, 0.14);
  color: #0369a1;
}
.qa37-wax-badge.char-ask {
  background: rgba(124, 58, 237, 0.13);
  color: #6d28d9;
}
.qa37-radar-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.qa37-radar-pill.exposed {
  background: rgba(225, 29, 72, 0.12);
  color: #be123c;
}
.qa37-radar-pill.hidden {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}
.qa37-question-box {
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(235, 244, 255, 0.65);
  border-left: 3.5px solid #3b6ea5;
  font-size: 13.5px;
  font-weight: 800;
  color: #162a42;
  line-height: 1.62;
  margin-bottom: 10px;
}
.qa37-answer-box {
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(186, 210, 238, 0.6);
  font-size: 12.8px;
  line-height: 1.78;
  color: #1e293b;
}
.qa37-subtext-box {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(226, 238, 253, 0.65), rgba(240, 247, 255, 0.45));
  border-left: 3px solid #2b5484;
  font-size: 11.5px;
  line-height: 1.68;
  color: #234264;
}
.qa37-clue-bar {
  margin-top: 7px;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(241, 245, 249, 0.85);
  font-size: 10.5px;
  color: #526c88;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qa37-followup-list {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(168, 198, 232, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qa37-followup-item {
  font-size: 11.5px;
  line-height: 1.6;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(238, 246, 255, 0.7);
  color: #1e334c;
}

/* ==========================================================================
   V37 OVERHAUL 3: QQ 情侣空间 (QQ Couple Space · 爱情树/情侣黄钻/我们的家/蜜语打卡)
   ========================================================================== */
.qqcs-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qqcs-banner-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  border: 1px solid rgba(172, 202, 236, 0.65);
  box-shadow: 0 10px 28px rgba(26, 56, 92, 0.08);
}
.qqcs-cover-stage {
  height: 168px;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(135deg, #b8d8f8 0%, #d6e6fb 48%, #f3d9e8 100%);
  position: relative;
  cursor: pointer;
}
.qqcs-cover-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 32, 56, 0.25) 0%, transparent 45%, rgba(245, 249, 255, 0.96) 100%);
}
.qqcs-top-badges {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qqcs-vip-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 800;
  color: #b45309;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.qqcs-cover-btn {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 28, 46, 0.42);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.qqcs-couple-dock {
  position: relative;
  z-index: 4;
  margin-top: -54px;
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qqcs-avatars-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.qqcs-ava-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.qqcs-ava-img-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #74a9e8, #f2a6c4);
  box-shadow: 0 6px 18px rgba(30, 58, 95, 0.16);
}
.qqcs-ava-img-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #ffffff;
  background: #fff;
}
.qqcs-ava-tag {
  font-size: 11.5px;
  font-weight: 800;
  color: #182c44;
}
.qqcs-heart-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.qqcs-heart-line {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #e15b8c;
  font-size: 18px;
  font-weight: 800;
}
.qqcs-days-banner {
  margin-top: 8px;
  text-align: center;
}
.qqcs-days-title {
  font-size: 11px;
  color: #587596;
  font-weight: 700;
}
.qqcs-days-title b {
  font-size: 26px;
  font-family: Georgia, "Noto Serif SC", serif;
  color: #162d4c;
  margin: 0 4px;
}
.qqcs-sign-pill {
  margin-top: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(225, 238, 253, 0.65);
  border: 1px solid rgba(168, 198, 232, 0.5);
  font-size: 11px;
  color: #365577;
  cursor: pointer;
  max-width: 92%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qqcs-miss-strip {
  width: 100%;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(176, 202, 230, 0.38);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.qqcs-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 14px;
  background: rgba(240, 247, 255, 0.85);
  border: 1px solid rgba(178, 206, 238, 0.55);
  cursor: pointer;
  transition: transform 0.14s ease;
}
.qqcs-quick-btn:active {
  transform: scale(0.96);
}
.qqcs-quick-btn i {
  font-style: normal;
  font-size: 17px;
}
.qqcs-quick-btn b {
  font-size: 10.5px;
  color: #1b3554;
}
.qqcs-quick-btn small {
  font-size: 9px;
  color: #627f9e;
}

/* QQ 情侣空间 · 爱情树与我们的家花园卡 */
.qqcs-tree-card {
  position: relative;
  border-radius: 20px;
  padding: 14px 15px;
  background: linear-gradient(160deg, rgba(236, 248, 244, 0.95) 0%, rgba(235, 244, 255, 0.95) 60%, rgba(252, 243, 248, 0.92) 100%);
  border: 1px solid rgba(164, 204, 224, 0.6);
  box-shadow: 0 8px 22px rgba(24, 56, 84, 0.06);
}
.qqcs-tree-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qqcs-tree-stage {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.qqcs-tree-visual {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.95), rgba(206, 236, 226, 0.75));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(142, 198, 182, 0.45);
}
.qqcs-tree-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.qqcs-tree-act-btn {
  padding: 7px 8px;
  border-radius: 11px;
  border: 1px solid rgba(156, 192, 228, 0.55);
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 800;
  color: #1c3858;
  cursor: pointer;
}

/* ==========================================================================
   V37 OVERHAUL 4: 世界书 (LILY BLUE CODEX · 极简精致现代手账设定集)
   ========================================================================== */
.wb37-hero {
  border-radius: 20px;
  padding: 15px 16px;
  background: linear-gradient(135deg, rgba(235, 245, 255, 0.96) 0%, rgba(248, 251, 255, 0.96) 100%);
  border: 1px solid rgba(166, 198, 234, 0.6);
  box-shadow: 0 8px 24px rgba(24, 52, 86, 0.06);
  margin-bottom: 10px;
}
.wb37-char-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 1px 6px;
  margin-bottom: 8px;
}
.wb37-char-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(172, 200, 232, 0.55);
  font-size: 11.5px;
  font-weight: 700;
  color: #3b597a;
  cursor: pointer;
}
.wb37-char-pill.on {
  background: #1b3658;
  color: #ffffff;
  border-color: #1b3658;
  box-shadow: 0 4px 12px rgba(27, 54, 88, 0.2);
}
.wb37-char-pill img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
.wb37-entry-card {
  position: relative;
  border-radius: 17px;
  padding: 13px 14px 12px 17px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(178, 204, 234, 0.55);
  box-shadow: 0 5px 16px rgba(24, 52, 86, 0.045);
  margin-bottom: 9px;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.wb37-entry-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #6495ed;
}
.wb37-entry-card.prio-high::before {
  background: #1b3658;
}
.wb37-entry-card.prio-low::before {
  background: #94a3b8;
}
.wb37-entry-card.is-off {
  opacity: 0.56;
}
.wb37-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 6px;
}
.wb37-mini-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(226, 238, 252, 0.7);
  color: #2b4c70;
}
.wb37-mini-tag.live {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}
.wb37-modal-section {
  padding: 11px 0;
  border-bottom: 1px solid rgba(176, 202, 230, 0.35);
}
.wb37-modal-section:last-child {
  border-bottom: none;
}
.wb37-seg-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wb37-seg-chip {
  flex: 1;
  min-width: 68px;
  text-align: center;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(234, 243, 254, 0.72);
  color: #3b597a;
  border: 1px solid rgba(172, 200, 232, 0.5);
  cursor: pointer;
}
.wb37-seg-chip.active {
  background: #1b3658;
  color: #ffffff;
  border-color: #1b3658;
}


/* ==========================================================================
   V38 HAUTE COUTURE OVERHAUL:
   1. 53211.jpg 1:1 纯净冰川蓝白横线信笺长文排版 (单人线下 & 多人线下通用)
   2. 百合蓝机 · 灵犀星典 (LILY BLUE ASTROLABE CODEX · 100%原创六维星图与零下拉弹窗)
   3. 桌面高定冰川琉璃光泽与 API 灵犀感知组件
   ========================================================================== */

/* Top Statusbar API Pulse Pill */
.v38-sb-api-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(27, 54, 88, 0.88), rgba(43, 84, 132, 0.85));
  color: #f8fbff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(27, 54, 88, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.v38-sb-api-pill:active {
  transform: scale(0.94);
}

/* 53211.jpg 1:1 Horizontal-Ruled Stationery Manuscript Stage */
.lily-offline-novel-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #dce8f6 0%, #e6f0fb 50%, #dbe7f5 100%);
  border-radius: 22px 22px 0 0;
  padding: 8px 8px 0;
  overflow: hidden;
}

.lily-53211-manuscript-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 2px 14px;
  -webkit-overflow-scrolling: touch;
}

.lily-53211-paper {
  position: relative;
  background: linear-gradient(180deg, #fafcfe 0%, #f5f9fd 100%);
  border-radius: 16px;
  border: 1px solid rgba(182, 206, 234, 0.72);
  box-shadow:
    0 10px 28px rgba(24, 52, 86, 0.065),
    inset 0 1px 0 #ffffff;
  padding: 20px 20px 16px 28px;
  margin-bottom: 14px;
  color: #253344;
}

/* Classic Stationery Double Left Margin Line (Exact match to 53211.jpg) */
.lily-53211-paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 3px;
  border-left: 1.5px solid rgba(176, 202, 232, 0.58);
  border-right: 1px solid rgba(176, 202, 232, 0.35);
  pointer-events: none;
}

.lily-53211-ruled-body {
  position: relative;
  line-height: 2.22em;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent calc(2.22em - 1px),
    rgba(186, 208, 232, 0.42) calc(2.22em - 1px),
    rgba(186, 208, 232, 0.42) 2.22em
  );
  background-attachment: local;
  padding-top: 2px;
}

.lily-53211-headline {
  font-size: 1.18em;
  font-weight: 800;
  color: #213042;
  line-height: 1.56;
  letter-spacing: 0.025em;
  margin: 0 0 14px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(186, 208, 232, 0.48);
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.lily-53211-para {
  margin: 0 0 2.22em 0;
  color: #263547;
  line-height: 2.22em;
  text-align: justify;
  letter-spacing: 0.03em;
  font-weight: 400;
  word-break: break-word;
}

.lily-53211-para:last-child {
  margin-bottom: 0.4em;
}

.lily-53211-dlg {
  color: #163354;
  font-weight: 500;
}

.lily-53211-dlg.underlined {
  border-bottom: 1px dashed rgba(43, 84, 132, 0.42);
  padding-bottom: 1px;
}

.lily-53211-paper-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(176, 202, 230, 0.48);
  font-size: 10px;
  color: #6c87a6;
  font-weight: 600;
}

.lily-53211-foot-link {
  border: none;
  background: rgba(226, 238, 252, 0.65);
  color: #234469;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
}

.lily-53211-user-note {
  margin: 0 2px 10px;
  padding: 9px 13px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(176, 202, 232, 0.6);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lily-53211-user-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #365b85;
  letter-spacing: 0.04em;
}

.lily-53211-user-txt {
  font-size: 12.5px;
  color: #1e2e42;
  line-height: 1.6;
}

/* Floating Aa / Director Popover in Single & Multi Offline */
.lily-aa-floating-popover {
  margin: 0 2px 8px;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(164, 196, 232, 0.75);
  box-shadow: 0 10px 26px rgba(20, 46, 78, 0.12);
  z-index: 40;
  animation: lilyPopFadeIn 0.18s ease-out;
}

@keyframes lilyPopFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.lily-invite-sync-banner {
  margin: 0 2px 8px;
  padding: 8px 11px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(235, 245, 255, 0.94));
  border: 1px solid rgba(154, 190, 230, 0.72);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Slim Header Ribbon for Multiplayer Offline (Replaces bulky form cards!) */
.lily-mo-slim-header {
  margin: 0 2px 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(172, 200, 232, 0.68);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(24, 52, 86, 0.05);
}

.lily-mo-ava-stack {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.lily-mo-ava-stack img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #ffffff;
  margin-left: -5px;
}
.lily-mo-ava-stack img:first-child {
  margin-left: 0;
}

/* ==========================================================================
   V38 WORLDBOOK: 百合蓝机 · 灵犀星典 (LILY BLUE ASTROLABE CODEX)
   ========================================================================== */
.wb38-astrolabe-hero {
  position: relative;
  border-radius: 22px;
  padding: 16px 16px 13px;
  background: linear-gradient(140deg, #162e4d 0%, #234772 58%, #346193 100%);
  color: #f8fbff;
  box-shadow: 0 12px 28px rgba(20, 44, 76, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  margin-bottom: 11px;
  overflow: hidden;
}

.wb38-astro-orb {
  position: absolute;
  right: -8px;
  top: -8px;
  opacity: 0.85;
  pointer-events: none;
  animation: wbAstroSpin 36s linear infinite;
}

@keyframes wbAstroSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.wb38-astro-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(214, 232, 255, 0.78);
  margin-bottom: 3px;
}

.wb38-astro-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.wb38-astro-sub {
  font-size: 10.5px;
  color: rgba(224, 238, 255, 0.84);
  margin-top: 3px;
}

.wb38-char-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0 8px;
}

.wb38-char-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(240, 247, 255, 0.9);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.wb38-char-chip.on {
  background: #ffffff;
  color: #162e4d;
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wb38-char-chip img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.wb38-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.wb38-nav-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(12, 26, 46, 0.28);
  padding: 4px;
  border-radius: 13px;
}

.wb38-nav-tab {
  padding: 6px 4px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(226, 239, 255, 0.85);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wb38-nav-tab.on {
  background: rgba(255, 255, 255, 0.96);
  color: #162e4d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.wb38-filter-ribbon {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 1px 8px;
  margin-bottom: 4px;
}

.wb38-filter-chip {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(172, 200, 232, 0.58);
  color: #355273;
  cursor: pointer;
}

.wb38-filter-chip.on {
  background: #1b3658;
  color: #ffffff;
  border-color: #1b3658;
  box-shadow: 0 4px 10px rgba(27, 54, 88, 0.18);
}

.wb38-folio-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
}

.wb38-folio-card {
  position: relative;
  border-radius: 19px;
  padding: 14px 15px 12px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 249, 255, 0.95) 100%);
  border: 1px solid rgba(174, 202, 234, 0.65);
  box-shadow: 0 8px 22px rgba(22, 48, 82, 0.055), inset 0 1px 0 #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.wb38-folio-card:active {
  transform: scale(0.99);
}

.wb38-folio-card.is-off {
  opacity: 0.54;
}

.wb38-folio-watermark {
  position: absolute;
  right: 14px;
  bottom: 34px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(148, 182, 222, 0.16);
  pointer-events: none;
}

.wb38-folio-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.wb38-dim-seal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(27, 54, 88, 0.1), rgba(43, 84, 132, 0.16));
  border: 1px solid rgba(43, 84, 132, 0.22);
  color: #1b3658;
  font-size: 10.5px;
  font-weight: 800;
}

.wb38-live-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.13);
  color: #047857;
}

.wb38-folio-title {
  font-size: 14px;
  font-weight: 800;
  color: #142842;
  line-height: 1.4;
  margin-bottom: 6px;
}

.wb38-folio-body {
  font-size: 12px;
  color: #2c4159;
  line-height: 1.68;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wb38-folio-keys {
  font-size: 10.5px;
  color: #4b6a8b;
  margin-top: 6px;
  font-weight: 600;
}

.wb38-folio-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(176, 202, 230, 0.5);
}

.wb38-meta-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(228, 240, 253, 0.78);
  border: 1px solid rgba(168, 198, 232, 0.55);
  color: #1e3a5f;
  cursor: pointer;
}

.wb38-meta-chip.static {
  background: rgba(241, 246, 252, 0.8);
  color: #52708f;
  cursor: default;
}

.wb38-edit-link {
  border: none;
  background: transparent;
  color: #1b3658;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

/* 2x3 Dimension Matrix Grid (Used in Matrix View & Editor Modal — Replaces Native <select>!) */
.wb38-dim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.wb38-dim-card {
  text-align: left;
  padding: 9px 9px 8px;
  border-radius: 14px;
  background: rgba(240, 247, 255, 0.78);
  border: 1px solid rgba(174, 202, 234, 0.58);
  cursor: pointer;
  transition: all 0.14s ease;
}

.wb38-dim-card.on {
  background: linear-gradient(145deg, #1b3658, #2b5484);
  border-color: #1b3658;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(27, 54, 88, 0.22);
}

.wb38-dc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.wb38-dc-ico {
  font-size: 15px;
}

.wb38-dc-cnt {
  font-size: 9.5px;
  font-weight: 800;
  opacity: 0.78;
}

.wb38-dc-name {
  font-size: 11.5px;
  font-weight: 800;
  color: inherit;
}

.wb38-dc-sub {
  font-size: 9px;
  opacity: 0.72;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb38-prio-pill,
.wb38-sscope-pill,
.wb38-pos-pill,
.wb38-imp-pill {
  padding: 7px 6px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(236, 244, 254, 0.8);
  border: 1px solid rgba(172, 200, 232, 0.6);
  color: #2b4c70;
  text-align: center;
  cursor: pointer;
  transition: all 0.14s ease;
}

.wb38-prio-pill.on,
.wb38-sscope-pill.on,
.wb38-pos-pill.on,
.wb38-imp-pill.on {
  background: #1b3658;
  border-color: #1b3658;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(27, 54, 88, 0.18);
}

.wb38-forge-panel,
.wb38-matrix-card {
  border-radius: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(172, 200, 232, 0.62);
  box-shadow: 0 8px 22px rgba(22, 48, 82, 0.055);
  margin-bottom: 11px;
}

.wb38-seal-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(27, 54, 88, 0.1);
  color: #1b3658;
}

.wb38-seed-btn {
  text-align: left;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(235, 244, 255, 0.82);
  border: 1px solid rgba(168, 198, 232, 0.6);
  font-size: 11px;
  font-weight: 700;
  color: #1b3658;
  cursor: pointer;
}

.wb38-seed-btn:active {
  transform: scale(0.97);
}

.wb38-prompt-preview {
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(242, 248, 255, 0.92);
  border: 1px solid rgba(168, 198, 232, 0.58);
  font-size: 11px;
  line-height: 1.68;
  color: #1e293b;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
}

.wb38-ai-polish-btn {
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1b3658, #2b5484);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(27, 54, 88, 0.2);
}

.wb38-filter-ribbon,
.wb38-char-strip,
.lily-53211-manuscript-stage {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wb38-filter-ribbon::-webkit-scrollbar,
.wb38-char-strip::-webkit-scrollbar,
.lily-53211-manuscript-stage::-webkit-scrollbar {
  display: none;
}
.lily-53211-headline {
  border-bottom: none;
  margin: 0 0 12px 0;
  padding-bottom: 0;
  line-height: 1.58;
}


/* ==========================================================================
   v39 LILY BLUE OS MASTER UPGRADE STYLES:
   1. Full-Bleed Custom Chat Wallpaper Fix (Zero Border Gaps)
   2. Exquisite WeChat Voice & Video Call Inside Phone Frame + PiP Window
   3. Multi-Person Group Chat Composite Avatars, @Bar & Red Packet Cards
   4. 8 New Creative Bubble Shapes (bshape-*) + 4 New Color Palettes
   5. Luxury Acoustic Glass Voice Bubble (.v39-luxury-voice)
   6. API Hub Vertical Collapsible Accordion (.v39-accordion-stack)
   7. Couple Avatar Modal GPU Whiteout Bug Fix
   ========================================================================== */

/* 1. Full-bleed Chat & Offline Wallpaper Fix (53264.jpg) */
.chat-room-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 6px 10px 6px !important;
  border-radius: 0 !important;
  border: none !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  box-sizing: border-box !important;
}

.offline-notebook-wrap,
.cp-sheer-shell {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* 2. Couple Avatar Modal GPU Layer Clipping / Whiteout Fix (53240.jpg, 53243.jpg) */
.v39-cp-gallery-list .v23-cp-card,
.v23-cp-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* 3. Exquisite WeChat Voice & Video Call Inside #phoneRoot */
#callLayer.call-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 490 !important;
  border-radius: inherit;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 16px 22px !important;
  color: #ffffff;
  box-sizing: border-box;
}
#callLayer .call-bg {
  position: absolute;
  inset: -18px;
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.18) brightness(0.62);
  transform: scale(1.08);
  z-index: 0;
}
#callLayer .call-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 28%, rgba(30, 41, 59, 0.35), rgba(10, 15, 28, 0.86) 85%);
  z-index: 1;
}
#callLayer .call-scrim.is-video {
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.65) 0%, rgba(10, 15, 28, 0.18) 38%, rgba(10, 15, 28, 0.85) 100%);
}
.call-top-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.call-top-center {
  text-align: center;
  flex: 1;
  min-width: 0;
}
.call-top-center .call-name {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.call-top-center .call-sub {
  font-size: 11px;
  color: rgba(241, 245, 249, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.call-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: callDotPulse 1.6s infinite ease-in-out;
}
@keyframes callDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
.call-mini-pill,
.call-bpm-pill {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.call-voice-center {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 4px;
}
.call-ava-halo-wrap {
  position: relative;
  width: 122px;
  height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.call-voice-ava {
  width: 106px !important;
  height: 106px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  position: relative;
  z-index: 2;
}
.call-halo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(186, 230, 253, 0.42);
  animation: callHaloRipple 3s infinite ease-out;
  pointer-events: none;
}
.call-halo-ring.r2 { animation-delay: 1s; }
.call-halo-ring.r3 { animation-delay: 2s; }
@keyframes callHaloRipple {
  0% { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.42); opacity: 0; }
}
.call-ava-edit-badge {
  position: absolute;
  bottom: -4px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 9.5px;
  font-weight: 800;
  color: #e0f2fe;
}
.call-voice-mood-pill {
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  color: rgba(241, 245, 249, 0.92);
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-video-stage {
  position: relative;
  z-index: 3;
  flex: 1;
  min-height: 170px;
  max-height: 245px;
  margin: 6px 0;
  display: flex;
}
.call-video-main-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  background: rgba(15, 23, 42, 0.6);
}
.call-video-main-card .call-char-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.call-video-live-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 700;
  color: #f8fafc;
}
.call-video-pip {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 76px;
  height: 102px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  background: #0f172a;
}
.call-video-pip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.call-pip-tag {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  text-align: center;
  font-size: 8.5px;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  border-radius: 6px;
  padding: 1px 3px;
}
.call-group-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 6px 0;
}
.call-group-cell {
  position: relative;
  height: 92px;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(15, 23, 42, 0.55);
}
.call-group-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.call-group-cell-meta {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  font-size: 9.5px;
  font-weight: 800;
  color: #ffffff;
}
.call-quick-chips {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.call-q-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f1f5f9;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.call-wechat-dock {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 6px;
}
.call-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(241, 245, 249, 0.9);
}
.call-dock-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.15s ease, background 0.15s ease;
}
.call-dock-circle.on {
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
}
.call-dock-circle.off {
  background: rgba(239, 68, 68, 0.28);
  border-color: rgba(239, 68, 68, 0.55);
}
.call-dock-circle.hangup {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #ef4444, #be123c);
  border: none;
  box-shadow: 0 8px 22px rgba(225, 29, 72, 0.5);
}

/* 4. Multi-Person Group Chat Composite Avatar & @Bar */
.wx-group-collage-ava {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}
.wx-group-collage-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.wx-group-at-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 10px;
  scrollbar-width: none;
}
.wx-at-pill {
  padding: 3.5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(30, 41, 59, 0.1);
  font-size: 10.5px;
  font-weight: 800;
  color: #1e293b;
  white-space: nowrap;
  cursor: pointer;
}

/* 5. Luxury WeChat Voice Bubble (.v39-luxury-voice) */
.chat-bubble.v39-luxury-voice {
  min-width: 168px;
  max-width: 245px;
  padding: 9px 13px !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.v39-vb-main {
  display: flex;
  align-items: center;
  gap: 9px;
}
.v39-vb-play-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(43, 84, 132, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-msg-row.user .v39-vb-play-btn {
  background: rgba(255, 255, 255, 0.22);
}
.v39-vb-waveform {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 18px;
  flex: 1;
}
.v39-vb-waveform span {
  display: block;
  width: 2.5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.65;
  height: 6px;
  transition: height 0.2s ease;
}
.v39-vb-waveform span:nth-child(1) { height: 6px; }
.v39-vb-waveform span:nth-child(2) { height: 11px; }
.v39-vb-waveform span:nth-child(3) { height: 15px; }
.v39-vb-waveform span:nth-child(4) { height: 9px; }
.v39-vb-waveform span:nth-child(5) { height: 16px; }
.v39-vb-waveform span:nth-child(6) { height: 12px; }
.v39-vb-waveform span:nth-child(7) { height: 7px; }
.v39-vb-waveform span:nth-child(8) { height: 14px; }
.v39-vb-waveform span:nth-child(9) { height: 10px; }
.v39-vb-waveform span:nth-child(10) { height: 6px; }
.v39-luxury-voice.is-playing .v39-vb-waveform span {
  animation: v39WaveBounce 0.75s infinite ease-in-out alternate;
}
.v39-luxury-voice.is-playing .v39-vb-waveform span:nth-child(odd) {
  animation-delay: 0.2s;
}
@keyframes v39WaveBounce {
  0% { transform: scaleY(0.55); opacity: 0.5; }
  100% { transform: scaleY(1.3); opacity: 1; }
}
.v39-vb-dur {
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.88;
}
.v39-luxury-voice .v-trans {
  display: none;
  font-size: 11.5px;
  line-height: 1.5;
  opacity: 0.9;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed rgba(148, 163, 184, 0.35);
}
.v39-luxury-voice .v-trans.open {
  display: block;
}

/* 6. 8 Brand-New Creative Distinct Chat Bubble Shapes (bshape-*) */
/* (1) Polaroid Frame 拍立得相纸 */
.bshape-polaroid_frame .chat-bubble {
  border-radius: 6px 6px 14px 14px !important;
  border: 4px solid #ffffff !important;
  border-bottom-width: 18px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
  position: relative;
}
.bshape-polaroid_frame .chat-bubble::after {
  content: "INSTAX · LIVE MEMORY";
  position: absolute;
  bottom: -15px;
  right: 6px;
  font-size: 7.5px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: #64748b;
  font-weight: 800;
  pointer-events: none;
}

/* (2) Vinyl Record 黑胶唱盘 */
.bshape-vinyl_record .chat-bubble {
  border-radius: 18px 24px 24px 18px !important;
  border-left: 5px solid #d97706 !important;
  padding-left: 15px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 16px rgba(15, 23, 42, 0.12) !important;
}
.bshape-vinyl_record .chat-bubble::before {
  content: "💿";
  position: absolute;
  top: -7px;
  left: -9px;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* (3) Liquid Glass Capsule 液态琉璃舱 */
.bshape-glass_capsule .chat-bubble {
  border-radius: 999px !important;
  padding: 10px 18px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.65), 0 8px 20px rgba(43, 84, 132, 0.12) !important;
}

/* (4) Stitched Linen 亚麻十字绣 */
.bshape-stitched_linen .chat-bubble {
  border-radius: 12px !important;
  outline: 1.5px dashed rgba(148, 163, 184, 0.65) !important;
  outline-offset: -4px !important;
  padding: 12px 15px !important;
}

/* (5) Tarot Gilded 鎏金星月牌 */
.bshape-tarot_gilded .chat-bubble {
  border-radius: 14px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.72) !important;
  box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.18), 0 6px 18px rgba(15, 23, 42, 0.1) !important;
  position: relative;
}
.bshape-tarot_gilded .chat-bubble::before {
  content: "✦";
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: 8px;
  color: #d4af37;
  pointer-events: none;
}

/* (6) Postage Stamp 复古邮票齿 */
.bshape-postage_stamp .chat-bubble {
  border-radius: 4px !important;
  border: 2px dotted rgba(100, 116, 139, 0.5) !important;
  padding: 11px 14px !important;
  position: relative;
}
.bshape-postage_stamp .chat-bubble::after {
  content: "AIR MAIL · 520";
  display: block;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  opacity: 0.55;
  margin-top: 3px;
  text-align: right;
  font-family: ui-monospace, monospace;
}

/* (7) Walkman Music Player 随身听音轨 */
.bshape-music_player .chat-bubble {
  border-radius: 16px !important;
  padding-top: 18px !important;
  position: relative;
  border: 1px solid rgba(148, 184, 226, 0.45) !important;
}
.bshape-music_player .chat-bubble::before {
  content: "▶ 00:52 ━━━●──── 03:20";
  position: absolute;
  top: 4px;
  left: 12px;
  right: 12px;
  font-size: 7.5px;
  font-family: ui-monospace, monospace;
  opacity: 0.62;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* (8) Origami Note 折角千纸鹤信笺 */
.bshape-origami_note .chat-bubble {
  border-radius: 16px 4px 16px 16px !important;
  border-top: 2px solid rgba(43, 84, 132, 0.35) !important;
  border-right: 6px solid rgba(43, 84, 132, 0.25) !important;
}

/* 4 New Bubble Color Palettes */
.bstyle-nebula_violet .chat-msg-row.user .chat-bubble { background: linear-gradient(135deg,#4c3b78,#2e234d) !important; color: #f5f3ff !important; }
.bstyle-nebula_violet .chat-msg-row.ai .chat-bubble { background: rgba(245,243,255,0.92) !important; color: #2e234d !important; }
.bstyle-rose_quartz .chat-msg-row.user .chat-bubble { background: linear-gradient(135deg,#9d4e6d,#6e324b) !important; color: #fff1f2 !important; }
.bstyle-rose_quartz .chat-msg-row.ai .chat-bubble { background: rgba(255,241,242,0.92) !important; color: #4c1d30 !important; }
.bstyle-vintage_denim .chat-msg-row.user .chat-bubble { background: linear-gradient(135deg,#2b5484,#1b3759) !important; color: #f0f7ff !important; }
.bstyle-vintage_denim .chat-msg-row.ai .chat-bubble { background: rgba(238,246,255,0.92) !important; color: #1b3759 !important; }
.bstyle-porcelain_blue .chat-msg-row.user .chat-bubble { background: linear-gradient(135deg,#3d6b78,#254650) !important; color: #f0fdfa !important; }
.bstyle-porcelain_blue .chat-msg-row.ai .chat-bubble { background: rgba(240,253,250,0.92) !important; color: #1e3a42 !important; }

/* 7. API Hub & Settings Vertical Collapsible Accordion (53256.jpg) */
.v39-accordion-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
}
.v39-accordion-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(30, 41, 59, 0.08);
  box-shadow: 0 6px 18px rgba(30, 41, 59, 0.04);
  overflow: hidden;
  transition: all 0.2s ease;
}
.v39-accordion-card.open {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(43, 84, 132, 0.28);
  box-shadow: 0 10px 26px rgba(30, 41, 59, 0.08);
}
.v39-accordion-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  cursor: pointer;
  user-select: none;
}
.v39-acc-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
}
.v39-acc-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(43, 84, 132, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.v39-accordion-card.open .v39-acc-ico {
  background: #2b5484;
  color: #ffffff;
}
.v39-acc-titles {
  min-width: 0;
  flex: 1;
}
.v39-acc-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v39-acc-sub {
  font-size: 10.5px;
  color: var(--soft);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v39-acc-chevron {
  font-size: 11px;
  font-weight: 800;
  color: #2b5484;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(43, 84, 132, 0.08);
  flex-shrink: 0;
}
.v39-acc-body {
  padding: 4px 15px 15px;
  border-top: 1px dashed rgba(30, 41, 59, 0.1);
}



/* ==========================================================================
   LILY BLUE OS v40 — COMPREHENSIVE UI, SPLASH, SCROLL, BUBBLE & OFFLINE THEMES
   ========================================================================== */

/* 1. Toast Float Wrap Fix (Never overflow off phone edges - fixes 53269.jpg) */
.toast-float {
  max-width: calc(100% - 28px) !important;
  width: max-content !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.45 !important;
  word-break: break-word !important;
  padding: 9px 15px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

/* 2. Critical Horizontal Scroll Fix for Mall, Takeout & All Flex Containers (fixes 53267.jpg) */
.app-scroll-body > *,
.rv3-wrap,
.ab3-wrap,
.rv3-wrap > *,
.ab3-wrap > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.v24-cat-rail,
.atelier-role-strip,
.summary-char-rail,
.wx-group-at-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.v24-cat-rail:active,
.atelier-role-strip:active {
  cursor: grabbing;
}
.v24-cat-chip,
.atelier-role-chip,
.summary-char-pill,
.pk-folder-pill {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

.v24-cat-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.v24-cat-expand-btn {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(43, 84, 132, 0.1);
  border: 1px solid rgba(43, 84, 132, 0.22);
  color: #1e3a5f;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.v24-cat-grid-drawer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(43, 84, 132, 0.15);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.v24-cat-grid-drawer .v24-cat-chip {
  justify-content: center;
  padding: 6px 6px;
  font-size: 10.5px;
}

/* 3. Exquisite Interactive Lock/Splash Screen (Fixes 53272.jpg) */
.lily-splash-screen {
  background:
    linear-gradient(165deg, #fbfdff 0%, #eef6ff 38%, #dcebfb 70%, #cfe3f7 100%) !important;
  justify-content: space-between !important;
  padding: 40px 26px 30px !important;
  box-sizing: border-box !important;
  user-select: none;
}
.lily-splash-aura-secondary {
  position: absolute;
  bottom: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 190, 240, 0.35) 0%, rgba(196, 222, 252, 0.12) 60%, transparent 78%);
  filter: blur(20px);
  pointer-events: none;
}
.lily-splash-rings .ring-astrolabe {
  width: 268px;
  height: 268px;
  border: 1px dashed rgba(98, 145, 198, 0.32);
  animation: lilyAstrolabeSpin 28s linear infinite;
}
@keyframes lilyAstrolabeSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.lily-splash-topbar {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #496a91;
  letter-spacing: 0.08em;
}
.lily-splash-topbar .lst-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(43, 84, 132, 0.06);
}
.lily-splash-clock-wrap {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-top: 6px;
}
.lily-splash-live-time {
  font-family: "Cormorant Garamond", "Plus Jakarta Sans", -apple-system, serif;
  font-size: 54px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #1f3652;
  text-shadow: 0 4px 18px rgba(255, 255, 255, 0.95);
}
.lily-splash-live-date {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #5e7ea4;
}
.lily-splash-emblem-shell {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.lily-splash-orbit-svg {
  position: absolute;
  inset: 0;
  animation: lilyAstrolabeSpin 20s linear infinite;
}
.lily-splash-emblem {
  margin-bottom: 0 !important;
  width: 58px !important;
  height: 58px !important;
  background: linear-gradient(145deg, #ffffff, #edf5ff) !important;
  box-shadow: 0 12px 28px rgba(43, 84, 132, 0.14), inset 0 1px 0 #ffffff !important;
}
.lily-splash-preview-card {
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(35, 68, 108, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  text-align: left;
}
.lily-splash-preview-card .lspc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b76b8;
  box-shadow: 0 0 0 4px rgba(59, 118, 184, 0.18);
  flex-shrink: 0;
}
.lily-splash-preview-card .lspc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lily-splash-preview-card .lspc-text strong {
  font-size: 11px;
  font-weight: 800;
  color: #1f3652;
}
.lily-splash-preview-card .lspc-text span {
  font-size: 9.8px;
  color: #5b799c;
  line-height: 1.35;
}
.lily-splash-unlock-btn {
  position: relative !important;
  bottom: auto !important;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(235, 245, 255, 0.9)) !important;
  border: 1.5px solid #ffffff !important;
  color: #234368 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  box-shadow: 0 10px 28px rgba(35, 68, 108, 0.14), inset 0 1px 0 #ffffff !important;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: lilyUnlockPulse 2.8s ease-in-out infinite;
}
.lily-splash-unlock-btn:hover,
.lily-splash-unlock-btn:active {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 32px rgba(35, 68, 108, 0.22), inset 0 1px 0 #ffffff !important;
}
@keyframes lilyUnlockPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(35, 68, 108, 0.12), 0 0 0 0 rgba(120, 168, 222, 0.35); }
  50% { box-shadow: 0 12px 32px rgba(35, 68, 108, 0.18), 0 0 0 8px rgba(120, 168, 222, 0); }
}
.lily-splash-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.lily-splash-petals i {
  position: absolute;
  display: block;
  width: 10px;
  height: 16px;
  border-radius: 80% 15% 80% 15%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(176, 210, 248, 0.55));
  box-shadow: 0 2px 8px rgba(90, 138, 195, 0.15);
  animation: lilyPetalFloat 9s ease-in-out infinite;
}
.lily-splash-petals .sp-p1 { top: 16%; left: 14%; animation-delay: 0s; }
.lily-splash-petals .sp-p2 { top: 24%; right: 15%; width: 12px; height: 18px; animation-delay: 1.5s; }
.lily-splash-petals .sp-p3 { top: 52%; left: 10%; width: 8px; height: 13px; animation-delay: 3s; }
.lily-splash-petals .sp-p4 { top: 64%; right: 12%; animation-delay: 2.2s; }
.lily-splash-petals .sp-p5 { top: 38%; left: 22%; width: 7px; height: 11px; animation-delay: 4.1s; }
.lily-splash-petals .sp-p6 { top: 74%; left: 20%; width: 9px; height: 14px; animation-delay: 0.8s; }
@keyframes lilyPetalFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.55; }
  50% { transform: translateY(-14px) rotate(18deg); opacity: 0.92; }
}

/* 4. 10 Bold, Sculptural New Chat Bubble Shapes (No '新' suffix, distinct silhouettes) */
/* (1) 蝶翼琉璃 (butterfly_wing) */
.bshape-butterfly_wing .chat-msg-row.ai .chat-bubble {
  border-radius: 4px 28px 10px 26px / 6px 24px 8px 28px !important;
  border: 1.5px solid rgba(138, 180, 232, 0.72) !important;
  border-left: 4px solid #5a8fd6 !important;
  box-shadow: 0 8px 22px rgba(68, 118, 188, 0.15), inset 0 0 14px rgba(255, 255, 255, 0.8) !important;
  position: relative;
}
.bshape-butterfly_wing .chat-msg-row.user .chat-bubble {
  border-radius: 28px 4px 26px 10px / 24px 6px 28px 8px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  border-right: 4px solid #a8d0ff !important;
  box-shadow: 0 8px 22px rgba(35, 68, 118, 0.22) !important;
  position: relative;
}
.bshape-butterfly_wing .chat-bubble::after {
  content: "🦋";
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 11px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
  pointer-events: none;
}

/* (2) 液态极光流体 (liquid_mercury) */
.bshape-liquid_mercury .chat-msg-row.ai .chat-bubble {
  border-radius: 26px 10px 28px 8px / 10px 28px 8px 26px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 3px 8px rgba(255, 255, 255, 0.92), inset 0 -3px 8px rgba(122, 168, 224, 0.25), 0 8px 20px rgba(30, 58, 95, 0.12) !important;
}
.bshape-liquid_mercury .chat-msg-row.user .chat-bubble {
  border-radius: 10px 26px 8px 28px / 28px 10px 26px 8px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.45), 0 8px 20px rgba(30, 58, 95, 0.2) !important;
}

/* (3) 古卷轴羊皮笺 (scroll_parchment) */
.bshape-scroll_parchment .chat-bubble {
  border-radius: 6px !important;
  border-top: 4px double rgba(168, 132, 84, 0.65) !important;
  border-bottom: 4px double rgba(168, 132, 84, 0.65) !important;
  border-left: 6px solid rgba(138, 102, 58, 0.55) !important;
  border-right: 6px solid rgba(138, 102, 58, 0.55) !important;
  padding: 11px 15px !important;
  box-shadow: 0 6px 16px rgba(60, 42, 18, 0.1) !important;
}

/* (4) 赛博切角机甲 (cyber_blade) */
.bshape-cyber_blade .chat-bubble {
  border-radius: 3px !important;
  clip-path: polygon(0 8px, 8px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 12px 100%, 0 calc(100% - 12px));
  border-left: 3px solid #38bdf8 !important;
  border-right: 2px solid rgba(56, 189, 248, 0.5) !important;
  padding: 11px 16px !important;
}

/* (5) 洛可可蕾丝茶会 (lace_teacup) */
.bshape-lace_teacup .chat-bubble {
  border-radius: 20px 6px 20px 6px !important;
  border: 2px dotted rgba(212, 148, 168, 0.72) !important;
  outline: 1px solid rgba(255, 255, 255, 0.85) !important;
  outline-offset: -4px !important;
  padding: 12px 16px !important;
  position: relative;
}
.bshape-lace_teacup .chat-bubble::before {
  content: "🫖";
  position: absolute;
  top: -8px;
  left: -6px;
  font-size: 11px;
  pointer-events: none;
}

/* (6) 猫爪肉垫软糖 (cat_jelly_paw) */
.bshape-cat_jelly_paw .chat-bubble {
  border-radius: 24px 24px 18px 18px !important;
  padding-top: 14px !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 7px 18px rgba(43, 84, 132, 0.12), inset 0 -3px 0 rgba(148, 184, 226, 0.28) !important;
  position: relative;
}
.bshape-cat_jelly_paw .chat-bubble::before {
  content: "🐾";
  position: absolute;
  top: 2px;
  right: 8px;
  font-size: 9.5px;
  opacity: 0.72;
  pointer-events: none;
}

/* (7) 环宇头等舱登机牌 (boarding_pass) */
.bshape-boarding_pass .chat-bubble {
  border-radius: 12px 4px 4px 12px !important;
  border: 1px solid rgba(74, 114, 160, 0.32) !important;
  border-right: 3px dashed rgba(74, 114, 160, 0.55) !important;
  padding: 14px 15px 10px !important;
  position: relative;
}
.bshape-boarding_pass .chat-bubble::before {
  content: "✈ FIRST CLASS · GATE 520";
  position: absolute;
  top: 3px;
  left: 12px;
  font-size: 7px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.12em;
  opacity: 0.6;
  font-weight: 800;
  pointer-events: none;
}

/* (8) 哥特玫瑰花窗 (gothic_arch) */
.bshape-gothic_arch .chat-bubble {
  border-radius: 22px 22px 6px 6px !important;
  border: 1.5px solid rgba(124, 142, 184, 0.65) !important;
  border-top: 3px solid #4a6fa5 !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(15, 23, 42, 0.12) !important;
}

/* (9) 水墨晕染云纹 (ink_cloud) */
.bshape-ink_cloud .chat-bubble {
  border-radius: 22px 8px 22px 8px !important;
  border-left: 3.5px solid #2b4c70 !important;
  border-bottom: 1.5px solid rgba(43, 76, 112, 0.35) !important;
  box-shadow: 4px 6px 16px rgba(30, 41, 59, 0.09) !important;
  position: relative;
}
.bshape-ink_cloud .chat-bubble::after {
  content: "印";
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 7.5px;
  padding: 0 2px;
  border: 1px solid rgba(190, 18, 60, 0.45);
  color: rgba(190, 18, 60, 0.65);
  border-radius: 2px;
  line-height: 1.1;
  font-family: serif;
  pointer-events: none;
}

/* (10) 复古透明磁带 (cassette_tape) */
.bshape-cassette_tape .chat-bubble {
  border-radius: 10px !important;
  border: 1.5px solid rgba(100, 116, 139, 0.48) !important;
  border-top: 5px solid rgba(59, 101, 152, 0.72) !important;
  padding-top: 15px !important;
  position: relative;
}
.bshape-cassette_tape .chat-bubble::before {
  content: "◎ ─── SIDE A · REC ─── ◎";
  position: absolute;
  top: 2px;
  left: 10px;
  right: 10px;
  text-align: center;
  font-size: 7px;
  font-family: ui-monospace, monospace;
  opacity: 0.58;
  letter-spacing: 0.06em;
  pointer-events: none;
}

/* 5. 10 Distinct Offline & Multi-Offline Beautification Themes (No identical horizontal lines!) */
/* Theme 1: 冰川横线信笺 (offtheme-glacier_ruled - classic ruled paper) */
.offtheme-glacier_ruled .lily-53211-paper {
  background: linear-gradient(180deg, #fafcfe 0%, #f5f9fd 100%);
  border: 1px solid rgba(182, 206, 234, 0.72);
}

/* Theme 2: 鎏金暗夜歌剧院 (offtheme-gilded_theater - dark velvet + gold border, NO horizontal lines) */
.lily-offline-novel-wrap.offtheme-gilded_theater {
  background: radial-gradient(circle at 50% 15%, #1e293b 0%, #0f172a 100%) !important;
}
.offtheme-gilded_theater .lily-53211-paper {
  background: linear-gradient(160deg, rgba(22, 31, 48, 0.96) 0%, rgba(15, 22, 36, 0.98) 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.58) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(212, 175, 55, 0.14) !important;
  padding: 22px 22px 18px 22px !important;
  color: #f1f5f9 !important;
}
.offtheme-gilded_theater .lily-53211-paper::before { display: none !important; }
.offtheme-gilded_theater .lily-53211-ruled-body { background-image: none !important; line-height: 2.05em !important; }
.offtheme-gilded_theater .lily-53211-headline { color: #facc15 !important; border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important; font-family: "Noto Serif SC", Georgia, serif !important; }
.offtheme-gilded_theater .lily-53211-para { color: #e2e8f0 !important; margin-bottom: 1.4em !important; line-height: 2.05em !important; }
.offtheme-gilded_theater .lily-53211-dlg { color: #fde047 !important; border-bottom-color: rgba(250, 204, 21, 0.45) !important; }
.offtheme-gilded_theater .lily-53211-paper-foot { color: #94a3b8 !important; border-top-color: rgba(212, 175, 55, 0.25) !important; }

/* Theme 3: 银盐宽画幅胶片分镜 (offtheme-film_storyboard - 35mm film sprocket holes on sides, NO horizontal lines) */
.lily-offline-novel-wrap.offtheme-film_storyboard {
  background: linear-gradient(180deg, #dde5ef 0%, #cfdbe9 100%) !important;
}
.offtheme-film_storyboard .lily-53211-paper {
  background: #fdfefe !important;
  border-radius: 10px !important;
  border-top: 8px solid #1e293b !important;
  border-bottom: 8px solid #1e293b !important;
  border-left: 18px dashed #1e293b !important;
  border-right: 18px dashed #1e293b !important;
  padding: 18px 18px 14px 18px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
}
.offtheme-film_storyboard .lily-53211-paper::before { display: none !important; }
.offtheme-film_storyboard .lily-53211-ruled-body { background-image: none !important; line-height: 1.98em !important; }
.offtheme-film_storyboard .lily-53211-headline {
  font-family: ui-monospace, "PingFang SC", monospace !important;
  background: #1e293b;
  color: #f8fafc !important;
  padding: 6px 11px !important;
  border-radius: 6px;
  font-size: 1.05em !important;
}
.offtheme-film_storyboard .lily-53211-para { margin-bottom: 1.35em !important; line-height: 1.98em !important; }

/* Theme 4: 森系雾绿植物标本手账 (offtheme-botanical_journal - dotted grid, sage botanical frame, NO horizontal lines) */
.lily-offline-novel-wrap.offtheme-botanical_journal {
  background: linear-gradient(180deg, #e3ede6 0%, #d8e6dc 100%) !important;
}
.offtheme-botanical_journal .lily-53211-paper {
  background-color: #fbfcfa !important;
  background-image: radial-gradient(rgba(104, 142, 115, 0.28) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
  border: 1.5px solid rgba(110, 148, 120, 0.5) !important;
  border-top: 10px solid rgba(124, 162, 134, 0.65) !important;
  border-radius: 18px !important;
  padding: 20px 20px 16px 20px !important;
}
.offtheme-botanical_journal .lily-53211-paper::before { display: none !important; }
.offtheme-botanical_journal .lily-53211-ruled-body { background-image: none !important; line-height: 2.02em !important; }
.offtheme-botanical_journal .lily-53211-headline { color: #264632 !important; border-bottom: 1.5px dotted rgba(104, 142, 115, 0.55) !important; }
.offtheme-botanical_journal .lily-53211-para { color: #2b3d32 !important; margin-bottom: 1.35em !important; line-height: 2.02em !important; }
.offtheme-botanical_journal .lily-53211-dlg { color: #1b4332 !important; }

/* Theme 5: 哥特花窗琉璃诗笺 (offtheme-stained_glass - arched prism border, NO horizontal lines) */
.lily-offline-novel-wrap.offtheme-stained_glass {
  background: linear-gradient(160deg, #e5e7f8 0%, #d8e4f8 50%, #e8dff5 100%) !important;
}
.offtheme-stained_glass .lily-53211-paper {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 243, 255, 0.92) 100%) !important;
  border-radius: 28px 28px 14px 14px !important;
  border: 2px solid rgba(139, 122, 198, 0.48) !important;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 12px 28px rgba(88, 72, 148, 0.12) !important;
  padding: 22px 20px 16px 20px !important;
}
.offtheme-stained_glass .lily-53211-paper::before { display: none !important; }
.offtheme-stained_glass .lily-53211-ruled-body { background-image: none !important; line-height: 2.05em !important; }
.offtheme-stained_glass .lily-53211-headline { text-align: center; color: #3b2d66 !important; border-bottom: 1px solid rgba(139, 122, 198, 0.35) !important; }
.offtheme-stained_glass .lily-53211-para { margin-bottom: 1.35em !important; line-height: 2.05em !important; color: #2e264d !important; }

/* Theme 6: 高定画报双栏杂志 (offtheme-editorial_magazine - drop-cap editorial layout, NO horizontal lines) */
.lily-offline-novel-wrap.offtheme-editorial_magazine {
  background: #eceff4 !important;
}
.offtheme-editorial_magazine .lily-53211-paper {
  background: #ffffff !important;
  border-radius: 4px !important;
  border: 1px solid #cbd5e1 !important;
  border-top: 5px solid #0f172a !important;
  padding: 24px 22px 18px 22px !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}
.offtheme-editorial_magazine .lily-53211-paper::before { display: none !important; }
.offtheme-editorial_magazine .lily-53211-ruled-body { background-image: none !important; line-height: 1.98em !important; }
.offtheme-editorial_magazine .lily-53211-headline {
  font-family: "Noto Serif SC", Georgia, serif !important;
  font-size: 1.28em !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid #0f172a !important;
  padding-bottom: 10px !important;
}
.offtheme-editorial_magazine .lily-53211-para { margin-bottom: 1.3em !important; line-height: 1.98em !important; }
.offtheme-editorial_magazine .lily-53211-para:first-of-type::first-letter {
  font-size: 2.1em;
  font-weight: 900;
  float: left;
  line-height: 1;
  margin-right: 6px;
  color: #1b3658;
  font-family: "Noto Serif SC", serif;
}

/* Theme 7: 云母宣纸朱砂卷轴 (offtheme-ancient_scroll - eastern xuan paper & vermilion frame, NO horizontal lines) */
.lily-offline-novel-wrap.offtheme-ancient_scroll {
  background: linear-gradient(180deg, #efeae1 0%, #e5dec9 100%) !important;
}
.offtheme-ancient_scroll .lily-53211-paper {
  background: #fcf9f2 !important;
  border-radius: 8px !important;
  border: 2px solid rgba(168, 68, 52, 0.45) !important;
  box-shadow: inset 0 0 0 3px #fcf9f2, inset 0 0 0 4px rgba(168, 68, 52, 0.25), 0 10px 24px rgba(68, 42, 24, 0.09) !important;
  padding: 22px 22px 16px 22px !important;
}
.offtheme-ancient_scroll .lily-53211-paper::before { display: none !important; }
.offtheme-ancient_scroll .lily-53211-ruled-body { background-image: none !important; line-height: 2.08em !important; }
.offtheme-ancient_scroll .lily-53211-headline { color: #7c2d12 !important; border-bottom: 1px solid rgba(168, 68, 52, 0.35) !important; font-family: "Songti SC", "Noto Serif SC", serif !important; }
.offtheme-ancient_scroll .lily-53211-para { color: #3b2f26 !important; margin-bottom: 1.35em !important; line-height: 2.08em !important; }
.offtheme-ancient_scroll .lily-53211-dlg { color: #7f1d1d !important; }

/* Theme 8: 霓虹全息神经档案 (offtheme-cyber_terminal - futuristic HUD glass, NO horizontal lines) */
.lily-offline-novel-wrap.offtheme-cyber_terminal {
  background: linear-gradient(180deg, #0b1322 0%, #11223a 100%) !important;
}
.offtheme-cyber_terminal .lily-53211-paper {
  background: rgba(15, 28, 48, 0.92) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-left: 4px solid #38bdf8 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 0 22px rgba(56, 189, 248, 0.08) !important;
  padding: 20px 20px 16px 20px !important;
  color: #e0f2fe !important;
}
.offtheme-cyber_terminal .lily-53211-paper::before { display: none !important; }
.offtheme-cyber_terminal .lily-53211-ruled-body { background-image: none !important; line-height: 2em !important; }
.offtheme-cyber_terminal .lily-53211-headline { color: #38bdf8 !important; border-bottom: 1px dashed rgba(56, 189, 248, 0.35) !important; }
.offtheme-cyber_terminal .lily-53211-para { color: #e0f2fe !important; margin-bottom: 1.35em !important; line-height: 2em !important; }
.offtheme-cyber_terminal .lily-53211-dlg { color: #7dd3fc !important; }
.offtheme-cyber_terminal .lily-53211-paper-foot { color: #7dd3fc !important; border-top-color: rgba(56, 189, 248, 0.25) !important; }

/* Theme 9: 洛可可蕾丝火漆情书 (offtheme-rose_lace_letter - romantic blush parchment, NO horizontal lines) */
.lily-offline-novel-wrap.offtheme-rose_lace_letter {
  background: linear-gradient(180deg, #f9ebee 0%, #f3dfe5 100%) !important;
}
.offtheme-rose_lace_letter .lily-53211-paper {
  background: #fffafb !important;
  border-radius: 22px !important;
  border: 2px dotted rgba(212, 132, 154, 0.65) !important;
  box-shadow: 0 10px 26px rgba(138, 62, 84, 0.08), inset 0 0 0 4px rgba(255, 240, 244, 0.9) !important;
  padding: 22px 20px 16px 20px !important;
}
.offtheme-rose_lace_letter .lily-53211-paper::before { display: none !important; }
.offtheme-rose_lace_letter .lily-53211-ruled-body { background-image: none !important; line-height: 2.02em !important; }
.offtheme-rose_lace_letter .lily-53211-headline { color: #831843 !important; border-bottom: 1px dashed rgba(212, 132, 154, 0.48) !important; }
.offtheme-rose_lace_letter .lily-53211-para { color: #4a1d2e !important; margin-bottom: 1.35em !important; line-height: 2.02em !important; }
.offtheme-rose_lace_letter .lily-53211-dlg { color: #9d174d !important; }

/* Theme 10: 极简无界呼吸纯白 (offtheme-minimal_float - clean floating cloud glass, zero lines) */
.lily-offline-novel-wrap.offtheme-minimal_float {
  background: linear-gradient(180deg, #eef4fb 0%, #f7fafe 100%) !important;
}
.offtheme-minimal_float .lily-53211-paper {
  background: rgba(255, 255, 255, 0.94) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 14px 36px rgba(30, 58, 95, 0.06) !important;
  padding: 24px 22px 18px 22px !important;
}
.offtheme-minimal_float .lily-53211-paper::before { display: none !important; }
.offtheme-minimal_float .lily-53211-ruled-body { background-image: none !important; line-height: 2.05em !important; }
.offtheme-minimal_float .lily-53211-headline { border-bottom: none !important; padding-bottom: 2px !important; }
.offtheme-minimal_float .lily-53211-para { margin-bottom: 1.35em !important; line-height: 2.05em !important; }

/* 6. Stylized Text/Meme Sticker Cards & Captioned Image Stickers (AI 100% understands the words!) */
.chat-meme-sticker-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  max-width: 186px;
  padding: 10px 13px;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, #f1f7ff 100%);
  border: 2px solid rgba(59, 108, 168, 0.25);
  box-shadow: 0 8px 20px rgba(24, 52, 86, 0.1), inset 0 1px 0 #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.chat-meme-sticker-card .cms-emoji {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 4px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.08));
}
.chat-meme-sticker-card .cms-img {
  max-width: 148px;
  max-height: 148px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin-bottom: 5px;
}
.chat-meme-sticker-card .cms-caption {
  font-size: 13px;
  font-weight: 900;
  color: #162a42;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 #ffffff;
  word-break: break-word;
}
.chat-meme-sticker-card .cms-meaning {
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: #527399;
  background: rgba(59, 108, 168, 0.09);
  padding: 2px 7px;
  border-radius: 999px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticker-cell {
  position: relative;
}
.sticker-cell .st-cap-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 1px 4px;
  border-radius: 5px;
  background: rgba(27, 54, 88, 0.82);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
}

/* ==========================================================================
   LILY BLUE OS V41 — PORCELAIN BLUE-WHITE MASTER OVERHAUL
   1. 100% Opaque Fluid-to-Typography Splash Screen (Zero Bleed-Through)
   2. Couple Avatars WebKit Scroll / White-Out Bug Fix
   3. Top Statusbar & App Topbar Non-Overlap + Real Chat Bubble Font Size
   4. "执光守候 · 背后守护" Desktop Bento Widget & Full-Screen Guardian Stage
   5. Staggered Vertical Porcelain Doll Pillar Gallery (查手机/反查手机/小剧场/约会/衣橱)
   6. Asymmetric Blue-White Magazine Collage Hub (世界书/总结/日记)
   7. Floating Celestial Prism Stage (纪念日) & Unified Offline Preset Hub
   ========================================================================== */

/* 1. Hide removed top blue pill & prevent topbar title overlap */
.v38-sb-api-pill {
  display: none !important;
}
.v41-tz-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(43, 84, 132, 0.14);
  color: #1b3658;
  font-size: 9.5px;
  font-weight: 800;
}

/* Never allow desktop or statusbar to bleed through when splash screen is visible */
#lilySplashScreen:not(.is-hidden) ~ .desktop-body,
#lilySplashScreen:not(.is-hidden) ~ .sys-statusbar {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 100% Opaque Fluid-to-Typography Splash Screen */
#lilySplashScreen.v41-fluid-splash {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9800 !important;
  background: linear-gradient(165deg, #0b192e 0%, #152f52 38%, #214978 72%, #35679c 100%) !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 22px 20px 34px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.55s !important;
}
#lilySplashScreen.v41-fluid-splash.is-hidden {
  opacity: 0 !important;
  transform: scale(1.04) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.v41-splash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.v41-splash-Aurora-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.v41-aurora-wave {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.55;
  animation: v41AuroraFloat 7s ease-in-out infinite alternate;
}
.v41-aurora-wave.w1 {
  width: 320px;
  height: 320px;
  top: -60px;
  left: -50px;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.55) 0%, transparent 70%);
}
.v41-aurora-wave.w2 {
  width: 360px;
  height: 360px;
  bottom: -80px;
  right: -60px;
  background: radial-gradient(circle, rgba(191, 219, 254, 0.48) 0%, transparent 70%);
  animation-delay: -2.5s;
}
.v41-aurora-wave.w3 {
  width: 260px;
  height: 260px;
  top: 36%;
  left: 18%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, transparent 72%);
  animation-delay: -4s;
}
@keyframes v41AuroraFloat {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(18px, -22px, 0) scale(1.12); }
}
.v41-splash-top {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: rgba(226, 240, 255, 0.88);
  font-weight: 700;
}
.v41-sp-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
}
.v41-sp-sig {
  letter-spacing: 0.1em;
  opacity: 0.8;
}
.v41-splash-center {
  position: relative;
  z-index: 3;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.v41-fluid-morph-stage {
  position: relative;
  padding: 24px 16px;
  width: 100%;
}
.v41-fluid-ribbons {
  position: relative;
  height: 44px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v41-fluid-ribbons .fr-line {
  position: absolute;
  width: 160px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), rgba(147, 197, 253, 0.95), transparent);
  animation: v41RibbonWave 2.8s ease-in-out infinite;
}
.v41-fluid-ribbons .fr-line.l2 {
  width: 210px;
  animation-delay: -0.9s;
  opacity: 0.7;
}
.v41-fluid-ribbons .fr-line.l3 {
  width: 120px;
  animation-delay: -1.8s;
  opacity: 0.5;
}
@keyframes v41RibbonWave {
  0%, 100% { transform: translateX(-24px) scaleX(0.75); opacity: 0.35; }
  50% { transform: translateX(24px) scaleX(1.25); opacity: 0.95; }
}
.v41-morph-clock {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 64px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 8px 28px rgba(8, 22, 44, 0.45), 0 0 24px rgba(186, 220, 255, 0.45);
  transition: filter 0.9s ease, transform 0.9s ease, opacity 0.9s ease;
}
.v41-morph-date {
  font-size: 11.5px;
  color: rgba(219, 234, 254, 0.92);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-top: 8px;
  margin-bottom: 24px;
}
.v41-morph-cn {
  display: flex;
  justify-content: center;
  gap: 5px;
  font-size: 21px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(147, 197, 253, 0.65);
  margin-bottom: 8px;
}
.v41-morph-cn span {
  display: inline-block;
  transition: all 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 0.06s);
}
/* Phase 1: Flowing liquid state before coalescing into characters */
.v41-fluid-morph-stage.is-flowing .v41-morph-cn span {
  filter: blur(10px);
  opacity: 0.18;
  transform: translateY(16px) scale(1.35) rotate(6deg);
  letter-spacing: 0.3em;
}
.v41-fluid-morph-stage.is-flowing .v41-morph-clock {
  filter: blur(6px);
  opacity: 0.55;
  transform: scale(0.94);
}
/* Phase 2: Coalesced into crisp crystal characters */
.v41-fluid-morph-stage.is-coalesced .v41-morph-cn span {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}
.v41-morph-en {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(191, 219, 254, 0.85);
  font-weight: 700;
  margin-bottom: 16px;
}
.v41-morph-quote {
  max-width: 280px;
  margin: 0 auto;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(240, 248, 255, 0.95);
  font-size: 11px;
  line-height: 1.6;
  backdrop-filter: blur(10px);
}
.v41-splash-foot {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: center;
}
.v41-enter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(224, 240, 255, 0.92));
  color: #142d4c;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(8, 20, 40, 0.35);
  animation: v41PulsePill 2.4s ease-in-out infinite;
}
.v41-ep-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2b6cb0;
  box-shadow: 0 0 8px #3182ce;
}
@keyframes v41PulsePill {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 2. Couple Avatars (情头) & Modal Scrolling White-Out Bug Fix (Fixes 53277.jpg) */
.modal-mask {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(14, 27, 46, 0.54) !important;
}
.modal-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  -webkit-transform: none !important;
}
.v39-cp-gallery-list {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 18px !important;
}
.v39-cp-gallery-list .v23-cp-card,
.v23-cp-card {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  margin-bottom: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(148, 184, 226, 0.45) !important;
  box-shadow: 0 6px 18px rgba(20, 44, 76, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  backface-visibility: visible !important;
  content-visibility: visible !important;
}

/* 3. Genuine Chat Bubble Font Size Enforcement (Group Chat & Single DM) */
.chat-messages-box .chat-bubble,
.chat-messages-box .chat-bubble .bubble-main-text {
  font-size: var(--chat-bubble-fs, 14px) !important;
  line-height: 1.58 !important;
}

/* 4. Desktop Page 1 "执光守候 · 背后守护" Bento Widget (Replaces TA的日记 in 53279.jpg) */
.v41-guardian-bento-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(165deg, #163052 0%, #274d7a 55%, #dceafa 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(27, 54, 88, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  box-sizing: border-box;
  cursor: pointer;
}
.v41-gbc-backdrop {
  position: absolute;
  inset: 0 0 28% 0;
  background-size: cover;
  background-position: center 14%;
  opacity: 0.94;
  transition: transform 0.35s ease;
}
.v41-guardian-bento-card:active .v41-gbc-backdrop {
  transform: scale(1.04);
}
.v41-gbc-aura {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 32, 58, 0.15) 0%, rgba(19, 41, 72, 0.28) 42%, rgba(235, 245, 255, 0.97) 72%, #f4f9ff 100%);
  pointer-events: none;
}
.v41-gbc-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v41-gbc-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(18, 38, 66, 0.72);
  color: #f0f7ff;
  font-size: 9.5px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.v41-gbc-dist {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #1b3658;
  font-size: 8.5px;
  font-weight: 800;
}
.v41-gbc-forecard {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 7px 8px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 16px rgba(20, 44, 76, 0.1);
}
.v41-gbc-user-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.v41-gbc-uava-frame {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 1.5px;
  background: linear-gradient(135deg, #60a5fa, #1e3a5f);
  flex-shrink: 0;
}
.v41-gbc-uava-frame img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid #fff;
}
.v41-gbc-utxt {
  min-width: 0;
  flex: 1;
}
.v41-gbc-utag {
  font-size: 8.5px;
  font-weight: 900;
  color: #2b5484;
  background: rgba(59, 130, 246, 0.12);
  padding: 1px 5px;
  border-radius: 5px;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v41-gbc-uname {
  font-size: 10.5px;
  font-weight: 900;
  color: #142842;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v41-gbc-vow {
  font-size: 9.5px;
  line-height: 1.38;
  color: #334e68;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 5px;
}
.v41-gbc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.v41-gbc-btn {
  padding: 2px 7px;
  border-radius: 999px;
  background: #1b3658;
  color: #fff;
  font-size: 8.8px;
  font-weight: 800;
}
.v41-gbc-btn.ghost {
  background: rgba(43, 84, 132, 0.1);
  color: #1b3658;
}

/* Full-Screen Guardian Modal Stage (Screenshot 9 "男人在背后守护着你的感觉" in Porcelain Blue-White) */
.v41-guardian-modal-stage {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: linear-gradient(180deg, #0f213a 0%, #dbeafe 48%, #f0f7ff 100%);
  overflow-y: auto;
}
.v41-gms-hero {
  position: relative;
  height: 330px;
  min-height: 310px;
  background-size: cover;
  background-position: center top;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}
.v41-gms-top-actions {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v41-gms-top-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 30, 54, 0.65);
  color: #f8fbff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.v41-gms-side-pills {
  position: relative;
  z-index: 3;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
}
.v41-gms-side-pills button {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 30, 54, 0.62);
  color: #e0f2fe;
  border: 1px solid rgba(186, 230, 253, 0.4);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  text-align: right;
}
.v41-gms-hero-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 110px;
  background: linear-gradient(180deg, transparent 0%, rgba(226, 239, 253, 0.94) 85%, #eaf3fc 100%);
  pointer-events: none;
}
.v41-gms-forecard {
  position: relative;
  z-index: 4;
  margin: -52px 12px 18px;
  padding: 16px 15px 20px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 247, 255, 0.96) 100%);
  border: 1.5px solid #ffffff;
  box-shadow: 0 16px 38px rgba(15, 34, 62, 0.14);
}
.v41-gms-identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.v41-gms-ava-crest {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #93c5fd, #1e3a8a, #dbeafe);
  box-shadow: 0 8px 22px rgba(30, 58, 138, 0.22);
  flex-shrink: 0;
  cursor: pointer;
}
.v41-gms-ava-crest img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
}
.v41-gms-id-meta {
  flex: 1;
  min-width: 0;
}
.v41-gms-title-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #dbeafe, #eff6ff);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #1e3a8a;
  font-size: 10px;
  font-weight: 900;
  margin-bottom: 4px;
  cursor: pointer;
}
.v41-gms-uname {
  font-size: 18px;
  font-weight: 900;
  color: #0f213a;
}
.v41-gms-usub {
  font-size: 10.5px;
  color: #476582;
  margin-top: 2px;
}
.v41-gms-vault-btn {
  width: 44px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(145deg, #eff6ff, #dbeafe);
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1e3a8a;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}
.v41-gms-vault-btn small {
  font-size: 9.5px;
  margin-top: 2px;
}
.v41-gms-meta-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 14px;
}
.v41-gms-mpill {
  padding: 8px 9px;
  border-radius: 13px;
  background: #ffffff;
  border: 1px solid rgba(148, 184, 226, 0.35);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v41-gms-mpill span {
  font-size: 9.5px;
  color: #64748b;
  font-weight: 700;
}
.v41-gms-mpill b {
  font-size: 11px;
  color: #1e3a5f;
  font-weight: 900;
}
.v41-gms-section-lbl {
  font-size: 11.5px;
  font-weight: 900;
  color: #1e3a5f;
  margin: 10px 0 8px;
}
.v41-gms-crystal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.v41-gms-crystal {
  padding: 12px 8px;
  border-radius: 16px;
  text-align: center;
  border: 1.5px solid #ffffff;
  box-shadow: 0 6px 16px rgba(30, 58, 95, 0.06);
  cursor: pointer;
}
.v41-gms-crystal.c-blue {
  background: linear-gradient(160deg, #e0f2fe 0%, #bae6fd 100%);
  color: #0c4a6e;
}
.v41-gms-crystal.c-ice {
  background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e3a8a;
}
.v41-gms-crystal.c-frost {
  background: linear-gradient(160deg, #f0f9ff 0%, #e0e7ff 100%);
  color: #1e40af;
}
.v41-gmc-ico {
  font-size: 20px;
  margin-bottom: 4px;
}
.v41-gmc-val {
  font-size: 18px;
  font-weight: 900;
  font-family: "Cormorant Garamond", Georgia, serif;
}
.v41-gmc-val small {
  font-size: 10px;
  margin-left: 2px;
}
.v41-gmc-lbl {
  font-size: 10px;
  font-weight: 800;
  opacity: 0.85;
  margin-top: 2px;
}
.v41-gms-vow-box {
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(147, 197, 253, 0.5);
  font-size: 12px;
  line-height: 1.68;
  color: #1e3a5f;
  font-weight: 600;
  cursor: pointer;
}

/* 5. Staggered Vertical Porcelain Doll Pillar Gallery (Screenshots 4, 5, 7 in 100% Original Blue-White) */
.v41-pillar-Outer-shell {
  border-radius: 22px;
  padding: 12px 10px 14px;
  background: linear-gradient(175deg, #0d1f38 0%, #17355c 48%, #254f80 100%);
  border: 1.5px solid rgba(186, 220, 255, 0.45);
  box-shadow: 0 14px 34px rgba(12, 28, 52, 0.24);
  color: #f0f7ff;
  overflow: hidden;
}
.v41-pillar-top-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 12px;
}
.v41-pillar-api-btn {
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f8fbff, #dbeafe);
  color: #142d4c;
  font-size: 10.5px;
  font-weight: 900;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.v41-pillar-gallery-stage {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 14px 4px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.v41-pillar-gallery-stage::-webkit-scrollbar {
  display: none;
}
.v41-pillar-scroll-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding: 4px 6px;
}
.v41-muse-pillar {
  width: 112px;
  min-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
}
.v41-muse-pillar.is-elevated {
  transform: translateY(-10px);
}
.v41-muse-pillar.is-lowered {
  transform: translateY(10px);
}
.v41-muse-pillar:active {
  transform: scale(0.96);
}
.v41-mp-crown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  font-size: 8px;
  color: rgba(191, 219, 254, 0.88);
  margin-bottom: 3px;
}
.v41-mp-crown i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191, 219, 254, 0.75), transparent);
}
.v41-mp-inner {
  width: 100%;
  border-radius: 6px;
  background: #ffffff;
  border: 1.5px solid rgba(219, 234, 254, 0.95);
  box-shadow: 0 10px 26px rgba(6, 16, 34, 0.38);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.v41-muse-pillar.is-active-pillar .v41-mp-inner {
  border: 2px solid #93c5fd;
  box-shadow: 0 0 20px rgba(147, 197, 253, 0.65);
}
.v41-mp-head {
  padding: 10px 8px 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
  text-align: left;
  border-bottom: 1px solid rgba(191, 219, 254, 0.6);
}
.v41-mp-vol {
  font-family: "Noto Serif SC", Georgia, serif;
  font-size: 12.5px;
  font-weight: 900;
  color: #142d4c;
  letter-spacing: 0.04em;
}
.v41-mp-subvol {
  font-size: 7px;
  letter-spacing: 0.16em;
  color: #6482a6;
  font-weight: 700;
  margin-top: 1px;
}
.v41-mp-title {
  font-size: 10.5px;
  font-weight: 900;
  color: #1e3a5f;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v41-mp-desc {
  font-size: 8.5px;
  color: #52708f;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v41-mp-art-wrap {
  position: relative;
  width: 100%;
  height: 196px;
  background: #162d4c;
  overflow: hidden;
}
.v41-mp-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.v41-mp-art-grad {
  position: absolute;
  inset: auto 0 0 0;
  height: 58px;
  background: linear-gradient(180deg, transparent 0%, rgba(12, 26, 48, 0.85) 100%);
  pointer-events: none;
}
.v41-mp-badge-bar {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 4px 7px;
  background: rgba(15, 32, 58, 0.78);
  border-top: 1px solid rgba(191, 219, 254, 0.35);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
}
.v41-mp-perfect {
  color: #bae6fd;
  font-weight: 900;
}
.v41-mp-ratio {
  color: #ffffff;
  font-weight: 700;
  font-family: ui-monospace, monospace;
}
.v41-mp-chevron-foot {
  width: 100%;
  padding-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.v41-mp-roman {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: #e0f2fe;
  letter-spacing: 0.08em;
  line-height: 1;
}
.v41-mp-star {
  font-style: normal;
  font-size: 8px;
  color: #93c5fd;
  margin-top: 2px;
}
.v41-pillar-bottom-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 2px;
  scrollbar-width: none;
}
.v41-pillar-bottom-cards::-webkit-scrollbar {
  display: none;
}
.v41-pbc-card {
  min-width: 76px;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
}
.v41-pbc-badge {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 800;
  color: #bae6fd;
  margin-bottom: 2px;
}
.v41-pbc-ico {
  font-size: 16px;
  line-height: 1.2;
}
.v41-pbc-name {
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 2px;
  white-space: nowrap;
}
.v41-pbc-sub {
  font-size: 8px;
  color: rgba(219, 234, 254, 0.8);
}

/* 6. Asymmetric Blue-White Magazine Collage Stage (Screenshot 8 Format in 100% Original Porcelain Blue-White) */
.v41-ed-collage-stage {
  border-radius: 22px;
  padding: 14px 12px;
  background: linear-gradient(165deg, #dce9f8 0%, #edf4fc 50%, #d8e8fa 100%);
  border: 1.5px solid #ffffff;
  box-shadow: 0 10px 28px rgba(27, 54, 88, 0.09);
  position: relative;
  overflow: hidden;
}
.v41-ed-top-bar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 8px;
}
.v41-ed-stat-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(22, 44, 74, 0.78);
  color: #f0f7ff;
  font-size: 10px;
  font-weight: 700;
}
.v41-ed-stat-pill b {
  color: #93c5fd;
  margin-left: 2px;
}
.v41-ed-ribbon {
  text-align: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(27, 54, 88, 0.72), transparent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.v41-ed-asym-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.v41-ed-card {
  position: relative;
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid #ffffff;
  box-shadow: 0 10px 24px rgba(24, 52, 88, 0.1);
  padding: 12px 10px 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.v41-ed-card:active {
  transform: scale(0.97);
}
.v41-ed-card.card-arch {
  margin-top: -6px;
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
}
.v41-ed-card.card-circle {
  background: linear-gradient(145deg, #e6f0fd 0%, #f5f9ff 100%);
}
.v41-ed-card.card-muse {
  margin-top: -8px;
  background: linear-gradient(180deg, #ffffff 0%, #e8f2fc 100%);
}
.v41-ed-wm {
  position: absolute;
  top: 2px;
  left: 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: rgba(43, 84, 132, 0.1);
  letter-spacing: 0.08em;
  pointer-events: none;
}
.v41-ed-wm-bottom {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: rgba(43, 84, 132, 0.18);
  letter-spacing: 0.14em;
  text-align: center;
  margin-top: 4px;
}
.v41-ed-pill {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1e3a5f, #3b6998);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  margin-bottom: 8px;
  box-shadow: 0 3px 10px rgba(30, 58, 95, 0.2);
}
.v41-ed-poster-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v41-ed-poster-head {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  font-weight: 800;
  color: #1e3a5f;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
}
.v41-ed-poster-art {
  width: 100%;
  height: 108px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(148, 184, 226, 0.35);
}
.v41-ed-poster-foot {
  font-size: 9.5px;
  color: #52708f;
  line-height: 1.4;
}
.v41-ed-arch-window {
  position: relative;
  width: 100%;
  height: 126px;
  border-radius: 60px 60px 10px 10px;
  background-size: cover;
  background-position: center 20%;
  border: 2px solid #ffffff;
  box-shadow: inset 0 0 12px rgba(20, 44, 76, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.v41-ed-arch-ribbon {
  width: 100%;
  padding: 5px 0;
  background: rgba(18, 38, 66, 0.68);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.1em;
}
.v41-ed-arch-foot {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #6482a6;
  text-align: center;
  margin-top: 6px;
  font-weight: 700;
}
.v41-ed-circle-medallion {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 4px auto;
  border-radius: 50%;
  background-size: cover;
  background-position: center 20%;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.15);
}
.v41-ed-circle-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(59, 130, 246, 0.5);
}
.v41-ed-muse-art {
  position: relative;
  width: 100%;
  height: 142px;
  border-radius: 12px;
  background-size: cover;
  background-position: center 15%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px;
}
.v41-ed-muse-script {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(15, 30, 56, 0.75);
}
.v41-ed-bottom-note {
  margin-top: 12px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(27, 54, 88, 0.78);
  color: #e0f2fe;
  font-size: 10px;
  line-height: 1.5;
}

/* 7. Floating Celestial Prism Stage (Screenshot 6 Format in 100% Original Porcelain Blue-White) */
.v41-celestial-prism-stage {
  position: relative;
  border-radius: 22px;
  padding: 14px 12px;
  background-size: cover;
  background-position: center;
  border: 1.5px solid rgba(191, 219, 254, 0.75);
  box-shadow: 0 12px 30px rgba(15, 34, 62, 0.2);
  overflow: hidden;
  margin-bottom: 10px;
}
.v41-cps-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 28, 52, 0.52) 0%, rgba(20, 46, 82, 0.35) 55%, rgba(12, 28, 52, 0.72) 100%);
  pointer-events: none;
}
.v41-cps-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.v41-cps-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 32, 58, 0.72);
  border: 1px solid rgba(191, 219, 254, 0.45);
  color: #f0f7ff;
  font-size: 10.5px;
  font-weight: 800;
}
.v41-cps-btn {
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: #142d4c;
  font-size: 10px;
  font-weight: 900;
  border: none;
  cursor: pointer;
}
.v41-cps-shards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px 0 10px;
}
.v41-prism-shard {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(8, 20, 42, 0.32);
  transition: transform 0.25s ease;
}
.v41-prism-shard.s-1 { transform: translateY(-6px) skewY(-3deg); }
.v41-prism-shard.s-2 { transform: translateY(6px) skewY(3deg); }
.v41-prism-shard.s-3 { transform: translateY(-8px) skewY(-2deg); }
.v41-prism-shard.s-4 { transform: translateY(5px) skewY(2deg); }
.v41-ps-art {
  height: 68px;
  background-size: cover;
  background-position: center 20%;
}
.v41-ps-glass {
  padding: 6px 5px;
  text-align: center;
  background: rgba(15, 32, 58, 0.76);
  color: #ffffff;
}
.v41-ps-title {
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v41-ps-days {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #bae6fd;
  line-height: 1.1;
  margin-top: 2px;
}
.v41-ps-days small {
  font-size: 8.5px;
  margin-left: 1px;
}
.v41-ps-date {
  font-size: 7.5px;
  opacity: 0.78;
}
.v41-cps-foot {
  position: relative;
  z-index: 2;
  font-size: 9.5px;
  color: rgba(224, 242, 254, 0.92);
  text-align: center;
}

/* 8. Unified Offline & Multi-Offline Preset Hub Styling */
.v41-offline-preset-hub {
  max-height: 410px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%) !important;
  border: 1.5px solid rgba(120, 168, 224, 0.65) !important;
  box-shadow: 0 14px 34px rgba(18, 42, 74, 0.16) !important;
  padding: 12px !important;
}
.v41-oph-box {
  padding: 8px 10px;
  border-radius: 13px;
  background: rgba(235, 245, 255, 0.65);
  border: 1px solid rgba(148, 184, 226, 0.38);
  margin-bottom: 7px;
}
.v41-oph-mini-btn {
  padding: 3px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #1b3658;
  border: 1px solid rgba(74, 126, 187, 0.35);
  font-size: 9.8px;
  font-weight: 800;
  cursor: pointer;
}
.v41-oph-mini-btn.primary {
  background: #1b3658;
  color: #ffffff;
  border-color: #1b3658;
}
.v41-oph-preset-card {
  padding: 6px 10px;
  border-radius: 11px;
  background: #ffffff;
  color: #1e3a5f;
  border: 1px solid rgba(148, 184, 226, 0.45);
  text-align: left;
  cursor: pointer;
  flex-shrink: 0;
}
.v41-oph-preset-card.on {
  background: linear-gradient(135deg, #1b3658, #2b5484);
  color: #ffffff;
  border-color: #1b3658;
}
.v41-oph-chip {
  padding: 5px 6px;
  border-radius: 9px;
  background: #ffffff;
  color: #1e3a5f;
  border: 1px solid rgba(148, 184, 226, 0.42);
  font-size: 9.8px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}
.v41-oph-chip.on,
.v41-off-wc-pill.on {
  background: #1b3658 !important;
  color: #ffffff !important;
  border-color: #1b3658 !important;
}
.v41-oph-sliders {
  padding: 8px 10px;
  border-radius: 13px;
  background: #ffffff;
  border: 1px solid rgba(148, 184, 226, 0.35);
}


/* ============================================================================
   LILY BLUE OS v41.2 OVERHAUL — FIXES FOR 53308, 53310, 53312, 53314, 53315
   ============================================================================ */

/* 1. Prevent Downward Scroll / Pull-to-Refresh from Ever Reloading or Showing Splash (53315.jpg) */
html, body, .host-stage, .phone, .desktop-body, .pager, .page,
.app-screen-layer, .app-scroll-body, .modal-mask, .modal-panel,
.chat-messages-box, .lily-53211-manuscript-stage, .v41-novel-space-stage {
  overscroll-behavior: none;
  overscroll-behavior-y: contain;
}

/* Remove backdrop-filter on .app-screen-layer so WebKit GPU compositor NEVER whites out scrolling cards (53310.jpg) */
.app-screen-layer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--app-layer-bg, linear-gradient(180deg, #f7f6f2 0%, #eef2f7 100%));
}

/* 2. Pure Porcelain White & Soft Mist-Blue Fluid-to-Typography Splash Screen (53308.jpg) */
#lilySplashScreen.v41-fluid-splash {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9800 !important;
  background: linear-gradient(165deg, #fbfdff 0%, #eef6ff 40%, #dcebfb 76%, #cbe0f6 100%) !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 48px 24px 40px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none;
}
#lilySplashScreen.v41-fluid-splash.is-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
#lilySplashScreen .v41-aurora-wave.w1 {
  background: radial-gradient(circle, rgba(135, 186, 242, 0.42) 0%, transparent 70%) !important;
}
#lilySplashScreen .v41-aurora-wave.w2 {
  background: radial-gradient(circle, rgba(168, 208, 248, 0.48) 0%, transparent 70%) !important;
}
#lilySplashScreen .v41-aurora-wave.w3 {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, transparent 72%) !important;
}
.v41-fluid-stream-emblem {
  position: relative;
  width: 180px;
  height: 90px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.1s ease;
}
.v41-silk-orb {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, rgba(176, 212, 248, 0.65) 55%, rgba(114, 166, 222, 0.15) 100%);
  box-shadow: 0 0 36px rgba(120, 174, 232, 0.45), inset 0 0 18px #ffffff;
  animation: v41SilkOrbPulse 3.2s ease-in-out infinite alternate;
}
@keyframes v41SilkOrbPulse {
  0% { transform: scale(0.92) rotate(0deg); border-radius: 48% 52% 54% 46%; }
  100% { transform: scale(1.08) rotate(25deg); border-radius: 54% 46% 48% 52%; }
}
#lilySplashScreen .v41-fluid-ribbons {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
}
#lilySplashScreen .v41-fluid-ribbons .fr-line {
  width: 200px;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, rgba(74, 134, 202, 0.65), rgba(255, 255, 255, 0.95), rgba(74, 134, 202, 0.55), transparent) !important;
}
.v41-morph-eyebrow {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #5b82ad;
  margin-bottom: 14px;
  transition: all 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
#lilySplashScreen .v41-morph-cn {
  font-family: "Songti SC", "Noto Serif SC", "Cormorant Garamond", serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  color: #1b3b63 !important;
  letter-spacing: 0.28em !important;
  text-shadow: 0 6px 22px rgba(96, 150, 212, 0.25) !important;
  display: flex;
  justify-content: center;
  gap: 8px;
}
#lilySplashScreen .v41-morph-cn span {
  display: inline-block;
  transition: all 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 0.11s);
}
#lilySplashScreen .v41-fluid-morph-stage.is-flowing .v41-morph-cn span {
  opacity: 0.08 !important;
  filter: blur(14px) !important;
  transform: translateY(18px) scale(1.18) rotate(-4deg) !important;
}
#lilySplashScreen .v41-fluid-morph-stage.is-coalesced .v41-morph-cn span {
  opacity: 1 !important;
  filter: blur(0px) !important;
  transform: translateY(0) scale(1) rotate(0deg) !important;
}
.v41-morph-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px auto 14px;
  color: #6b93be;
  font-size: 11px;
  transition: opacity 1.1s ease;
}
.v41-morph-divider span {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(84, 134, 190, 0.55), transparent);
}
.v41-morph-poem {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13.5px;
  color: #365d8a;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.v41-morph-poem span {
  display: inline-block;
  transition: all 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.35s + var(--j, 0) * 0.06s);
}
#lilySplashScreen .v41-fluid-morph-stage.is-flowing .v41-morph-poem span,
#lilySplashScreen .v41-fluid-morph-stage.is-flowing .v41-morph-eyebrow,
#lilySplashScreen .v41-fluid-morph-stage.is-flowing .v41-morph-divider {
  opacity: 0 !important;
  filter: blur(10px) !important;
  transform: translateY(12px) !important;
}
#lilySplashScreen .v41-fluid-morph-stage.is-coalesced .v41-morph-poem span,
#lilySplashScreen .v41-fluid-morph-stage.is-coalesced .v41-morph-eyebrow,
#lilySplashScreen .v41-fluid-morph-stage.is-coalesced .v41-morph-divider {
  opacity: 1 !important;
  filter: blur(0px) !important;
  transform: translateY(0) !important;
}
.v41-enter-whisper {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #3b6594;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(84, 134, 190, 0.14);
}
.v41-ew-line {
  width: 18px;
  height: 1px;
  background: rgba(59, 101, 148, 0.45);
}

/* 3. Desktop Page 1 Clean Left Bento Widget (.v41-clean-guardian-bento — 53312.jpg) */
.v41-clean-guardian-bento {
  cursor: pointer;
}
.v41-cgb-role-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(43, 84, 132, 0.1);
  color: #2b5484;
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.v41-cgb-avatar-shell {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #ffffff, #bbd6f5);
  box-shadow: 0 4px 12px rgba(27, 54, 88, 0.12);
  flex-shrink: 0;
  display: block;
}
.v41-cgb-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.v41-cgb-live-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3b82f6;
  border: 1.5px solid #ffffff;
}

/* 4. Live Real-Time Synced Clock Bar Inside Main Content Body (正文里面内容做一个时间) */
.v41-content-live-time-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 11px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(235, 245, 255, 0.92) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1px solid rgba(148, 184, 226, 0.45);
  box-shadow: 0 3px 10px rgba(24, 52, 88, 0.04);
  font-size: 10.5px;
  color: #1e3a5f;
  flex-shrink: 0;
}
.v41-cltb-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  min-width: 0;
}
.v41-cltb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
  flex-shrink: 0;
}
.v41-cltb-select {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(74, 126, 187, 0.35);
  background: #ffffff;
  color: #1b3658;
  font-size: 9.8px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
}

/* 5. Fix Worldbook & Summary Magazine Collage Typography & High-Fashion Layout (53314.jpg & 53297.jpg) */
.v41-ed-arch-foot {
  font-size: 7.5px !important;
  letter-spacing: 0.09em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #5b799c !important;
  text-align: center !important;
  margin-top: 6px !important;
  font-weight: 800 !important;
}
.v41-ed-pill {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 6. Native Full-Screen Couple Avatars App Grid (Fixes 53310.jpg Whiteout) */
.v41-cp-native-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-bottom: 20px;
}
.v41-cp-pair-tile {
  background: #ffffff;
  border: 1.5px solid rgba(148, 184, 226, 0.45);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 6px 16px rgba(20, 44, 76, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
}
.v41-cp-pair-tile.on {
  border: 2px solid #1b3658;
  background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%);
}
.v41-cp-tile-avas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 13px;
  background: rgba(230, 241, 253, 0.55);
  cursor: pointer;
}
.v41-cp-tile-avas img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

/* 7. Explicit Side-by-Side 发送 AND ✨ 回复 Buttons */
.v41-btn-send {
  padding: 0 13px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #e8f1fc !important;
  color: #1b3658 !important;
  border: 1px solid rgba(74, 126, 187, 0.4) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.v41-btn-reply {
  padding: 0 14px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #1b3658, #2b5484) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(27, 54, 88, 0.22) !important;
}
.chat-send-btn.v41-labeled-send {
  width: auto !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  gap: 3px !important;
}
.chat-reply-btn.v41-labeled-reply {
  width: auto !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  gap: 3px !important;
  background: linear-gradient(135deg, #1b3658, #2b5484) !important;
  color: #ffffff !important;
}

/* 8. Dedicated Full-Screen Continuous Novel Reader Space (📖 独立长文小说空间) */
.v41-novel-space-banner {
  padding: 11px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1b3658 0%, #2b5484 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(27, 54, 88, 0.18);
}
.v41-novel-space-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #f7fbff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 184, 226, 0.45);
}
.v41-novel-continuous-page {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 18px 36px;
  line-height: 1.95;
  color: #162a42;
  font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 31px,
    rgba(130, 172, 220, 0.18) 31px,
    rgba(130, 172, 220, 0.18) 32px
  );
}
.v41-novel-continuous-page.paper-ivory {
  background-color: #fcfaf2;
  color: #2c241b;
}
.v41-novel-continuous-page.paper-night {
  background-color: #101e33;
  color: #e2ecf8;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 31px,
    rgba(148, 184, 226, 0.08) 31px,
    rgba(148, 184, 226, 0.08) 32px
  );
}
.v41-novel-chapter-divider {
  margin: 22px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(74, 126, 187, 0.28);
  font-size: 15px;
  font-weight: 800;
  color: #1b3658;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.v41-novel-continuous-page.paper-night .v41-novel-chapter-divider {
  color: #93c5fd;
  border-bottom-color: rgba(147, 197, 253, 0.25);
}


/* ============================================================================
   LILY BLUE OS v42 HAUTE EDITORIAL OVERHAUL — LAYOUT, CLIPPING & PERFORMANCE FIXES
   ============================================================================ */

/* 1. Fix Bottom Bar Reply Button Clipping in Single/Multi/Group Offline & Novel Space (53333.jpg & 53335.jpg) */
.lily-novel-bottom-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid rgba(168, 198, 232, 0.45) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
.lily-nbb-plus {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-shrink: 0 !important;
  font-size: 15px !important;
}
.lily-nbb-inp {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 0 !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  box-sizing: border-box !important;
}
.v41-btn-send {
  padding: 0 11px !important;
  height: 34px !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.v41-btn-reply {
  padding: 0 12px !important;
  height: 34px !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* 2. Prevent Topbar Buttons & Segmented Nav Pills from Wrapping into Ugly Vertical Stacks (53321.jpg & 53323.jpg) */
.topbar {
  gap: 6px !important;
  padding-inline: 10px !important;
}
.topbar-title {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.topbar-title span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
#appTopbarRight {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.topbar-action-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
}
.atelier-seg-nav {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important;
}
.atelier-seg-btn {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 7px 4px !important;
  font-size: 10.5px !important;
}

/* 3. High-Aesthetic Home Screen Instant Film Bento Card (53327.jpg Replacement) */
.v42-film-thumb-shell {
  border-radius: 12px !important;
  width: 46px !important;
  height: 46px !important;
  padding: 2px !important;
  background: linear-gradient(135deg, #ffffff 0%, #c6ddf5 100%) !important;
  box-shadow: 0 5px 14px rgba(24, 52, 88, 0.14) !important;
}
.v42-film-thumb-img {
  border-radius: 10px !important;
  object-position: center center !important;
}

/* 4. Clean 2x2 High-Fashion Editorial Archive Grid for Lily Codex & Summary (53321.jpg Fix) */
.v42-clean-bento-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.v42-clean-bento-grid .v41-ed-card {
  margin-top: 0 !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(168, 202, 238, 0.55) !important;
  box-shadow: 0 6px 18px rgba(24, 52, 88, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.v42-ed-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.v42-ed-card-top .v41-ed-pill {
  margin-bottom: 0 !important;
  font-size: 9px !important;
  padding: 2.5px 8px !important;
}
.v42-ed-idx {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  color: #6482a6;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.v42-ed-art-box {
  position: relative;
  width: 100%;
  height: 112px;
  border-radius: 11px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(148, 184, 226, 0.35);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 6px 8px;
}
.v42-ed-art-Box::after,
.v42-ed-art-box::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 44px;
  background: linear-gradient(180deg, transparent, rgba(15, 30, 56, 0.62));
  pointer-events: none;
}
.v42-ed-art-tag {
  position: relative;
  z-index: 2;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffffff;
}
.v42-ed-card-title {
  font-size: 12px;
  font-weight: 800;
  color: #162a42;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5. Transform Dark Staggered Doll Pillar Box into Airy Porcelain-Glacier Editorial Film Gallery (53325.jpg Fix) */
.v41-pillar-Outer-shell {
  background: linear-gradient(165deg, #f0f6fe 0%, #ffffff 52%, #e6f0fc 100%) !important;
  border: 1.5px solid rgba(156, 192, 232, 0.65) !important;
  box-shadow: 0 8px 24px rgba(24, 52, 88, 0.07) !important;
  color: #162a42 !important;
  padding: 10px 10px 12px !important;
}
.v41-pillar-top-strip {
  background: rgba(219, 234, 254, 0.55) !important;
  border: 1px solid rgba(148, 184, 226, 0.45) !important;
  margin-bottom: 8px !important;
}
.v41-pillar-top-strip span {
  color: #1b3658 !important;
  font-size: 10.5px !important;
}
.v41-pillar-api-btn {
  background: linear-gradient(135deg, #1b3658, #2b5484) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(27, 54, 88, 0.18) !important;
}
.v41-pillar-gallery-stage {
  padding: 4px 2px 6px !important;
}
.v41-muse-pillar {
  width: 144px !important;
  min-width: 144px !important;
  transform: none !important;
}
.v41-muse-pillar.is-elevated,
.v41-muse-pillar.is-lowered {
  transform: none !important;
}
.v41-mp-crown,
.v41-mp-chevron-foot {
  display: none !important;
}
.v41-mp-inner {
  border-radius: 14px !important;
  border: 1px solid rgba(156, 192, 232, 0.65) !important;
  box-shadow: 0 6px 16px rgba(24, 52, 88, 0.08) !important;
}
.v41-mp-art-wrap {
  height: 132px !important;
  order: -1 !important;
}
.v41-mp-head {
  padding: 9px 10px !important;
  background: #ffffff !important;
  border-bottom: none !important;
}
.v41-mp-vol {
  font-size: 10.5px !important;
  color: #2b5484 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.v41-mp-title {
  font-size: 11.5px !important;
  margin-top: 3px !important;
}

/* 6. GPU Scroll Acceleration for Offline Manuscript Stage (Fixes 53335.jpg Lag) */
.lily-53211-manuscript-stage,
.v41-novel-continuous-page {
  will-change: scroll-position;
  transform: translateZ(0);
}
.lily-53211-paper {
  contain: layout style;
}


/* ============================================================================
   LILY BLUE OS v43 — PURE BLANK LIQUID-CRYSTAL WIDGETS & IRREGULAR EDITORIAL UI
   ============================================================================ */

/* 1. High-Precision Tactile Range Sliders (Fixes all Word-Count & Font-Size Sliders) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(74, 126, 187, 0.48), rgba(148, 190, 235, 0.85)) !important;
  outline: none !important;
  cursor: pointer !important;
  touch-action: pan-x pan-y !important;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #2b5484 !important;
  box-shadow: 0 2px 8px rgba(24, 52, 88, 0.25), inset 0 1px 1px #ffffff !important;
  cursor: grab !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.18);
  cursor: grabbing !important;
  box-shadow: 0 0 0 4px rgba(74, 126, 187, 0.22), 0 3px 10px rgba(24, 52, 88, 0.32) !important;
}

/* Ensure narrative font size variable cascades into all long-prose children */
.lily-novel-sheet,
.lily-53211-paper,
.lily-53211-ruled-body,
.lily-53211-para,
.v41-novel-continuous-page,
.novel-space-prose,
. novel-space-prose .lily-53211-para,
.shiyi-prose-box,
.shiyi-prose-box .lily-53211-para,
.nb-body,
.diary-content {
  font-size: var(--narrative-fs, 16px);
}

/* 2. Page 1 Clock & Frosted Whisper Header */
.v43-clock-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.v43-serif-clock {
  font-family: "Cormorant Garamond", "Bodoni Moda", Georgia, serif !important;
  font-size: 44px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: #162a42 !important;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.9) !important;
  line-height: 1 !important;
}
.v43-frost-date-pill {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(228, 240, 253, 0.52)) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 4px 14px rgba(30, 58, 95, 0.06), inset 0 1px 0 #ffffff !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  color: #2b4c70 !important;
}
.v43-diamond-dot {
  color: #5b87b8;
  font-size: 9px;
  margin-right: 2px;
}

/* 3. Page 1 Hero Widget: 弦月星轨 · 留白琉璃画境 (.v43-crescent-atelier-card) */
.v43-crescent-atelier-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1.12fr 22px 0.98fr !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 10px !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68) 0%, rgba(226, 239, 253, 0.42) 55%, rgba(242, 248, 255, 0.64) 100%) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 12px 30px rgba(24, 52, 88, 0.08),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.98),
    inset 0 -1px 3px rgba(138, 178, 224, 0.25) !important;
  overflow: hidden !important;
}
.v43-ca-canvas-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.62), rgba(214, 231, 250, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 2px 8px rgba(148, 184, 226, 0.16);
}
.v43-ca-media {
  width: 100% !important;
  height: 100% !important;
  min-height: 112px !important;
  border-radius: 17px !important;
  background-size: cover !important;
  background-position: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
.v43-ca-reticle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #4a6f96;
  pointer-events: none;
  padding: 8px;
  text-align: center;
}
.v43-ca-plus-ring {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px dashed rgba(74, 111, 150, 0.55);
  background: rgba(255, 255, 255, 0.68);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 300;
  color: #2b5484;
}
.v43-ca-reticle small {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: #5c7d9e;
  font-weight: 600;
}
.v43-ca-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: rgba(74, 111, 150, 0.45);
  border-style: solid;
}
.v43-ca-corner.tl { top: 7px; left: 7px; border-width: 1px 0 0 1px; }
.v43-ca-corner.tr { top: 7px; right: 7px; border-width: 1px 1px 0 0; }
.v43-ca-corner.bl { bottom: 7px; left: 7px; border-width: 0 0 1px 1px; }
.v43-ca-corner.br { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }
.v43-ca-vert-stamp {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  color: rgba(43, 84, 132, 0.62);
  font-weight: 700;
  pointer-events: none;
}
.v43-ca-medallion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}
.v43-ca-med-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #e1eefc);
  border: 1px solid rgba(148, 184, 226, 0.8);
  box-shadow: 0 3px 10px rgba(24, 52, 88, 0.1);
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #2b5484;
}
.v43-ca-pearl-line {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}
.v43-ca-pearl-line i {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(120, 160, 206, 0.65);
}
.v43-ca-prism-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
}
.v43-ca-prism-bar {
  flex: 1;
  padding: 5px 9px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(232, 242, 254, 0.48));
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 10px rgba(24, 52, 88, 0.04), inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.v43-ca-prism-bar.p2 {
  margin-left: 4px;
  background: linear-gradient(135deg, rgba(240, 247, 255, 0.86), rgba(216, 233, 252, 0.58));
}
.v43-p-eyebrow {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  color: #5b7c9e;
  font-weight: 700;
  line-height: 1.1;
}
.v43-ca-prism-bar strong {
  font-size: 11px;
  font-weight: 800;
  color: #162a42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* 4. Page 1 Twin Cards: 留白银盐显影匣 & 冰晶声波唱片匣 (.v43-glass-bento-twin) */
.v43-glass-bento-twin {
  height: 100%;
  padding: 9px 10px;
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.72) 0%, rgba(230, 241, 253, 0.46) 100%);
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  border: 1.2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(24, 52, 88, 0.06), inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
}
.v43-gbt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.v43-gbt-tag {
  font-size: 10.5px;
  font-weight: 800;
  color: #162a42;
  display: flex;
  align-items: center;
  gap: 4px;
}
.v43-gbt-tag i {
  font-style: normal;
  color: #4a78a8;
  font-size: 10px;
}
.v43-gbt-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(156, 190, 228, 0.55);
  font-size: 8.5px;
  font-weight: 700;
  color: #2b5484;
  cursor: pointer;
  white-space: nowrap;
}
.v43-gbt-body {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  min-width: 0;
}
.v43-gbt-aperture {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(216, 232, 250, 0.48));
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 4px rgba(140, 175, 215, 0.22), 0 3px 8px rgba(24, 52, 88, 0.06);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.v43-gbt-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v43-gbt-aperture-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #4a6f96;
  line-height: 1;
}
.v43-gbt-aperture-empty span {
  font-size: 14px;
}
.v43-gbt-aperture-empty small {
  font-size: 6.5px;
  letter-spacing: 0.12em;
  margin-top: 2px;
  font-weight: 700;
}
.v43-crystal-vinyl {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(214,232,252,0.65) 48%, rgba(168,198,232,0.45) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 10px rgba(24, 52, 88, 0.08), inset 0 0 8px rgba(255, 255, 255, 0.9) !important;
}
.v43-crystal-vinyl .desk-cd {
  background: conic-gradient(from 0deg, rgba(255,255,255,0.7), rgba(176,206,240,0.45), rgba(255,255,255,0.85), rgba(176,206,240,0.45), rgba(255,255,255,0.7)) !important;
  background-size: cover !important;
  background-position: center !important;
}
.v43-gbt-meta {
  flex: 1;
  min-width: 0;
}
.v43-gbt-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #162a42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v43-gbt-sub {
  font-size: 9.5px;
  color: #4a6785;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.v43-gbt-hairline {
  height: 2.5px;
  border-radius: 999px;
  background: rgba(156, 190, 228, 0.28);
  overflow: hidden;
}
.v43-gbt-hairline span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7eb0e2, #2b5484);
}
.v43-gbt-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.v43-gbt-foot small {
  font-size: 8.5px;
  color: #5b7c9e;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v43-gbt-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.v43-glass-ico-btn {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(156, 190, 228, 0.55);
  color: #1b3658;
  font-size: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

/* 5. Page 2 Widgets: 浮光时计, 晴雨风物, 双联折页手札, 流光拾句 */
.v43-crystal-widget-card {
  position: relative;
  height: 100%;
  padding: 10px 11px;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.72) 0%, rgba(226, 239, 253, 0.45) 100%);
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  border: 1.2px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(24, 52, 88, 0.06), inset 0 1.5px 1px #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}
.v43-cwc-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.36;
  pointer-events: none;
  z-index: 0;
}
.v43-cwc-bg.has-img {
  opacity: 0.45;
}
.v43-crystal-widget-card > *:not(.v43-cwc-bg) {
  position: relative;
  z-index: 1;
}
.v43-cwc-vert {
  position: absolute !important;
  right: 6px;
  top: 32px;
  writing-mode: vertical-rl;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 7.5px;
  letter-spacing: 0.2em;
  color: rgba(59, 89, 122, 0.48);
  font-weight: 700;
  pointer-events: none;
}
.v43-cwc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.v43-cwc-title {
  font-size: 11px;
  font-weight: 800;
  color: #162a42;
  letter-spacing: 0.03em;
}
.v43-cwc-badge {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(156, 190, 228, 0.5);
  font-size: 8.5px;
  font-weight: 700;
  color: #2b5484;
}
.v43-cwc-serif-hero {
  font-family: "Cormorant Garamond", "Bodoni Moda", Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: #142842;
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin: 2px 0;
}
.v43-cwc-temp-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.v43-cwc-wind {
  font-size: 9.5px;
  font-weight: 700;
  color: #3b597a;
}
.v43-cwc-desc {
  font-size: 10px;
  font-weight: 700;
  color: #1e3a5f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v43-cwc-micro {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #5b7c9e;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v43-cwc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.v43-cwc-sub {
  font-size: 8.5px;
  color: #4a6785;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v43-cwc-mini-btn {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(148, 184, 226, 0.55);
  font-size: 9.5px;
  font-weight: 700;
  color: #1b3658;
  cursor: pointer;
}
.v43-cwc-pill-btn {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2b5484, #1b3658);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Page 2 Split Folio Note Card (.v43-split-folio-card) */
.v43-split-folio-card {
  display: grid !important;
  grid-template-columns: 0.36fr 0.64fr !important;
  gap: 9px !important;
  padding: 9px !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(228, 240, 253, 0.46)) !important;
  backdrop-filter: blur(26px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(185%) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 26px rgba(24, 52, 88, 0.06), inset 0 1px 0 #ffffff !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.v43-sfc-frame {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.68), rgba(214, 232, 250, 0.38));
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 2px 6px rgba(140, 175, 215, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.v43-sfc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #4a6f96;
}
.v43-sfc-plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px dashed rgba(74, 111, 150, 0.55);
  display: grid;
  place-items: center;
  font-size: 13px;
}
.v43-sfc-empty small {
  font-size: 8px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.v43-sfc-frame-tag {
  position: absolute;
  bottom: 5px;
  left: 7px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 7.5px;
  letter-spacing: 0.16em;
  color: #3b597a;
  font-weight: 700;
}
.v43-sfc-sheet {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.v43-sfc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v43-sfc-title {
  font-size: 11px;
  font-weight: 800;
  color: #162a42;
}
.v43-sfc-badge {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #4a6f96;
  font-weight: 700;
}
.v43-sfc-paper {
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.v43-sfc-main {
  font-size: 10px;
  line-height: 1.38;
  color: #162a42;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v43-sfc-reply {
  font-size: 9px;
  line-height: 1.32;
  color: #3b597a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v43-sfc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  color: #5b7c9e;
  font-weight: 600;
}

/* Page 2 Bottom Whisper Ribbon (.v43-whisper-ribbon-card) */
.v43-whisper-ribbon-card {
  position: relative;
  height: 100%;
  padding: 7px 11px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(228, 240, 253, 0.48));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(24, 52, 88, 0.05), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}
.v43-wrc-seal {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(214, 232, 250, 0.55));
  border: 1px solid rgba(156, 190, 228, 0.65);
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  color: #2b5484;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.v43-wrc-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.v43-wrc-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 800;
  color: #2b5484;
}
.v43-wrc-top small {
  font-size: 8.5px;
  color: #5b7c9e;
  cursor: pointer;
}
.v43-wrc-body {
  font-size: 10px;
  color: #162a42;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.v43-wrc-author {
  font-size: 8.5px;
  color: #5b7c9e;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* 6. Page 3 Widgets: 冰晶折光明信片, 四维冰晶光柱, 银盐光栅票根 */
.v43-blank-postcard {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.72), rgba(218, 234, 252, 0.45)) !important;
  backdrop-filter: blur(26px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(185%) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 24px rgba(24, 52, 88, 0.06), inset 0 1px 0 #ffffff !important;
}
.v43-blank-postcard:not(.has-img) .lwp-place,
.v43-blank-postcard:not(.has-img) .lwp-date,
.v43-blank-postcard:not(.has-img) .lwp-note {
  color: #162a42 !important;
  text-shadow: none !important;
}
.v43-blank-postcard:not(.has-img) .lwp-grad {
  background: linear-gradient(180deg, transparent, rgba(214, 232, 250, 0.38)) !important;
}
.v43-bp-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #4a6f96;
  pointer-events: none;
}
.v43-bp-empty span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed rgba(74, 111, 150, 0.5);
  display: grid;
  place-items: center;
  font-size: 14px;
}
.v43-bp-empty small {
  font-size: 8px;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.v43-crystal-pillars-shell {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.72), rgba(226, 239, 253, 0.45)) !important;
  backdrop-filter: blur(26px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(185%) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 24px rgba(24, 52, 88, 0.06), inset 0 1px 0 #ffffff !important;
  padding: 8px 9px !important;
}
.v43-cps-head,
.v43-cps-stage {
  position: relative;
  z-index: 1;
}
.v43-cp-tubes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  height: 86px;
  align-items: stretch;
  padding-top: 2px;
}
.v43-cp-tube {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(214, 232, 252, 0.46) 100%);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 2px #ffffff, 0 4px 10px rgba(24, 52, 88, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px;
}
.v43-cp-tube.t2,
.v43-cp-tube.t4 {
  transform: translateY(3px);
}
.v43-cpt-ico {
  font-size: 9px;
  color: #4a78a8;
}
.v43-cpt-lbl {
  writing-mode: vertical-rl;
  font-size: 8.5px;
  font-weight: 700;
  color: #2b4c70;
  letter-spacing: 0.08em;
}
.v43-cpt-val {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  color: #142842;
}
.v43-cp-wish-box,
.v43-cp-dial-box {
  height: 84px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.92);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.v43-cpw-eyebrow {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #5b7c9e;
  font-weight: 700;
}
.v43-cpw-quote {
  font-size: 10.5px;
  font-weight: 700;
  color: #162a42;
  line-height: 1.35;
}
.v43-cpw-hint {
  font-size: 8.5px;
  color: #3b597a;
}
.v43-cp-dial-box {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.v43-cpd-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(120, 162, 212, 0.65);
  background: radial-gradient(circle, #ffffff, rgba(219, 234, 254, 0.6));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v43-cpd-ring span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  color: #162a42;
}
.v43-cpd-ring small {
  font-size: 6px;
  letter-spacing: 0.1em;
  color: #5b7c9e;
}

.v43-blank-ticket .lwk-stub:not(.has-img) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(216, 233, 252, 0.48)) !important;
  color: #162a42 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.v43-blank-ticket .lwk-stub:not(.has-img) .lwk-no {
  color: #2b5484 !important;
  text-shadow: none !important;
}
.v43-tk-plus {
  font-size: 14px;
  color: #4a6f96;
  margin-bottom: 2px;
}

/* 7. Page 4 Blank Frosted Widgets */
.v43-blank-today .lwt-cover:not(.has-img) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(219, 234, 254, 0.48)) !important;
}
.v43-blank-today .lwt-cover:not(.has-img) .lwt-cover-cap {
  color: #162a42 !important;
  text-shadow: none !important;
}
.v43-lwt-ornament {
  font-size: 10px !important;
  letter-spacing: 0.24em;
  color: #4a78a8;
}
.v43-mini-plus {
  font-size: 14px;
  color: #5b7c9e;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* 8. Irregular Staggered Liquid-Glass Bento Stage for Worldbook & Summary (53364.jpg Overhaul) */
.v43-irregular-bento-stage {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-auto-rows: minmax(108px, auto);
  gap: 10px;
  margin: 8px 0 12px;
}
.v43-ib-card {
  position: relative;
  padding: 13px 14px;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.88) 0%, rgba(232, 243, 254, 0.62) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.2px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(24, 52, 88, 0.06), inset 0 1px 0 #ffffff;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.v43-ib-card:active {
  transform: scale(0.985);
}
.v43-ib-card.ib-wide {
  grid-column: 1 / span 2;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(219, 235, 253, 0.72) 100%);
}
.v43-ib-card.ib-tall {
  grid-column: 1;
  grid-row: 2 / span 2;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(224, 238, 253, 0.68) 100%);
}
.v43-ib-card.ib-stack-top {
  grid-column: 2;
  grid-row: 2;
}
.v43-ib-card.ib-stack-bot {
  grid-column: 2;
  grid-row: 3;
}
.v43-ib-watermark {
  position: absolute;
  right: 10px;
  bottom: -6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 46px;
  font-weight: 700;
  color: rgba(74, 126, 187, 0.1);
  line-height: 1;
  pointer-events: none;
}
.v43-ib-eyebrow {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #4a6f96;
}
.v43-ib-title {
  font-size: 13.5px;
  font-weight: 900;
  color: #142842;
  margin-top: 3px;
}
.v43-ib-desc {
  font-size: 10.5px;
  line-height: 1.45;
  color: #4a6785;
  margin-top: 3px;
}
.v43-ib-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.v43-ib-pills span,
.v43-ib-badge {
  padding: 2.5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(148, 184, 226, 0.55);
  font-size: 9.5px;
  font-weight: 800;
  color: #1b3658;
}
.v43-ib-prism-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.v43-ib-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.2px solid rgba(120, 162, 212, 0.65);
  background: radial-gradient(circle, #ffffff, rgba(219, 234, 254, 0.65));
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #2b5484;
}
.v43-ib-prism-emblem small {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: #3b597a;
  font-weight: 700;
}
.v43-ib-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v43-ib-rom {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  color: #3b597a;
}
.v43-ib-tall-visual {
  my: 8px;
  height: 82px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(214, 232, 252, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.92);
  padding: 10px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.v43-ib-pillar-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100%;
}
.v43-ib-pillar-bars i {
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #8ab6e6);
  border: 1px solid rgba(255, 255, 255, 0.95);
  display: block;
}
.v43-ib-vert-txt {
  writing-mode: vertical-rl;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: #5b7c9e;
  font-weight: 700;
}

/* 9. WeChat Profile & Blank Frames Overhaul (53362.jpg Fix) */
.v43-me-cover {
  background: linear-gradient(145deg, #e8f2fc 0%, #d4e5f7 50%, #f2f7fd 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v43-me-cover-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #3b597a;
  pointer-events: none;
}
.v43-me-cover-empty span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.v43-me-cover-empty small {
  font-size: 9.5px;
  opacity: 0.78;
}
.v43-blank-ava-frame {
  background: linear-gradient(145deg, #ffffff, #e6f0fc) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
.v43-ava-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #4a6f96;
  line-height: 1.1;
}
.v43-ava-empty span {
  font-size: 18px;
  font-weight: 300;
}
.v43-ava-empty small {
  font-size: 8.5px;
  font-weight: 700;
}
.v43-blank-pol-img {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(224, 237, 252, 0.55)) !important;
  background-size: cover !important;
  background-position: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #4a6f96 !important;
}
.v43-pol-plus {
  font-size: 16px;
  font-weight: 300;
}
.v43-blank-pol-img small {
  font-size: 8px;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.v32-me-wallet-banner .v32-mwb-foot {
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* 10. Pure Crystal Pillars in Check-Phone, Date, Wardrobe, Shiyi */
.v43-pure-crystal-pillar .v41-mp-inner {
  padding: 12px 11px !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(226, 239, 253, 0.68)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 158px !important;
}
.v43-pcp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v43-pcp-vol {
  font-size: 9.5px;
  font-weight: 800;
  color: #3b597a;
}
.v43-pcp-rom {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  color: #2b5484;
}
.v43-pcp-ornament {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
.v43-pcp-ornament span {
  flex: 1;
  height: 1px;
  background: rgba(148, 184, 226, 0.45);
}
.v43-pcp-ornament i {
  font-style: normal;
  font-size: 9px;
  color: #5b87b8;
}
.v43-pcp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed rgba(148, 184, 226, 0.45);
  font-size: 9.5px;
  font-weight: 800;
  color: #2b5484;
}


/* ==========================================================================
   V44 HAUTE EDITORIAL ASYMMETRIC DESIGN SYSTEM (全应用高定极简·错落留白视觉体系)
   - 原创「白瓷羊皮 × 曜石深墨 × 冰川细线」高定杂志排版
   - 全应用错落呼吸感、衬线序数水印、极简线条图标与高对比度字体层级
   ========================================================================== */

:root {
  --v44-bg: #f6f5f2;
  --v44-card-light: rgba(255, 255, 255, 0.92);
  --v44-card-warm: #faf8f5;
  --v44-obsidian: #151821;
  --v44-obsidian-soft: #222734;
  --v44-ink: #14171f;
  --v44-muted: #646b78;
  --v44-line: rgba(20, 23, 31, 0.085);
  --v44-serif: 'Cormorant Garamond', 'Bodoni Moda', Georgia, 'Songti SC', 'Noto Serif SC', serif;
}

/* Global App Screen Layer & Topbar Refinement (Theme-Aware!) */
.app-screen-layer {
  background: var(--app-layer-bg, linear-gradient(180deg, #f7f6f2 0%, #eef2f7 100%));
  color: var(--user-ink, var(--ink));
}
.app-screen-layer > .topbar {
  background: var(--topbar-bg, rgba(248, 247, 244, 0.88));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid var(--hairline, rgba(20, 23, 31, 0.07));
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  color: var(--user-ink, var(--ink));
}
.topbar-action-btn {
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  padding: 5px 11px !important;
  border: 1px solid rgba(20, 23, 31, 0.12) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #14171f !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.18s ease !important;
}
.topbar-action-btn:active {
  transform: scale(0.96);
}

/* V44 App Canvas & Role Ribbon */
.v44-app-canvas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 26px;
}
.v44-role-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.v44-role-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.v44-role-scroll::-webkit-scrollbar {
  display: none;
}
.v44-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 5px;
  border-radius: 999px;
  border: 1px solid rgba(20, 23, 31, 0.1);
  background: rgba(255, 255, 255, 0.88);
  color: #14171f;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v44-role-pill img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.v44-role-pill.on {
  background: #151821;
  color: #f8fafc;
  border-color: #151821;
  box-shadow: 0 6px 16px rgba(21, 24, 33, 0.18);
}

.v44-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(20, 23, 31, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: #14171f;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.v44-link-chip.dark {
  background: #151821;
  color: #f8fafc;
  border-color: #151821;
}

/* V44 Editorial Tabs (Serif Roman Numerals + Clean Hairline) */
.v44-ed-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(20, 23, 31, 0.045);
  border: 1px solid rgba(20, 23, 31, 0.06);
}
.v44-ed-tabs.five-cols {
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.v44-ed-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 7px 4px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #646b78;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v44-ed-tab small {
  font-family: var(--v44-serif);
  font-size: 9px;
  letter-spacing: 0.12em;
  opacity: 0.72;
}
.v44-ed-tab span {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.v44-ed-tab.on {
  background: #ffffff;
  color: #14171f;
  box-shadow: 0 4px 12px rgba(20, 23, 31, 0.08);
}

/* V44 Editorial Dark Hero Card */
.v44-editorial-hero-dark {
  position: relative;
  overflow: hidden;
  padding: 18px 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, #151821 0%, #232938 100%);
  color: #f8fafc;
  box-shadow: 0 14px 32px rgba(15, 20, 30, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.v44-eh-watermark {
  position: absolute;
  right: 12px;
  top: -8px;
  font-family: var(--v44-serif);
  font-size: 72px;
  font-weight: 700;
  font-style: italic;
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
  line-height: 1;
}
.v44-eh-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.v44-eh-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(226, 232, 240, 0.65);
  text-transform: uppercase;
}
.v44-eh-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 9.5px;
  font-weight: 700;
  color: #f8fafc;
}
.v44-eh-status-dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e2e8f0;
  display: inline-block;
}
.v44-eh-ava {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}
.v44-eh-ava-lg {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}
.v44-eh-meter {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  margin: 12px 0;
  overflow: hidden;
}
.v44-eh-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #cbd5e1, #ffffff);
}
.v44-eh-quote-box {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px 13px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.v44-btn-ivory {
  padding: 10px 12px;
  border-radius: 13px;
  border: none;
  background: #f8fafc;
  color: #14171f;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease;
}
.v44-btn-outline-light {
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* V44 Asymmetric Staggered Cards (不对称错落画报卡) */
.v44-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 4px;
}
.v44-sh-title {
  font-size: 13px;
  font-weight: 800;
  color: #14171f;
  letter-spacing: 0.02em;
}
.v44-sh-sub {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #646b78;
  font-family: var(--v44-serif);
}
.v44-text-btn {
  border: none;
  background: none;
  font-size: 10.5px;
  font-weight: 800;
  color: #14171f;
  cursor: pointer;
}

.v44-stagger-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v44-stagger-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 23, 31, 0.08);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.045);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.v44-stagger-card.is-left {
  margin-right: 14px;
  border-left: 3px solid #151821;
}
.v44-stagger-card.is-right {
  margin-left: 14px;
  border-right: 3px solid #475569;
}
.v44-stagger-card.dark {
  background: linear-gradient(145deg, #161922 0%, #242a38 100%);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.12);
}
.v44-sc-num {
  font-family: var(--v44-serif);
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  opacity: 0.35;
  flex-shrink: 0;
  min-width: 28px;
}
.v44-sc-body {
  flex: 1;
  min-width: 0;
}
.v44-sc-eyebrow {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.62;
  text-transform: uppercase;
}
.v44-sc-title {
  font-size: 13.5px;
  font-weight: 800;
  margin-top: 2px;
  line-height: 1.35;
}
.v44-sc-desc {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 3px;
  line-height: 1.5;
}
.v44-sc-arrow {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.55;
  flex-shrink: 0;
}

/* V44 Asymmetric 4x2 Matrix */
.v44-asym-app-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.v44-aam-tile {
  padding: 10px 8px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 23, 31, 0.08);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}
.v44-aam-tile.offset-down {
  transform: translateY(5px);
}
.v44-aam-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: #646b78;
  font-weight: 700;
}
.v44-aam-code {
  font-family: var(--v44-serif);
  font-size: 12px;
  font-weight: 700;
  color: #14171f;
}
.v44-aam-name {
  font-size: 11.5px;
  font-weight: 800;
  color: #14171f;
  margin-top: 5px;
}
.v44-aam-sub {
  font-size: 9px;
  color: #646b78;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* V44 Dossier Record Item (Staggered Left/Right) */
.v44-dossier-item {
  padding: 14px 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(20, 23, 31, 0.085);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  cursor: pointer;
}
.v44-dossier-item.shift-l {
  margin-right: 10px;
}
.v44-dossier-item.shift-r {
  margin-left: 10px;
  background: #faf8f5;
}
.v44-di-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.v44-di-index {
  font-family: var(--v44-serif);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: #14171f;
}
.v44-di-app {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #646b78;
  text-transform: uppercase;
}
.v44-di-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #151821;
  color: #f8fafc;
  font-size: 9px;
  font-weight: 700;
}
.v44-di-title {
  font-size: 14px;
  font-weight: 800;
  color: #14171f;
  line-height: 1.4;
}
.v44-di-content {
  font-size: 12px;
  color: #333b48;
  line-height: 1.68;
  margin-top: 6px;
  white-space: pre-line;
}
.v44-di-reaction {
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(20, 23, 31, 0.04);
  border-left: 2.5px solid #151821;
}
.v44-di-react-label {
  font-size: 10px;
  font-weight: 800;
  color: #14171f;
  margin-bottom: 2px;
}
.v44-di-react-txt {
  font-size: 11.5px;
  color: #333b48;
  line-height: 1.58;
}
.v44-di-unreviewed {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 7px;
  font-style: italic;
}
.v44-di-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.v44-di-btn {
  padding: 6px 6px;
  border-radius: 10px;
  border: 1px solid rgba(20, 23, 31, 0.12);
  background: #ffffff;
  color: #14171f;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.v44-di-btn.primary {
  background: #151821;
  color: #f8fafc;
  border-color: #151821;
}

/* V44 Device Folio Card (查手机机主选择页) */
.v44-ed-header-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 23, 31, 0.08);
}
.v44-eyebrow {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #646b78;
  text-transform: uppercase;
}
.v44-banner-title {
  font-size: 16px;
  font-weight: 800;
  color: #14171f;
  margin-top: 2px;
}
.v44-banner-sub {
  font-size: 11px;
  color: #646b78;
  margin-top: 3px;
  line-height: 1.45;
}
.v44-serif-stamp {
  font-family: var(--v44-serif);
  font-size: 28px;
  font-weight: 700;
  color: #14171f;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
}
.v44-serif-stamp small {
  font-size: 8px;
  letter-spacing: 0.18em;
  margin-top: 3px;
}

.v44-device-folio-card {
  position: relative;
  overflow: hidden;
  padding: 18px 16px;
  border-radius: 22px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.v44-device-folio-card.is-light {
  background: #ffffff;
  color: #14171f;
  border: 1px solid rgba(20, 23, 31, 0.1);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  margin-right: 12px;
}
.v44-device-folio-card.is-dark {
  background: linear-gradient(145deg, #151821 0%, #232938 100%);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(15, 20, 30, 0.2);
  margin-left: 12px;
}
.v44-dfc-watermark {
  position: absolute;
  right: 14px;
  top: 6px;
  font-family: var(--v44-serif);
  font-size: 56px;
  font-weight: 700;
  font-style: italic;
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
}
.v44-dfc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.68;
}
.v44-dfc-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.v44-dfc-ava {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: cover;
  border: 1.5px solid currentColor;
}
.v44-dfc-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.v44-dfc-meta {
  font-size: 10.5px;
  opacity: 0.68;
  margin-top: 3px;
}
.v44-dfc-draft-box {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(128, 128, 128, 0.08);
  border: 1px solid rgba(128, 128, 128, 0.14);
}
.v44-dfc-draft-lbl {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  opacity: 0.65;
  margin-bottom: 3px;
}
.v44-dfc-draft-txt {
  font-size: 12px;
  font-family: Georgia, serif;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v44-dfc-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.v44-dfc-btn {
  flex: 1;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(128, 128, 128, 0.25);
  background: transparent;
  color: inherit;
}
.v44-device-folio-card.is-light .v44-dfc-btn.primary {
  background: #151821;
  color: #f8fafc;
  border-color: #151821;
  flex: 1.4;
}
.v44-device-folio-card.is-dark .v44-dfc-btn.primary {
  background: #f8fafc;
  color: #151821;
  border-color: #f8fafc;
  flex: 1.4;
}

/* V44 Thought Capsule & Hero Pair & Minimal Icon Grid */
.v44-thought-capsule {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 18px;
  background: #151821;
  color: #f8fafc;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(21, 24, 33, 0.16);
}
.v44-tc-ava {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

.v44-asym-hero-pair {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 10px;
  align-items: stretch;
}
.v44-ahp-dark {
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(145deg, #151821 0%, #242a38 100%);
  color: #f8fafc;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 24px rgba(21, 24, 33, 0.16);
}
.v44-ahp-light {
  padding: 14px;
  border-radius: 20px;
  background: #ffffff;
  color: #14171f;
  border: 1px solid rgba(20, 23, 31, 0.09);
  cursor: pointer;
  transform: translateY(8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}
.v44-ahp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.65;
}
.v44-ahp-top i {
  font-family: var(--v44-serif);
  font-size: 14px;
}
.v44-ahp-vinyl {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #d6c7b2 0 22%, #0f1116 24% 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin: 10px 0 8px;
  display: grid;
  place-items: center;
}
.v44-ahp-vinyl span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #151821;
}
.v44-ahp-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.v44-ahp-sub {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 3px;
}
.v44-ahp-quote {
  font-size: 11.5px;
  font-family: Georgia, serif;
  line-height: 1.55;
  margin: 8px 0;
  color: #1e293b;
}
.v44-ahp-foot {
  font-size: 9.5px;
  font-weight: 700;
  opacity: 0.65;
}

/* V44 Minimalist SVG Line Icon Grid */
.v44-minimal-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 8px;
  padding: 6px 0 4px;
}
.v44-mig-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.v44-mig-item.stagger {
  transform: translateY(4px);
}
.v44-mig-box {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #ffffff;
  color: #14171f;
  border: 1px solid rgba(20, 23, 31, 0.1);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  transition: transform 0.16s ease;
}
.v44-mig-box.dark {
  background: #151821;
  color: #f8fafc;
  border-color: #151821;
}
.v44-mig-name {
  font-size: 11px;
  font-weight: 800;
  color: #14171f;
  margin-top: 2px;
}
.v44-mig-sub {
  font-size: 9px;
  color: #646b78;
}

.v44-filter-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.v44-filter-pill {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20, 23, 31, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.v44-filter-pill.on {
  background: #151821;
  color: #f8fafc;
  border-color: #151821;
}

.v44-ed-card {
  padding: 14px 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 23, 31, 0.085);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.v44-thin-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(20, 23, 31, 0.08);
  overflow: hidden;
}
.v44-thin-bar span {
  display: block;
  height: 100%;
  background: #151821;
  border-radius: 999px;
}

.v44-photo-folio-card {
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(20, 23, 31, 0.09);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}
.v44-photo-folio-card.shift-l { margin-right: 12px; }
.v44-photo-folio-card.shift-r { margin-left: 12px; }
.v44-pfc-media {
  height: 136px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 12px;
}
.v44-pfc-stamp, .v44-pfc-meta {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(21, 24, 33, 0.72);
  color: #f8fafc;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.v44-pfc-body {
  padding: 12px 14px;
}

/* ==========================================================================
   UNIVERSAL ALL-APP EDITORIAL ELEVATION (全应用排版高级简约化统一规则)
   - 让微信、总结库、世界书、情侣空间、日记、手账、闲鱼、商城、礼物库等全部呈现高定错落杂志感
   ========================================================================== */
#appScrollBody .glass-card,
#appScrollBody .wb-alabaster-card,
#appScrollBody .atelier-hero-card,
#appScrollBody .wb38-matrix-card,
#appScrollBody .wb38-forge-panel,
#appScrollBody .qa37-composer-card,
#appScrollBody .v28-flea-detail-card {
  background: var(--card, rgba(255, 255, 255, 0.94));
  border: var(--theme-card-border, 1px solid rgba(20, 23, 31, 0.085));
  border-radius: var(--r-card, 18px);
  box-shadow: var(--shadow-card, 0 6px 20px rgba(15, 23, 42, 0.045));
  color: var(--user-ink, var(--ink));
}

/* Subtle asymmetric editorial rhythm for sequential cards across apps */
#appScrollBody > .glass-card:nth-of-type(odd),
#appScrollBody > .wb-alabaster-card:nth-of-type(odd) {
  border-left: var(--theme-odd-left-border, 2.5px solid #151821);
}
#appScrollBody > .glass-card:nth-of-type(even),
#appScrollBody > .wb-alabaster-card:nth-of-type(even) {
  background: var(--card-even, var(--card, #faf8f5));
}

/* Worldbook & Summary Astrolabe Hero & Irregular Bento Elevation */
.wb38-astrolabe-hero {
  background: linear-gradient(145deg, #151821 0%, #232a3a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 30px rgba(15, 20, 30, 0.2) !important;
}
.v43-ib-card {
  border-radius: 20px !important;
  border: 1px solid rgba(20, 23, 31, 0.09) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
}
.v43-ib-card.ib-wide {
  background: linear-gradient(145deg, #151821 0%, #232938 100%) !important;
  color: #f8fafc !important;
}
.v43-ib-card.ib-wide .v43-ib-title,
.v43-ib-card.ib-wide .v43-ib-desc,
.v43-ib-card.ib-wide .v43-ib-eyebrow {
  color: #f8fafc !important;
}

/* Lovers Space & QA Box & Ledger Hero Refinement (No cheesy bright pink/blue) */
.qqcs-banner-card {
  border-radius: 22px !important;
  border: 1px solid rgba(20, 23, 31, 0.1) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
}
.qqcs-cover-stage {
  background: linear-gradient(145deg, #151821 0%, #262e3f 100%) !important;
}
.qa37-hero-banner,
.lg-hero {
  background: linear-gradient(145deg, #151821 0%, #242b3b 100%) !important;
  border-radius: 22px !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}


/* V44 Universal Staggered Cards & App-Specific Editorial Polish (Theme-Reactive!) */
.v44-ed-stagger-left {
  margin-right: 6px;
  border-left: var(--theme-odd-left-border, 2.5px solid #2b5484);
  position: relative;
}
.v44-ed-stagger-right {
  margin-left: 6px;
  background: var(--card-even, var(--card));
  border-right: var(--theme-odd-left-border, 2.5px solid #4a7ab5);
  position: relative;
}
.v44-ed-stagger-left::after,
.v44-ed-stagger-right::after {
  content: attr(data-ed-no);
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--v44-serif);
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  color: rgba(20, 23, 31, 0.22);
  pointer-events: none;
}

/* WeChat Conversation Rows & Me Rows Editorial Polish (Theme-Reactive!) */
.wx-conv-item,
.wx-me-row {
  border-radius: var(--r-card, 16px);
  border: var(--theme-card-border, 1px solid rgba(147, 197, 253, 0.45));
  background: var(--card, rgba(255, 255, 255, 0.92));
  color: var(--user-ink, var(--ink));
  margin-bottom: 7px !important;
  box-shadow: var(--shadow-card, 0 4px 14px rgba(20, 44, 76, 0.05));
}
.wx-conv-item:nth-child(even) {
  margin-left: 6px;
  background: var(--card-even, var(--card));
}
.wx-conv-item:nth-child(odd) {
  margin-right: 8px !important;
}

/* Couple Avatar Tiles Editorial Polish */
.v41-cp-pair-tile,
.v23-cp-card {
  border-radius: 18px !important;
  border: 1px solid rgba(20, 23, 31, 0.09) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}
.v41-cp-pair-tile:nth-child(even) {
  transform: translateY(6px);
  background: #faf8f5 !important;
}

/* Diary & Notebook & Flea Market Staggered Polish */
.diary-entry.mine {
  margin-right: 14px !important;
}
.diary-entry.theirs {
  margin-left: 14px !important;
}
.v23-stage-banner {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 28px rgba(15, 20, 30, 0.18) !important;
}


/* ==========================================================================
   V45 EDITORIAL PAGER BAR & SUB-SECTION DECK (分卷翻页器与独立子板块切换样式)
   ========================================================================== */
.v45-pager-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  margin: 6px 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 23, 31, 0.09);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.v45-pg-btn {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(20, 23, 31, 0.14);
  background: #ffffff;
  color: #14171f;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.v45-pg-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.v45-pg-btn:not(:disabled):active {
  transform: scale(0.96);
  background: #151821;
  color: #ffffff;
}
.v45-pg-nums {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.v45-pg-num {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid rgba(20, 23, 31, 0.1);
  background: rgba(20, 23, 31, 0.035);
  color: #475569;
  font-family: var(--v44-serif);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.v45-pg-num.on {
  background: #151821;
  color: #f8fafc;
  border-color: #151821;
}
.v45-sec-deck-nav {
  margin-bottom: 10px;
}

/* Ensure modal panels and app bodies never cut off bottom content */
.modal-panel {
  max-height: 86vh !important;
  overflow-y: auto !important;
  padding-bottom: 22px !important;
}
.v44-di-content,
.wb38-folio-body,
.v44-sc-desc {
  overflow: visible !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
}



/* ==========================================================================
   V46 COMPREHENSIVE FIXES:
   1. Full-Screen Moments Cover & Negative-Margin Bleed Fix (53414.jpg)
   2. Range Slider & Grid Overflow Guard (53410.jpg)
   3. Global Appearance Beautification Restoration + 8 Unique Structural Themes
   ========================================================================== */

/* 1. Fix 53414.jpg: Moments cover & full-bleed containers inside .app-scroll-body */
.app-scroll-body > .mo-cover {
  width: calc(100% + 28px) !important;
  max-width: calc(100% + 28px) !important;
  margin: -12px -14px 4px -14px !important;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  box-sizing: border-box !important;
}
.app-scroll-body > .chat-room-wrap,
.app-scroll-body > .offline-scene-wrap {
  width: calc(100% + 28px) !important;
  max-width: calc(100% + 28px) !important;
  margin: -12px -14px -22px -14px !important;
  box-sizing: border-box !important;
}
.app-scroll-body > .shop-bottom-nav,
.app-scroll-body > .mo2-mebar {
  width: calc(100% + 28px) !important;
  max-width: calc(100% + 28px) !important;
  margin-left: -14px !important;
  margin-right: -14px !important;
  box-sizing: border-box !important;
}

/* 2. Fix 53410.jpg: Range slider and flex/grid children never overflow right edge */
input[type="range"] {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.glass-card *,
.v44-ed-card * {
  box-sizing: border-box;
}

/* 3. Restore & Elevate Existing Palettes + Add 8 Brand-New Unique Structural Themes */
#phoneRoot {
  color: var(--user-ink, var(--ink));
}
#phoneRoot .slot .block {
  background: var(--block, linear-gradient(150deg, rgba(255, 255, 255, 0.94) 0%, rgba(235, 244, 254, 0.80) 100%));
  border: var(--theme-icon-border, 1px solid rgba(255, 255, 255, 0.98));
  border-radius: var(--r-icon, 18px);
  color: var(--user-ink, var(--ink));
  box-shadow: var(--shadow-card, 0 8px 20px rgba(30, 52, 82, 0.055));
}
#phoneRoot .slot-label {
  color: var(--user-ink, var(--ink));
}

[data-palette="frost"] {
  --paper: #e9eff6;
  --app-layer-bg: linear-gradient(180deg, #f5f8fc 0%, #e9eff6 100%);
  --topbar-bg: rgba(245, 248, 252, 0.9);
  --card: rgba(255, 255, 255, 0.9);
  --card-even: rgba(248, 250, 253, 0.92);
  --ink: #182232;
  --soft: #52637a;
}
[data-palette="mica"] {
  --paper: #f7f8fa;
  --app-layer-bg: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --card: rgba(255, 255, 255, 0.95);
  --card-even: #fafbfc;
  --ink: #14171f;
  --soft: #646b78;
}
[data-palette="glacier"] {
  --paper: #e6f0fa;
  --app-layer-bg: linear-gradient(180deg, #f7f6f2 0%, #eef2f7 100%);
  --topbar-bg: rgba(248, 247, 244, 0.88);
  --card: rgba(255, 255, 255, 0.94);
  --card-even: #faf8f5;
  --ink: #14171f;
  --soft: #586f89;
}
[data-palette="linen"] {
  --paper: #f2ede4;
  --app-layer-bg: linear-gradient(180deg, #faf7f2 0%, #efe9de 100%);
  --topbar-bg: rgba(250, 247, 242, 0.9);
  --card: rgba(255, 253, 249, 0.92);
  --card-even: #f7f2e9;
  --ink: #2c2520;
  --soft: #6e6259;
  --theme-odd-left-border: 2.5px solid #5c4938;
}
[data-palette="matcha"] {
  --paper: #e4eee6;
  --app-layer-bg: linear-gradient(180deg, #f3f8f4 0%, #e2ede4 100%);
  --topbar-bg: rgba(243, 248, 244, 0.9);
  --card: rgba(252, 255, 253, 0.9);
  --card-even: #eef6f0;
  --ink: #1b2e22;
  --soft: #4d6b57;
  --theme-odd-left-border: 2.5px solid #2d5a3c;
}
[data-palette="obsidian"] {
  --paper: #12151e;
  --app-layer-bg: linear-gradient(180deg, #141824 0%, #0d1017 100%);
  --topbar-bg: rgba(20, 24, 36, 0.92);
  --card: rgba(28, 34, 48, 0.92);
  --card-even: rgba(24, 29, 42, 0.94);
  --ink: #f1f5f9;
  --soft: #94a3b8;
  --faint: #64748b;
  --hairline: rgba(255, 255, 255, 0.1);
  --theme-card-border: 1px solid rgba(255, 255, 255, 0.12);
  --theme-odd-left-border: 2.5px solid #60a5fa;
  --block: rgba(30, 38, 54, 0.88);
  --theme-icon-border: 1px solid rgba(255, 255, 255, 0.16);
}
[data-palette="obsidian"] .v44-ed-card,
[data-palette="obsidian"] .v44-dossier-item,
[data-palette="obsidian"] .v44-stagger-card:not(.dark),
[data-palette="obsidian"] .wx-conv-item,
[data-palette="obsidian"] .wx-me-row {
  background: rgba(28, 34, 48, 0.92) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-palette="daiqing"] {
  --paper: #dce4e8;
  --app-layer-bg: linear-gradient(180deg, #edf2f4 0%, #dbe3e7 100%);
  --topbar-bg: rgba(237, 242, 244, 0.9);
  --card: rgba(249, 251, 252, 0.92);
  --card-even: #e8eff2;
  --ink: #1d2b32;
  --soft: #526872;
  --theme-odd-left-border: 2.5px solid #2c4a56;
}
[data-palette="oatmeal"] {
  --paper: #f0e6d8;
  --app-layer-bg: linear-gradient(180deg, #fbf7f0 0%, #efe4d4 100%);
  --topbar-bg: rgba(251, 247, 240, 0.9);
  --card: rgba(255, 252, 247, 0.94);
  --card-even: #f6ede0;
  --ink: #33261b;
  --soft: #75604e;
  --theme-odd-left-border: 2.5px solid #8c6239;
}
[data-palette="ouhe"] {
  --paper: #efe4ed;
  --app-layer-bg: linear-gradient(180deg, #faf5f9 0%, #eee2ec 100%);
  --topbar-bg: rgba(250, 245, 249, 0.9);
  --card: rgba(255, 252, 254, 0.93);
  --card-even: #f7edf5;
  --ink: #331f2e;
  --soft: #785a70;
  --theme-odd-left-border: 2.5px solid #9d4e7c;
}
[data-palette="pinemoss"] {
  --paper: #111814;
  --app-layer-bg: linear-gradient(180deg, #16201a 0%, #0e1410 100%);
  --topbar-bg: rgba(22, 32, 26, 0.92);
  --card: rgba(26, 38, 31, 0.92);
  --card-even: rgba(22, 33, 27, 0.94);
  --ink: #ecfdf5;
  --soft: #86efac;
  --hairline: rgba(255, 255, 255, 0.1);
  --theme-card-border: 1px solid rgba(134, 239, 172, 0.18);
  --theme-odd-left-border: 2.5px solid #34d399;
  --block: rgba(26, 38, 31, 0.88);
  --theme-icon-border: 1px solid rgba(134, 239, 172, 0.22);
}
[data-palette="pinemoss"] .v44-ed-card,
[data-palette="pinemoss"] .v44-dossier-item,
[data-palette="pinemoss"] .v44-stagger-card:not(.dark),
[data-palette="pinemoss"] .wx-conv-item,
[data-palette="pinemoss"] .wx-me-row {
  background: rgba(26, 38, 31, 0.92) !important;
  color: #ecfdf5 !important;
  border-color: rgba(134, 239, 172, 0.18) !important;
}

/* ==================== 8 BRAND-NEW UNIQUE STRUCTURAL & VISUAL THEMES ==================== */

/* Unique Theme 1: haute_editorial (VOGUE モノクロ画报 · 锋利建筑线框 + 硬朗报刊阴影 + 衬线刊头) */
[data-palette="haute_editorial"] {
  --paper: #f3f1ec;
  --app-layer-bg: linear-gradient(180deg, #f7f5f0 0%, #eae6dd 100%);
  --topbar-bg: #f7f5f0;
  --card: #ffffff;
  --card-even: #f9f8f4;
  --ink: #0f1115;
  --soft: #4a4e58;
  --r-card: 4px;
  --r-icon: 4px;
  --theme-card-border: 1.5px solid #0f1115;
  --theme-odd-left-border: 5px solid #0f1115;
  --shadow-card: 4px 4px 0px #0f1115;
  --block: #ffffff;
  --theme-icon-border: 1.5px solid #0f1115;
}
[data-palette="haute_editorial"] #appScrollBody .glass-card,
[data-palette="haute_editorial"] .v44-ed-card,
[data-palette="haute_editorial"] .v44-dossier-item,
[data-palette="haute_editorial"] .wx-conv-item,
[data-palette="haute_editorial"] .wx-me-row {
  border-radius: 4px !important;
  border: 1.5px solid #0f1115 !important;
  box-shadow: 4px 4px 0px rgba(15, 17, 21, 0.9) !important;
}
[data-palette="haute_editorial"] .slot .block {
  border-radius: 4px !important;
  box-shadow: 3px 3px 0px #0f1115 !important;
}

/* Unique Theme 2: rococo_lace (洛可可骨瓷茶会 · 浮雕蕾丝金线缝边 + 珍珠柔光圆弧) */
[data-palette="rococo_lace"] {
  --paper: #fdf6f0;
  --app-layer-bg: radial-gradient(circle at 50% 0%, #fff9f5 0%, #f7e8df 100%);
  --topbar-bg: rgba(255, 249, 245, 0.92);
  --card: rgba(255, 253, 250, 0.95);
  --card-even: #fdf4ee;
  --ink: #432820;
  --soft: #8a6256;
  --r-card: 26px;
  --r-icon: 50%;
  --theme-card-border: 2px dashed #d4a373;
  --theme-odd-left-border: 3px double #b57c56;
  --shadow-card: 0 10px 26px rgba(181, 124, 86, 0.14), inset 0 0 0 3px #fffdfa;
  --block: linear-gradient(145deg, #fffdfa 0%, #f9ebe2 100%);
  --theme-icon-border: 1.5px dashed #d4a373;
}
[data-palette="rococo_lace"] #appScrollBody .glass-card,
[data-palette="rococo_lace"] .v44-ed-card,
[data-palette="rococo_lace"] .v44-dossier-item,
[data-palette="rococo_lace"] .wx-conv-item,
[data-palette="rococo_lace"] .wx-me-row {
  border-radius: 26px !important;
  border: 1.5px dashed #d4a373 !important;
  box-shadow: 0 8px 22px rgba(181, 124, 86, 0.12), inset 0 0 0 3px #fffdfa !important;
}
[data-palette="rococo_lace"] .slot .block {
  border-radius: 50% !important;
}

/* Unique Theme 3: cyber_aurora (赛博全息霓虹 · 机甲切角终端 + 青紫发光边线 + 扫描网格) */
[data-palette="cyber_aurora"] {
  --paper: #090d16;
  --app-layer-bg: radial-gradient(circle at 80% 10%, #13233f 0%, #090d16 70%);
  --topbar-bg: rgba(9, 13, 22, 0.92);
  --card: rgba(15, 23, 42, 0.9);
  --card-even: rgba(19, 30, 54, 0.92);
  --ink: #e0f2fe;
  --soft: #7dd3fc;
  --faint: #38bdf8;
  --hairline: rgba(56, 189, 248, 0.22);
  --r-card: 8px;
  --r-icon: 10px;
  --theme-card-border: 1px solid rgba(56, 189, 248, 0.55);
  --theme-odd-left-border: 3.5px solid #38bdf8;
  --shadow-card: 0 0 18px rgba(56, 189, 248, 0.18), inset 0 0 12px rgba(56, 189, 248, 0.08);
  --block: linear-gradient(145deg, rgba(15, 28, 52, 0.92), rgba(28, 22, 58, 0.92));
  --theme-icon-border: 1px solid rgba(56, 189, 248, 0.65);
}
[data-palette="cyber_aurora"] .v44-ed-card,
[data-palette="cyber_aurora"] .v44-dossier-item,
[data-palette="cyber_aurora"] .v44-stagger-card:not(.dark),
[data-palette="cyber_aurora"] .wx-conv-item,
[data-palette="cyber_aurora"] .wx-me-row {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #e0f2fe !important;
  border: 1px solid rgba(56, 189, 248, 0.48) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.14) !important;
}

/* Unique Theme 4: retro_pixel (千禧复古像素 · Y2K 掌机立体硬边框 + 点阵纸 + 复古窗口感) */
[data-palette="retro_pixel"] {
  --paper: #e6ecf5;
  --app-layer-bg: radial-gradient(#94a3b8 1px, transparent 1px) 0 0 / 12px 12px, #edf2f8;
  --topbar-bg: #ffffff;
  --card: #ffffff;
  --card-even: #f1f5f9;
  --ink: #1e293b;
  --soft: #475569;
  --r-card: 8px;
  --r-icon: 8px;
  --theme-card-border: 2px solid #1e293b;
  --theme-odd-left-border: 6px solid #3b82f6;
  --shadow-card: 3px 3px 0px #1e293b;
  --block: #ffffff;
  --theme-icon-border: 2px solid #1e293b;
}
[data-palette="retro_pixel"] #appScrollBody .glass-card,
[data-palette="retro_pixel"] .v44-ed-card,
[data-palette="retro_pixel"] .v44-dossier-item,
[data-palette="retro_pixel"] .wx-conv-item,
[data-palette="retro_pixel"] .wx-me-row {
  border-radius: 8px !important;
  border: 2px solid #1e293b !important;
  box-shadow: 3px 3px 0px #1e293b !important;
}
[data-palette="retro_pixel"] .slot .block {
  border-radius: 8px !important;
  border: 2px solid #1e293b !important;
  box-shadow: 3px 3px 0px #1e293b !important;
}

/* Unique Theme 5: ink_scroll (东方水墨宣纸 · 宋韵竹简边框 + 朱砂红印章点缀) */
[data-palette="ink_scroll"] {
  --paper: #f2ece1;
  --app-layer-bg: linear-gradient(180deg, #f8f4ec 0%, #eae2d3 100%);
  --topbar-bg: rgba(248, 244, 236, 0.94);
  --card: #fcfaf5;
  --card-even: #f5efe3;
  --ink: #231f1c;
  --soft: #63584f;
  --r-card: 10px;
  --r-icon: 12px;
  --theme-card-border: 1px solid rgba(153, 27, 27, 0.28);
  --theme-odd-left-border: 3.5px solid #991b1b;
  --shadow-card: inset 0 0 0 2px #fcfaf5, inset 0 0 0 3px rgba(153, 27, 27, 0.16), 0 6px 18px rgba(45, 35, 25, 0.06);
  --block: #fcfaf5;
  --theme-icon-border: 1.5px solid rgba(153, 27, 27, 0.35);
}

/* Unique Theme 6: vinyl_film (暗房银盐胶片 · 35mm 电影齿孔边框 + 复古暖琥珀暗调) */
[data-palette="vinyl_film"] {
  --paper: #181617;
  --app-layer-bg: linear-gradient(180deg, #1f1c1d 0%, #121011 100%);
  --topbar-bg: rgba(31, 28, 29, 0.94);
  --card: rgba(38, 34, 35, 0.94);
  --card-even: rgba(32, 28, 29, 0.95);
  --ink: #f5ebe6;
  --soft: #d6c2b8;
  --hairline: rgba(245, 235, 230, 0.12);
  --r-card: 12px;
  --r-icon: 14px;
  --theme-card-border: 1px solid rgba(251, 191, 36, 0.28);
  --theme-odd-left-border: 6px dashed rgba(251, 191, 36, 0.55);
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.4);
  --block: rgba(42, 37, 38, 0.92);
  --theme-icon-border: 1px solid rgba(251, 191, 36, 0.35);
}
[data-palette="vinyl_film"] .v44-ed-card,
[data-palette="vinyl_film"] .v44-dossier-item,
[data-palette="vinyl_film"] .v44-stagger-card:not(.dark),
[data-palette="vinyl_film"] .wx-conv-item,
[data-palette="vinyl_film"] .wx-me-row {
  background: rgba(38, 34, 35, 0.94) !important;
  color: #f5ebe6 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}

/* Unique Theme 7: liquid_prism (液态全息棱镜 · 3D 水晶果冻胶囊 + 幻彩折射高光) */
[data-palette="liquid_prism"] {
  --paper: #e8f1ff;
  --app-layer-bg: linear-gradient(135deg, #f0f6ff 0%, #e8effd 50%, #f3eefe 100%);
  --topbar-bg: rgba(255, 255, 255, 0.82);
  --card: linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(235, 245, 255, 0.78) 100%);
  --card-even: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(243, 238, 255, 0.8) 100%);
  --ink: #1e293b;
  --soft: #4f6380;
  --r-card: 28px;
  --r-icon: 22px;
  --theme-card-border: 1.5px solid rgba(255, 255, 255, 0.98);
  --theme-odd-left-border: 3px solid #60a5fa;
  --shadow-card: 0 12px 28px rgba(59, 130, 246, 0.1), inset 0 2px 3px rgba(255, 255, 255, 0.98), inset 0 -2px 5px rgba(147, 197, 253, 0.32);
  --block: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(224, 242, 254, 0.82));
  --theme-icon-border: 1.5px solid #ffffff;
}

/* Unique Theme 8: manuscript_wax (古堡火漆羊皮卷 · 学院派手稿 + 勃艮第酒红火漆线) */
[data-palette="manuscript_wax"] {
  --paper: #eadfce;
  --app-layer-bg: linear-gradient(180deg, #f5eee2 0%, #e6d8c3 100%);
  --topbar-bg: rgba(245, 238, 226, 0.94);
  --card: #faf5ec;
  --card-even: #f3eadb;
  --ink: #2b1d12;
  --soft: #6e5540;
  --r-card: 12px;
  --r-icon: 14px;
  --theme-card-border: 1.5px solid rgba(120, 53, 15, 0.32);
  --theme-odd-left-border: 4px solid #7f1d1d;
  --shadow-card: 0 8px 20px rgba(68, 40, 20, 0.1), inset 0 0 18px rgba(180, 140, 95, 0.12);
  --block: #faf5ec;
  --theme-icon-border: 1.5px solid rgba(120, 53, 15, 0.38);
}

/* 4 New Distinct Home Layouts (界面排布骨架) */
[data-layout="polaroid_wall"] .slot {
  background: #ffffff !important;
  padding: 6px 5px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(20, 23, 31, 0.12) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}
[data-layout="polaroid_wall"] .slot:nth-child(odd) {
  transform: rotate(-2deg);
}
[data-layout="polaroid_wall"] .slot:nth-child(even) {
  transform: rotate(1.8deg);
}
[data-layout="polaroid_wall"] .slot .block {
  width: 42px !important;
  height: 42px !important;
  border-radius: 4px !important;
}

[data-layout="vinyl_shelf"] .slot .block {
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--card-solid, #fff) 0 28%, #1e293b 30% 100%) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22) !important;
}

[data-layout="tarot_deck"] .slot {
  background: var(--card, rgba(255,255,255,0.9)) !important;
  border: 1.5px solid var(--ink, #1e293b) !important;
  border-radius: 14px !important;
  padding: 8px 4px !important;
  box-shadow: inset 0 0 0 2px transparent, 0 6px 14px rgba(15,23,42,0.07) !important;
}
[data-layout="tarot_deck"] .slot .block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 36px !important;
}

[data-layout="terminal_dock"] .slot {
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: var(--card, rgba(255,255,255,0.88)) !important;
  border: 1px solid var(--hairline, rgba(20,23,31,0.12)) !important;
}
[data-layout="terminal_dock"] .slot .block {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  flex-shrink: 0 !important;
}
[data-layout="terminal_dock"] .slot-label {
  font-size: 9.5px !important;
  text-align: left !important;
}


/* ==========================================================================
   V46 PHASE 3 OVERHAUL:
   1. HIGH-FASHION VOICE BUBBLE (53420.jpg) & CALL RECORD BUBBLE (53424.jpg)
   2. ATMOSPHERIC VIDEO CALL PORTRAIT MEDALLION STAGE (53422.jpg)
   3. 10 HIGH-CONTRAST NOVEL SPACE & OFFLINE READING THEMES (53427.jpg)
   ========================================================================== */

/* --- 1A. Redesigned Call Record Bubble (53424.jpg) --- */
.wx-call-record-bubble {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 10px 14px !important;
  min-width: 196px !important;
  max-width: 248px !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
  position: relative !important;
}
.wx-call-record-bubble:active {
  transform: scale(0.97) !important;
}
.chat-msg-row.user .wx-call-record-bubble {
  background: linear-gradient(135deg, #1b3658 0%, #2b5484 100%) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(186, 216, 250, 0.35) !important;
  box-shadow: 0 8px 22px rgba(27, 54, 88, 0.22) !important;
}
.chat-msg-row.ai .wx-call-record-bubble {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 245, 255, 0.92) 100%) !important;
  color: #162a42 !important;
  border: 1px solid rgba(148, 184, 226, 0.45) !important;
  box-shadow: 0 8px 20px rgba(27, 54, 88, 0.08) !important;
}
.v46-call-rec-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chat-msg-row.user .v46-call-rec-ico {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.chat-msg-row.ai .v46-call-rec-ico {
  background: rgba(43, 84, 132, 0.1);
  color: #2b5484;
  border: 1px solid rgba(43, 84, 132, 0.18);
}
.v46-call-rec-ico svg {
  width: 17px;
  height: 17px;
}
.v46-call-rec-body {
  flex: 1;
  min-width: 0;
}
.v46-call-rec-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.v46-call-rec-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.v46-call-rec-dur {
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
}
.chat-msg-row.user .v46-call-rec-dur {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.chat-msg-row.ai .v46-call-rec-dur {
  background: rgba(43, 84, 132, 0.12);
  color: #2b5484;
}
.v46-call-rec-sub {
  font-size: 9.5px;
  opacity: 0.76;
  margin-top: 2px;
}
.v46-call-rec-arrow {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.68;
}

/* --- 1B. Redesigned Luxury Acoustic Voice Bubble (53420.jpg) --- */
.chat-bubble.voice-bubble.v39-luxury-voice {
  min-width: 178px !important;
  max-width: 256px !important;
  padding: 10px 13px !important;
  border-radius: 18px !important;
  cursor: pointer !important;
}
.chat-msg-row.user .chat-bubble.voice-bubble.v39-luxury-voice {
  background: linear-gradient(135deg, #1b3658 0%, #2c5282 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(186, 216, 250, 0.35) !important;
  box-shadow: 0 8px 22px rgba(27, 54, 88, 0.2) !important;
}
.chat-msg-row.ai .chat-bubble.voice-bubble.v39-luxury-voice {
  background: linear-gradient(145deg, #ffffff 0%, #f0f7ff 100%) !important;
  color: #162a42 !important;
  border: 1px solid rgba(148, 184, 226, 0.45) !important;
  box-shadow: 0 6px 18px rgba(27, 54, 88, 0.08) !important;
}
.v39-luxury-voice .v39-vb-main {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.v39-luxury-voice .v39-vb-play-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.chat-msg-row.user .v39-luxury-voice .v39-vb-play-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}
.chat-msg-row.ai .v39-luxury-voice .v39-vb-play-btn {
  background: #1b3658 !important;
  color: #ffffff !important;
}
.v39-luxury-voice .v39-vb-waveform {
  display: flex !important;
  align-items: center !important;
  gap: 2.5px !important;
  flex: 1 !important;
  height: 18px !important;
}
.v39-luxury-voice .v39-vb-waveform span {
  display: inline-block !important;
  width: 2.5px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: 0.65 !important;
}
.v39-luxury-voice .v39-vb-waveform span:nth-child(3n+1) { height: 7px !important; }
.v39-luxury-voice .v39-vb-waveform span:nth-child(3n+2) { height: 14px !important; opacity: 0.9 !important; }
.v39-luxury-voice .v39-vb-waveform span:nth-child(3n) { height: 10px !important; }
.v39-luxury-voice .v39-vb-dur {
  font-family: "SF Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  opacity: 0.9 !important;
}
.v39-luxury-voice .v-trans {
  display: none !important;
  margin-top: 7px !important;
}
.v39-luxury-voice .v-trans.open {
  display: block !important;
  padding-top: 6px !important;
  border-top: 1px dashed rgba(148, 184, 226, 0.35) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
}
.chat-msg-row.user .v39-luxury-voice .v-trans {
  color: rgba(248, 250, 252, 0.95) !important;
  border-top-color: rgba(255, 255, 255, 0.22) !important;
}

/* --- 2. Redesigned Video Call Portrait Medallion Stage (53422.jpg) --- */
.call-video-main-card {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  border-radius: 26px !important;
  background: radial-gradient(circle at 50% 35%, rgba(43, 84, 132, 0.45) 0%, rgba(15, 23, 42, 0.78) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 18px 42px rgba(5, 10, 20, 0.42) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.call-video-ambient-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 184, 248, 0.28) 0%, transparent 70%);
  pointer-events: none;
}
.call-video-portrait-medallion {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.call-medallion-ava {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #ffffff !important;
  border: 2.5px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}
.call-medallion-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: #f8fafc;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

/* --- 3. 10 High-Contrast Long-Text Novel Space Themes (53427.jpg Fix!) --- */
.v46-novel-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(148, 184, 226, 0.32);
  flex-shrink: 0;
}
.v46-ns-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(43, 84, 132, 0.08);
  color: #2b5484;
  border: 1px solid rgba(43, 84, 132, 0.16);
  cursor: pointer;
}
.v46-ns-chip.on {
  background: #1b3658;
  color: #ffffff;
  border-color: #1b3658;
}
.v46-ns-act {
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 800;
  background: rgba(30, 41, 59, 0.06);
  color: #475569;
  border: 1px solid rgba(30, 41, 59, 0.12);
  cursor: pointer;
}
.v46-ns-act.on {
  background: #2b5484;
  color: #ffffff;
  border-color: #2b5484;
}
.v46-novel-user-pill {
  padding: 9px 13px;
  margin: 12px 0;
  border-radius: 12px;
  background: rgba(74, 126, 187, 0.14);
  border-left: 3px solid #2b5484;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
.v46-novel-subtext-box {
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 11px;
  background: rgba(74, 126, 187, 0.1);
  border: 1px dashed rgba(74, 126, 187, 0.35);
  font-size: 11.5px;
  line-height: 1.55;
}

/* Ensure .lily-53211-para and .lily-53211-dlg inherit high-contrast colors inside all Novel Space papers! */
.v41-novel-continuous-page .lily-53211-ruled-body {
  background: transparent !important;
}
.v41-novel-continuous-page .lily-53211-para {
  color: inherit !important;
}
.v41-novel-continuous-page .lily-53211-headline {
  color: inherit !important;
}

/* Light Novel Papers */
.v41-novel-continuous-page.paper-glacier {
  background-color: #f4f9ff !important;
  color: #162a42 !important;
}
.v41-novel-continuous-page.paper-ivory {
  background-color: #fbf7ee !important;
  color: #2c2218 !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 31px, rgba(168, 142, 108, 0.22) 31px, rgba(168, 142, 108, 0.22) 32px) !important;
}
.v41-novel-continuous-page.paper-sakura {
  background-color: #fff8fa !important;
  color: #3d222b !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 31px, rgba(214, 158, 178, 0.22) 31px, rgba(214, 158, 178, 0.22) 32px) !important;
}
.v41-novel-continuous-page.paper-jade {
  background-color: #f3f9f5 !important;
  color: #193024 !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 31px, rgba(114, 162, 136, 0.22) 31px, rgba(114, 162, 136, 0.22) 32px) !important;
}
.v41-novel-continuous-page.paper-ink_scroll {
  background-color: #f6f4ee !important;
  color: #1c2226 !important;
  background-image: repeating-linear-gradient(to right, transparent 0px, transparent 44px, rgba(44, 62, 76, 0.08) 44px, rgba(44, 62, 76, 0.08) 45px) !important;
}
.v41-novel-continuous-page.paper-rose_lace {
  background-color: #fdf6f8 !important;
  color: #3b232e !important;
  background-image: radial-gradient(rgba(196, 138, 162, 0.16) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
}

/* Dark Novel Papers — 100% Crisp High-Contrast Luminous Text (Fixes 53427.jpg!) */
.v41-novel-continuous-page.paper-night {
  background-color: #0f1b2e !important;
  color: #eef5ff !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 31px, rgba(148, 184, 226, 0.14) 31px, rgba(148, 184, 226, 0.14) 32px) !important;
}
.v41-novel-continuous-page.paper-gilded {
  background-color: #141218 !important;
  color: #f7ebd2 !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 31px, rgba(212, 175, 55, 0.15) 31px, rgba(212, 175, 55, 0.15) 32px) !important;
}
.v41-novel-continuous-page.paper-film {
  background-color: #16181d !important;
  color: #f1f5f9 !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 31px, rgba(255, 255, 255, 0.09) 31px, rgba(255, 255, 255, 0.09) 32px) !important;
}
.v41-novel-continuous-page.paper-cyber {
  background-color: #091322 !important;
  color: #e0f7ff !important;
  background-image: linear-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.07) 1px, transparent 1px);
  background-size: 24px 24px !important;
}

.v41-novel-continuous-page.paper-night .lily-53211-para,
.v41-novel-continuous-page.paper-gilded .lily-53211-para,
.v41-novel-continuous-page.paper-film .lily-53211-para,
.v41-novel-continuous-page.paper-cyber .lily-53211-para {
  color: inherit !important;
}
.v41-novel-continuous-page.paper-night .lily-53211-dlg {
  color: #93c5fd !important;
  background: linear-gradient(180deg, transparent 62%, rgba(59, 130, 246, 0.28) 62%) !important;
}
.v41-novel-continuous-page.paper-gilded .lily-53211-dlg {
  color: #fde68a !important;
  background: linear-gradient(180deg, transparent 62%, rgba(217, 119, 6, 0.28) 62%) !important;
}
.v41-novel-continuous-page.paper-film .lily-53211-dlg {
  color: #fed7aa !important;
  background: linear-gradient(180deg, transparent 62%, rgba(234, 88, 12, 0.25) 62%) !important;
}
.v41-novel-continuous-page.paper-cyber .lily-53211-dlg {
  color: #67e8f9 !important;
  background: linear-gradient(180deg, transparent 62%, rgba(6, 182, 212, 0.28) 62%) !important;
}
.v41-novel-continuous-page.paper-night .v41-novel-chapter-divider,
.v41-novel-continuous-page.paper-gilded .v41-novel-chapter-divider,
.v41-novel-continuous-page.paper-film .v41-novel-chapter-divider,
.v41-novel-continuous-page.paper-cyber .v41-novel-chapter-divider {
  color: inherit !important;
  border-bottom-color: rgba(255, 255, 255, 0.22) !important;
}
.v41-novel-continuous-page.paper-night .v46-novel-user-pill,
.v41-novel-continuous-page.paper-gilded .v46-novel-user-pill,
.v41-novel-continuous-page.paper-film .v46-novel-user-pill,
.v41-novel-continuous-page.paper-cyber .v46-novel-user-pill,
.v41-novel-continuous-page.paper-night .v46-novel-subtext-box,
.v41-novel-continuous-page.paper-gilded .v46-novel-subtext-box,
.v41-novel-continuous-page.paper-film .v46-novel-subtext-box,
.v41-novel-continuous-page.paper-cyber .v46-novel-subtext-box {
  background: rgba(255, 255, 255, 0.1) !important;
  color: inherit !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Also ensure dark .offtheme-* in Solo & Multi Offline have crisp luminous text! */
.lily-offline-novel-wrap.offtheme-film_storyboard .lily-53211-paper,
.lily-offline-novel-wrap.offtheme-gilded_theater .lily-53211-paper,
.lily-offline-novel-wrap.offtheme-stained_glass .lily-53211-paper,
.lily-offline-novel-wrap.offtheme-cyber_terminal .lily-53211-paper {
  background: rgba(15, 23, 42, 0.92) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.lily-offline-novel-wrap.offtheme-film_storyboard .lily-53211-para,
.lily-offline-novel-wrap.offtheme-gilded_theater .lily-53211-para,
.lily-offline-novel-wrap.offtheme-stained_glass .lily-53211-para,
.lily-offline-novel-wrap.offtheme-cyber_terminal .lily-53211-para,
.lily-offline-novel-wrap.offtheme-film_storyboard .lily-53211-headline,
.lily-offline-novel-wrap.offtheme-gilded_theater .lily-53211-headline,
.lily-offline-novel-wrap.offtheme-stained_glass .lily-53211-headline,
.lily-offline-novel-wrap.offtheme-cyber_terminal .lily-53211-headline {
  color: #f1f5f9 !important;
}
.lily-offline-novel-wrap.offtheme-film_storyboard .lily-53211-dlg,
.lily-offline-novel-wrap.offtheme-gilded_theater .lily-53211-dlg,
.lily-offline-novel-wrap.offtheme-stained_glass .lily-53211-dlg,
.lily-offline-novel-wrap.offtheme-cyber_terminal .lily-53211-dlg {
  color: #93c5fd !important;
  background: linear-gradient(180deg, transparent 62%, rgba(59, 130, 246, 0.28) 62%) !important;
}


/* --- V46 Polished Editorial Deck Tabs & Staggered Hub Cards (53428.jpg) --- */
.v44-ed-tabs.v46-scrollable-ed-tabs {
  display: flex !important;
  overflow-x: auto !important;
  gap: 5px !important;
  padding: 5px !important;
  scrollbar-width: none !important;
}
.v44-ed-tabs.v46-scrollable-ed-tabs::-webkit-scrollbar {
  display: none !important;
}
.v44-ed-tabs.v46-scrollable-ed-tabs .v44-ed-tab {
  flex: 0 0 auto !important;
  min-width: 62px !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
}
.v44-stagger-card {
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}
.v44-stagger-card:active {
  transform: scale(0.985) !important;
}
.v44-stagger-card .v44-sc-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.5 !important;
}


/* ============================================================================
   LILY BLUE MINI PHONE V47 · HAUTE COUTURE OVERHAUL & BUG FIXES
   ============================================================================ */

/* 0. GLOBAL VERTICAL & HORIZONTAL SCROLL ARCHITECTURE (100% Smooth Touch, Wheel & Drag Scrolling) */
.app-screen-layer {
  display: none !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.app-screen-layer.open {
  display: flex !important;
}

/* Standard Scrollable Apps: #appScrollBody is a block scroll container with bounded flex height (flex: 1 1 0%) */
#appScrollBody:not(.is-locked-flex-room),
.app-scroll-body:not(.is-locked-flex-room) {
  display: block !important;
  flex: 1 1 0% !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-y: contain !important;
  padding: 12px 14px 96px !important;
}
#appScrollBody:not(.is-locked-flex-room) > .glass-card,
#appScrollBody:not(.is-locked-flex-room) > .v44-ed-card,
#appScrollBody:not(.is-locked-flex-room) > .v44-editorial-hero-dark,
#appScrollBody:not(.is-locked-flex-room) > .v45-sec-deck-nav,
#appScrollBody:not(.is-locked-flex-room) > .v32-me-editorial-card,
#appScrollBody:not(.is-locked-flex-room) > .v32-me-stats-card,
#appScrollBody:not(.is-locked-flex-room) > .v32-me-wallet-banner,
#appScrollBody:not(.is-locked-flex-room) > .v32-me-polaroid-strip-card,
#appScrollBody:not(.is-locked-flex-room) > .v29-me-bento-grid,
#appScrollBody:not(.is-locked-flex-room) > .nb-book {
  margin-bottom: 11px;
}

/* CRITICAL: Inner content wrappers inside #appScrollBody must NEVER create nested overflow-y:auto traps! */
.v30-giftvault-stage,
.rv3-wrap,
.ab3-wrap,
.v26-flea-shell,
.v26-flea-scroll,
.v24-app-shell,
.v44-app-canvas,
.ns-reader-stage,
.v29-theater-scroll,
.lily-wx-vertical-list {
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  overscroll-behavior: auto !important;
}

/* Full-Screen Locked Flex Rooms (WeChat Chat Room, Novel Space, Multi-Offline, Fleamarket Detail, Live):
   #appScrollBody is a non-scrolling flex column container, and its inner stage scrolls smoothly! */
#appScrollBody.is-locked-flex-room,
.app-scroll-body.is-locked-flex-room {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#appScrollBody.is-locked-flex-room > .v41-novel-space-stage,
#appScrollBody.is-locked-flex-room > .lily-offline-novel-wrap,
#appScrollBody.is-locked-flex-room > .v28-flea-detail-wrap,
#appScrollBody.is-locked-flex-room > .v28-flea-chat-shell,
#appScrollBody.is-locked-flex-room > .wx-body,
#appScrollBody.is-locked-flex-room > .chat-room-wrap,
#appScrollBody.is-locked-flex-room > .offline-scene-wrap,
#appScrollBody.is-locked-flex-room > .lily-dy-live-stage {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Inner Scrollable Stages in Locked Flex Rooms & Modals */
.v41-novel-continuous-page,
#novelSpaceContinuousBox,
.lily-53211-manuscript-stage,
#multiOfflineScrollBox,
.v28-flea-detail-scroll,
.v28-flea-chat-msgs,
#fleaChatScrollBox,
.chat-messages-box,
#chatMessagesBox,
.dy-me-scroll,
.modal-panel,
.v47-ns-modal-scroll {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-y: contain !important;
}

/* Also allow desktop pages (.page) to scroll vertically if viewport height is compact */
.page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
}

/* Smooth Horizontal Category Rails for Shop, Takeout, Fleamarket, Diary, Notebook */
.v24-cat-rail,
.v26-flea-cats,
.v47-horiz-cat-rail,
.v44-role-scroll,
.ns-top-Chapter-rail {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  padding-bottom: 4px !important;
}
.v24-cat-rail::-webkit-scrollbar,
.v26-flea-cats::-webkit-scrollbar,
.v47-horiz-cat-rail::-webkit-scrollbar,
.v44-role-scroll::-webkit-scrollbar {
  display: none !important;
}
.v24-cat-rail > *,
.v26-flea-cats > *,
.v47-horiz-cat-rail > *,
.v44-role-scroll > * {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* 1. SPLASH SCREEN & FIRST SCREEN (PAGE 1) HAUTE COUTURE DESIGN */
.v47-couture-splash {
  background: radial-gradient(circle at 20% 15%, rgba(216, 232, 250, 0.94), rgba(235, 243, 252, 0.96) 48%, rgba(220, 233, 248, 0.98) 100%) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}
.v47-splash-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(42px);
  pointer-events: none;
  opacity: 0.65;
}
.v47-splash-halo-1 {
  width: 240px;
  height: 240px;
  top: -40px;
  left: -40px;
  background: radial-gradient(circle, rgba(132, 176, 226, 0.55), transparent 70%);
}
.v47-splash-halo-2 {
  width: 260px;
  height: 260px;
  bottom: -50px;
  right: -40px;
  background: radial-gradient(circle, rgba(168, 198, 238, 0.55), transparent 70%);
}
.v47-splash-card {
  position: relative;
  z-index: 2;
  width: 86%;
  max-width: 318px;
  padding: 28px 22px 24px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 60px rgba(35, 62, 102, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-align: center;
  color: #182638;
}
.v47-splash-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: #52759c;
  margin-bottom: 14px;
}
.v47-splash-crest-ring {
  width: 78px;
  height: 78px;
  margin: 0 auto 14px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(228, 239, 252, 0.85));
  border: 1px solid rgba(120, 158, 204, 0.28);
  box-shadow: 0 12px 28px rgba(54, 95, 145, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #365f91;
}
.v47-splash-crest-svg {
  width: 48px;
  height: 48px;
}
.v47-splash-title {
  font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #162436;
  margin: 0;
}
.v47-splash-en {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #6482a6;
  margin-top: 4px;
}
.v47-splash-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 12px;
  color: #7997ba;
  font-size: 10px;
}
.v47-splash-divider span {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(82, 117, 156, 0.38), transparent);
}
.v47-splash-sub {
  font-size: 11.5px;
  color: #476282;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}
.v47-splash-tags {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.v47-splash-tags span {
  font-size: 9.5px;
  font-weight: 700;
  padding: 3.5px 9px;
  border-radius: 999px;
  background: rgba(74, 122, 178, 0.1);
  color: #365f91;
  border: 1px solid rgba(74, 122, 178, 0.18);
}
.v47-splash-enter-btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #2c4c75, #4673a8);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(44, 76, 117, 0.25);
  transition: transform 0.18s ease;
}
.v47-splash-enter-btn:active {
  transform: scale(0.97);
}

/* Page 1 First Screen Translucent Widgets */
.v47-page1-stage {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 2px;
}
.v47-hero-clock-island {
  padding: 12px 15px;
  border-radius: 24px;
  background: var(--card, rgba(255, 255, 255, 0.66));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.78));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.v47-hc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.v47-hc-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--soft, #526884);
}
.v47-hc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #4a7ab2);
  box-shadow: 0 0 8px var(--accent, #4a7ab2);
}
.v47-hc-weather {
  font-size: 10px;
  font-weight: 700;
  color: var(--soft, #526884);
  cursor: pointer;
}
.v47-hc-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.v47-hc-time {
  font-family: "SF Pro Display", "Songti SC", Georgia, serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink, #152232);
}
.v47-hc-right {
  text-align: right;
}
.v47-hc-date {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink, #152232);
}
.v47-hc-quote {
  font-size: 10px;
  color: var(--soft, #5c728d);
  margin-top: 2px;
  cursor: pointer;
}

.v47-editorial-hero-widget {
  padding: 12px 14px;
  border-radius: 24px;
  background: var(--card, rgba(255, 255, 255, 0.68));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.82));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.v47-ehw-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v47-ehw-ava-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.v47-ehw-ava {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.v47-ehw-online-ring {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid #fff;
}
.v47-ehw-meta {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.v47-ehw-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.v47-ehw-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #152232);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v47-ehw-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--block, rgba(74, 122, 178, 0.12));
  color: var(--accent, #365f91);
  flex-shrink: 0;
}
.v47-ehw-sub {
  font-size: 10.5px;
  color: var(--soft, #5c728d);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v47-ehw-switch-btn {
  padding: 5px 9px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(74, 122, 178, 0.2));
  background: var(--block, rgba(255, 255, 255, 0.65));
  color: var(--ink, #1e293b);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}
.v47-ehw-quote-box {
  padding: 8px 11px;
  border-radius: 14px;
  background: var(--block, rgba(241, 246, 253, 0.65));
  border: 1px solid var(--border, rgba(74, 122, 178, 0.12));
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink, #1e293b);
  cursor: pointer;
}
.v47-ehw-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.v47-ehw-pill {
  padding: 6px 4px;
  border-radius: 11px;
  border: 1px solid var(--border, rgba(74, 122, 178, 0.16));
  background: var(--block, rgba(255, 255, 255, 0.68));
  color: var(--ink, #1e293b);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v47-ehw-pill.primary {
  background: var(--accent, #3b6ea5);
  color: #ffffff;
  border-color: transparent;
}

.v47-bento-pair-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.v47-bento-card {
  padding: 11px 12px;
  border-radius: 22px;
  background: var(--card, rgba(255, 255, 255, 0.66));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
}
.v47-bc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v47-bc-tag {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--soft, #5c728d);
}
.v47-bc-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.v47-bc-wave i {
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent, #4a7ab2);
  animation: v47WavePulse 1.1s ease-in-out infinite alternate;
}
.v47-bc-wave i:nth-child(2) { animation-delay: 0.2s; height: 10px; }
.v47-bc-wave i:nth-child(3) { animation-delay: 0.4s; height: 6px; }
@keyframes v47WavePulse {
  0% { transform: scaleY(0.45); }
  100% { transform: scaleY(1); }
}
.v47-bc-vinyl-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.v47-bc-vinyl-disc {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, #1e293b 28%, #0f172a 70%);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
  flex-shrink: 0;
  overflow: hidden;
}
.v47-bc-cd {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.88;
}
.v47-bc-cd-hole {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(15, 23, 42, 0.5);
}
.v47-bc-song-info {
  min-width: 0;
  flex: 1;
}
.v47-bc-song {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink, #152232);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v47-bc-artist {
  font-size: 9.5px;
  color: var(--soft, #5c728d);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v47-bc-foot {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent, #3b6ea5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v47-bc-QuickApps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.v47-bc-QuickApps span {
  padding: 5px 6px;
  border-radius: 9px;
  background: var(--block, rgba(241, 246, 253, 0.72));
  border: 1px solid var(--border, rgba(74, 122, 178, 0.14));
  font-size: 10px;
  font-weight: 800;
  color: var(--ink, #1e293b);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2. LONG-TEXT APPS (DATE / OFFLINE / MULTI-OFFLINE / NOVEL_SPACE):
   REMOVE RULED LINES ("航线") & ADD PURE MINIMALIST THEMES & STANDALONE USER BAR (Item 3) */
.ns-turn-card,
.ns-reader-stage,
.v29-chapter-paper,
.v44-theater-stage,
.paper-lily_porcelain,
.paper-ivory_serif,
.paper-pure_white,
.paper-pure_alabaster,
.paper-pure_mist,
.paper-pure_sage,
.paper-pure_oat,
.paper-pure_obsidian {
  background-image: none !important;
}

.ns-reader-stage.paper-pure_white,
.v44-theater-stage.paper-pure_white,
.app-scroll-body.paper-pure_white {
  background: #ffffff !important;
  color: #111827 !important;
}
.paper-pure_white .ns-turn-card,
.paper-pure_white .v29-chapter-paper {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
}

.ns-reader-stage.paper-pure_alabaster,
.v44-theater-stage.paper-pure_alabaster {
  background: #fafaf9 !important;
  color: #1c1917 !important;
}
.paper-pure_alabaster .ns-turn-card {
  background: #ffffff !important;
  color: #1c1917 !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
}

.ns-reader-stage.paper-pure_mist,
.v44-theater-stage.paper-pure_mist {
  background: #f4f7fb !important;
  color: #0f172a !important;
}
.paper-pure_mist .ns-turn-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(59, 110, 165, 0.12) !important;
}

.ns-reader-stage.paper-pure_sage,
.v44-theater-stage.paper-pure_sage {
  background: #f3f7f4 !important;
  color: #16261e !important;
}
.paper-pure_sage .ns-turn-card {
  background: #ffffff !important;
  color: #16261e !important;
  border: 1px solid rgba(46, 94, 70, 0.12) !important;
}

.ns-reader-stage.paper-pure_oat,
.v44-theater-stage.paper-pure_oat {
  background: #faf6f0 !important;
  color: #27221d !important;
}
.paper-pure_oat .ns-turn-card {
  background: #fffdfa !important;
  color: #27221d !important;
  border: 1px solid rgba(120, 96, 72, 0.12) !important;
}

.ns-reader-stage.paper-pure_obsidian,
.v44-theater-stage.paper-pure_obsidian {
  background: #101318 !important;
  color: #f1f5f9 !important;
}
.paper-pure_obsidian .ns-turn-card {
  background: #181c24 !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

/* Standalone User Message Bar in Long-Text Apps (Item 3) */
.v47-standalone-user-turn-card {
  margin: 10px 0 8px !important;
  padding: 11px 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(240, 246, 255, 0.96), rgba(228, 238, 252, 0.92)) !important;
  border: 1px solid rgba(59, 110, 165, 0.22) !important;
  box-shadow: 0 6px 18px rgba(30, 58, 95, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.paper-pure_obsidian .v47-standalone-user-turn-card,
.paper-obsidian_night .v47-standalone-user-turn-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: #f8fafc !important;
}
.v47-sutc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #365f91;
}
.paper-pure_obsidian .v47-sutc-head {
  color: #93c5fd;
}
.v47-sutc-body {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: #1e293b;
}
.paper-pure_obsidian .v47-sutc-body {
  color: #f1f5f9;
}

/* 3. WECHAT SLEEK ACOUSTIC VOICE BUBBLE & FULL SUB-COMPONENT THEME SYNC (Item 9) */
.v47-sleek-voice-capsule {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 148px;
  max-width: 228px;
  cursor: pointer;
  user-select: none;
}
.v47-svc-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 2px;
}
.v47-svc-play-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.9;
}
.v47-svc-play-dot::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--card, #ffffff);
  margin-left: 1.5px;
}
.wx-row.me .v47-svc-play-dot::after {
  border-color: transparent transparent transparent #365f91;
}
.v47-svc-waves {
  display: flex;
  align-items: center;
  gap: 2.5px;
  flex: 1;
  height: 18px;
}
.v47-svc-waves i {
  display: inline-block;
  width: 2.5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
  transition: transform 0.2s ease;
}
.v47-sleek-voice-capsule.playing .v47-svc-waves i {
  animation: v47WavePulse 0.55s ease-in-out infinite alternate;
}
.v47-svc-sec {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.88;
  flex-shrink: 0;
}
.v47-svc-transcript {
  font-size: 11px;
  line-height: 1.48;
  padding-top: 5px;
  border-top: 1px dashed rgba(120, 140, 165, 0.25);
  opacity: 0.92;
}

/* WeChat Sub-Component Theme Synchronization (RedPacket, Transfer, Image, Call, Translation) */
.wx-body[class*="bstyle-"] .wx-redpacket-card,
.wx-body[class*="bstyle-"] .wx-transfer-card {
  border-radius: 18px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
}
.wx-body.bstyle-dark_obsidian .wx-redpacket-card,
.wx-body.bstyle-dark_obsidian .wx-transfer-card {
  background: linear-gradient(135deg, #1e2430, #12161f) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.wx-body.bstyle-sakura_mist .wx-redpacket-card,
.wx-body.bstyle-sakura_mist .wx-transfer-card {
  background: linear-gradient(135deg, rgba(255, 235, 242, 0.96), rgba(252, 216, 230, 0.92)) !important;
  color: #59253a !important;
}
.wx-body.bstyle-matcha_jade .wx-redpacket-card,
.wx-body.bstyle-matcha_jade .wx-transfer-card {
  background: linear-gradient(135deg, rgba(235, 248, 239, 0.96), rgba(214, 238, 222, 0.92)) !important;
  color: #1b3b2b !important;
}

/* 4. 8 NEW STRUCTURAL PHONE THEMES (Item 5) */
.phone-shell[data-theme="porcelain_atelier"] {
  --bg-top: #f2f6fb;
  --bg-bottom: #e2ebf5;
  --card: rgba(255, 255, 255, 0.84);
  --block: rgba(244, 248, 253, 0.9);
  --ink: #162436;
  --soft: #546a84;
  --accent: #325d8f;
  --border: rgba(50, 93, 143, 0.22);
}
.phone-shell[data-theme="porcelain_atelier"] .v47-hero-clock-island,
.phone-shell[data-theme="porcelain_atelier"] .v47-editorial-hero-widget,
.phone-shell[data-theme="porcelain_atelier"] .v47-bento-card,
.phone-shell[data-theme="porcelain_atelier"] .widget {
  border: 2px double rgba(50, 93, 143, 0.28) !important;
  border-radius: 18px !important;
}

.phone-shell[data-theme="y2k_dreamcore"] {
  --bg-top: #eef2ff;
  --bg-bottom: #e0e7ff;
  --card: rgba(255, 255, 255, 0.72);
  --block: rgba(238, 242, 255, 0.82);
  --ink: #1e1b4b;
  --soft: #4f46e5;
  --accent: #6366f1;
  --border: rgba(99, 102, 241, 0.32);
}
.phone-shell[data-theme="y2k_dreamcore"] .v47-hero-clock-island,
.phone-shell[data-theme="y2k_dreamcore"] .v47-editorial-hero-widget,
.phone-shell[data-theme="y2k_dreamcore"] .v47-bento-card,
.phone-shell[data-theme="y2k_dreamcore"] .app-icon-box {
  border-radius: 28px 10px 28px 10px !important;
  border: 1.5px solid rgba(99, 102, 241, 0.38) !important;
  box-shadow: 0 10px 26px rgba(99, 102, 241, 0.14), inset 0 1px 0 #ffffff !important;
}

.phone-shell[data-theme="magazine_vogue"] {
  --bg-top: #f8f7f4;
  --bg-bottom: #ece9e2;
  --card: rgba(255, 255, 255, 0.94);
  --block: rgba(243, 240, 234, 0.96);
  --ink: #111111;
  --soft: #525252;
  --accent: #111111;
  --border: rgba(17, 17, 17, 0.85);
}
.phone-shell[data-theme="magazine_vogue"] .v47-hero-clock-island,
.phone-shell[data-theme="magazine_vogue"] .v47-editorial-hero-widget,
.phone-shell[data-theme="magazine_vogue"] .v47-bento-card,
.phone-shell[data-theme="magazine_vogue"] .app-icon-box {
  border-radius: 6px !important;
  border: 1.5px solid #18181b !important;
  box-shadow: 3px 3px 0px #18181b !important;
}

.phone-shell[data-theme="polaroid_journal"] {
  --bg-top: #fbf8f3;
  --bg-bottom: #f2ece1;
  --card: rgba(255, 254, 250, 0.92);
  --block: rgba(247, 242, 232, 0.92);
  --ink: #2c2520;
  --soft: #786b5f;
  --accent: #8c6239;
  --border: rgba(140, 98, 57, 0.24);
}
.phone-shell[data-theme="polaroid_journal"] .v47-hero-clock-island,
.phone-shell[data-theme="polaroid_journal"] .v47-editorial-hero-widget,
.phone-shell[data-theme="polaroid_journal"] .v47-bento-card {
  border-radius: 14px !important;
  border: 1px dashed rgba(140, 98, 57, 0.38) !important;
  box-shadow: 0 8px 20px rgba(80, 60, 40, 0.08) !important;
}

.phone-shell[data-theme="gothic_velvet"] {
  --bg-top: #18131a;
  --bg-bottom: #0f0c12;
  --card: rgba(34, 25, 38, 0.86);
  --block: rgba(48, 35, 54, 0.84);
  --ink: #f5ebf7;
  --soft: #bfa5c6;
  --accent: #c88a9b;
  --border: rgba(200, 138, 155, 0.32);
}

.phone-shell[data-theme="cyber_neon_hud"] {
  --bg-top: #0d1520;
  --bg-bottom: #070b12;
  --card: rgba(16, 26, 40, 0.86);
  --block: rgba(22, 36, 56, 0.86);
  --ink: #e2f1ff;
  --soft: #6495c4;
  --accent: #38bdf8;
  --border: rgba(56, 189, 248, 0.35);
}
.phone-shell[data-theme="cyber_neon_hud"] .v47-hero-clock-island,
.phone-shell[data-theme="cyber_neon_hud"] .v47-editorial-hero-widget,
.phone-shell[data-theme="cyber_neon_hud"] .v47-bento-card {
  border-radius: 10px 22px 10px 22px !important;
  border: 1px solid rgba(56, 189, 248, 0.42) !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.12) !important;
}

.phone-shell[data-theme="zen_bamboo"] {
  --bg-top: #eff5f1;
  --bg-bottom: #e0ece4;
  --card: rgba(252, 255, 253, 0.82);
  --block: rgba(236, 245, 239, 0.88);
  --ink: #1b2e23;
  --soft: #53705f;
  --accent: #2e6f4e;
  --border: rgba(46, 111, 78, 0.22);
}

.phone-shell[data-theme="crystal_aurora"] {
  --bg-top: #f0f7ff;
  --bg-bottom: #e8effd;
  --card: rgba(255, 255, 255, 0.62);
  --block: rgba(242, 248, 255, 0.72);
  --ink: #162338;
  --soft: #577196;
  --accent: #4374b3;
  --border: rgba(255, 255, 255, 0.92);
}


/* Page 1 Exact Layout Alignment for .v47-hero-clock-island & .v47-editorial-hero-widget */
.v47-hero-clock-island {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 24px !important;
  background: var(--card, rgba(255, 255, 255, 0.68)) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.85)) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  cursor: pointer;
}
.v47-crystal-clock {
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink, #162436) !important;
}
.v47-hci-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}
.v47-hci-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.v47-hci-badge {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--block, rgba(74, 122, 178, 0.12));
  color: var(--accent, #365f91);
}
.v47-editorial-hero-widget.v43-crescent-atelier-card {
  display: grid !important;
  grid-template-columns: 1.05fr 18px 1.25fr !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 12px !important;
  border-radius: 26px !important;
  background: var(--card, rgba(255, 255, 255, 0.68)) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.86)) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.v47-prism-card {
  background: var(--block, rgba(244, 248, 254, 0.72)) !important;
  border: 1px solid var(--border, rgba(74, 122, 178, 0.14)) !important;
  border-radius: 14px !important;
  padding: 6px 10px !important;
}
.v47-pulse-mini-tag {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: var(--accent, #365f91);
  color: #ffffff;
}


/* ============================================================================
   V48 HAUTE COUTURE LOCK-SCREEN SPLASH OVERHAUL (53449.jpg 大改)
   ============================================================================ */
#lilySplashScreen.v48-couture-lockscreen {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9800 !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.92) 0%, transparent 46%),
    radial-gradient(circle at 84% 22%, rgba(164, 204, 246, 0.55) 0%, transparent 52%),
    radial-gradient(circle at 50% 85%, rgba(132, 180, 234, 0.48) 0%, transparent 58%),
    linear-gradient(165deg, #eef5fc 0%, #dceaf9 42%, #cbe0f6 78%, #bdd6f2 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 26px 20px 18px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none;
}
#lilySplashScreen.v48-couture-lockscreen.is-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.v48-lock-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(35, 72, 118, 0.16);
  border-radius: 36px;
  pointer-events: none;
  z-index: 1;
}
.v48-lf-corner {
  position: absolute;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(35, 72, 118, 0.46);
}
.v48-lf-corner.tl { top: 10px; left: 16px; }
.v48-lf-corner.tr { top: 10px; right: 16px; }
.v48-lf-corner.bl { bottom: 10px; left: 16px; }
.v48-lf-corner.br { bottom: 10px; right: 16px; }

.v48-lock-header {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.v48-lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(27, 59, 99, 0.06);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #234876;
  white-space: nowrap;
}
.v48-lock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2b6cb0;
  box-shadow: 0 0 8px rgba(43, 108, 176, 0.8);
}
.v48-lock-clock {
  font-family: "Cormorant Garamond", "Songti SC", Georgia, serif;
  font-size: 54px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: #132a46;
  text-shadow: 0 8px 24px rgba(35, 72, 118, 0.12);
  margin-top: 4px;
}
.v48-lock-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #3b5f88;
  white-space: nowrap;
}

.v48-lock-center {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 326px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.v48-arch-card {
  position: relative;
  width: 100%;
  padding: 22px 18px 20px;
  border-radius: 140px 140px 28px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(244, 249, 255, 0.78) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 24px 54px rgba(24, 52, 92, 0.13),
    inset 0 2px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.v48-arch-inner-border {
  position: absolute;
  inset: 7px;
  border-radius: 134px 134px 22px 22px;
  border: 1px dashed rgba(43, 84, 132, 0.22);
  pointer-events: none;
}
.v48-astrolabe-wrap {
  width: 116px;
  height: 116px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v48-astrolabe-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 18px rgba(27, 59, 99, 0.14));
}
.v48-eyebrow-singleline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #4a6f96;
  white-space: nowrap !important;
  margin-bottom: 6px;
}
.v48-main-title {
  font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
  font-size: 31px;
  font-weight: 900;
  color: #132944;
  letter-spacing: 0.22em;
  margin: 0;
  padding-left: 0.22em;
  display: flex;
  justify-content: center;
  gap: 4px;
  text-shadow: 0 4px 16px rgba(35, 72, 118, 0.14);
}
.v48-ornament-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 82%;
  margin: 10px auto 8px;
  color: #4a7ab5;
  font-size: 10px;
}
.v48-ornament-line span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43, 84, 132, 0.38), transparent);
}
.v48-subtitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #2c527d;
  white-space: nowrap;
  margin-bottom: 12px;
}
.v48-tag-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
}
.v48-tag-row span {
  font-size: 9.5px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(43, 84, 132, 0.09);
  border: 1px solid rgba(43, 84, 132, 0.16);
  color: #1e3f66;
  white-space: nowrap;
}

.v48-lock-notif-card {
  width: 100%;
  padding: 10px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(24, 52, 92, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.v48-lnc-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg, #1e3f66, #3b6ea5);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(30, 63, 102, 0.22);
}
.v48-lnc-body {
  flex: 1;
  min-width: 0;
}
.v48-lnc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #1e3f66;
}
.v48-lnc-top small {
  color: #6482a6;
  font-weight: 700;
}
.v48-lnc-txt {
  font-size: 11px;
  font-weight: 700;
  color: #334e6f;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v48-lock-footer {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 326px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.v48-unlock-capsule {
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(135deg, #162f4f 0%, #285080 52%, #396ca3 100%);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  white-space: nowrap !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(22, 47, 79, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.16s ease;
}
.v48-unlock-capsule:active {
  transform: scale(0.97);
}
.v48-uc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  letter-spacing: 0;
}
.v48-home-bar {
  width: 118px;
  height: 4px;
  border-radius: 999px;
  background: rgba(22, 47, 79, 0.28);
}

/* Polish Page 1 frame vertical stamp so it never overlaps the center circle */
#lwFrameAVert.v43-ca-vert-stamp {
  writing-mode: horizontal-tb !important;
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  font-size: 7.5px !important;
  letter-spacing: 0.14em !important;
  opacity: 0.55 !important;
}

/* ==========================================================================
   V47.4 WORLDBOOK DUAL-VERSION & IMPORT PREVIEW WORKBENCH STYLES
   ========================================================================== */
.wb47-dual-switch-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
  padding: 4px;
  border-radius: 11px;
  background: rgba(27, 54, 88, 0.06);
  border: 1px solid rgba(168, 198, 232, 0.45);
}

.wb47-ver-btn {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #3b597a;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  text-align: center;
  cursor: pointer;
}

.wb47-ver-btn.on {
  background: linear-gradient(135deg, #1b3658, #2b5484);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(27, 54, 88, 0.22);
}

.wb47-subentries-box,
.wb47-fullcontent-box {
  margin-top: 6px;
  border-radius: 12px;
  background: rgba(244, 249, 255, 0.85);
  border: 1px solid rgba(168, 198, 232, 0.55);
  padding: 8px 10px;
}

.wb47-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  color: #1b3658;
  cursor: pointer;
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(168, 198, 232, 0.6);
  margin-bottom: 6px;
}

.wb47-expand-link {
  color: #2b5484;
  font-size: 10px;
  font-weight: 800;
  background: rgba(43, 84, 132, 0.1);
  padding: 2px 7px;
  border-radius: 999px;
}

.wb47-sub-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 290px;
  overflow-y: auto;
  padding-right: 2px;
}

.wb47-sub-item {
  background: #ffffff;
  border: 1px solid rgba(168, 198, 232, 0.52);
  border-radius: 10px;
  padding: 7px 9px;
  transition: opacity 0.18s ease;
}

.wb47-sub-item.is-off {
  opacity: 0.48;
}

.wb47-sub-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.wb47-sub-idx {
  font-size: 9.5px;
  font-weight: 800;
  color: #ffffff;
  background: #1b3658;
  padding: 1.5px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

.wb47-sub-title {
  font-size: 12px;
  font-weight: 800;
  color: #142842;
  flex: 1;
}

.wb47-sub-body {
  font-size: 11.5px;
  line-height: 1.58;
  color: #334e68;
  white-space: pre-wrap;
  word-break: break-word;
}

.wb47-sub-edit-all-btn {
  width: 100%;
  margin-top: 4px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(27, 54, 88, 0.08);
  color: #1b3658;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.wb47-sub-collapsed-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.wb47-sub-pill-row {
  font-size: 11px;
  color: #334e68;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wb47-sub-pill-num {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  color: #2b5484;
  background: rgba(43, 84, 132, 0.12);
  padding: 0 5px;
  border-radius: 4px;
  margin-right: 4px;
}

.wb47-full-text {
  font-size: 11.5px;
  line-height: 1.62;
  color: #243b53;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.wb47-full-text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  max-height: 300px;
  overflow-y: auto;
}

.wb47-modal-ver-card {
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(236, 244, 254, 0.72);
  border: 1.5px solid rgba(168, 198, 232, 0.65);
  color: #1b3658;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}

.wb47-modal-ver-card.on {
  background: linear-gradient(135deg, #162c49, #274b78);
  color: #ffffff;
  border-color: #162c49;
  box-shadow: 0 6px 16px rgba(22, 44, 73, 0.24);
}

.wb47-imp-style-chip {
  padding: 6px 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  color: #1b3658;
  background: rgba(236, 244, 254, 0.75);
  border: 1px solid rgba(168, 198, 232, 0.6);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wb47-imp-style-chip.on {
  background: #1b3658;
  color: #ffffff;
  border-color: #1b3658;
  box-shadow: 0 3px 8px rgba(27, 54, 88, 0.2);
}

.wb47-imp-prio-card {
  padding: 8px 7px;
  border-radius: 11px;
  background: rgba(236, 244, 254, 0.75);
  border: 1.5px solid rgba(168, 198, 232, 0.65);
  color: #1b3658;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.wb47-imp-prio-card.on {
  background: linear-gradient(135deg, #1b3658, #2b5484);
  color: #ffffff;
  border-color: #1b3658;
  box-shadow: 0 5px 14px rgba(27, 54, 88, 0.25);
}

.wb47-imp-scope-pill {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #1b3658;
  background: rgba(236, 244, 254, 0.8);
  border: 1px solid rgba(168, 198, 232, 0.6);
  cursor: pointer;
}

.wb47-imp-scope-pill.on {
  background: #1b3658;
  color: #ffffff;
  border-color: #1b3658;
}



/* ==========================================================================
   V48 MASTER FIXES:
   1. RESTORE SIGNATURE ICE-WHITE-BLUE (冰白蓝色) BACKGROUND
   2. PREVENT MODAL & WORLDBOOK VERSION 2 WHITE-OUT ON MOBILE WEBKIT (53477.jpg)
   3. FULL-SCREEN VISIBLE PARTICLE CANVAS & LIVE WIDGET STUDIO (53479.jpg)
   4. 8 V47 STRUCTURAL THEMES + 24 DISTINCT HAUTE COUTURE THEMES (53481.jpg & 53483.jpg)
   ========================================================================== */

/* 1. Signature Ice-White-Blue (冰白蓝色) Default Background & Particle Canvas Layer */
html, body, .host-stage {
  background: radial-gradient(circle at 50% 16%, #f2f8ff 0%, #dbeafe 54%, #c4ddfa 100%) !important;
}

.desk-particle-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 75 !important;
}

/* 2. Zero White-Out Guarantee Inside All Modals (Fixes 53477.jpg!) */
.modal-mask {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(12, 26, 46, 0.56) !important;
}
.modal-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(180deg, #f4f9ff 0%, #e8f2fc 100%) !important;
  color: #102a43 !important;
  border-top: 2px solid #93c5fd !important;
}
.modal-panel *,
.field-input,
.field-select,
.field-textarea,
.btn-ghost {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.modal-panel .modal-title {
  color: #102a43 !important;
}
.modal-panel .field-label {
  color: #243b53 !important;
  font-weight: 800 !important;
}
.modal-panel .field-input,
.modal-panel .field-select,
.modal-panel .field-textarea {
  background: #ffffff !important;
  color: #102a43 !important;
  -webkit-text-fill-color: #102a43 !important;
  border: 1.5px solid #93c5fd !important;
}
.modal-panel .btn-ghost {
  background: #e2ecf8 !important;
  color: #102a43 !important;
  border: 1.5px solid #93c5fd !important;
  font-weight: 800 !important;
}

/* 3. Universal Theme Binding for Phone Root, Desktop, App Layer, Widgets & Cards */
#phoneRoot {
  background: var(--phone-bg, var(--app-layer-bg, linear-gradient(165deg, #eef6ff 0%, #dfeeff 48%, #cfe4fc 100%))) !important;
  color: var(--user-ink, var(--ink)) !important;
  transition: background 0.25s ease, color 0.2s ease;
}
#phoneRoot .desktop-body {
  background: transparent !important;
}
#phoneRoot .app-screen-layer {
  background: var(--app-layer-bg, linear-gradient(180deg, #eff7ff 0%, #e0effe 52%, #d2e6fc 100%)) !important;
  color: var(--user-ink, var(--ink)) !important;
}
#phoneRoot .app-screen-layer > .topbar {
  background: var(--topbar-bg, rgba(240, 247, 255, 0.90)) !important;
  color: var(--user-ink, var(--ink)) !important;
  border-bottom: 1px solid var(--hairline, rgba(147, 197, 253, 0.45)) !important;
}

/* Make all Desktop Widgets & Inner-App Cards dynamically inherit the active theme's geometry, border, background & shadow! */
#phoneRoot #appScrollBody .glass-card,
#phoneRoot #appScrollBody .v44-ed-card,
#phoneRoot #appScrollBody .v44-dossier-item,
#phoneRoot #appScrollBody .v44-stagger-card:not(.dark) {
  background: var(--card, rgba(255, 255, 255, 0.90)) !important;
  border: var(--theme-card-border, 1.5px solid rgba(147, 197, 253, 0.58)) !important;
  border-radius: var(--r-card, 22px) !important;
  box-shadow: var(--shadow-card, 0 10px 26px rgba(27, 54, 88, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95)) !important;
  color: var(--user-ink, var(--ink)) !important;
}
#phoneRoot .slot .block:not(.has-custom-icon),
#phoneRoot .dock-btn .dock-block:not(.has-custom-icon) {
  background: var(--block, linear-gradient(145deg, #ffffff 0%, #e6f2ff 100%)) !important;
  border: var(--theme-icon-border, 1.5px solid rgba(147, 197, 253, 0.72)) !important;
  border-radius: var(--r-icon, 18px) !important;
  color: var(--user-ink, var(--ink)) !important;
  box-shadow: var(--shadow-card, 0 6px 16px rgba(27, 54, 88, 0.08)) !important;
}

/* ==================== DEFAULT THEME: GLACIER (招牌经典冰白蓝色！) ==================== */
[data-palette="glacier"] {
  --paper: #d2e3f5;
  --phone-bg:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.78) 0%, rgba(212, 230, 248, 0.28) 28%, transparent 56%),
    radial-gradient(circle at 20% 62%, rgba(255, 255, 255, 0.72) 0%, rgba(196, 220, 244, 0.32) 32%, transparent 58%),
    radial-gradient(circle at 82% 78%, rgba(164, 196, 232, 0.38) 0%, transparent 52%),
    linear-gradient(165deg, #d2e3f5 0%, #dfecf9 46%, #c8dcf2 100%);
  --app-layer-bg: linear-gradient(180deg, #f2f8ff 0%, #e3f0ff 52%, #d4e7fc 100%);
  --topbar-bg: rgba(242, 248, 255, 0.92);
  --card: linear-gradient(145deg, rgba(255, 255, 255, 0.93) 0%, rgba(240, 248, 255, 0.88) 100%);
  --card-even: linear-gradient(145deg, rgba(246, 251, 255, 0.95) 0%, rgba(232, 244, 254, 0.90) 100%);
  --block: linear-gradient(145deg, #ffffff 0%, #e3f0ff 100%);
  --ink: #102a43;
  --soft: #486581;
  --accent: #2b5484;
  --r-card: 22px;
  --r-icon: 18px;
  --theme-card-border: 1.5px solid rgba(147, 197, 253, 0.65);
  --theme-odd-left-border: 3px solid #3b82f6;
  --theme-icon-border: 1.5px solid rgba(255, 255, 255, 0.96);
  --shadow-card: 0 10px 26px rgba(27, 54, 88, 0.075), inset 0 1px 0 #ffffff;
}

/* ==================== 6 BRAND-NEW RADICALLY DISTINCT THEMES ==================== */

/* New Theme 1: deep_sea_jellyfish (🪼 深海夜光水母 · 幽蓝生物荧光) */
[data-palette="deep_sea_jellyfish"] {
  --paper: #06122c;
  --phone-bg: radial-gradient(circle at 50% 20%, #102a56 0%, #071633 58%, #040b1c 100%);
  --app-layer-bg: radial-gradient(circle at 50% 15%, #123063 0%, #071633 65%, #040b1c 100%);
  --topbar-bg: rgba(7, 22, 51, 0.92);
  --card: linear-gradient(145deg, rgba(16, 42, 86, 0.86) 0%, rgba(10, 25, 54, 0.88) 100%);
  --card-even: linear-gradient(145deg, rgba(20, 50, 102, 0.88) 0%, rgba(12, 30, 64, 0.90) 100%);
  --block: linear-gradient(145deg, rgba(24, 62, 122, 0.92) 0%, rgba(12, 32, 68, 0.92) 100%);
  --ink: #e0f2fe;
  --soft: #7dd3fc;
  --accent: #38bdf8;
  --r-card: 30px;
  --r-icon: 50%;
  --theme-card-border: 1.5px solid rgba(56, 189, 248, 0.62);
  --theme-odd-left-border: 4px solid #00f2fe;
  --theme-icon-border: 1.5px solid #38bdf8;
  --shadow-card: 0 0 24px rgba(56, 189, 248, 0.25), inset 0 0 14px rgba(56, 189, 248, 0.15);
}

/* New Theme 2: sweet_cool_y2k_pink (🎀 千禧甜酷粉银 · Y2K 液态辣妹) */
[data-palette="sweet_cool_y2k_pink"] {
  --paper: #fce7f3;
  --phone-bg: linear-gradient(145deg, #fdf2f8 0%, #fce7f3 48%, #f3e8ff 100%);
  --app-layer-bg: linear-gradient(145deg, #fdf2f8 0%, #fce7f3 50%, #f3e8ff 100%);
  --topbar-bg: rgba(253, 242, 248, 0.94);
  --card: linear-gradient(145deg, #ffffff 0%, #fdf2f8 100%);
  --card-even: linear-gradient(145deg, #fff5f9 0%, #fae8ff 100%);
  --block: linear-gradient(145deg, #ffffff 0%, #fbcfe8 100%);
  --ink: #831843;
  --soft: #be185d;
  --accent: #ec4899;
  --r-card: 26px 6px 26px 6px;
  --r-icon: 20px 4px 20px 4px;
  --theme-card-border: 2px solid #ec4899;
  --theme-odd-left-border: 5px solid #db2777;
  --theme-icon-border: 2px solid #ec4899;
  --shadow-card: 4px 4px 0px #f472b6;
}

/* New Theme 3: vintage_kraft_ticket (🎫 复古牛皮纸邮票 · 蒸汽波手账) */
[data-palette="vintage_kraft_ticket"] {
  --paper: #e6d3b8;
  --phone-bg: radial-gradient(rgba(120, 53, 15, 0.14) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(180deg, #efe2ce 0%, #e0c8a8 100%);
  --app-layer-bg: radial-gradient(rgba(120, 53, 15, 0.14) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(180deg, #efe2ce 0%, #e0c8a8 100%);
  --topbar-bg: rgba(239, 226, 206, 0.95);
  --card: #fbf5eb;
  --card-even: #f5ead8;
  --block: #fbf5eb;
  --ink: #3e2723;
  --soft: #6d4c41;
  --accent: #8d4925;
  --r-card: 10px;
  --r-icon: 10px;
  --theme-card-border: 2px dashed #8d4925;
  --theme-odd-left-border: 5px double #5d4037;
  --theme-icon-border: 2px dashed #8d4925;
  --shadow-card: 3px 3px 0px rgba(93, 64, 55, 0.28);
}

/* New Theme 4: stained_glass_cathedral (🕍 鸢尾花窗彩绘 · 欧式哥特圣堂) */
[data-palette="stained_glass_cathedral"] {
  --paper: #1e1b4b;
  --phone-bg: linear-gradient(160deg, #1e1b4b 0%, #311042 52%, #172554 100%);
  --app-layer-bg: linear-gradient(160deg, #1e1b4b 0%, #311042 52%, #172554 100%);
  --topbar-bg: rgba(30, 27, 75, 0.94);
  --card: linear-gradient(145deg, rgba(49, 46, 129, 0.88) 0%, rgba(59, 7, 100, 0.86) 100%);
  --card-even: linear-gradient(145deg, rgba(30, 58, 138, 0.88) 0%, rgba(49, 46, 129, 0.88) 100%);
  --block: linear-gradient(145deg, #312e81 0%, #4c1d95 100%);
  --ink: #fef3c7;
  --soft: #fde68a;
  --accent: #fbbf24;
  --r-card: 28px 28px 10px 10px;
  --r-icon: 22px 22px 6px 6px;
  --theme-card-border: 2px double #fbbf24;
  --theme-odd-left-border: 4px solid #f59e0b;
  --theme-icon-border: 1.5px solid #fbbf24;
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(251, 191, 36, 0.4);
}

/* New Theme 5: mint_soda_pop (🥂 薄荷海盐苏打 · 盛夏冰透气泡) */
[data-palette="mint_soda_pop"] {
  --paper: #d1fae5;
  --phone-bg: radial-gradient(circle at 80% 18%, #fef9c3 0%, #d1fae5 48%, #a7f3d0 100%);
  --app-layer-bg: linear-gradient(165deg, #ecfdf5 0%, #d1fae5 52%, #ccfbf1 100%);
  --topbar-bg: rgba(236, 253, 245, 0.92);
  --card: rgba(255, 255, 255, 0.92);
  --card-even: #f0fdfa;
  --block: linear-gradient(145deg, #ffffff 0%, #a7f3d0 100%);
  --ink: #064e3b;
  --soft: #047857;
  --accent: #10b981;
  --r-card: 26px;
  --r-icon: 22px;
  --theme-card-border: 2px solid #34d399;
  --theme-odd-left-border: 4px solid #059669;
  --theme-icon-border: 2px solid #34d399;
  --shadow-card: 0 10px 24px rgba(16, 185, 129, 0.14), inset 0 2px 0 #ffffff;
}

/* New Theme 6: crimson_opera_velvet (🍷 歌剧院黑金丝绒 · 勃艮第红丝绒) */
[data-palette="crimson_opera_velvet"] {
  --paper: #1f0810;
  --phone-bg: radial-gradient(circle at 50% 15%, #3b0a18 0%, #1f0810 60%, #110307 100%);
  --app-layer-bg: linear-gradient(180deg, #2d0914 0%, #18050b 100%);
  --topbar-bg: rgba(36, 7, 16, 0.94);
  --card: linear-gradient(145deg, rgba(58, 12, 26, 0.92) 0%, rgba(34, 7, 15, 0.94) 100%);
  --card-even: linear-gradient(145deg, rgba(68, 15, 31, 0.92) 0%, rgba(40, 8, 18, 0.94) 100%);
  --block: linear-gradient(145deg, #4c0519 0%, #2a0610 100%);
  --ink: #fef3c7;
  --soft: #fcd34d;
  --accent: #f59e0b;
  --r-card: 18px;
  --r-icon: 16px;
  --theme-card-border: 1.5px solid rgba(212, 175, 55, 0.65);
  --theme-odd-left-border: 4px solid #d4af37;
  --theme-icon-border: 1.5px solid #d4af37;
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(253, 230, 138, 0.25);
}

/* ==================== 8 V47 STRUCTURAL THEMES (NOW BOUND TO [data-palette]) ==================== */
[data-palette="porcelain_atelier"] {
  --paper: #dfeeff;
  --phone-bg: linear-gradient(165deg, #f0f7ff 0%, #dcebfb 100%);
  --app-layer-bg: linear-gradient(180deg, #f2f8ff 0%, #dfeeff 100%);
  --topbar-bg: rgba(242, 248, 255, 0.94);
  --card: rgba(255, 255, 255, 0.94);
  --card-even: #f0f7ff;
  --block: #ffffff;
  --ink: #102a43;
  --soft: #486581;
  --accent: #2b5484;
  --r-card: 18px;
  --r-icon: 16px;
  --theme-card-border: 3px double #2b5484;
  --theme-odd-left-border: 4px double #1b3658;
  --theme-icon-border: 3px double #2b5484;
  --shadow-card: 0 8px 22px rgba(27, 54, 88, 0.1);
}

[data-palette="y2k_dreamcore"] {
  --paper: #e0e7ff;
  --phone-bg: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #fae8ff 100%);
  --app-layer-bg: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #fae8ff 100%);
  --topbar-bg: rgba(238, 242, 255, 0.92);
  --card: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(224, 231, 255, 0.85));
  --card-even: rgba(238, 242, 255, 0.92);
  --block: linear-gradient(145deg, #ffffff, #c7d2fe);
  --ink: #1e1b4b;
  --soft: #4338ca;
  --accent: #4f46e5;
  --r-card: 28px 8px 28px 8px;
  --r-icon: 22px 6px 22px 6px;
  --theme-card-border: 2px solid #6366f1;
  --theme-odd-left-border: 5px solid #4f46e5;
  --theme-icon-border: 2px solid #6366f1;
  --shadow-card: 3px 3px 0px #818cf8, inset 0 2px 0 #ffffff;
}

[data-palette="magazine_vogue"] {
  --paper: #ece9e2;
  --phone-bg: linear-gradient(180deg, #f8f7f4 0%, #e5e0d5 100%);
  --app-layer-bg: linear-gradient(180deg, #f8f7f4 0%, #e5e0d5 100%);
  --topbar-bg: #f8f7f4;
  --card: #ffffff;
  --card-even: #f4f1ea;
  --block: #ffffff;
  --ink: #111111;
  --soft: #404040;
  --accent: #111111;
  --r-card: 4px;
  --r-icon: 4px;
  --theme-card-border: 2px solid #111111;
  --theme-odd-left-border: 6px solid #111111;
  --theme-icon-border: 2px solid #111111;
  --shadow-card: 4px 4px 0px #111111;
}

[data-palette="polaroid_journal"] {
  --paper: #f2ece1;
  --phone-bg: linear-gradient(180deg, #fbf8f3 0%, #ebdecb 100%);
  --app-layer-bg: linear-gradient(180deg, #fbf8f3 0%, #ebdecb 100%);
  --topbar-bg: rgba(251, 248, 243, 0.94);
  --card: #fffdf9;
  --card-even: #f7f0e4;
  --block: #fffdf9;
  --ink: #2c2520;
  --soft: #6e5a4f;
  --accent: #8c6239;
  --r-card: 14px;
  --r-icon: 12px;
  --theme-card-border: 2px dashed #8c6239;
  --theme-odd-left-border: 4px solid #8c6239;
  --theme-icon-border: 2px dashed #8c6239;
  --shadow-card: 0 8px 20px rgba(80, 60, 40, 0.12);
}

[data-palette="gothic_velvet"] {
  --paper: #140d18;
  --phone-bg: radial-gradient(circle at 50% 20%, #2a1832 0%, #120b16 100%);
  --app-layer-bg: linear-gradient(180deg, #211328 0%, #110a15 100%);
  --topbar-bg: rgba(28, 17, 34, 0.94);
  --card: rgba(42, 24, 50, 0.92);
  --card-even: rgba(52, 30, 62, 0.92);
  --block: rgba(56, 32, 66, 0.94);
  --ink: #fce7f3;
  --soft: #f472b6;
  --accent: #e11d48;
  --r-card: 20px;
  --r-icon: 18px;
  --theme-card-border: 1.5px solid rgba(244, 114, 182, 0.55);
  --theme-odd-left-border: 4px solid #e11d48;
  --theme-icon-border: 1.5px solid #f472b6;
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.48);
}

[data-palette="cyber_neon_hud"] {
  --paper: #07101e;
  --phone-bg: linear-gradient(160deg, #0b192e 0%, #050b14 100%);
  --app-layer-bg: linear-gradient(160deg, #0b192e 0%, #050b14 100%);
  --topbar-bg: rgba(8, 18, 34, 0.94);
  --card: rgba(13, 28, 52, 0.92);
  --card-even: rgba(17, 36, 66, 0.92);
  --block: rgba(18, 40, 72, 0.94);
  --ink: #e0f2fe;
  --soft: #38bdf8;
  --accent: #00f2fe;
  --r-card: 8px 22px 8px 22px;
  --r-icon: 6px 16px 6px 16px;
  --theme-card-border: 1.5px solid #00f2fe;
  --theme-odd-left-border: 4px solid #00f2fe;
  --theme-icon-border: 1.5px solid #00f2fe;
  --shadow-card: 0 0 18px rgba(0, 242, 254, 0.22);
}

[data-palette="zen_bamboo"] {
  --paper: #dcefe3;
  --phone-bg: linear-gradient(180deg, #eef7f1 0%, #d4eadc 100%);
  --app-layer-bg: linear-gradient(180deg, #eef7f1 0%, #d4eadc 100%);
  --topbar-bg: rgba(238, 247, 241, 0.94);
  --card: rgba(255, 255, 255, 0.92);
  --card-even: #e6f4ea;
  --block: #ffffff;
  --ink: #14532d;
  --soft: #166534;
  --accent: #15803d;
  --r-card: 20px;
  --r-icon: 18px;
  --theme-card-border: 1.5px solid rgba(21, 128, 61, 0.45);
  --theme-odd-left-border: 4px solid #15803d;
  --theme-icon-border: 1.5px solid rgba(21, 128, 61, 0.5);
  --shadow-card: 0 8px 22px rgba(20, 83, 45, 0.08);
}

[data-palette="crystal_aurora"] {
  --paper: #dff2ff;
  --phone-bg: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 50%, #ede9fe 100%);
  --app-layer-bg: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 50%, #ede9fe 100%);
  --topbar-bg: rgba(224, 242, 254, 0.9);
  --card: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(224, 242, 254, 0.82));
  --card-even: rgba(237, 233, 254, 0.85);
  --block: linear-gradient(145deg, #ffffff, #bae6fd);
  --ink: #0c4a6e;
  --soft: #0369a1;
  --accent: #0284c7;
  --r-card: 28px;
  --r-icon: 22px;
  --theme-card-border: 2px solid #ffffff;
  --theme-odd-left-border: 4px solid #38bdf8;
  --theme-icon-border: 2px solid #ffffff;
  --shadow-card: 0 12px 28px rgba(2, 132, 199, 0.14), inset 0 2px 4px #ffffff;
}

/* Elevate Distinctness of Classic Palettes (frost, mica, linen, matcha, daiqing, oatmeal, ouhe) */
[data-palette="frost"] {
  --phone-bg: linear-gradient(165deg, #e2e8f0 0%, #cbd5e1 100%);
  --app-layer-bg: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%);
  --theme-card-border: 1.5px solid #94a3b8;
  --theme-odd-left-border: 4px solid #475569;
}
[data-palette="mica"] {
  --phone-bg: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  --app-layer-bg: #ffffff;
  --theme-card-border: 1px solid #cbd5e1;
  --theme-odd-left-border: 3px solid #0f172a;
}
[data-palette="linen"] {
  --phone-bg: linear-gradient(180deg, #f5ebe0 0%, #e3d5ca 100%);
  --app-layer-bg: linear-gradient(180deg, #faf3eb 0%, #e6d7c8 100%);
  --theme-card-border: 1.5px solid #b08968;
  --theme-odd-left-border: 4px solid #7f5539;
}
[data-palette="matcha"] {
  --phone-bg: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  --app-layer-bg: linear-gradient(180deg, #ecfdf5 0%, #bbf7d0 100%);
  --theme-card-border: 1.5px solid #4ade80;
  --theme-odd-left-border: 4px solid #15803d;
}
[data-palette="daiqing"] {
  --phone-bg: linear-gradient(180deg, #cfe2eb 0%, #9cb8c7 100%);
  --app-layer-bg: linear-gradient(180deg, #e0eef5 0%, #b3cbd9 100%);
  --theme-card-border: 1.5px solid #0284c7;
  --theme-odd-left-border: 4px solid #0369a1;
}
[data-palette="oatmeal"] {
  --phone-bg: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  --app-layer-bg: linear-gradient(180deg, #fffbeb 0%, #fef08a 100%);
  --theme-card-border: 1.5px solid #f59e0b;
  --theme-odd-left-border: 4px solid #b45309;
}
[data-palette="ouhe"] {
  --phone-bg: linear-gradient(145deg, #fce7f3 0%, #e9d5ff 100%);
  --app-layer-bg: linear-gradient(145deg, #fdf2f8 0%, #f3e8ff 100%);
  --theme-card-border: 1.5px solid #c084fc;
  --theme-odd-left-border: 4px solid #9333ea;
}


/* ============================================================================
   LILY BLUE OS v48 — 5 MAJOR BUG FIXES & HAUTE-EDITORIAL FOLIO ARCHITECTURE
   ============================================================================ */

/* 1. 微信角色消息上方的「思维链」胶囊与展开抽屉 */
.lily-wx-cot-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 4px;
  max-width: 272px;
}
.lily-wx-cot-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(54, 95, 145, 0.18);
  color: #475d75;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: all 0.18s ease;
}
.lily-wx-cot-pill:hover,
.lily-wx-cot-pill.open {
  background: rgba(235, 245, 255, 0.92);
  color: #1b3658;
  border-color: rgba(54, 95, 145, 0.35);
}
.lily-wx-cot-pill .lwcp-arrow {
  font-size: 10px;
  color: #5c7896;
}
.lily-wx-cot-pill .lwcp-ico {
  font-size: 11px;
}
.lily-wx-cot-drawer {
  margin-top: 5px;
  padding: 9px 11px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(74, 122, 178, 0.22);
  color: #2c4663;
  font-size: 11px;
  line-height: 1.62;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 2. 真实感语音通话与视频通话全屏界面 */
.call-layer.v48-real-call {
  position: absolute;
  inset: 0;
  z-index: 260;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #f8fafc;
  background: #0b1320;
}
.v48-call-fullscreen-feed {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: all 0.3s ease;
}
.call-layer.call-voice .v48-call-fullscreen-feed {
  filter: blur(26px) saturate(1.15) brightness(0.52);
  transform: scale(1.12);
}
.call-layer.call-video .v48-call-fullscreen-feed {
  filter: blur(14px) brightness(0.46);
  transform: scale(1.06);
}
.v48-call-feed-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 15, 28, 0.72) 0%, rgba(8, 15, 28, 0.28) 42%, rgba(8, 15, 28, 0.85) 100%);
}
.v48-call-hud-top {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 8px;
  gap: 8px;
}
.v48-call-hud-pill {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.v48-call-hud-center {
  text-align: center;
  min-width: 0;
  flex: 1;
}
.v48-call-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.v48-call-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(226, 232, 240, 0.86);
  margin-top: 2px;
}
.v48-call-bpm {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.22);
  border: 1px solid rgba(251, 113, 133, 0.35);
  color: #ffe4e6;
  font-size: 10.5px;
  font-weight: 800;
}
.v48-call-hud-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.v48-video-viewport {
  position: relative;
  z-index: 3;
  flex: 1;
  min-height: 190px;
  margin: 4px 14px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 42, 0.45);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v48-video-center-lens {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.v48-video-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v48-video-live-caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  right: 110px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 18, 32, 0.68);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 10.5px;
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v48-vlc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
}
.v48-video-pip {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 82px;
  height: 112px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  background: #1e293b;
}
.v48-video-pip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v48-pip-swap-tag {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v48-voice-viewport {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
}
.v48-voice-ava-ring {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.v48-voice-ava {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 2;
}
.v48-pulse-r {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(186, 230, 253, 0.35);
  animation: v48PulseRing 2.6s infinite ease-out;
}
.v48-pulse-r.r2 {
  inset: -14px;
  animation-delay: 1.1s;
}
@keyframes v48PulseRing {
  0% { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.22); opacity: 0; }
}
.v48-voice-status-line {
  font-size: 11.5px;
  color: rgba(226, 232, 240, 0.88);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.v48-call-transcript {
  position: relative;
  z-index: 4;
  max-height: 150px;
  overflow-y: auto;
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.v48-call-line {
  display: flex;
  flex-direction: column;
  max-width: 86%;
}
.v48-call-line.mine {
  align-self: flex-end;
  align-items: flex-end;
}
.v48-call-line.theirs {
  align-self: flex-start;
  align-items: flex-start;
}
.v48-cl-action,
.v48-cl-speaker {
  font-size: 10px;
  color: rgba(186, 230, 253, 0.86);
  margin-bottom: 2px;
  padding: 0 4px;
}
.v48-cl-speech {
  padding: 8px 12px;
  border-radius: 15px;
  font-size: 12.5px;
  line-height: 1.52;
  backdrop-filter: blur(12px);
}
.v48-call-line.theirs .v48-cl-speech {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.v48-call-line.mine .v48-cl-speech {
  background: rgba(54, 95, 145, 0.82);
  border: 1px solid rgba(147, 197, 253, 0.35);
  color: #ffffff;
}
.v48-cl-trans {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
  font-size: 11px;
  color: rgba(226, 232, 240, 0.88);
}
.v48-call-bottom-area {
  position: relative;
  z-index: 4;
  padding: 6px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v48-call-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.v48-call-inp {
  flex: 1;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-size: 12.5px;
  outline: none;
}
.v48-call-inp::placeholder {
  color: rgba(226, 232, 240, 0.65);
}
.v48-call-send-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4a7ab2, #2b5484);
  border: 1px solid rgba(186, 230, 253, 0.4);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

/* 3. 百合蓝机原创 · 高定光影场记流 (Lily Blue Lumière Folio Stage) */
.lily-folio-stage {
  --folio-bg: #f6f9fc;
  --folio-card: rgba(255, 255, 255, 0.94);
  --folio-user-card: rgba(235, 244, 255, 0.88);
  --folio-ink: #162436;
  --folio-muted: #5a708a;
  --folio-border: rgba(148, 176, 210, 0.28);
  --folio-accent: #2b5484;
  background: var(--folio-bg) !important;
  color: var(--folio-ink) !important;
}
/* 10款长文主题实时色彩变量同步 */
.lily-folio-stage.offtheme-pure_white,
.lily-folio-stage.ns-paper-pure_white,
.lily-folio-stage.offtheme-minimal_float {
  --folio-bg: #ffffff;
  --folio-card: #ffffff;
  --folio-user-card: #f8fafc;
  --folio-ink: #0f172a;
  --folio-muted: #64748b;
  --folio-border: rgba(15, 23, 42, 0.1);
  --folio-accent: #1e293b;
}
.lily-folio-stage.offtheme-pure_alabaster,
.lily-folio-stage.ns-paper-pure_alabaster,
.lily-folio-stage.offtheme-ivory,
.lily-folio-stage.ns-paper-ivory {
  --folio-bg: #faf6ef;
  --folio-card: rgba(255, 252, 246, 0.96);
  --folio-user-card: rgba(245, 238, 226, 0.92);
  --folio-ink: #2c2218;
  --folio-muted: #786552;
  --folio-border: rgba(140, 115, 85, 0.22);
  --folio-accent: #6b4c35;
}
.lily-folio-stage.offtheme-pure_mist,
.lily-folio-stage.ns-paper-pure_mist,
.lily-folio-stage.offtheme-glacier,
.lily-folio-stage.ns-paper-glacier,
.lily-folio-stage.offtheme-glacier_ruled {
  --folio-bg: #eef5fc;
  --folio-card: rgba(255, 255, 255, 0.94);
  --folio-user-card: rgba(224, 238, 254, 0.88);
  --folio-ink: #142842;
  --folio-muted: #4e6a8a;
  --folio-border: rgba(74, 126, 187, 0.25);
  --folio-accent: #2b5484;
}
.lily-folio-stage.offtheme-pure_sage,
.lily-folio-stage.ns-paper-pure_sage,
.lily-folio-stage.offtheme-jade,
.lily-folio-stage.ns-paper-jade,
.lily-folio-stage.offtheme-botanical_journal {
  --folio-bg: #eff6f2;
  --folio-card: rgba(252, 255, 253, 0.95);
  --folio-user-card: rgba(226, 240, 232, 0.9);
  --folio-ink: #163024;
  --folio-muted: #4d6b5d;
  --folio-border: rgba(72, 128, 102, 0.24);
  --folio-accent: #275942;
}
.lily-folio-stage.offtheme-pure_oat,
.lily-folio-stage.ns-paper-pure_oat {
  --folio-bg: #f5efe6;
  --folio-card: rgba(253, 250, 245, 0.95);
  --folio-user-card: rgba(242, 233, 220, 0.9);
  --folio-ink: #2b2118;
  --folio-muted: #73604c;
  --folio-border: rgba(135, 110, 82, 0.24);
  --folio-accent: #5e4732;
}
.lily-folio-stage.offtheme-sakura,
.lily-folio-stage.ns-paper-sakura,
.lily-folio-stage.offtheme-rose_lace_letter {
  --folio-bg: #fdf2f6;
  --folio-card: rgba(255, 252, 254, 0.95);
  --folio-user-card: rgba(252, 234, 242, 0.9);
  --folio-ink: #381826;
  --folio-muted: #825066;
  --folio-border: rgba(190, 110, 145, 0.25);
  --folio-accent: #9d3b65;
}
.lily-folio-stage.offtheme-pure_obsidian,
.lily-folio-stage.ns-paper-pure_obsidian,
.lily-folio-stage.offtheme-cyber_terminal {
  --folio-bg: #0f141d;
  --folio-card: rgba(22, 29, 42, 0.95);
  --folio-user-card: rgba(30, 42, 62, 0.92);
  --folio-ink: #e2e8f0;
  --folio-muted: #94a3b8;
  --folio-border: rgba(148, 163, 184, 0.2);
  --folio-accent: #60a5fa;
}

.lily-folio-scroll-viewport {
  flex: 1;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y !important;
  padding: 10px 11px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.lily-folio-prelude-bar {
  background: var(--folio-card);
  border: 1px solid var(--folio-border);
  border-radius: 16px;
  padding: 9px 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}
.lfpb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.lfpb-badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(43, 84, 132, 0.12);
  color: var(--folio-accent);
  flex-shrink: 0;
}
.lfpb-hint {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--folio-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lfpb-mini-btn {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(43, 84, 132, 0.1);
  color: var(--folio-accent);
  border: 1px solid var(--folio-border);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.lfpb-mini-btn.danger {
  color: #be123c;
  background: rgba(190, 18, 60, 0.08);
}
.lfpb-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--folio-border);
}
.lily-folio-empty-state {
  padding: 28px 18px;
  border-radius: 18px;
  border: 1.5px dashed var(--folio-border);
  background: var(--folio-card);
  text-align: center;
  margin: 4px 0;
}
.lfes-emblem {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--folio-accent);
  margin-bottom: 6px;
}
.lfes-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--folio-ink);
  margin-bottom: 5px;
}
.lfes-sub {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--folio-muted);
}

/* 高定场记卡片 (区别于普通聊天气泡与横线本) */
.lily-folio-act-card {
  background: var(--folio-card);
  color: var(--folio-ink);
  border: 1px solid var(--folio-border);
  border-radius: 18px;
  padding: 13px 14px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.045);
  flex-shrink: 0;
}
.lily-folio-act-card.is-user {
  background: var(--folio-user-card);
  border-left: 3.5px solid var(--folio-accent);
}
.lfac-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 9px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--folio-border);
}
.lfac-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.lfac-ava {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid var(--folio-border);
  flex-shrink: 0;
}
.lfac-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.lfac-speaker {
  font-size: 13px;
  font-weight: 900;
  color: var(--folio-ink);
}
.lfac-act-pill {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 1.5px 6px;
  border-radius: 6px;
  background: rgba(43, 84, 132, 0.12);
  color: var(--folio-accent);
}
.lfac-bpm-tag,
.lfac-role-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--folio-muted);
}
.lfac-time {
  font-size: 10px;
  color: var(--folio-muted);
  margin-top: 2px;
}
.lfac-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.lfac-act-btn {
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid var(--folio-border);
  color: var(--folio-muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.lfac-act-btn.cot {
  color: var(--folio-accent);
  background: rgba(43, 84, 132, 0.1);
}
.lfac-act-btn.danger {
  color: #be123c;
}
.lfac-cot-drawer {
  margin-bottom: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(43, 84, 132, 0.08);
  border: 1px dashed var(--folio-border);
  font-size: 11px;
  line-height: 1.62;
  color: var(--folio-ink);
}
.lily-folio-epigraph {
  font-size: 12.5px;
  font-weight: 900;
  color: var(--folio-accent);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.lily-folio-prose-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lily-folio-para {
  margin: 0;
  line-height: 1.78;
  color: var(--folio-ink);
  text-align: justify;
  word-break: break-word;
}
.lily-folio-dialogue {
  font-weight: 700;
  color: var(--folio-accent);
  border-bottom: 1.5px solid rgba(43, 84, 132, 0.28);
  padding-bottom: 1px;
}
.lily-folio-stage.offtheme-pure_obsidian .lily-folio-dialogue,
.lily-folio-stage.ns-paper-pure_obsidian .lily-folio-dialogue {
  color: #93c5fd;
  border-bottom-color: rgba(147, 197, 253, 0.35);
}
.lfac-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--folio-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--folio-muted);
}
.lfac-foot-share {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(43, 84, 132, 0.1);
  color: var(--folio-accent);
  border: none;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}


/* ==========================================================================
   V49 CRITICAL BUG FIXES & REAL INTERACTIVE COMPONENT STYLES
   ========================================================================== */

/* 1. Fix Incoming Call Overlay (53521.jpg): Must be absolute full-screen above modals, never pushing statusbar down! */
.v47-incoming-call-overlay,
#incomingCallOverlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(10, 18, 32, 0.82) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  padding: 20px !important;
}
#incomingCallOverlay[style*="display: none"],
#incomingCallOverlay[style*="display:none"] {
  display: none !important;
}
#incomingCallOverlay[style*="display: flex"],
#incomingCallOverlay[style*="display:flex"] {
  display: flex !important;
}

/* 2. Fix Reply Button Never Upside-Down (53529.jpg) */
#wxAiReplyBtn,
.chat-reply-btn.v41-labeled-reply {
  transform: none !important;
}
#wxAiReplyBtn:active,
.chat-reply-btn.v41-labeled-reply:active {
  transform: scale(0.95) !important;
}
#wxAiReplyBtn.spinning,
.chat-reply-btn.v41-labeled-reply.spinning {
  animation: v49PulseReply 1.1s ease-in-out infinite !important;
  transform: none !important;
}
@keyframes v49PulseReply {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.68; }
}

/* 3. Fix Toast Float Click-to-Close & Never Stuck (53531.jpg) */
.toast-float {
  cursor: pointer !important;
  pointer-events: none;
  z-index: 100002 !important;
}
.toast-float.show {
  pointer-events: auto !important;
}

/* 4. Authentic Interactive WeChat Red Packet Card & Modal (53527.jpg) */
.wx-redpacket-card {
  width: 232px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #f45245 0%, #e03c31 100%);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(224, 60, 49, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.18);
  user-select: none;
}
.wx-redpacket-card:active {
  transform: scale(0.97);
}
.wx-redpacket-card.is-claimed {
  background: linear-gradient(135deg, #f99b93 0%, #ef847b 100%);
  box-shadow: 0 4px 12px rgba(224, 60, 49, 0.12);
}
.wx-rp-top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px 11px;
}
.wx-rp-icon {
  width: 38px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(160deg, #fde68a 0%, #f59e0b 100%);
  color: #b91c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.wx-rp-info {
  flex: 1;
  min-width: 0;
}
.wx-rp-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #fffbeb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-rp-sub {
  font-size: 10.5px;
  color: rgba(255, 251, 235, 0.88);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-rp-foot {
  background: rgba(255, 255, 255, 0.96);
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 5. Universal In-Phone Custom Select Picker (Fixes 53523.jpg unselectable <select> in WebViews) */
.v49-custom-select-mask {
  position: absolute !important;
  inset: 0 !important;
  z-index: 100005 !important;
  background: rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.v49-custom-select-sheet {
  width: 100%;
  max-height: 72%;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fc 100%);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border-top: 2px solid #93c5fd;
  box-shadow: 0 -14px 40px rgba(15, 23, 42, 0.22);
  padding: 14px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v49-css-options {
  overflow-y: auto !important;
  max-height: 52vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}
.v49-css-opt-btn {
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: 13px;
  background: #ffffff;
  border: 1.5px solid rgba(147, 197, 253, 0.45);
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.v49-css-opt-btn.active {
  background: linear-gradient(135deg, #1b3658, #2b5484);
  color: #ffffff;
  border-color: #1b3658;
}


/* =========================================================================
   V50 OVERHAUL:
   1) Fix Long-Text 3-Dot Modal Middle Section Clipping (53549.jpg)
   2) Haute Couture Red Packet Cards (53547.jpg)
   3) WeChat Location Cards (发送位置 / 角色发位置)
   4) Mini Theater Internal Beautification (53552.jpg: 小手机聊天体 / 电影分镜 / 论坛体 / 信笺体)
   5) Resource Warehouse Studio (资源仓库 6大分类)
   ========================================================================= */

/* 1. Prevent flex children inside .v47-ns-modal-scroll from shrinking or clipping */
.v47-ns-modal-scroll > * {
  flex-shrink: 0 !important;
}
.v47-ns-modal-scroll .v41-offline-preset-hub,
.v47-ns-modal-scroll .lily-aa-floating-popover {
  max-height: none !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* 2. Haute Couture Red Packet Bubble (高定丝绒鎏金 / 冰川雾蓝银盐 / 雾樱火漆 / 玄夜黑金) */
.wx-redpacket-card {
  width: 244px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  position: relative !important;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease !important;
  border: 1px solid rgba(212, 175, 55, 0.42) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  background: linear-gradient(145deg, #8c1d2c 0%, #641220 55%, #3d0a13 100%) !important;
  color: #fdf8f0 !important;
}
.wx-redpacket-card.rp-theme-glacier_silver {
  background: linear-gradient(145deg, #243b55 0%, #141e30 60%, #0f172a 100%) !important;
  border-color: rgba(186, 214, 247, 0.45) !important;
}
.wx-redpacket-card.rp-theme-sakura_wax {
  background: linear-gradient(145deg, #9d4e66 0%, #6e2e44 58%, #471a2b 100%) !important;
  border-color: rgba(249, 208, 220, 0.45) !important;
}
.wx-redpacket-card.rp-theme-obsidian_gilt {
  background: linear-gradient(145deg, #1e222d 0%, #12151e 60%, #090b10 100%) !important;
  border-color: rgba(234, 198, 122, 0.5) !important;
}
.wx-redpacket-card:active {
  transform: scale(0.975) !important;
}
.wx-redpacket-card.claimed {
  opacity: 0.9 !important;
  filter: saturate(0.86);
}
.wx-rp-ornament-arc {
  position: absolute;
  top: -42px;
  left: -10%;
  width: 120%;
  height: 92px;
  border-radius: 50%;
  border-bottom: 1.2px solid rgba(246, 216, 150, 0.36);
  background: radial-gradient(circle at 50% 0%, rgba(255, 235, 186, 0.16), transparent 72%);
  pointer-events: none;
}
.wx-rp-top {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 15px 15px 13px !important;
  background: transparent !important;
}
.wx-rp-seal {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fbe6b2 0%, #d8ab56 58%, #a67828 100%);
  border: 1.5px solid rgba(255, 248, 224, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 0 0 2px rgba(120, 76, 14, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #4a2508;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.wx-redpacket-card.rp-theme-glacier_silver .wx-rp-seal {
  background: radial-gradient(circle at 32% 28%, #f8fafc 0%, #bfd9f5 58%, #6d96c4 100%);
  color: #10243e;
}
.wx-rp-eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(248, 225, 176, 0.78);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.wx-redpacket-card.rp-theme-glacier_silver .wx-rp-eyebrow {
  color: rgba(206, 228, 252, 0.82);
}
.wx-rp-title {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #fffaf0 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-rp-sub {
  font-size: 11px !important;
  color: rgba(255, 245, 228, 0.82) !important;
  margin-top: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-rp-amt-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 6px !important;
  padding: 2.5px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 243, 209, 0.16) !important;
  border: 1px solid rgba(248, 222, 162, 0.35) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #fce5b4 !important;
}
.wx-redpacket-card.rp-theme-glacier_silver .wx-rp-amt-badge {
  color: #e0f2fe !important;
  border-color: rgba(186, 230, 253, 0.35) !important;
}
.wx-rp-foot {
  padding: 6.5px 15px !important;
  background: rgba(10, 12, 18, 0.28) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 9.5px !important;
  color: rgba(255, 248, 235, 0.72) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}

/* 3. WeChat Location Card (.wx-location-card) */
.wx-location-card {
  width: 242px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(43, 84, 132, 0.18);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.wx-location-card:active {
  transform: scale(0.98);
}
.wx-loc-head {
  padding: 11px 13px 9px;
  background: #ffffff;
}
.wx-loc-title {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wx-loc-addr {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.4;
}
.wx-loc-map-stage {
  height: 84px;
  position: relative;
  background: linear-gradient(135deg, #e6f0fa 0%, #d5e6f7 55%, #c7ddf4 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(43, 84, 132, 0.1);
  border-bottom: 1px solid rgba(43, 84, 132, 0.1);
}
.wx-loc-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.wx-loc-pin-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wx-loc-pin-bubble {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(20, 40, 66, 0.88);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
  margin-bottom: 3px;
}
.wx-loc-pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2b5484;
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 0 6px rgba(43, 84, 132, 0.22);
}
.wx-loc-foot {
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #2b5484;
  background: rgba(241, 247, 255, 0.9);
}

/* 4. Mini Theater Internal Beautification (53552.jpg: 小剧场内部聊天体/分镜/论坛/信笺美化) */
.shiyi-inner-phone-shell {
  border-radius: 22px;
  background: linear-gradient(180deg, #eef5fc 0%, #e3eef9 100%);
  border: 1.5px solid rgba(74, 126, 187, 0.32);
  box-shadow: 0 10px 28px rgba(20, 42, 72, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  margin: 6px 0;
}
.sips-statusbar {
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.76);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #1e3a5f;
}
.sips-chat-header {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sips-body {
  padding: 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sips-sys-pill {
  align-self: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  max-width: 92%;
  line-height: 1.45;
}
.sips-narration-card {
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
  border-left: 3px solid #2b5484;
  color: #1e293b;
  font-size: 12.5px;
  line-height: 1.68;
}
.sips-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sips-msg-row.is-me {
  flex-direction: row-reverse;
}
.sips-ava {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
  flex-shrink: 0;
}
.sips-bubble-col {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.sips-msg-row.is-me .sips-bubble-col {
  align-items: flex-end;
}
.sips-sender-name {
  font-size: 9.5px;
  font-weight: 800;
  color: #64748b;
  margin: 0 4px 2px;
}
.sips-bubble {
  padding: 8.5px 12px;
  border-radius: 15px;
  font-size: 13px;
  line-height: 1.55;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
  word-break: break-word;
}
.sips-msg-row.is-me .sips-bubble {
  background: linear-gradient(135deg, #2b5484, #1e3a5f);
  color: #ffffff;
  border: none;
}
.sips-footbar {
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.86);
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #64748b;
}

.shiyi-inner-cinema-card {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,248,253,0.94));
  border: 1px solid rgba(43, 84, 132, 0.22);
  padding: 13px 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.shiyi-inner-forum-card {
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  padding: 12px 13px;
}
.shiyi-forum-floor {
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  margin-top: 7px;
}


/* ============================================================================
   LILY BLUE MINI PHONE V51 · UNIVERSAL 2D SCROLL, CALL BUTTONS & VOICE/REVERSE FIXES
   ============================================================================ */

/* 1. Fix 53580.jpg & All Apps Horizontal + Vertical Scrolling */
#appScrollBody:not(.is-locked-flex-room),
.app-scroll-body:not(.is-locked-flex-room) {
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.v45-sec-deck-nav {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  margin-bottom: 10px !important;
}

.v44-ed-tabs.v46-scrollable-ed-tabs,
.v45-sec-deck-nav .v44-ed-tabs,
.v47-horiz-cat-rail,
.v24-cat-rail,
.v26-flea-cats,
.atelier-role-strip,
.summary-char-rail,
.wx-group-at-bar,
.lily-wx-filter-row,
.v44-filter-strip,
.v30-dossier-nav,
.seg-pill-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  cursor: grab;
}

.v44-ed-tabs.v46-scrollable-ed-tabs:active,
.v45-sec-deck-nav .v44-ed-tabs:active,
.v47-horiz-cat-rail:active,
.v24-cat-rail:active,
.atelier-role-strip:active,
.summary-char-rail:active {
  cursor: grabbing;
}

.v44-ed-tabs.v46-scrollable-ed-tabs::-webkit-scrollbar,
.v45-sec-deck-nav .v44-ed-tabs::-webkit-scrollbar,
.v47-horiz-cat-rail::-webkit-scrollbar,
.v24-cat-rail::-webkit-scrollbar,
.atelier-role-strip::-webkit-scrollbar,
.summary-char-rail::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
}

.v44-ed-tabs.v46-scrollable-ed-tabs > *,
.v45-sec-deck-nav .v44-ed-tabs > *,
.v47-horiz-cat-rail > *,
.v24-cat-rail > *,
.v26-flea-cats > *,
.atelier-role-strip > *,
.summary-char-rail > *,
.wx-group-at-bar > *,
.lily-wx-filter-row > *,
.v44-filter-strip > * {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* 2. Fix 53564.jpg & 53569.jpg: Call Screen Button Overflow & Subtitle Wrapping */
.v48-call-sub {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.v48-call-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.v48-call-inp {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 38px !important;
}

.v48-call-send-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: max-content !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* 3. Fix 53571.jpg: Natural Playable WeChat Voice Bubble Styling */
.wx-voice-bubble-v51 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 138px;
  max-width: 248px;
  cursor: pointer;
  user-select: none;
}
.wx-vb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px;
}
.wx-vb-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(43, 84, 132, 0.14);
  color: #1e3a5f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
.chat-msg-row.user .wx-vb-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.wx-vb-waves {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 16px;
  flex: 1;
}
.wx-vb-waves i {
  display: inline-block;
  width: 2.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.72;
  transition: height 0.2s ease;
}
.wx-voice-bubble-v51.playing .wx-vb-waves i {
  animation: v51WavePulse 0.6s infinite ease-in-out alternate;
}
@keyframes v51WavePulse {
  0% { transform: scaleY(0.55); opacity: 0.5; }
  100% { transform: scaleY(1.25); opacity: 1; }
}
.wx-vb-dur {
  font-size: 11.5px;
  font-weight: 800;
  opacity: 0.88;
  white-space: nowrap;
}
.wx-vb-tone-tag {
  font-size: 9.5px;
  color: #52708f;
  background: rgba(43, 84, 132, 0.07);
  padding: 2px 7px;
  border-radius: 6px;
  align-self: flex-start;
}
.wx-vb-transcript {
  font-size: 12px;
  line-height: 1.55;
  padding-top: 5px;
  border-top: 1px dashed rgba(148, 163, 184, 0.28);
  opacity: 0.94;
}


/* ==========================================================================
   V1.0 FULL UPGRADE:
   1. Model / Option Picker Row-by-Row Radio Dialog (Matches 53597.jpg 1:1!)
   2. Delicate Non-Blocking Atmospheric Particle Layer
   3. Mini-Theater Single Bubble & Offline Streaming Cursor Polish
   ========================================================================== */
.v49-custom-select-mask {
  position: absolute !important;
  inset: 0 !important;
  z-index: 100010 !important;
  background: rgba(15, 23, 42, 0.52) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

.v49-custom-select-sheet {
  width: 100% !important;
  max-width: 342px !important;
  max-height: 72vh !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: 0 !important;
}

.v49-css-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
}

.v49-css-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.v49-css-search-wrap {
  padding: 8px 14px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
}

.v49-css-search-inp {
  width: 100% !important;
  padding: 7px 11px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 12.5px !important;
  color: #0f172a !important;
  outline: none !important;
}

.v49-css-list,
.v49-css-options {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: 56vh !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.v49-css-opt,
.v49-css-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.38 !important;
  text-align: left !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.12s ease !important;
}

.v49-css-opt:last-child {
  border-bottom: none !important;
}

.v49-css-opt:hover,
.v49-css-opt:active {
  background: #f1f5f9 !important;
}

.v49-css-opt.active {
  background: #f8fafc !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.v49-css-opt-label {
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 14px !important;
  word-break: break-word !important;
  white-space: normal !important;
  text-align: left !important;
}

.v49-radio-circle {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.v49-css-opt.active .v49-radio-circle {
  border-color: #0d8a72 !important;
}

.v49-radio-circle i {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #0d8a72 !important;
  display: block !important;
}

/* Delicate non-blocking particle canvas */
.desk-particle-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 45 !important;
  opacity: 0.78 !important;
}

/* Streaming blinking cursor */
@keyframes v1BlinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
.v1-stream-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #2b5484;
  vertical-align: -2px;
  margin-left: 2px;
  animation: v1BlinkCursor 0.85s infinite;
}


/* === ROUND 2 BUGFIX OVERRIDES (53621, 53623, 53625) === */
.v47-incoming-call-overlay,
#incomingCallOverlay {
  position: absolute !important;
  top: 36px !important;
  left: 10px !important;
  right: 10px !important;
  bottom: auto !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  z-index: 100025 !important;
  display: none;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
}

.v1-top-call-banner {
  pointer-events: auto !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1px solid rgba(125, 211, 252, 0.35) !important;
  box-shadow: 0 14px 34px rgba(2, 8, 23, 0.45) !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  animation: v1CallBannerSlideDown 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes v1CallBannerSlideDown {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Fix GPU compositor grey rectangle bug in video/voice call transcript & input */
.call-layer.v48-real-call .v48-call-transcript {
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}
.call-layer.v48-real-call .v48-call-line {
  transform: translateZ(0);
  will-change: transform;
}
.call-layer.v48-real-call .v48-cl-speech {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(24, 34, 50, 0.92) !important;
  color: #ffffff !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
  transform: translateZ(0);
}
.call-layer.v48-real-call .v48-call-line.mine .v48-cl-speech {
  background: linear-gradient(135deg, #2b5484, #1b3658) !important;
  color: #ffffff !important;
  border: 1px solid rgba(125, 211, 252, 0.35) !important;
  border-bottom-right-radius: 4px !important;
}
.call-layer.v48-real-call .v48-call-line.theirs .v48-cl-speech {
  background: rgba(26, 37, 54, 0.93) !important;
  color: #f8fafc !important;
  border-bottom-left-radius: 4px !important;
}
.call-layer.v48-real-call .v48-call-inp,
#callInput {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(20, 29, 44, 0.94) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(148, 184, 226, 0.38) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.call-layer.v48-real-call .v48-call-hud-pill,
.call-layer.v48-real-call .v48-call-hud-icon,
.call-layer.v48-real-call .v48-video-live-caption,
.call-layer.v48-real-call .v48-call-bpm {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15, 23, 42, 0.88) !important;
}


/* ===== FIX: 根治手机端下拉触发浏览器刷新 → 被弹回桌面 ===== */
html, body {
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  overflow: hidden !important;
  height: 100% !important;
  position: fixed !important;
  width: 100% !important;
  top: 0; left: 0;
}
.host-stage, .phone, .desktop-body, .pager, .page,
#appScreenLayer, #appScrollBody, .app-scroll-body,
#wxChatMsgScroll, #chatMessagesBox,
#novelSpaceContinuousBox, #multiOfflineScrollBox {
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
}


/* ============ 百合蓝机 · 冰蓝花影锁屏 (v55) ============ */
.v54-vignette { position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(130% 100% at 50% 40%, transparent 54%, rgba(150,186,228,0.22) 100%); }

/* 四角飘逸草叶 */
.v55-corner { position:absolute; width:168px; height:168px; z-index:2; pointer-events:none; opacity:0.9; }
.v55-corner.tlc { left:-8px; bottom:120px; animation:v55Sway2 11s ease-in-out infinite; }
.v55-corner.brc { right:-6px; top:150px; animation:v55Sway2 13s ease-in-out infinite reverse; }
@keyframes v55Sway2 { 0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2deg);} }

/* 散落星子与飞花 */
.v55-stars { position:absolute; inset:0; z-index:2; pointer-events:none; }
.v55-star { position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(120,162,214,0.7);
  box-shadow:0 0 6px rgba(150,186,236,0.8); animation:v55Tw 3.4s ease-in-out infinite; }
.v55-star.s1{left:18%;top:20%;} .v55-star.s2{left:80%;top:16%;animation-delay:-.6s;}
.v55-star.s3{left:30%;top:34%;width:2px;height:2px;animation-delay:-1.1s;} .v55-star.s4{left:72%;top:40%;animation-delay:-1.7s;}
.v55-star.s5{left:12%;top:58%;width:2px;height:2px;animation-delay:-2.2s;} .v55-star.s6{left:86%;top:62%;animation-delay:-.9s;}
.v55-star.s7{left:50%;top:12%;width:2px;height:2px;animation-delay:-1.4s;}
@keyframes v55Tw { 0%,100%{opacity:.22;transform:scale(.8);} 50%{opacity:1;transform:scale(1.15);} }
.v55-petal { position:absolute; font-size:12px; color:rgba(130,170,220,0.55); animation:v55Drift 9s ease-in-out infinite; }
.v55-petal.p1{left:24%;top:26%;} .v55-petal.p2{left:76%;top:30%;font-size:10px;animation-delay:-3s;}
.v55-petal.p3{left:40%;top:70%;font-size:16px;animation-delay:-5s;} .v55-petal.p4{left:66%;top:66%;font-size:9px;animation-delay:-2s;}
@keyframes v55Drift { 0%,100%{transform:translateY(0) rotate(0);opacity:.35;} 50%{transform:translateY(-14px) rotate(20deg);opacity:.8;} }

.v54-silk { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; opacity:0.6; }
.v54-silk path { stroke-dasharray:600; animation:v54Silk 15s linear infinite; }
.v54-silk-b { animation-delay:-5s !important; } .v54-silk-c { animation-delay:-9s !important; }
@keyframes v54Silk { 0%{stroke-dashoffset:600;opacity:0;} 20%{opacity:.7;} 80%{opacity:.7;} 100%{stroke-dashoffset:-600;opacity:0;} }

.v54-top { position:relative; z-index:5; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:8px; }
.v54-clock { font-family:"Optima","Avenir Next","PingFang SC","Songti SC",serif;
  font-size:38px; font-weight:300; line-height:1; letter-spacing:0.08em; color:#2a4668; text-shadow:0 2px 10px rgba(150,186,228,0.4); }
.v54-date { font-family:"Songti SC","Noto Serif SC",serif; font-size:10.5px; font-weight:500; letter-spacing:0.3em; color:rgba(74,110,156,0.78); padding-left:0.3em; }

.v54-core { position:relative; z-index:5; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:opacity 1.1s ease, transform 1.1s ease; }
.v54-core.is-flowing { opacity:0; transform:translateY(18px) scale(0.985); }
.v54-core.is-coalesced { opacity:1; transform:none; }

.v54-ink { width:286px; height:268px; margin-bottom:6px; filter:drop-shadow(0 8px 22px rgba(120,160,214,0.35)); animation:v54Sway 9s ease-in-out infinite; }
.v54-ink svg { width:100%; height:100%; overflow:visible; }
@keyframes v54Sway { 0%,100%{transform:rotate(-1.5deg) translateY(0);} 50%{transform:rotate(1.5deg) translateY(-7px);} }
.v54-fall1 { animation:v54Fall 6s ease-in infinite; }
.v54-fall2 { animation:v54Fall 7.5s ease-in infinite; animation-delay:-3s; }
@keyframes v54Fall { 0%{transform:translate(0,0) rotate(0);opacity:0;} 15%{opacity:1;} 100%{transform:translate(-26px,90px) rotate(160deg);opacity:0;} }
.v54-twk1,.v54-twk2,.v54-twk3 { animation:v54Twinkle 3.2s ease-in-out infinite; }
.v54-twk2 { animation-delay:-1s; } .v54-twk3 { animation-delay:-2s; }
@keyframes v54Twinkle { 0%,100%{opacity:.25;} 50%{opacity:1;} }

.v54-title { margin:0; font-family:"云峰飞云体","styleSanDdesign","Zhi Mang Xing","字酷堂清楷体","演示佳人体","华文行楷","STXingkai","方正字迹-邢体草书","CursiveChinese","cursive","楷体",serif;
  font-size:54px; font-weight:400; letter-spacing:0.16em; padding-left:0.16em; font-style:italic;
  background:linear-gradient(180deg,#305c93 0%,#2e5a90 42%,#5a8ac2 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 4px 18px rgba(130,176,232,0.3); }
.v54-rule { display:flex; align-items:center; justify-content:center; gap:13px; width:186px; margin:14px 0 11px; }
.v54-rule i { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(90,138,194,0.5),transparent); }
.v54-rule b { font-size:12px; color:rgba(74,122,181,0.8); }
.v54-sub { font-family:"Songti SC","Noto Serif SC",serif; font-size:11px; font-weight:500; letter-spacing:0.46em; color:rgba(74,110,156,0.72); padding-left:0.46em; }

.v54-foot { position:relative; z-index:5; width:100%; display:flex; flex-direction:column; align-items:center; gap:13px; }
.v54-poem { font-family:"Songti SC","Noto Serif SC",serif; font-size:12.5px; letter-spacing:0.3em; color:rgba(90,130,178,0.66); padding-left:0.3em; }
.v54-chip { font-size:10px; font-weight:600; letter-spacing:0.1em; color:rgba(60,100,150,0.78);
  padding:6px 16px; border-radius:999px; background:rgba(255,255,255,0.5); border:1px solid rgba(120,160,214,0.28);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 4px 14px rgba(120,160,214,0.14); }
.v54-unlock { display:flex; flex-direction:column; align-items:center; gap:2px; color:rgba(74,118,170,0.66); animation:v54Float 2.6s ease-in-out infinite; }
.v54-arrow { font-size:14px; font-weight:700; line-height:1; }
.v54-utext { font-size:9.5px; font-weight:600; letter-spacing:0.24em; padding-left:0.24em; }
@keyframes v54Float { 0%,100%{transform:translateY(0);opacity:.5;} 50%{transform:translateY(-5px);opacity:.95;} }
.lily-splash-screen .v48-home-bar { background:rgba(90,130,178,0.4) !important; }

.v55-cloud { stroke-dasharray:4 10; animation:v55CloudDrift 9s linear infinite; }
.v55-cloud.c2 { animation-duration:12s; animation-direction:reverse; }
.v55-cloud.c3 { animation-duration:15s; }
@keyframes v55CloudDrift { to { stroke-dashoffset:-140; } }
.v55-flock { animation:v55FlockFloat 6s ease-in-out infinite; transform-origin:center; }
@keyframes v55FlockFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }



.v56-title { margin:0; display:flex; justify-content:center; gap:0.08em; padding-left:0.08em; }
.v56-title span {
  font-family:"华文行楷","STXingkai","华文新魏","STXinwei","方正舒体","FZShuTi","楷体","KaiTi","Songti SC",serif;
  font-size:56px; font-weight:400; line-height:1;
  display:inline-block; transform:rotate(var(--r,0)) translateY(var(--y,0));
  background:linear-gradient(165deg,#5a8ac2 0%,#315c92 50%,#4f84c0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 4px 18px rgba(120,166,224,0.28);
  animation:v56Breathe 5s ease-in-out infinite;
}
.v56-title span:nth-child(2){ animation-delay:.3s; } .v56-title span:nth-child(3){ animation-delay:.6s; } .v56-title span:nth-child(4){ animation-delay:.9s; }
@keyframes v56Breathe { 0%,100%{ transform:rotate(var(--r,0)) translateY(var(--y,0)); } 50%{ transform:rotate(var(--r,0)) translateY(calc(var(--y,0) - 3px)); } }

/* ---- v57 标题徽章装饰 ---- */
.v57-star { width:34px; height:34px; margin-bottom:6px; opacity:0.9; animation:v57Twinkle 3.6s ease-in-out infinite; }
.v57-star svg { width:100%; height:100%; }
@keyframes v57Twinkle { 0%,100%{opacity:.5;transform:scale(.92) rotate(0);} 50%{opacity:1;transform:scale(1) rotate(8deg);} }
.v57-titlewrap { display:flex; align-items:center; justify-content:center; gap:10px; }
.v57-vine { width:62px; height:52px; flex-shrink:0; }
.v57-vine.left { animation:v57VineL 7s ease-in-out infinite; }
.v57-vine.right { animation:v57VineR 7s ease-in-out infinite; }
@keyframes v57VineL { 0%,100%{transform:translateX(0);} 50%{transform:translateX(-3px);} }
@keyframes v57VineR { 0%,100%{transform:translateX(0);} 50%{transform:translateX(3px);} }
.v57-title {
  margin:0; font-family:"Songti SC","Noto Serif SC","STSong",Georgia,serif;
  font-size:40px; font-weight:600; letter-spacing:0.16em; padding-left:0.16em; white-space:nowrap;
  background:linear-gradient(170deg,#3f6ba3 0%,#2d5589 52%,#4a7ab5 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 3px 14px rgba(120,166,224,0.22);
}
.v57-eyebrow {
  margin-top:10px; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:9px; font-weight:600; letter-spacing:0.3em; color:rgba(74,110,156,0.6); padding-left:0.3em;
}

/* ============================================================================
   V60 HAUTE GLACIER GLASS & ASTROLABE LOCKSCREEN + PARTICLE VISIBILITY FIX
   ============================================================================ */
#lilySplashScreen.v60-editorial-splash {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9800 !important;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(255, 255, 255, 0.96) 0%, rgba(240, 248, 255, 0.4) 48%, transparent 100%),
    radial-gradient(100% 85% at 88% 18%, rgba(186, 230, 253, 0.72) 0%, rgba(147, 197, 253, 0.25) 55%, transparent 100%),
    radial-gradient(110% 90% at 50% 92%, rgba(147, 197, 253, 0.65) 0%, rgba(191, 219, 254, 0.25) 60%, transparent 100%),
    linear-gradient(168deg, #f8fbff 0%, #e6f1fe 38%, #d3e5fb 74%, #c2dbf8 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 32px 22px 18px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none;
}

.v60-aurora-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.v60-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.75;
  animation: v60OrbFloat 9s ease-in-out infinite;
}
.v60-orb.orb-1 {
  width: 240px;
  height: 240px;
  top: -40px;
  right: -50px;
  background: radial-gradient(circle, rgba(125, 211, 252, 0.65) 0%, rgba(59, 130, 246, 0.08) 70%);
}
.v60-orb.orb-2 {
  width: 260px;
  height: 260px;
  bottom: 90px;
  left: -70px;
  background: radial-gradient(circle, rgba(165, 243, 252, 0.55) 0%, rgba(147, 197, 253, 0.1) 70%);
  animation-delay: -3.5s;
}
.v60-orb.orb-3 {
  width: 190px;
  height: 190px;
  top: 38%;
  left: 24%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(191, 219, 254, 0.12) 70%);
  animation-delay: -6s;
}
@keyframes v60OrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8px, -14px) scale(1.06); }
}

.v60-grid-overlay {
  position: absolute;
  inset: 14px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
  background-image:
    linear-gradient(to right, rgba(59, 130, 246, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.85) 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.85) 20%, transparent 90%);
}

.v60-splash-top {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.v60-sys-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #1e3a8a;
}

.v60-sys-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 8px #38bdf8;
  animation: v60PulseDot 2.2s ease-in-out infinite;
}
@keyframes v60PulseDot {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
}

.v60-clock {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
  font-size: 62px !important;
  font-weight: 200 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(180deg, #0f172a 0%, #1e3a8a 60%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 18px rgba(59, 130, 246, 0.16));
  margin-top: 2px;
}

.v60-date {
  font-family: "Plus Jakarta Sans", -apple-system, "PingFang SC", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #334e68 !important;
  opacity: 0.85;
}

.v60-core {
  position: relative;
  z-index: 5;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.v60-prism-card {
  position: relative;
  width: 100%;
  max-width: 316px;
  padding: 18px 18px 20px;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.78) 0%, rgba(240, 249, 255, 0.52) 52%, rgba(224, 242, 254, 0.68) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 20px 45px rgba(15, 23, 42, 0.08),
    0 4px 14px rgba(59, 130, 246, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.v60-card-shine {
  position: absolute;
  top: -60%;
  left: -40%;
  width: 180%;
  height: 120%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
  transform: rotate(-15deg);
  animation: v60CardShimmer 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes v60CardShimmer {
  0%, 100% { transform: translateX(-30%) rotate(-15deg); }
  50% { transform: translateX(30%) rotate(-15deg); }
}

.v60-card-topline {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #476582;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.12);
}

.v60-astrolabe {
  width: 148px;
  height: 148px;
  margin: 10px 0 6px;
  position: relative;
  filter: drop-shadow(0 8px 20px rgba(59, 130, 246, 0.2));
}
.v60-astrolabe svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.v60-spin-slow {
  transform-origin: 110px 110px;
  animation: v60Spin 24s linear infinite;
}
@keyframes v60Spin {
  to { transform: rotate(360deg); }
}

.v60-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.v60-en-title {
  font-family: "Didot", "Bodoni MT", "Cormorant Garamond", "Georgia", serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.v60-zh-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.v60-line {
  flex: 1;
  max-width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 58, 138, 0.35), transparent);
}

.v60-zh-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  color: #1e3a8a;
}

.v60-tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

.v60-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: #1e40af;
  padding: 3.5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(147, 197, 253, 0.55);
}

.v60-notif-card {
  width: 100%;
  max-width: 316px;
  padding: 10px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  gap: 11px;
}

.v60-notif-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.v60-notif-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.v60-notif-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #475569;
}

.v60-notif-top span {
  color: #0284c7;
  background: rgba(14, 165, 233, 0.12);
  padding: 1px 6px;
  border-radius: 999px;
}

.v60-notif-txt {
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v60-splash-foot {
  gap: 8px !important;
}

/* Ensure desktop ambient particles are 100% visible on the home screen */
.desk-particle-canvas,
#deskParticleCanvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 82 !important;
  opacity: 1 !important;
  display: block !important;
}

/* Fallback tile when sticker URL is broken or pure text/meaning */
.sticker-fallback-tile {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(145deg, #f0f7ff, #dbeafe);
  border: 1px solid rgba(59, 130, 246, 0.28);
  color: #1e3a8a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   V61 FLUID-TO-TYPOGRAPHY MORPHING SPLASH SCREEN ("先流动，最后缓缓变成字")
   ============================================================================ */
#lilySplashScreen.v61-fluid-morph-splash {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9800 !important;
  background:
    radial-gradient(110% 80% at 20% 15%, rgba(255, 255, 255, 0.96) 0%, transparent 55%),
    radial-gradient(100% 80% at 85% 28%, rgba(186, 230, 253, 0.65) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 88%, rgba(147, 197, 253, 0.58) 0%, transparent 65%),
    linear-gradient(170deg, #f8fbff 0%, #eaf3fe 42%, #d8e9fb 78%, #c7dff9 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 44px 24px 20px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none;
}

.v61-fluid-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.v61-liquid-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.v61-stream {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.72;
  animation: v61LiquidFlow 8s ease-in-out infinite alternate;
}
.v61-stream.s-1 {
  width: 320px;
  height: 180px;
  top: 22%;
  left: -60px;
  background: linear-gradient(120deg, rgba(125, 211, 252, 0.55), rgba(255, 255, 255, 0.8));
}
.v61-stream.s-2 {
  width: 340px;
  height: 200px;
  top: 42%;
  right: -70px;
  background: linear-gradient(240deg, rgba(96, 165, 250, 0.42), rgba(224, 242, 254, 0.85));
  animation-delay: -2.8s;
}
.v61-stream.s-3 {
  width: 260px;
  height: 260px;
  top: 34%;
  left: 16%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0%, rgba(186, 230, 253, 0.15) 70%);
  animation-delay: -5.2s;
}
@keyframes v61LiquidFlow {
  0% { transform: translate3d(-18px, 10px, 0) rotate(-6deg) scale(0.95); }
  50% { transform: translate3d(16px, -14px, 0) rotate(4deg) scale(1.08); }
  100% { transform: translate3d(-8px, -6px, 0) rotate(-2deg) scale(1.02); }
}

.v61-top {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: v61SoftReveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.v61-clock {
  font-family: "Cormorant Garamond", "Didot", "Bodoni MT", "Songti SC", serif !important;
  font-size: 52px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: #1e3a5f !important;
  text-shadow: 0 4px 20px rgba(147, 197, 253, 0.45) !important;
}
.v61-date {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.34em !important;
  padding-left: 0.34em !important;
  color: rgba(30, 58, 95, 0.65) !important;
}

/* Central Morph Stage: starts dissolved in flowing liquid, then slowly coalesces into crisp characters! */
.v61-morph-stage {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  pointer-events: none;
}

.v61-fluid-halo {
  position: absolute;
  width: 240px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.82) 0%, rgba(186, 230, 253, 0.28) 55%, transparent 78%);
  filter: blur(16px);
  z-index: -1;
}

.v61-morph-zh {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22em;
  padding-left: 0.22em;
  font-family: "Noto Serif SC", "Songti SC", "STSong", "华文宋体", Georgia, serif;
  font-size: 44px;
  font-weight: 500;
  color: #1b365d;
}

.v61-morph-zh .v61-char {
  display: inline-block;
  background: linear-gradient(180deg, #162e52 0%, #2b5484 55%, #4a7ebb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 18px rgba(74, 126, 187, 0.25));
  transition:
    opacity 1.65s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--char-idx, 0) * 0.16s);
}

/* While fluid is flowing (first 1.65s): characters are dissolved in liquid blur & drifted apart */
.v61-morph-stage.is-flowing .v61-char {
  opacity: 0;
  filter: blur(20px);
  transform: translateY(18px) scale(1.18) rotate(-3deg);
}

/* When fluid coalesces into words: characters smoothly condense into sharp, luminous strokes */
.v61-morph-stage.is-coalesced .v61-char {
  opacity: 1;
  filter: blur(0px) drop-shadow(0 6px 18px rgba(74, 126, 187, 0.24));
  transform: translateY(0) scale(1) rotate(0deg);
}

.v61-morph-en {
  margin-top: 14px;
  font-family: "Cormorant Garamond", "Didot", Georgia, serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.46em;
  padding-left: 0.46em;
  color: rgba(30, 58, 95, 0.72);
  transition: opacity 1.6s ease 0.55s, filter 1.6s ease 0.55s, letter-spacing 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
}
.v61-morph-stage.is-flowing .v61-morph-en {
  opacity: 0;
  filter: blur(12px);
  letter-spacing: 0.85em;
}
.v61-morph-stage.is-coalesced .v61-morph-en {
  opacity: 0.88;
  filter: blur(0px);
  letter-spacing: 0.46em;
}

.v61-morph-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 150px;
  margin: 14px 0 12px;
  transition: opacity 1.5s ease 0.85s, transform 1.5s ease 0.85s;
}
.v61-morph-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.42), transparent);
}
.v61-morph-divider i {
  font-style: normal;
  font-size: 10px;
  color: rgba(43, 84, 132, 0.65);
}
.v61-morph-stage.is-flowing .v61-morph-divider {
  opacity: 0;
  transform: scaleX(0.4);
}
.v61-morph-stage.is-coalesced .v61-morph-divider {
  opacity: 1;
  transform: scaleX(1);
}

.v61-morph-sub {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  padding-left: 0.16em;
  color: rgba(30, 58, 95, 0.68);
  transition: opacity 1.5s ease 1.05s, transform 1.5s ease 1.05s;
}
.v61-morph-stage.is-flowing .v61-morph-sub {
  opacity: 0;
  transform: translateY(10px);
}
.v61-morph-stage.is-coalesced .v61-morph-sub {
  opacity: 0.85;
  transform: translateY(0);
}

.v61-foot {
  position: relative;
  z-index: 5;
  gap: 10px !important;
}
.v61-unlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(30, 58, 95, 0.62);
}
.v61-ripple-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);
  animation: v61RipplePulse 2.2s infinite;
}
@keyframes v61RipplePulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
@keyframes v61SoftReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   v70 · 启动屏 · 象牙白高定版（纯白留白 · 发丝细线 · 衬线排版）
   ===================================================================== */
#lilySplashScreen.v70-ivory-splash {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9800 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 58px 30px 22px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
  color: #1a2433;
  background:
    radial-gradient(120% 60% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 55%, #f6f4ef 100%) !important;
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), visibility .7s !important;
}
#lilySplashScreen.v70-ivory-splash.is-hidden {
  opacity: 0 !important;
  transform: scale(1.02) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#lilySplashScreen .v70-hidden-canvas { display: none !important; }

/* 内嵌发丝细线画框 */
#lilySplashScreen .v70-frame {
  position: absolute;
  inset: 14px;
  border: 0.5px solid rgba(26, 36, 51, 0.14);
  border-radius: 34px;
  pointer-events: none;
}

#lilySplashScreen .v70-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 300px;
  font: 500 9.5px/1 "Cormorant Garamond", "Didot", Georgia, serif;
  letter-spacing: .32em;
  color: rgba(26, 36, 51, .55);
  opacity: 0;
  animation: v70Rise 1s .1s cubic-bezier(.22,1,.36,1) forwards;
}
#lilySplashScreen .v70-top-rule {
  flex: 1;
  height: 0.5px;
  background: rgba(26, 36, 51, .22);
}

#lilySplashScreen .v70-clock-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 4vh;
  opacity: 0;
  animation: v70Rise 1.1s .25s cubic-bezier(.22,1,.36,1) forwards;
}
#lilySplashScreen .v70-clock {
  font: 300 64px/1 "Cormorant Garamond", "Didot", "Bodoni 72", Georgia, serif;
  letter-spacing: .04em;
  color: #121a26;
  font-variant-numeric: lining-nums;
}
#lilySplashScreen .v70-date {
  margin-top: 10px;
  font: 400 11px/1 -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  letter-spacing: .28em;
  color: rgba(26, 36, 51, .5);
}

#lilySplashScreen .v70-core {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6vh;
}
#lilySplashScreen .v70-emblem {
  width: 84px;
  height: 84px;
  margin-bottom: 26px;
  overflow: visible;
}
#lilySplashScreen .v70-ring {
  fill: none;
  stroke: rgba(26, 36, 51, .28);
  stroke-width: .6;
  stroke-dasharray: 352;
  stroke-dashoffset: 352;
  animation: v70Draw 1.8s .35s cubic-bezier(.65,0,.35,1) forwards;
}
#lilySplashScreen .v70-ring-inner {
  stroke: rgba(43, 84, 132, .35);
  stroke-dasharray: 296;
  stroke-dashoffset: 296;
  animation-delay: .6s;
}
#lilySplashScreen .v70-lily path {
  stroke: #2b5484;
  stroke-width: 1;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: v70Draw 1.6s .9s cubic-bezier(.65,0,.35,1) forwards;
}
#lilySplashScreen .v70-title {
  margin: 0;
  padding-left: .5em; /* 抵消字距带来的视觉偏右 */
  font: 400 30px/1.1 "Noto Serif SC", "Songti SC", "STSong", serif;
  letter-spacing: .5em;
  color: #121a26;
  opacity: 0;
  animation: v70Rise 1.2s 1.15s cubic-bezier(.22,1,.36,1) forwards;
}
#lilySplashScreen .v70-en {
  margin-top: 14px;
  padding-left: .6em;
  font: italic 400 13px/1 "Cormorant Garamond", "Didot", Georgia, serif;
  letter-spacing: .6em;
  color: #2b5484;
  opacity: 0;
  animation: v70Rise 1.2s 1.3s cubic-bezier(.22,1,.36,1) forwards;
}
#lilySplashScreen .v70-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 16px;
  opacity: 0;
  animation: v70Fade 1.2s 1.5s ease forwards;
}
#lilySplashScreen .v70-divider span {
  width: 42px;
  height: .5px;
  background: rgba(26, 36, 51, .3);
}
#lilySplashScreen .v70-divider i {
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  border: .5px solid #2b5484;
}
#lilySplashScreen .v70-sub {
  font: 400 10.5px/1 -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  letter-spacing: .3em;
  color: rgba(26, 36, 51, .48);
  opacity: 0;
  animation: v70Fade 1.2s 1.65s ease forwards;
}

#lilySplashScreen .v70-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
#lilySplashScreen .v70-enter {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 10px/1 -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  letter-spacing: .42em;
  color: rgba(26, 36, 51, .55);
  opacity: 0;
  animation: v70Fade 1s 2s ease forwards, v70Breath 3.2s 3s ease-in-out infinite;
}
#lilySplashScreen .v70-enter-line {
  width: 18px;
  height: .5px;
  background: rgba(26, 36, 51, .35);
}
#lilySplashScreen .v70-home-bar {
  width: 124px;
  height: 4px;
  border-radius: 4px;
  background: rgba(18, 26, 38, .82);
}

@keyframes v70Rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v70Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v70Draw { to { stroke-dashoffset: 0; } }
@keyframes v70Breath { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  #lilySplashScreen.v70-ivory-splash *,
  #lilySplashScreen.v70-ivory-splash *::before { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
}

/* 表情包图片链接失效提示卡 */
.sticker-fallback-tile.sticker-dead-tile {
  background: #fff7f5 !important;
  border: 1px dashed rgba(190, 70, 50, 0.45) !important;
  color: #a5402d !important;
  box-shadow: none !important;
}
.sticker-fallback-tile.sticker-dead-tile span { color: #a5402d !important; font-weight: 700; }

/* =====================================================================
   v71 · 全页面输入框打字零闪烁 / 零白屏 / 零桌面穿透终极修复
   1. 打开任何应用或弹窗时彻底隐藏底层 .desktop-body 与顶层 #deskParticleCanvas，
      根治软键盘弹出/收起或打字重绘时桌面图标穿透闪现（Fixes 53729.mp4 & 53731.mp4）
   2. 全面移除应用层、弹窗层、输入框与气泡的 backdrop-filter 实时背景采样与
      无限缩放动画（bpmPulse / appSlideUp），消除移动端 GPU 合成器纹理驱逐闪白屏
   3. 为所有页面层级提供 100% 不透明硬件底色，锁定输入框与滚动容器合成层
   ===================================================================== */

/* 1. 桌面粒子画布降回桌面层级，且在打开应用、弹窗或打字时彻底隐藏 */
.desk-particle-canvas,
#deskParticleCanvas {
  z-index: 4 !important;
}
#phoneRoot.app-is-open > #deskParticleCanvas,
#phoneRoot.modal-is-open > #deskParticleCanvas,
#phoneRoot.is-typing > #deskParticleCanvas,
#phoneRoot:has(#appScreenLayer.open) > #deskParticleCanvas,
#phoneRoot:has(#douyinShell.open) > #deskParticleCanvas,
#phoneRoot:has(#modalMask.open) > #deskParticleCanvas {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 2. 当应用层或抖音层打开时，彻底隐藏底层桌面并暂停桌面一切后台动画，绝不允许穿透闪现 */
#phoneRoot.app-is-open > .desktop-body,
#phoneRoot:has(#appScreenLayer.open) > .desktop-body,
#phoneRoot:has(#douyinShell.open) > .desktop-body {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#phoneRoot.app-is-open > .desktop-body *,
#phoneRoot:has(#appScreenLayer.open) > .desktop-body *,
#phoneRoot:has(#douyinShell.open) > .desktop-body * {
  animation-play-state: paused !important;
  transition: none !important;
}

/* 3. 所有容器提供 100% 不透明硬件纯色底衬，防止软键盘伸缩重绘瞬间渐变纹理未就绪导致透明或闪白 */
#phoneRoot,
#phoneRoot .app-screen-layer,
#appScreenLayer,
#appScrollBody,
.app-scroll-body,
.chat-room-wrap,
.wx-body {
  background-color: var(--paper, #e8f0f7) !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* 4. 彻底移除应用内、弹窗内、底栏输入框、气泡与顶栏的 backdrop-filter 毛玻璃重采样，根治打字闪白屏 */
#appScreenLayer,
#appScreenLayer *,
#appScreenLayer *::before,
#appScreenLayer *::after,
#modalMask,
#modalMask *,
#douyinShell,
#douyinShell *,
#callLayer,
#callLayer *,
#phoneRoot.is-typing *,
input,
textarea,
select {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 为原本依赖毛玻璃的顶栏、状态栏横幅、底部输入栏、气泡与抽屉提供高质感实心渐变底色 */
#phoneRoot .app-screen-layer > .topbar,
.topbar {
  background: var(--topbar-bg, #f2f8ff) !important;
  background-color: var(--paper, #f2f8ff) !important;
}
.wx-live-status-ribbon {
  background: var(--card, #f6faff) !important;
  background-color: var(--c-white, #ffffff) !important;
}
.wx-live-status-ribbon > div > span:first-child,
.offline-invite-card.lily-oic-card,
.v41-cltb-dot,
.chat-plus-drawer {
  animation: none !important;
  transform: none !important;
}
.chat-room-wrap .chat-bottom-dock,
.chat-bottom-dock {
  background: var(--card-solid, #ffffff) !important;
  background-color: var(--c-white, #ffffff) !important;
  transition: none !important;
}
.chat-msg-row.ai .chat-bubble {
  background: var(--card-solid, #ffffff);
  background-color: var(--c-white, #ffffff);
}
.chat-plus-drawer,
.chat-sticker-drawer,
.lily-mwx-inputbar,
.v28-flea-chat-inputbar,
.lily-nbb-bar,
.wx-search-pill,
.lily-wx-search-box,
.shop-search-bar,
.v26-flea-searchbar {
  background-color: var(--c-white, #ffffff) !important;
  animation: none !important;
  transition: none !important;
}

/* 5. 全页面所有输入框、文本域零过渡、零抖动，隔离光标闪烁重绘区域 */
input,
textarea,
select,
.field-input,
.field-textarea,
.field-select,
.chat-flat-inp,
.chat-capsule-inp,
.lily-nbb-inp,
.lily-mwx-inp,
.v48-call-inp,
.call-input {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 6. 滚动容器关闭浏览器自动锚点跳动与过度合成，确保打字与上屏时视口纹丝不动 */
#appScrollBody,
.app-scroll-body,
#wxChatMsgScroll,
#wxGroupMsgScroll,
.chat-messages-box,
#offlineScrollBox,
#multiOfflineScrollBox,
#novelSpaceContinuousBox,
#fleaChatScrollBox,
#dateScrollBox,
#modalPanel,
.modal-panel {
  overflow-anchor: none !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 7. 移动端软键盘弹出/候选词栏高度微调时，锁定舞台与机身铺满视口，禁止 flex 居中重算引起整页上下跳闪 */
@media (max-width: 500px) {
  .host-stage {
    width: 100% !important;
    height: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    transition: none !important;
  }
  .phone,
  #phoneRoot {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
  }
}





/* ============================================================================
   LILY BLUE OS · V98 CREATIVE MULTI-SHAPE SPLICED ATELIER WIDGETS
   - 告别密集立式圆柱群与珍珠链！
   - 原创异形几何拼接：正圆画框 + 立体琉璃爱心画框 + 四叶草花瓣画框 + 琉璃蝴蝶结卡扣 +
     单根立式/横置点缀圆柱 + 内凹邮票大方形 + 半圆高穹顶拱门窗 + 阶梯斜切歌单匣 + 信封折线画框
   - 每个组件均由「左上/右上小异形画框(圆/爱心/四叶草)」+「大异形主画框」拼接构成，
     两个画框均可独立放两张不同的图片，且默认100%零内置图片！
   ============================================================================ */

#phoneRoot > .desktop-body {
  background: transparent !important;
}

#phoneRoot #deskPager .v92-atelier-grid > .witem {
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 2;
}

/* Custom App Icons & Translucent Ice-Glass App Slots & Dock */
#phoneRoot .slot .block.has-custom-icon,
#phoneRoot .dock-btn .dock-block.has-custom-icon,
#phoneRoot .desktop-body .slot .block.has-custom-icon {
  padding: 0 !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1.5px solid rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 8px 20px -6px rgba(20, 44, 78, 0.14) !important;
}
#phoneRoot .v76-custom-icon-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block !important;
}
#phoneRoot[data-palette="glacier"] .desktop-body .slot .block:not(.has-custom-icon) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.64) 0%, rgba(224, 238, 252, 0.40) 100%) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  border: 1.4px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 10px 22px -8px rgba(22, 46, 80, 0.10),
    inset 0 1.5px 3px rgba(255, 255, 255, 0.96) !important;
}
#phoneRoot[data-palette="glacier"] .desktop-body .dock {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56) 0%, rgba(224, 238, 252, 0.38) 100%) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 14px 30px -10px rgba(22, 46, 80, 0.12),
    inset 0 1.5px 4px rgba(255, 255, 255, 0.96) !important;
}
#phoneRoot:not([data-palette="glacier"]) .desktop-body .dock {
  background: var(--card, rgba(255, 255, 255, 0.65)) !important;
  border: var(--theme-card-border, 1.5px solid rgba(255, 255, 255, 0.85)) !important;
}

/* ============================================================================
   1. SPLICED SMALL IMAGE FRAMES:
      - Circle Frame (.v98-circle-frame)
      - Plump Heart Frame (.v98-heart-frame)
      - Four-Leaf Clover Frame (.v98-clover-frame)
   ============================================================================ */
#phoneRoot .v98-circle-frame {
  position: relative !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.82) 0%, rgba(206, 228, 250, 0.40) 65%, rgba(255, 255, 255, 0.70) 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 2px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    0 8px 18px -4px rgba(16, 38, 68, 0.18),
    0 0 0 2.5px rgba(255, 255, 255, 0.44),
    inset 0 1.5px 4px rgba(255, 255, 255, 0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

#phoneRoot .v98-heart-frame {
  position: relative !important;
  clip-path: url(#v98HeartClip) !important;
  -webkit-clip-path: url(#v98HeartClip) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86) 0%, rgba(200, 224, 252, 0.52) 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  filter: drop-shadow(0 6px 12px rgba(16, 38, 68, 0.17)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

#phoneRoot .v98-clover-frame {
  position: relative !important;
  clip-path: url(#v98CloverClip) !important;
  -webkit-clip-path: url(#v98CloverClip) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86) 0%, rgba(202, 226, 252, 0.50) 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  filter: drop-shadow(0 6px 12px rgba(16, 38, 68, 0.17)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

#phoneRoot .is-52 { width: 52px !important; height: 52px !important; }
#phoneRoot .is-50 { width: 50px !important; height: 50px !important; }
#phoneRoot .is-48 { width: 48px !important; height: 48px !important; }
#phoneRoot .is-46 { width: 46px !important; height: 46px !important; }
#phoneRoot .is-44 { width: 44px !important; height: 44px !important; }
#phoneRoot .is-42 { width: 42px !important; height: 42px !important; }
#phoneRoot .is-28 { width: 28px !important; height: 28px !important; }

#phoneRoot .v98-shape-rim {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

#phoneRoot .v97-empty-mark {
  font-size: 9px !important;
  font-weight: 400 !important;
  color: rgba(74, 114, 158, 0.50) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  line-height: 1 !important;
}
#phoneRoot .has-img > .v97-empty-mark {
  display: none !important;
}
#phoneRoot .v98-circle-frame .v76-ava-img,
#phoneRoot .v98-heart-frame .v76-ava-img,
#phoneRoot .v98-clover-frame .v76-ava-img,
#phoneRoot #deskGuardianUserAva {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 2 !important;
}

/* ============================================================================
   2. RIBBON BOWS (.v98-bow-svg) & HEART BRIDGES (.v98-heart-bridge)
   ============================================================================ */
#phoneRoot .v98-bow-svg {
  width: 28px !important;
  height: 18px !important;
  filter: drop-shadow(0 2px 5px rgba(18, 40, 72, 0.15)) !important;
  display: block !important;
  pointer-events: none !important;
}
#phoneRoot .v98-bow-link {
  margin: 0 -6px !important;
  z-index: 6 !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v98-mini-bow-bridge {
  margin: 0 -5px !important;
  z-index: 6 !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v98-mini-bow-bridge .v98-bow-svg {
  width: 24px !important;
  height: 15px !important;
}

/* ============================================================================
   3. DIVERSE MAIN STAGE SHAPES (.v92-stage)
   ============================================================================ */
#phoneRoot .v92-stage {
  position: relative !important;
  background-color: rgba(255, 255, 255, 0.44) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(22px) saturate(148%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(148%) !important;
  border: 1.6px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    0 12px 26px -8px rgba(16, 38, 68, 0.13),
    inset 0 0 0 2px rgba(255, 255, 255, 0.34),
    inset 0 1.5px 4px rgba(255, 255, 255, 0.94) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#phoneRoot[data-palette="glacier"] .v92-stage:not(.has-img) {
  background-image:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.78) 0%, transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.64) 0%, rgba(212, 232, 252, 0.38) 100%) !important;
}
#phoneRoot:not([data-palette="glacier"]) .v92-stage:not(.has-img) {
  background: var(--card, rgba(255, 255, 255, 0.58)) !important;
  border: var(--theme-card-border, 1.5px solid rgba(255, 255, 255, 0.88)) !important;
}
#phoneRoot .v92-stage.has-img::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.06) 58%, rgba(244, 250, 255, 0.50) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#phoneRoot .v92-stage > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================================================
   4. WIDGET 1 (4x1): CIRCLE + BOW + PILL-CYLINDER CLOCK + HEART + RECTANGLE + HEART
   ============================================================================ */
#phoneRoot .v98-chrono-splice {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 2.5px !important;
  padding: 2px 1px !important;
  box-sizing: border-box !important;
}
#phoneRoot .v98-clock-pill-cyl {
  height: 90% !important;
  padding: 3px 6px !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v98-inline-heart-link {
  font-size: 9px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 5px rgba(24, 52, 92, 0.25) !important;
  margin: 0 -2px !important;
  z-index: 5 !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v92-stage.v98-chrono-rect-stage {
  flex: 1 !important;
  min-width: 0 !important;
  height: 90% !important;
  border-radius: 18px 6px 18px 6px !important;
  padding: 4px 8px !important;
  display: flex !important;
  align-items: center !important;
}
#phoneRoot .v98-crs-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v97-cb-time {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  line-height: 0.92 !important;
}
#phoneRoot .v97-cb-subline {
  font-size: 6px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--soft, #4b6888) !important;
  margin-top: 2px !important;
}
#phoneRoot .v98-crs-right {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2.5px !important;
}
#phoneRoot .v98-crs-row1,
#phoneRoot .v98-crs-row2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3px !important;
  font-size: 7.6px !important;
  font-weight: 700 !important;
  color: var(--user-ink, var(--ink, #162c48)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
#phoneRoot .v98-tag-chip {
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 1px 5px !important;
  font-size: 6.5px !important;
  font-weight: 800 !important;
  color: var(--soft, #4b6888) !important;
}
#phoneRoot .v98-heart-badge-mini {
  position: relative !important;
  width: 36px !important;
  height: 34px !important;
  clip-path: url(#v98HeartClip) !important;
  -webkit-clip-path: url(#v98HeartClip) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(202, 226, 252, 0.54) 100%) !important;
  filter: drop-shadow(0 4px 10px rgba(16, 38, 68, 0.15)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v98-hbm-txt {
  font-size: 6.2px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: var(--user-ink, var(--ink, #18304c)) !important;
  margin-bottom: 3px !important;
}

/* ============================================================================
   5. WIDGET 2 (4x2): LEFT PUZZLE [CIRCLE + BOW + HEART / 1 CYLINDER + 2 RECTS]
      + HEART BRIDGE + POSTAGE-STAMP NOTCHED GALLERY (.v98-atelier-splice)
   ============================================================================ */
#phoneRoot .v98-atelier-splice {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 0.94fr 14px 1.36fr !important;
  align-items: stretch !important;
  gap: 2px !important;
  padding: 2px 0 !important;
  box-sizing: border-box !important;
}
#phoneRoot .v98-left-puzzle {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 4px !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
#phoneRoot .v98-lp-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2px !important;
  height: 52px !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v98-lp-bow {
  margin: 0 -6px !important;
  z-index: 6 !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v98-lp-bow .v98-bow-svg {
  width: 24px !important;
  height: 16px !important;
}
#phoneRoot .v98-lp-heart-box {
  position: relative !important;
  width: 68px !important;
  flex: 0 0 68px !important;
  height: 52px !important;
  clip-path: url(#v98HeartClip) !important;
  -webkit-clip-path: url(#v98HeartClip) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86) 0%, rgba(204, 228, 252, 0.50) 100%) !important;
  filter: drop-shadow(0 6px 12px rgba(16, 38, 68, 0.14)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-bottom: 5px !important;
  box-sizing: border-box !important;
}
#phoneRoot .v98-lph-lbl {
  font-size: 7.2px !important;
  font-weight: 800 !important;
  color: var(--soft, #4b6888) !important;
  line-height: 1 !important;
}
#phoneRoot .v98-lph-val {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  line-height: 1 !important;
  margin-top: 1px !important;
}

/* Bottom of Left Puzzle: 1 Single Vertical Cylinder + 2 Interlocking Rectangles */
#phoneRoot .v98-lp-bot {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 5px !important;
}
#phoneRoot .v98-single-cyl-v {
  position: relative !important;
  width: 34px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.34) 28%,
    rgba(176, 208, 242, 0.22) 55%,
    rgba(255, 255, 255, 0.88) 100%
  ) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    0 8px 18px -6px rgba(16, 38, 68, 0.14),
    inset 2px 0 4px rgba(255, 255, 255, 0.92) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 12px 2px 6px 2px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
#phoneRoot .v97-cyl-cap {
  position: absolute !important;
  top: 2.5px !important;
  left: 14% !important;
  right: 14% !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(188, 216, 246, 0.48) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
}
#phoneRoot .v98-scv-lbl {
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: var(--user-ink, var(--ink, #18304c)) !important;
  margin-bottom: 2px !important;
}
#phoneRoot .v98-scv-val {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  line-height: 1 !important;
}
#phoneRoot .v98-scv-unit {
  font-style: normal !important;
  font-size: 6.5px !important;
  font-weight: 600 !important;
  color: var(--soft, #527090) !important;
}

#phoneRoot .v98-lp-rects {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 3px !important;
}
#phoneRoot .v98-lp-rect {
  flex: 1 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.80) 0%, rgba(220, 236, 252, 0.46) 100%) !important;
  border: 1.3px solid rgba(255, 255, 255, 0.95) !important;
  padding: 2px 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3px !important;
  box-shadow: 0 4px 10px -4px rgba(18, 40, 72, 0.09) !important;
}
#phoneRoot .v98-lp-rect.is-r1 { border-radius: 14px 4px 14px 4px !important; }
#phoneRoot .v98-lp-rect.is-r2 { border-radius: 4px 14px 4px 14px !important; }
#phoneRoot .v98-lp-SyncTag {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 1.5px 6px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 6.8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--soft, #4b6888) !important;
  text-align: center !important;
}

#phoneRoot .v98-hs-lbl {
  font-size: 7.6px !important;
  font-weight: 800 !important;
  color: var(--user-ink, var(--ink, #18304c)) !important;
}
#phoneRoot .v98-hs-val {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  margin-left: auto !important;
}
#phoneRoot .v98-hs-unit {
  font-style: normal !important;
  font-size: 6.5px !important;
  font-weight: 600 !important;
  color: var(--soft, #527090) !important;
}

/* Heart & Ribbon Bridge Connector */
#phoneRoot .v98-heart-bridge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}
#phoneRoot .v98-heart-bridge-svg {
  width: 20px !important;
  height: 64px !important;
  margin: 0 -4px !important;
  filter: drop-shadow(0 2px 4px rgba(18, 40, 72, 0.14)) !important;
}

/* Postage-Stamp Scalloped-Notch Gallery Stage */
#phoneRoot .v92-stage.v98-stamp-square-stage {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px 28px 8px 28px !important;
  padding: 9px 11px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
#phoneRoot .v98-stamp-notch-l,
#phoneRoot .v98-stamp-notch-r {
  position: absolute !important;
  top: 50% !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: rgba(208, 226, 246, 0.88) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.96) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
#phoneRoot .v98-stamp-notch-l { left: -6px !important; }
#phoneRoot .v98-stamp-notch-r { right: -6px !important; }

#phoneRoot .v98-stamp-inner-line {
  position: absolute !important;
  inset: 4px !important;
  border: 1px dashed rgba(255, 255, 255, 0.72) !important;
  border-radius: 5px 24px 5px 24px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#phoneRoot .v98-date-ribbon {
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: var(--soft, #4b6888) !important;
}

/* Envelope-Flap Stage on Page 2 */
#phoneRoot .v92-stage.v98-envelope-stage {
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px 14px 24px 10px !important;
  padding: 9px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
#phoneRoot .v98-env-flap-svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 36px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#phoneRoot .v98-envelope-reply-strip {
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1.2px solid #ffffff !important;
  border-radius: 12px 4px 12px 4px !important;
  padding: 5px 8px !important;
  display: flex !important;
  align-items: center !important;
}

/* Single Refined Horizontal 3D Cylinder Tube (.v97-cyl-h) */
#phoneRoot .v97-cyl-h {
  position: relative !important;
  border-radius: 999px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.42) 38%,
    rgba(186, 214, 244, 0.26) 70%,
    rgba(255, 255, 255, 0.86) 100%
  ) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1.4px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    0 6px 16px -5px rgba(16, 38, 68, 0.13),
    inset 0 2px 4px rgba(255, 255, 255, 0.94) !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#phoneRoot .v97-cyl-cap-l,
#phoneRoot .v97-cyl-cap-r {
  width: 5.5px !important;
  height: 68% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(190, 218, 248, 0.45) 0%, rgba(255, 255, 255, 0.94) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v97-stage-cyl-plaque {
  width: 100% !important;
  padding: 5px 7px !important;
  gap: 5px !important;
  margin-top: auto !important;
}
#phoneRoot .v97-scp-body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
#phoneRoot .v97-scp-body strong {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#phoneRoot .v97-scp-body small {
  font-size: 7.8px !important;
  font-weight: 600 !important;
  color: var(--soft, #466484) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#phoneRoot .v97-scp-reply {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 8.2px !important;
  font-weight: 600 !important;
  color: var(--user-ink, var(--ink, #18304c)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#phoneRoot .v97-note-body-txt {
  font-size: 9.2px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  margin: auto 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ============================================================================
   6. WIDGET 3 & 4 (2x2):
      - HIGH CATHEDRAL DOME ARCH WINDOW (.v98-high-dome-stage)
      - STEPPED CHAMFER MUSIC STAGE (.v98-stepped-music-stage)
      — COMPLETELY DIFFERENT SILHOUETTES FROM EACH OTHER!
   ============================================================================ */
#phoneRoot .v98-clover-arch-card,
#phoneRoot .v98-vinyl-folder-card {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 4px !important;
  padding: 2px 0 !important;
  box-sizing: border-box !important;
}
#phoneRoot .v98-corner-badge-l {
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  z-index: 6 !important;
}
#phoneRoot .v98-corner-bow-l {
  position: absolute !important;
  top: 32px !important;
  left: 11px !important;
  z-index: 7 !important;
  pointer-events: none !important;
}
#phoneRoot .v98-corner-bow-l .v98-bow-svg {
  width: 24px !important;
  height: 15px !important;
}
#phoneRoot .v98-corner-badge-r {
  position: absolute !important;
  top: -2px !important;
  right: -1px !important;
  z-index: 6 !important;
}
#phoneRoot .v98-corner-bow-r {
  position: absolute !important;
  top: 36px !important;
  right: 13px !important;
  z-index: 7 !important;
  pointer-events: none !important;
}
#phoneRoot .v98-corner-bow-r .v98-bow-svg {
  width: 24px !important;
  height: 15px !important;
}
#phoneRoot .v97-vinyl-hole {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1.5px solid rgba(160, 194, 232, 0.85) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

/* True High Cathedral Arch-Dome Window (Widget 3 & Page 2 Weather) */
#phoneRoot .v92-stage.v98-high-dome-stage {
  flex: 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  border-radius: 68px 68px 14px 14px !important;
  padding: 10px 10px 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
#phoneRoot .v98-dome-inner-arch {
  position: absolute !important;
  inset: 4px !important;
  border-radius: 64px 64px 10px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Octagon-Cut Main Stage (Page 2 Pomo) */
#phoneRoot .v92-stage.v98-octagon-stage {
  flex: 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  border-radius: 26px 6px 26px 6px !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Asymmetric Stepped Music Stage (Widget 4) */
#phoneRoot .v92-stage.v98-stepped-music-stage {
  flex: 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  border-radius: 8px 34px 8px 26px !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
#phoneRoot .v98-music-heart-tags {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 2px !important;
}
#phoneRoot .v98-mht-heart {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 8px !important;
  color: #5282b8 !important;
}

#phoneRoot .v98-cas-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  padding-left: 44px !important;
  padding-right: 16px !important;
  margin-top: 2px !important;
}
#phoneRoot .v98-cas-actions {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}
#phoneRoot .v98-fss-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding-left: 14px !important;
  padding-right: 48px !important;
  margin-top: 2px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
#phoneRoot .v98-fss-chip {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid #ffffff !important;
  border-radius: 8px 3px 8px 3px !important;
  padding: 1.5px 6px !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  color: var(--user-ink, var(--ink, #18304c)) !important;
  white-space: nowrap !important;
}

#phoneRoot .v98-cas-body {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
#phoneRoot .v98-cas-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#phoneRoot .v98-cas-quote {
  font-size: 8.4px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--soft, #3d5a7a) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Bottom Spliced Heart + Stepped Rectangle Bar */
#phoneRoot .v98-bottom-splice-bar {
  height: 22px !important;
  border-radius: 14px 4px 14px 4px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(220, 236, 252, 0.48) 100%) !important;
  border: 1.3px solid rgba(255, 255, 255, 0.96) !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 10px -4px rgba(18, 40, 72, 0.10) !important;
}
#phoneRoot .v98-bsb-heart {
  font-size: 8.5px !important;
  color: #5282b8 !important;
  line-height: 1 !important;
}
#phoneRoot .v98-bsb-code {
  font-size: 7.4px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: var(--soft, #4b6888) !important;
  white-space: nowrap !important;
}
#phoneRoot .v98-bsb-sep {
  font-size: 7px !important;
  color: var(--soft, #527090) !important;
}
#phoneRoot .v98-bsb-tag {
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 1px 6px !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  color: var(--user-ink, var(--ink, #18304c)) !important;
  white-space: nowrap !important;
}

/* Shared Pills, Buttons & Mini Components */
#phoneRoot .v97-stage-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  width: 100% !important;
}
#phoneRoot .v97-flat-chip {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid #ffffff !important;
  border-radius: 12px 4px 12px 4px !important;
  padding: 3px 8px !important;
  font-size: 7.8px !important;
  font-weight: 700 !important;
  color: var(--user-ink, var(--ink, #162c48)) !important;
  box-shadow: 0 2px 8px rgba(18, 40, 72, 0.08) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
#phoneRoot .v97-flat-chip.is-compact {
  padding: 2px 8px !important;
  font-size: 7.5px !important;
}
#phoneRoot .v97-flat-chip.is-vert-pill {
  height: 84% !important;
  padding: 0 7px !important;
  border-radius: 14px 6px 14px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#phoneRoot .v97-mini-pill {
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  font-size: 7.2px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  color: var(--soft, #466484) !important;
  white-space: nowrap !important;
}
#phoneRoot .v97-serif-hero {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 0.95 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
}
#phoneRoot .v97-cs-link {
  font-size: 7.2px !important;
  font-weight: 700 !important;
  color: var(--soft, #527090) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
#phoneRoot .v97-orb-btn {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(18, 40, 72, 0.10) !important;
  color: var(--user-ink, var(--ink, #18304c)) !important;
  font-size: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v97-music-cyl-bar {
  height: 22px !important;
  padding: 0 6px !important;
  gap: 5px !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}
#phoneRoot .v97-mcb-prog {
  flex: 1 !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.65) !important;
  overflow: hidden !important;
}
#phoneRoot .v97-mcb-prog span {
  display: block !important;
  width: 42% !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #6ea0d8, #3d6fa8) !important;
}
#phoneRoot .v97-mcb-btns {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}
#phoneRoot .v97-dot {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: rgba(74, 118, 168, 0.65) !important;
  flex-shrink: 0 !important;
}

/* 2x1 Brooch & 4x1 Ticket & 1x1 Tiles */
#phoneRoot .v97-brooch-combo {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  box-sizing: border-box !important;
}
#phoneRoot .v92-stage.v97-brooch-stage {
  flex: 1 !important;
  min-width: 0 !important;
  height: 92% !important;
  border-radius: 18px 8px 18px 8px !important;
  padding: 6px 9px !important;
  display: flex !important;
  align-items: center !important;
}
#phoneRoot .v92-stage.v97-ticket-stage {
  flex: 1 !important;
  min-width: 0 !important;
  height: 92% !important;
  border-radius: 10px 22px 10px 22px !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
#phoneRoot .v97-ts-left {
  min-width: 0 !important;
  flex: 1 !important;
}
#phoneRoot .v97-ts-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#phoneRoot .v97-ts-sub {
  font-size: 7.5px !important;
  font-weight: 600 !important;
  color: var(--soft, #527090) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#phoneRoot .v97-wb-content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#phoneRoot .v97-wb-quote {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#phoneRoot .v97-wb-sub {
  font-size: 7.5px !important;
  font-weight: 600 !important;
  color: var(--soft, #527090) !important;
}
#phoneRoot .v92-stage.v97-curio-tile {
  width: 100% !important;
  height: 100% !important;
  padding: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#phoneRoot .v92-stage.v97-curio-tile.is-arch-tile {
  border-radius: 26px 26px 10px 10px !important;
}
#phoneRoot .v92-stage.v97-curio-tile.is-chamfer-tile {
  border-radius: 8px 22px 8px 22px !important;
}
#phoneRoot .v97-tile-pill {
  padding: 1px 7px !important;
  height: 16px !important;
}
#phoneRoot .v96-curio-box {
  width: 100% !important;
  flex: 1 !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: stretch !important;
}
#phoneRoot .v72-prism-quad-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  height: 100% !important;
}
#phoneRoot .v72-pq-cell {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 10px 4px 10px 4px !important;
  padding: 3px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
#phoneRoot .v72-pq-top {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 7.5px !important;
  font-weight: 600 !important;
  color: var(--soft, #4b6888) !important;
}
#phoneRoot .v72-pq-val {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
}
#phoneRoot .v96-wish-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 3.5px !important;
  margin-top: 2px !important;
}
#phoneRoot .v96-wish-items .lw-tag,
#phoneRoot .v96-mpc-tags .lw-tag {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 2.5px 8px !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  color: var(--user-ink, var(--ink, #18304c)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#phoneRoot .v96-mpc-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  flex: 1 !important;
  gap: 1px !important;
}
#phoneRoot .v96-mpc-lbl {
  font-size: 7.5px !important;
  font-weight: 700 !important;
  color: var(--soft, #4b6888) !important;
}
#phoneRoot .v96-mpc-val {
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
}
#phoneRoot .v96-mpc-val strong {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  line-height: 1 !important;
}
#phoneRoot .v96-mpc-val em {
  font-style: normal !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  color: var(--soft, #527090) !important;
}
#phoneRoot .v96-mpc-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
}
#phoneRoot .v96-mpc-tags {
  display: flex !important;
  gap: 3px !important;
  overflow: hidden !important;
  margin-top: 2px !important;
}
#phoneRoot .v96-mt-title {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  line-height: 1 !important;
}
#phoneRoot .v96-mt-sub {
  font-size: 6.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--soft, #527090) !important;
}
#phoneRoot .v96-hub-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  margin-top: auto !important;
}
#phoneRoot .v96-hub-stats .lwt-stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(220, 236, 252, 0.44) 100%) !important;
  border: 1px solid #ffffff !important;
  border-radius: 12px 4px 12px 4px !important;
  padding: 3.5px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
#phoneRoot .v96-hub-stats .lwt-stat b {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--user-ink, var(--ink, #142842)) !important;
  line-height: 1 !important;
}
#phoneRoot .v96-hub-stats .lwt-stat span {
  font-size: 6.8px !important;
  font-weight: 600 !important;
  color: var(--soft, #4b6888) !important;
  margin-top: 1px !important;
}



/* ==========================================================================
   ROUND 36 OVERHAUL:
   1. Luxury Red Packet & Glacier Transfer Bubbles (Fixes 53935.jpg & 53937.jpg)
   2. Group Chat Settings Row Typography & Slider Overflow Fix (Fixes 5468a3c1 & 53943.jpg)
   3. High-Fashion Couture Black-Card & Glacier Ledger (Fixes 53932.jpg)
   ========================================================================== */

/* 1A. Couture Rose-Champagne & Velvet-Gold Red Packet Card (Private & Group) */
.wx-redpacket-card,
.chat-transfer-card.wx-redpacket-card {
  width: 248px !important;
  max-width: 100% !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  position: relative !important;
  background: linear-gradient(140deg, #e04a62 0%, #c42946 52%, #9e1934 100%) !important;
  color: #fffaf3 !important;
  border: 1px solid rgba(255, 224, 178, 0.52) !important;
  box-shadow: 0 12px 28px rgba(176, 28, 58, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease !important;
}
.wx-redpacket-card.rp-theme-glacier_silver {
  background: linear-gradient(140deg, #355c8a 0%, #213c60 55%, #152740 100%) !important;
  border-color: rgba(196, 224, 255, 0.55) !important;
  box-shadow: 0 12px 28px rgba(21, 39, 64, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.wx-redpacket-card.rp-theme-sakura_wax {
  background: linear-gradient(140deg, #c85a7c 0%, #9e3959 55%, #78223e 100%) !important;
  border-color: rgba(255, 220, 232, 0.55) !important;
}
.wx-redpacket-card.rp-theme-obsidian_gilt {
  background: linear-gradient(140deg, #2b3242 0%, #191e29 58%, #0f131b 100%) !important;
  border-color: rgba(238, 202, 130, 0.55) !important;
}
.wx-redpacket-card.claimed,
.chat-transfer-card.wx-redpacket-card.claimed {
  background: linear-gradient(140deg, #e57d8d 0%, #cf5e72 55%, #b5455a 100%) !important;
  opacity: 0.94 !important;
  filter: none !important;
}
.wx-rp-ornament-arc {
  position: absolute;
  top: -46px;
  left: -12%;
  width: 124%;
  height: 96px;
  border-radius: 50%;
  border-bottom: 1.2px solid rgba(255, 230, 178, 0.42);
  background: radial-gradient(circle at 50% 0%, rgba(255, 242, 204, 0.24), transparent 72%);
  pointer-events: none;
}
.wx-rp-top {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 15px 12px !important;
}
.wx-rp-seal {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff3d1 0%, #eec474 55%, #c89136 100%) !important;
  border: 1.5px solid rgba(255, 250, 235, 0.92) !important;
  box-shadow: 0 6px 14px rgba(82, 16, 32, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #6b2114 !important;
  font-family: "Songti SC", "Noto Serif SC", serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}
.wx-rp-grabs-panel {
  position: relative;
  z-index: 1;
  margin: 0 13px 10px !important;
  padding: 7px 10px !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 238, 208, 0.24) !important;
  backdrop-filter: blur(8px) !important;
  font-size: 10.5px !important;
  line-height: 1.55 !important;
  color: #fff9f0 !important;
}
.wx-rp-grab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.wx-rp-best-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(254, 240, 138, 0.25);
  border: 1px solid rgba(254, 240, 138, 0.55);
  color: #fef08a;
  font-size: 9.5px;
  font-weight: 800;
}
.wx-rp-foot {
  position: relative;
  z-index: 1;
  padding: 7px 15px !important;
  background: rgba(30, 6, 14, 0.22) !important;
  border-top: 1px solid rgba(255, 236, 206, 0.2) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 10px !important;
  color: rgba(255, 248, 238, 0.88) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

/* 1B. Glacier-Blue & Silver-Pearl Luxury WeChat Transfer Card (Fixes 53937.jpg) */
.chat-transfer-card.wx-luxury-transfer-card {
  width: 246px !important;
  max-width: 100% !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  background: linear-gradient(140deg, #f5faff 0%, #e4f0fe 52%, #d3e6fc 100%) !important;
  border: 1px solid rgba(114, 164, 222, 0.45) !important;
  box-shadow: 0 10px 26px rgba(35, 72, 118, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  color: #142c4c !important;
  transition: transform 0.16s ease, box-shadow 0.2s ease !important;
}
.chat-transfer-card.wx-luxury-transfer-card.claimed {
  background: linear-gradient(140deg, #f8fbff 0%, #edf4fc 55%, #e2eefb 100%) !important;
  border-color: rgba(140, 180, 225, 0.35) !important;
}
.chat-transfer-card.wx-luxury-transfer-card:active {
  transform: scale(0.975) !important;
}
.wx-tx-ornament {
  position: absolute;
  top: -36px;
  right: -28px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 179, 238, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.wx-tx-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px 12px;
}
.wx-tx-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, #3b6ea8 0%, #214572 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 14px rgba(33, 69, 114, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.wx-tx-eyebrow {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #4f77a6;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.wx-tx-amount-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wx-tx-amount {
  font-size: 16.5px;
  font-weight: 900;
  color: #102746;
  letter-spacing: -0.01em;
}
.wx-tx-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 999px;
  background: rgba(59, 110, 168, 0.14);
  color: #265185;
  border: 1px solid rgba(59, 110, 168, 0.24);
}
.wx-tx-badge.is-done {
  background: rgba(16, 185, 129, 0.14);
  color: #067647;
  border-color: rgba(16, 185, 129, 0.28);
}
.wx-tx-note {
  font-size: 11.5px;
  font-weight: 600;
  color: #486587;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-tx-foot {
  position: relative;
  z-index: 1;
  padding: 7px 15px;
  background: rgba(255, 255, 255, 0.66);
  border-top: 1px solid rgba(114, 164, 222, 0.22);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #4a6b91;
}

/* 2. Group Chat Settings Row Typography & Slider Layout (Fixes 5468a3c1 & 53943.jpg) */
.settings-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(74, 126, 187, 0.22) !important;
  margin-top: 8px !important;
}
.settings-row > div:first-child {
  flex: 1;
  min-width: 0;
}
.settings-row .row-title,
.row-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #1b3658 !important;
  line-height: 1.38 !important;
}
.settings-row .row-sub,
.row-sub {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: #5a718a !important;
  line-height: 1.42 !important;
  margin-top: 2px !important;
}

/* 3. Luxury Couture Ledger / 记账钱包 (Fixes 53932.jpg) */
.lg-couture-shell {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.lg-couture-blackcard {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 16px 17px 14px;
  background: linear-gradient(135deg, #162235 0%, #1d314d 52%, #0f1826 100%);
  color: #f8fafc;
  border: 1px solid rgba(186, 214, 247, 0.32);
  box-shadow: 0 14px 32px rgba(15, 24, 38, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.lg-couture-blackcard::before {
  content: "PRIVÉ";
  position: absolute;
  right: 12px;
  top: 6px;
  font-family: "Georgia", "Noto Serif SC", serif;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
}
.lg-cb-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(186, 218, 255, 0.82);
  margin-bottom: 8px;
}
.lg-cb-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.lg-cb-bal-lbl {
  font-size: 10.5px;
  color: rgba(226, 232, 240, 0.76);
  margin-bottom: 2px;
}
.lg-cb-bal-num {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.lg-cb-metrics {
  display: flex;
  gap: 8px;
}
.lg-cb-metric-pill {
  padding: 5px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: right;
}
.lg-cb-metric-pill span {
  display: block;
  font-size: 9.5px;
  color: rgba(226, 232, 240, 0.72);
}
.lg-cb-metric-pill b {
  font-size: 12.5px;
  font-weight: 800;
  color: #f8fafc;
}
.lg-cb-metric-pill b.in {
  color: #6ee7b7;
}
.lg-cb-budget-box {
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.38);
  border: 1px solid rgba(186, 214, 247, 0.18);
}
.lg-cb-budget-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: rgba(226, 232, 240, 0.88);
  margin-bottom: 5px;
}
.lg-cb-budget-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.lg-cb-budget-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #93c5fd, #38bdf8);
  transition: width 0.25s ease;
}
.lg-tx-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(74, 126, 187, 0.18);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: transform 0.14s ease;
}
.lg-tx-item:active {
  transform: scale(0.985);
}


/* ==========================================================================
   ROUND 37 COMPREHENSIVE UI & INTERACTION UPGRADES
   1. Minimalist Clean Narrator & Clickable Character Recall (单聊/群聊极简旁白与可点开撤回)
   2. WeChat Bubble-Beautification-Synced Red Packet Card (红包跟随微信气泡美化与配色形状)
   3. Moments Square Click-to-Reveal Scene Card (朋友圈方形点按显字配图卡)
   4. Character Library Collapsible Persona Drawer (角色库人设一键展开/收回)
   5. WeChat Conversation Long-Press Hint (微信列表长按菜单提示)
   ========================================================================== */

/* 1. Minimalist Narrator & Clickable Recall */
.wx-narrator-line,
.msg-relation-shift,
.msg-poke-pill {
  align-self: center !important;
  max-width: 86% !important;
  margin: 5px auto !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.055) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  box-shadow: none !important;
  letter-spacing: 0.01em !important;
}

.wx-recall-narrator {
  cursor: pointer !important;
  user-select: none !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
}
.wx-recall-narrator:hover,
.wx-recall-narrator:active {
  background: rgba(15, 23, 42, 0.085) !important;
  border-color: rgba(43, 84, 132, 0.2) !important;
}
.wx-recall-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wx-recall-toggle-tag {
  font-size: 10px;
  color: #365f91;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(54, 95, 145, 0.08);
}
.wx-recall-detail {
  display: none;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
  color: #334155;
  font-size: 11.2px;
  text-align: left;
  line-height: 1.55;
}
.wx-recall-narrator.is-open .wx-recall-detail {
  display: block;
}
.wx-recall-detail-label {
  font-weight: 700;
  color: #475569;
}

/* 2. WeChat Red Packet Card — Synchronized with WeChat Bubble Beautification (bstyle-* & bshape-*) */
.wx-redpacket-card,
.chat-transfer-card.wx-redpacket-card {
  width: 242px !important;
  max-width: 100% !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  position: relative !important;
  background: linear-gradient(142deg, rgba(255, 255, 255, 0.94) 0%, rgba(236, 245, 255, 0.9) 55%, rgba(224, 238, 252, 0.88) 100%) !important;
  color: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 10px 26px rgba(27, 54, 88, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease !important;
}
.wx-redpacket-card .wx-rp-ornament-arc {
  border-bottom: 1px solid rgba(54, 95, 145, 0.16) !important;
  background: radial-gradient(circle at 50% 0%, rgba(186, 214, 247, 0.28), transparent 72%) !important;
}
.wx-redpacket-card .wx-rp-seal {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #f8fbff 0%, #dbeafe 55%, #bfdbfe 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.12), inset 0 1px 0 #ffffff !important;
  color: #1e3a5f !important;
  font-family: "Songti SC", "Noto Serif SC", serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
.wx-redpacket-card .wx-rp-eyebrow {
  color: #546e8a !important;
  font-size: 8px !important;
  letter-spacing: 0.16em !important;
}
.wx-redpacket-card .wx-rp-title {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}
.wx-redpacket-card .wx-rp-sub {
  color: #475569 !important;
  font-size: 10.8px !important;
}
.wx-redpacket-card .wx-rp-amt-badge {
  background: rgba(54, 95, 145, 0.1) !important;
  border: 1px solid rgba(54, 95, 145, 0.22) !important;
  color: #1e3a5f !important;
}
.wx-redpacket-card .wx-rp-foot {
  background: rgba(255, 255, 255, 0.56) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  color: #64748b !important;
}
.wx-redpacket-card .wx-rp-grabs-panel {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(54, 95, 145, 0.14) !important;
  color: #1e293b !important;
}
.wx-redpacket-card .wx-rp-best-tag {
  background: rgba(54, 95, 145, 0.12) !important;
  border-color: rgba(54, 95, 145, 0.28) !important;
  color: #1e3a5f !important;
}

/* Synchronize Red Packet with all WeChat Bubble Color Styles (bstyle-*) */
.chat-messages-box.bstyle-champagne .wx-redpacket-card {
  background: linear-gradient(145deg, rgba(255, 252, 245, 0.95), rgba(246, 236, 218, 0.9)) !important;
  border-color: rgba(214, 195, 165, 0.78) !important;
}
.chat-messages-box.bstyle-champagne .wx-redpacket-card .wx-rp-seal {
  background: linear-gradient(145deg, #fffaf0, #ebd5b3) !important;
  color: #5c4028 !important;
}
.chat-messages-box.bstyle-sakura .wx-redpacket-card,
.chat-messages-box.bstyle-rose_quartz .wx-redpacket-card {
  background: linear-gradient(145deg, rgba(255, 248, 250, 0.95), rgba(252, 228, 236, 0.9)) !important;
  border-color: rgba(244, 198, 212, 0.82) !important;
}
.chat-messages-box.bstyle-sakura .wx-redpacket-card .wx-rp-seal,
.chat-messages-box.bstyle-rose_quartz .wx-redpacket-card .wx-rp-seal {
  background: linear-gradient(145deg, #fff5f7, #f9ccd8) !important;
  color: #702440 !important;
}
.chat-messages-box.bstyle-matcha .wx-redpacket-card {
  background: linear-gradient(145deg, rgba(248, 253, 249, 0.95), rgba(226, 242, 231, 0.9)) !important;
  border-color: rgba(188, 218, 198, 0.82) !important;
}
.chat-messages-box.bstyle-matcha .wx-redpacket-card .wx-rp-seal {
  background: linear-gradient(145deg, #f2fbf5, #c6e6d0) !important;
  color: #234732 !important;
}
.chat-messages-box.bstyle-obsidian .wx-redpacket-card {
  background: linear-gradient(145deg, rgba(34, 41, 54, 0.95), rgba(20, 25, 35, 0.94)) !important;
  border-color: rgba(234, 198, 122, 0.42) !important;
  color: #f8fafc !important;
}
.chat-messages-box.bstyle-obsidian .wx-redpacket-card .wx-rp-title { color: #f8fafc !important; }
.chat-messages-box.bstyle-obsidian .wx-redpacket-card .wx-rp-sub { color: #cbd5e1 !important; }
.chat-messages-box.bstyle-obsidian .wx-redpacket-card .wx-rp-eyebrow { color: #eab308 !important; }
.chat-messages-box.bstyle-obsidian .wx-redpacket-card .wx-rp-amt-badge {
  background: rgba(234, 179, 8, 0.16) !important;
  border-color: rgba(234, 179, 8, 0.38) !important;
  color: #fde68a !important;
}
.chat-messages-box.bstyle-obsidian .wx-redpacket-card .wx-rp-foot {
  background: rgba(10, 14, 22, 0.45) !important;
  color: #94a3b8 !important;
}
.chat-messages-box.bstyle-nebula_violet .wx-redpacket-card {
  background: linear-gradient(145deg, rgba(248, 245, 255, 0.95), rgba(233, 224, 252, 0.9)) !important;
  border-color: rgba(196, 181, 253, 0.8) !important;
}

/* Synchronize Red Packet with WeChat Bubble Shapes (bshape-*) */
.chat-messages-box.bshape-cat_ear .wx-redpacket-card { border-radius: 22px 22px 20px 20px !important; }
.chat-messages-box.bshape-cloud_lace .wx-redpacket-card { border-radius: 26px !important; border-style: double !important; border-width: 3px !important; }
.chat-messages-box.bshape-receipt_ticket .wx-redpacket-card,
.chat-messages-box.bshape-boarding_pass .wx-redpacket-card { border-radius: 10px !important; border-left: 3.5px solid #365f91 !important; }
.chat-messages-box.bshape-crystal_prism .wx-redpacket-card,
.chat-messages-box.bshape-glass_capsule .wx-redpacket-card { border-radius: 24px !important; box-shadow: 0 12px 28px rgba(54, 95, 145, 0.14), inset 0 1px 2px #fff !important; }

/* 3. Moments Square Click-to-Reveal Scene Card */
.mo-square-scene-card {
  width: 172px;
  height: 172px;
  border-radius: 18px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(145deg, rgba(244, 248, 253, 0.96), rgba(226, 236, 248, 0.9));
  border: 1px solid rgba(54, 95, 145, 0.18);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mo-square-scene-card:active {
  transform: scale(0.98);
}
.mo-sq-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.mo-sq-frame-corners {
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(54, 95, 145, 0.24);
  border-radius: 12px;
  pointer-events: none;
}
.mo-sq-cam-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(54, 95, 145, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b5484;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(43, 84, 132, 0.08);
}
.mo-sq-title {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #2b5484;
}
.mo-sq-sub {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  margin-top: 3px;
}
.mo-sq-text-layer {
  position: absolute;
  inset: 0;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.mo-square-scene-card.is-revealed .mo-sq-cover {
  opacity: 0;
  pointer-events: none;
}
.mo-square-scene-card.is-revealed .mo-sq-text-layer {
  opacity: 1;
  pointer-events: auto;
}
.mo-sq-text-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: 800;
  color: #2b5484;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px dashed rgba(54, 95, 145, 0.18);
  flex-shrink: 0;
}
.mo-sq-text-body {
  font-size: 11.2px;
  line-height: 1.55;
  color: #1e293b;
  overflow-y: auto;
  flex: 1;
  padding-right: 2px;
}

/* 4. Character Library Collapsible Persona Button */
.v44-persona-toggle-btn {
  width: 100%;
  padding: 8px 11px;
  border-radius: 11px;
  background: rgba(43, 84, 132, 0.06);
  border: 1px solid rgba(43, 84, 132, 0.16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #1b3658;
  cursor: pointer;
  transition: background 0.16s ease;
}
.v44-persona-toggle-btn:hover,
.v44-persona-toggle-btn.is-open {
  background: rgba(43, 84, 132, 0.12);
}
.v44-pt-hint {
  font-size: 10px;
  color: #365f91;
  font-weight: 700;
}

/* 5. WeChat Conversation Long-Press Hint */
.lily-wx-hold-hint {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  cursor: pointer;
}


/* ROUND 38 UPGRADES */
.wx-narrator-line,
.msg-relation-shift,
.msg-poke-pill,
.sips-sys-pill,
.v60-sys-pill {
  align-self: center !important;
  max-width: 88% !important;
  margin: 4px auto !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #64748b !important;
  font-size: 10.8px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.025) !important;
  letter-spacing: 0.02em !important;
}
.wx-recall-narrator { border-radius: 12px !important; }
.sips-narration-card {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-left: 2.5px solid rgba(100, 116, 139, 0.45) !important;
  color: #475569 !important;
  box-shadow: none !important;
}
.lily-wx-row {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: pointer;
}
.lily-wx-row:active { background: rgba(226, 236, 248, 0.65) !important; }
.mo-comment {
  padding: 3px 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mo-comment:hover, .mo-comment:active { background: rgba(54, 95, 145, 0.08); }
.lily-sms-banner {
  position: absolute;
  top: 38px;
  left: 12px;
  right: 12px;
  z-index: 9999;
  padding: 11px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #1e293b;
}
.rev-real-app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.rev-real-app-tile {
  padding: 11px 9px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  text-align: left;
  transition: all 0.16s ease;
}
.rev-real-app-tile.active {
  background: rgba(241, 245, 249, 0.98);
  border-color: #475569;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.rev-pale-log-item {
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #475569;
  font-size: 11.2px;
  line-height: 1.55;
}


/* === V104 ICON SIZE UNIFICATION FIX === */
#phoneRoot .slot .block svg,
#phoneRoot .dock-block svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  flex-shrink: 0 !important;
}


/* ==========================================================================
   v119 GLOBAL HORIZONTAL SWIPE, FULLSCREEN MODAL & HAUTE EDITORIAL DECK CSS
   ========================================================================== */
[style*="overflow-x:auto"],
[style*="overflow-x: auto"],
[style*="overflow-x:scroll"],
[style*="overflow-x: scroll"],
.h-scroll-deck,
.v47-horiz-cat-rail,
.v24-cat-rail,
.atelier-role-strip,
.pk-folder-bar,
.ch-tabs,
.v119-h-carousel {
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none;
}
.h-scroll-deck::-webkit-scrollbar,
.v119-h-carousel::-webkit-scrollbar {
  display: none !important;
}

/* Fullscreen Shop & Takeout Modal Optimization (54315.jpg & 54317.jpg) */
.modal-card:has(.v119-fullscreen-prod-modal) {
  padding: 0 !important;
  max-height: 88vh !important;
  width: min(94vw, 420px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}
.v119-fullscreen-prod-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  background: #ffffff;
  color: #0f172a;
}
.v119-prod-modal-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px 10px;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  z-index: 5;
}
.v119-prod-modal-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 15px 16px;
  -webkit-overflow-scrolling: touch;
}
.v119-prod-modal-footer {
  flex-shrink: 0;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.05);
  z-index: 6;
}

/* Couple Space 6-Page Horizontal Luxury Deck (54311.jpg) */
.v119-lovers-deck-Viewport {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y !important;
  padding-bottom: 12px;
  scroll-behavior: smooth;
}
.v119-lovers-page {
  min-width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

/* Exchange Diary Spread & Red-Ink Margin Note (54313.jpg & 54327.jpg) */
.v119-diary-spread-deck {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y !important;
  padding-bottom: 10px;
  scroll-behavior: smooth;
}
.v119-diary-spread-card {
  min-width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
  border-radius: 22px;
  background: #fdfbf7;
  border: 1px solid rgba(140, 98, 57, 0.24);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}
.v119-red-ink-box {
  padding: 10px 12px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(255, 241, 242, 0.9));
  border-left: 3.5px solid #be123c;
  color: #881337;
  font-size: 11.8px;
  line-height: 1.65;
}


/* ==========================================================================
   V123 ROUND 56 OVERHAUL:
   1. API MODEL SELECT REAL-TIME SEARCH FILTER (.is-filtered-out)
   2. UNIVERSAL SPINNING INDICATOR (.lily-spin-ico)
   3. 36 COMPLETELY DISTINCT STRUCTURAL CHAT BUBBLE ARCHITECTURES (.barch-*)
   ========================================================================== */

.v49-css-opt.is-filtered-out,
.v49-css-option.is-filtered-out {
  display: none !important;
}

@keyframes lilySpin360 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.lily-spin-ico,
#btnRefreshStatusBar.spinning,
#btnRefreshStatusBarCard.spinning .sb-ref-ico,
#wxAiReplyBtn.spinning {
  display: inline-block !important;
  animation: lilySpin360 0.78s linear infinite !important;
}

#toastFloat.is-loading-toast {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

/* Base structural reset for non-clean bubble architectures */
.chat-messages-box[class*="bshape-"]:not(.bshape-clean) .chat-bubble {
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
}
.chat-messages-box[class*="bshape-"]:not(.bshape-clean) .chat-bubble::before,
.chat-messages-box[class*="bshape-"]:not(.bshape-clean) .chat-bubble::after {
  content: none !important;
  display: none !important;
}

.barch-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.52;
}

/* 1. dialog_tail — 漫画尖角对话气泡 */
.chat-messages-box.bshape-dialog_tail .chat-bubble {
  border-radius: 18px !important;
  border: 2px solid rgba(30, 58, 95, 0.45) !important;
  box-shadow: 3px 4px 0 rgba(30, 58, 95, 0.16) !important;
}
.barch-tail {
  padding: 10px 14px;
  position: relative;
}
.chat-msg-row.ai .barch-tail::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 2px solid rgba(30, 58, 95, 0.45);
  border-bottom: 2px solid rgba(30, 58, 95, 0.45);
  transform: skewX(26deg) rotate(12deg);
}
.chat-msg-row.user .barch-tail::before {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 2px solid rgba(30, 58, 95, 0.45);
  border-bottom: 2px solid rgba(30, 58, 95, 0.45);
  transform: skewX(-26deg) rotate(-12deg);
}

/* 2. double_frame — 博物馆古典四角花饰双层画框 */
.chat-messages-box.bshape-double_frame .chat-bubble {
  border-radius: 3px !important;
  border: 2px solid rgba(54, 95, 145, 0.65) !important;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35), 0 6px 16px rgba(15, 23, 42, 0.1) !important;
}
.barch-dframe {
  padding: 13px 16px;
  margin: 4px;
  border: 1px solid currentColor;
  position: relative;
}
.barch-dframe .df-c {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  opacity: 0.65;
}
.barch-dframe .df-c.tl { top: -3px; left: -3px; }
.barch-dframe .df-c.tr { top: -3px; right: -3px; }
.barch-dframe .df-c.bl { bottom: -3px; left: -3px; }
.barch-dframe .df-c.br { bottom: -3px; right: -3px; }

/* 3. top_banner — MacOS 桌面视窗顶栏架构 */
.chat-messages-box.bshape-top_banner .chat-bubble {
  border-radius: 12px !important;
  border: 1.5px solid rgba(51, 78, 104, 0.42) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
}
.barch-top-banner .barch-tb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(15, 23, 42, 0.14);
  border-bottom: 1px solid rgba(125, 155, 190, 0.32);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.barch-top-banner .barch-tb-dots {
  display: inline-flex;
  gap: 4px;
}
.barch-top-banner .barch-tb-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.barch-top-banner .barch-tb-dots i:nth-child(1) { background: #fb7185; }
.barch-top-banner .barch-tb-dots i:nth-child(2) { background: #fbbf24; }
.barch-top-banner .barch-tb-dots i:nth-child(3) { background: #34d399; }
.barch-top-banner .barch-tb-body {
  padding: 10px 13px;
}

/* 4. notched_stub — 剧院打孔副券条码票根架构 */
.chat-messages-box.bshape-notched_stub .chat-bubble {
  border-radius: 10px !important;
  border: 1.5px solid rgba(54, 95, 145, 0.48) !important;
  overflow: hidden !important;
}
.barch-notched-stub {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
}
.barch-notched-stub .barch-ns-main {
  flex: 1;
  padding: 9px 12px;
}
.barch-notched-stub .barch-ns-kicker {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.68;
  margin-bottom: 3px;
}
.barch-notched-stub .barch-ns-stub {
  width: 42px;
  border-left: 2px dashed rgba(125, 155, 190, 0.55);
  background: rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  gap: 4px;
  flex-shrink: 0;
}
.barch-notched-stub .barch-ns-code {
  font-size: 7.5px;
  font-family: ui-monospace, monospace;
  font-weight: 900;
  writing-mode: vertical-rl;
  letter-spacing: 0.08em;
}
.barch-notched-stub .barch-ns-bars {
  width: 16px;
  height: 24px;
  background: repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 4px);
  opacity: 0.55;
}

/* 5. boarding_pass — 头等舱航空登机牌架构 */
.chat-messages-box.bshape-boarding_pass .chat-bubble {
  border-radius: 11px !important;
  border: 1.5px solid rgba(43, 84, 132, 0.48) !important;
  overflow: hidden !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1) !important;
}
.barch-boarding-pass .barch-bp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 11px;
  background: linear-gradient(90deg, rgba(27, 54, 88, 0.85), rgba(54, 95, 145, 0.72));
  color: #ffffff !important;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.barch-boarding-pass .barch-bp-top span { color: #ffffff !important; }
.barch-boarding-pass .barch-bp-mid {
  display: flex;
  align-items: stretch;
  padding: 9px 11px;
  gap: 10px;
}
.barch-boarding-pass .barch-bp-body { flex: 1; }
.barch-boarding-pass .barch-bp-barcode {
  width: 22px;
  flex-shrink: 0;
  border-left: 1.5px dashed rgba(100, 116, 139, 0.45);
  padding-left: 6px;
  background: repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 3.5px, currentColor 3.5px 4.5px, transparent 4.5px 7px);
  background-clip: content-box;
  opacity: 0.55;
}
.barch-boarding-pass .barch-bp-foot {
  display: flex;
  justify-content: space-between;
  padding: 3px 11px;
  border-top: 1px dashed rgba(100, 116, 139, 0.35);
  font-size: 8px;
  font-family: ui-monospace, monospace;
  font-weight: 800;
  opacity: 0.72;
}

/* 6. cassette_tape — 复古双齿轮透明磁带盒架构 */
.chat-messages-box.bshape-cassette_tape .chat-bubble {
  border-radius: 10px !important;
  border: 2px solid rgba(51, 65, 85, 0.58) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 6px 14px rgba(15, 23, 42, 0.12) !important;
}
.barch-cassette {
  padding: 7px 11px 6px;
}
.barch-cassette .barch-cas-label {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding-bottom: 4px;
  border-bottom: 1.5px solid rgba(100, 116, 139, 0.35);
}
.barch-cassette .barch-cas-reels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.42);
  width: fit-content;
}
.barch-cassette .barch-cas-wheel {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px dashed currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.barch-cassette .barch-cas-wheel i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.barch-cassette .barch-cas-win {
  width: 34px;
  height: 8px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.22);
}
.barch-cassette .barch-cas-body {
  padding: 4px 2px 6px;
}
.barch-cassette .barch-cas-bot {
  display: flex;
  justify-content: space-between;
  font-size: 7.5px;
  font-family: ui-monospace, monospace;
  font-weight: 800;
  padding: 3px 8px 0;
  border-top: 1.5px solid rgba(100, 116, 139, 0.3);
  opacity: 0.72;
}

/* 7. polaroid_frame — 拍立得白边相纸与顶部和纸胶带架构 */
.chat-messages-box.bshape-polaroid_frame .chat-bubble {
  background: #ffffff !important;
  color: #1e293b !important;
  border-radius: 6px !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14) !important;
  margin-top: 6px !important;
}
.barch-polaroid {
  padding: 8px 8px 10px;
  position: relative;
}
.barch-polaroid .barch-pol-tape {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 48px;
  height: 13px;
  background: rgba(148, 184, 226, 0.58);
  border-left: 1.5px dashed rgba(255, 255, 255, 0.85);
  border-right: 1.5px dashed rgba(255, 255, 255, 0.85);
}
.barch-polaroid .barch-pol-photo {
  background: linear-gradient(145deg, #1e293b, #334e68);
  color: #f8fafc !important;
  border-radius: 4px;
  padding: 8px 11px 10px;
}
.barch-polaroid .barch-pol-photo * {
  color: #f8fafc !important;
}
.barch-polaroid .barch-pol-cam {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-family: ui-monospace, monospace;
  opacity: 0.72;
  margin-bottom: 4px;
}
.barch-polaroid .barch-pol-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 4px 0;
  font-size: 9.5px;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: #475569 !important;
}
.barch-polaroid .barch-pol-caption span { color: #475569 !important; }

/* 8. music_player — 随身听声波音轨播放器架构 */
.chat-messages-box.bshape-music_player .chat-bubble {
  border-radius: 16px !important;
  border: 1.5px solid rgba(54, 95, 145, 0.45) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1) !important;
}
.barch-player {
  padding: 9px 13px;
  gap: 6px;
}
.barch-player .barch-mp-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}
.barch-player .barch-mp-play {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: currentColor;
  color: #38bdf8 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}
.barch-player .barch-mp-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 14px;
}
.barch-player .barch-mp-wave i {
  flex: 1;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.55;
}
.barch-player .barch-mp-wave i:nth-child(odd) { height: 12px; }
.barch-player .barch-mp-wave i:nth-child(even) { height: 6px; }
.barch-player .barch-mp-wave i:nth-child(3n) { height: 14px; opacity: 0.85; }
.barch-player .barch-mp-time {
  font-size: 8.5px;
  font-family: ui-monospace, monospace;
  font-weight: 800;
}
.barch-player .barch-mp-prog {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 8px;
  font-weight: 800;
  opacity: 0.72;
  padding-top: 3px;
}
.barch-player .barch-mp-track {
  width: 55px;
  height: 3px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.35);
  position: relative;
}
.barch-player .barch-mp-track b {
  position: absolute;
  left: 0;
  top: 0;
  width: 62%;
  height: 100%;
  border-radius: 99px;
  background: currentColor;
}

/* 9. ruled_memo — 顶部活页铁环线圈横线手写本架构 */
.chat-messages-box.bshape-ruled_memo .chat-bubble {
  border-radius: 4px 10px 10px 4px !important;
  border: 1.5px solid rgba(100, 116, 139, 0.42) !important;
  border-left: 5px solid #e11d48 !important;
  box-shadow: 3px 4px 12px rgba(15, 23, 42, 0.08) !important;
}
.barch-memo {
  padding: 6px 13px 10px;
}
.barch-memo .barch-mm-rings {
  display: flex;
  justify-content: space-around;
  margin-top: -11px;
  margin-bottom: 5px;
}
.barch-memo .barch-mm-rings i {
  width: 8px;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(180deg, #cbd5e1, #475569);
  border: 1px solid #1e293b;
}
.barch-memo .barch-mm-head {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-family: ui-monospace, monospace;
  font-weight: 800;
  opacity: 0.65;
  border-bottom: 1px solid rgba(225, 29, 72, 0.32);
  padding-bottom: 3px;
  margin-bottom: 5px;
}
.barch-memo .barch-mm-body {
  background-image: repeating-linear-gradient(transparent, transparent 21px, rgba(100, 116, 139, 0.24) 21px, rgba(100, 116, 139, 0.24) 22px);
  line-height: 22px;
}

/* 10. scroll_parchment — 上下凸出卷轴木杆古籍架构 */
.chat-messages-box.bshape-scroll_parchment .chat-bubble {
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.barch-scroll {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.barch-scroll .barch-sc-roller {
  height: 8px;
  margin: 0 -6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #44403c 0%, #a8a29e 15%, #57534e 50%, #a8a29e 85%, #44403c 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.barch-scroll .barch-sc-inner {
  background: var(--bub-th-bg, #faf6ee);
  color: #292524 !important;
  border-left: 2px solid #78716c;
  border-right: 2px solid #78716c;
  padding: 8px 13px 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
.chat-msg-row.user .barch-scroll .barch-sc-inner {
  background: var(--bub-my-bg, #292524);
  color: #fafaf9 !important;
}
.barch-scroll .barch-sc-stamp {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.15em;
  opacity: 0.68;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 3px;
  margin-bottom: 5px;
}

/* 11. wax_letter — 皇家信封折角与立体火漆印章架构 */
.chat-messages-box.bshape-wax_letter .chat-bubble {
  border-radius: 8px !important;
  border: 1.5px solid rgba(100, 116, 139, 0.42) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
  overflow: hidden !important;
}
.barch-wax .barch-wx-flap {
  position: relative;
  height: 26px;
  background: rgba(15, 23, 42, 0.06);
  border-bottom: 1px dashed rgba(100, 116, 139, 0.3);
}
.barch-wax .barch-wx-flap svg {
  width: 100%;
  height: 100%;
  display: block;
}
.barch-wax .barch-wx-seal {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fb7185, #be123c 65%, #881337);
  color: #fde68a !important;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(136, 19, 55, 0.45);
  border: 1.5px solid rgba(253, 230, 138, 0.65);
}
.barch-wax .barch-wx-body {
  padding: 13px 13px 8px;
}
.barch-wax .barch-wx-foot {
  display: flex;
  justify-content: space-between;
  padding: 4px 12px 6px;
  font-size: 8px;
  font-family: Georgia, serif;
  letter-spacing: 0.1em;
  opacity: 0.65;
}

/* 12. tarot_gilded — 鎏金星月塔罗牌内嵌拱门架构 */
.chat-messages-box.bshape-tarot_gilded .chat-bubble {
  border-radius: 12px !important;
  border: 2px solid #d4af37 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16) !important;
}
.barch-tarot {
  padding: 6px 8px;
}
.barch-tarot .barch-tr-top {
  text-align: center;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #b45309;
  padding-bottom: 4px;
}
.chat-msg-row.user .barch-tarot .barch-tr-top { color: #fde68a !important; }
.barch-tarot .barch-tr-inner {
  border: 1px solid rgba(212, 175, 55, 0.65);
  border-radius: 14px 14px 4px 4px;
  padding: 9px 11px;
}
.barch-tarot .barch-tr-bot {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding-top: 4px;
  opacity: 0.78;
}

/* 13. cyber_hud — 赛博朋克战术遥测终端架构 */
.chat-messages-box.bshape-cyber_hud .chat-bubble {
  border-radius: 2px 12px 2px 12px !important;
  border: 1.5px solid #38bdf8 !important;
  border-left: 4px solid #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.22) !important;
}
.barch-hud {
  padding: 6px 12px 7px;
  font-family: ui-monospace, "SF Mono", monospace;
}
.barch-hud .barch-hd-bar {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #0284c7;
  border-bottom: 1px dashed rgba(56, 189, 248, 0.45);
  padding-bottom: 3px;
  margin-bottom: 5px;
}
.chat-msg-row.user .barch-hud .barch-hd-bar { color: #7dd3fc !important; }
.barch-hud .barch-hd-foot {
  display: flex;
  justify-content: space-between;
  font-size: 7.5px;
  opacity: 0.65;
  margin-top: 5px;
  padding-top: 3px;
  border-top: 1px solid rgba(56, 189, 248, 0.25);
}

/* 14. cyber_blade — 45度切角机甲装甲板架构 */
.chat-messages-box.bshape-cyber_blade .chat-bubble {
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
  border-left: 4px solid #0284c7 !important;
  border-right: 2px solid #0284c7 !important;
}
.barch-blade .barch-bl-stripe {
  display: flex;
  justify-content: space-between;
  padding: 4px 12px;
  background: repeating-linear-gradient(-45deg, rgba(2, 132, 199, 0.16), rgba(2, 132, 199, 0.16) 6px, transparent 6px, transparent 12px);
  font-size: 8px;
  font-family: ui-monospace, monospace;
  font-weight: 900;
}
.barch-blade .barch-bl-body {
  padding: 8px 13px 10px;
}

/* 15. stepped_pixel — 8-Bit 复古像素 RPG 对话框架构 */
.chat-messages-box.bshape-stepped_pixel .chat-bubble {
  border-radius: 0 !important;
  border: 3px solid #1e293b !important;
  box-shadow: 4px 4px 0 #0f172a !important;
  margin-top: 6px !important;
}
.barch-pixel {
  padding: 10px 13px 9px;
  font-family: ui-monospace, monospace;
  position: relative;
}
.barch-pixel .barch-px-tag {
  position: absolute;
  top: -11px;
  left: 8px;
  background: #0f172a;
  color: #38bdf8 !important;
  padding: 1px 7px;
  font-size: 8.5px;
  font-weight: 900;
  border: 2px solid #38bdf8;
}
.barch-pixel .barch-px-cursor {
  display: inline-block;
  margin-left: 5px;
  font-size: 9px;
  animation: nvSpin360 1.2s steps(2) infinite;
}

/* 16. bracket_terminal — 极客命令行双括号终端架构 */
.chat-messages-box.bshape-bracket_terminal .chat-bubble {
  border-radius: 4px !important;
  border-top: 1px dashed rgba(100, 116, 139, 0.35) !important;
  border-bottom: 1px dashed rgba(100, 116, 139, 0.35) !important;
  border-left: 5px solid #0284c7 !important;
  border-right: 5px solid #0284c7 !important;
}
.barch-term {
  padding: 7px 12px;
  font-family: ui-monospace, monospace;
}
.barch-term .barch-tm-head {
  font-size: 8.5px;
  font-weight: 900;
  opacity: 0.72;
  margin-bottom: 3px;
}
.barch-term .barch-tm-foot {
  font-size: 7.5px;
  text-align: right;
  opacity: 0.6;
  margin-top: 3px;
}

/* 17. cat_jelly_paw — 立体四趾猫爪肉垫软糖架构 */
.chat-messages-box.bshape-cat_jelly_paw .chat-bubble {
  border-radius: 22px 22px 26px 26px !important;
  border: 2px solid rgba(244, 114, 182, 0.45) !important;
  margin-top: 10px !important;
  box-shadow: 0 8px 18px rgba(244, 114, 182, 0.15) !important;
}
.barch-paw {
  padding: 10px 14px 8px;
  position: relative;
}
.barch-paw .barch-pw-toes {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}
.barch-paw .barch-pw-toes i {
  width: 13px;
  height: 10px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(180deg, #fbcfe8, #f472b6);
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}
.barch-paw .barch-pw-pad {
  font-size: 8.5px;
  font-weight: 800;
  text-align: right;
  opacity: 0.72;
  margin-top: 3px;
}

/* 18. cat_ear — 立体双猫耳与胡须铃铛架构 */
.chat-messages-box.bshape-cat_ear .chat-bubble {
  border-radius: 16px !important;
  border: 1.5px solid rgba(54, 95, 145, 0.42) !important;
  margin-top: 10px !important;
}
.barch-catear {
  padding: 10px 14px 7px;
  position: relative;
}
.barch-catear .barch-ce-ears {
  position: absolute;
  top: -10px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.barch-catear .barch-ce-ears span {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 12px solid #334e68;
}
.barch-catear .barch-ce-whisker {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 800;
  opacity: 0.65;
  margin-top: 4px;
}

/* 19. butterfly_wing — 闪蝶不对称双翼弧面架构 */
.chat-messages-box.bshape-butterfly_wing .chat-bubble {
  border-radius: 26px 6px 26px 8px !important;
  border: 1.5px solid rgba(96, 165, 250, 0.55) !important;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.14) !important;
}
.barch-butterfly {
  padding: 9px 14px;
}
.barch-butterfly .barch-bf-head {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
  opacity: 0.72;
  margin-bottom: 3px;
}

/* 20. cloud_lace — 蓬松云朵波浪顶与思考泡泡尾点架构 */
.chat-messages-box.bshape-cloud_lace .chat-bubble {
  border-radius: 24px !important;
  border: 2px solid rgba(148, 184, 226, 0.6) !important;
  box-shadow: 0 8px 18px rgba(148, 184, 226, 0.2) !important;
  margin-top: 7px !important;
}
.barch-cloud {
  padding: 10px 15px;
  position: relative;
}
.barch-cloud .barch-cl-puffs {
  position: absolute;
  top: -8px;
  left: 18px;
  display: flex;
  gap: 6px;
}
.barch-cloud .barch-cl-puffs i {
  width: 16px;
  height: 9px;
  border-radius: 12px 12px 0 0;
  background: inherit;
  border-top: 2px solid rgba(148, 184, 226, 0.65);
}
.barch-cloud .barch-cl-dots {
  position: absolute;
  bottom: -9px;
  left: 12px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.barch-cloud .barch-cl-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94b8e2;
}
.barch-cloud .barch-cl-dots b {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #94b8e2;
}

/* 21. receipt_ticket — 超市热敏收银锯齿小票架构 */
.chat-messages-box.bshape-receipt_ticket .chat-bubble {
  border-radius: 2px !important;
  border-top: 4px dotted rgba(71, 85, 105, 0.65) !important;
  border-bottom: 4px dotted rgba(71, 85, 105, 0.65) !important;
  border-left: 1px solid rgba(100, 116, 139, 0.35) !important;
  border-right: 1px solid rgba(100, 116, 139, 0.35) !important;
}
.barch-receipt {
  padding: 8px 12px;
  font-family: ui-monospace, monospace;
}
.barch-receipt .barch-rc-head {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 900;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 4px;
  margin-bottom: 6px;
  opacity: 0.75;
}
.barch-receipt .barch-rc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed currentColor;
  padding-top: 5px;
  margin-top: 6px;
  font-size: 7.5px;
  font-weight: 800;
  opacity: 0.72;
}
.barch-receipt .barch-rc-bars {
  width: 46px;
  height: 10px;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px);
}

/* 22. vinyl_record — 半露黑胶唱片封套架构 */
.chat-messages-box.bshape-vinyl_record .chat-bubble {
  border-radius: 10px !important;
  border: 1.5px solid rgba(30, 41, 59, 0.55) !important;
  margin-right: 14px !important;
}
.barch-vinyl {
  position: relative;
  padding: 9px 18px 9px 12px;
}
.barch-vinyl .barch-vn-disc {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #ef4444 0 18%, #0f172a 19% 48%, #334155 49% 53%, #0f172a 54% 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.barch-vinyl .barch-vn-meta {
  font-size: 8px;
  font-family: ui-monospace, monospace;
  font-weight: 900;
  opacity: 0.68;
  margin-bottom: 3px;
}

/* 23. film_strip — 35mm 银盐齿孔胶片底片架构 */
.chat-messages-box.bshape-film_strip .chat-bubble {
  border-radius: 4px !important;
  border: 1.5px solid #1e293b !important;
  overflow: hidden !important;
}
.barch-film .barch-fm-holes {
  display: flex;
  justify-content: space-around;
  padding: 3px 6px;
  background: rgba(15, 23, 42, 0.88);
}
.barch-film .barch-fm-holes i {
  width: 9px;
  height: 5px;
  border-radius: 1.5px;
  background: #f8fafc;
}
.barch-film .barch-fm-code {
  font-size: 7.5px;
  font-family: ui-monospace, monospace;
  font-weight: 800;
  color: #f59e0b !important;
  background: rgba(15, 23, 42, 0.88);
  padding: 0 10px 2px;
  letter-spacing: 0.08em;
}
.barch-film .barch-fm-body {
  padding: 9px 13px;
}

/* 24. postage_stamp — 齿孔航空邮票与邮戳架构 */
.chat-messages-box.bshape-postage_stamp .chat-bubble {
  border-radius: 4px !important;
  border: 3px dotted rgba(54, 95, 145, 0.65) !important;
  padding: 4px !important;
}
.barch-stamp .barch-st-inner {
  border: 1px solid rgba(54, 95, 145, 0.4);
  padding: 7px 11px;
}
.barch-stamp .barch-st-top {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0.75;
  margin-bottom: 4px;
}
.barch-stamp .barch-st-mark {
  font-size: 8px;
  font-family: ui-monospace, monospace;
  text-align: right;
  opacity: 0.65;
  margin-top: 4px;
}

/* 25. magazine_quote — 社论巨型引号画报专栏架构 */
.chat-messages-box.bshape-magazine_quote .chat-bubble {
  border-radius: 0 12px 12px 0 !important;
  border-left: 5px solid #1e3a5f !important;
  border-top: 1px solid rgba(51, 65, 85, 0.3) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.3) !important;
}
.barch-mag {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px;
  padding: 9px 13px;
}
.barch-mag .barch-mg-quote {
  font-size: 28px;
  line-height: 0.9;
  font-family: Georgia, serif;
  font-weight: 900;
  opacity: 0.38;
}
.barch-mag .barch-mg-kicker {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0.68;
  margin-bottom: 3px;
}

/* 26. layered_deck — 三层错位旋转扑克叠卡架构 */
.chat-messages-box.bshape-layered_deck .chat-bubble {
  border-radius: 11px !important;
  border: 1.5px solid rgba(43, 84, 132, 0.5) !important;
  margin: 5px 4px !important;
}
.barch-deck {
  position: relative;
  padding: 9px 13px;
}
.barch-deck .barch-dk-back1,
.barch-deck .barch-dk-back2 {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  border: 1px solid rgba(74, 114, 160, 0.4);
  background: rgba(148, 184, 226, 0.18);
  pointer-events: none;
  z-index: -1;
}
.barch-deck .barch-dk-back1 { transform: rotate(-2.5deg) translate(-3px, 3px); }
.barch-deck .barch-dk-back2 { transform: rotate(2.2deg) translate(3px, 4px); }
.barch-deck .barch-dk-tab {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.68;
  margin-bottom: 3px;
}

/* 27. gothic_arch — 哥特尖拱玫瑰花窗教堂架构 */
.chat-messages-box.bshape-gothic_arch .chat-bubble {
  border-radius: 26px 26px 4px 4px !important;
  border: 2px solid rgba(51, 65, 85, 0.6) !important;
}
.barch-gothic {
  padding: 8px 14px 10px;
}
.barch-gothic .barch-gt-rose {
  text-align: center;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  border-bottom: 1px solid rgba(100, 116, 139, 0.35);
  padding-bottom: 3px;
  margin-bottom: 5px;
}

/* 28. ink_cloud — 水墨宣纸与朱砂红印章架构 */
.chat-messages-box.bshape-ink_cloud .chat-bubble {
  border-radius: 14px 4px 14px 4px !important;
  border-left: 4px solid #1e293b !important;
  border-right: 4px solid #1e293b !important;
}
.barch-ink {
  padding: 8px 13px 10px;
  font-family: "Noto Serif SC", Georgia, serif;
}
.barch-ink .barch-ik-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  margin-bottom: 4px;
}
.barch-ink .barch-ik-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  background: #be123c;
  color: #ffffff !important;
  font-size: 9px;
  font-weight: 900;
}

/* 29. lace_teacup — 洛可可扇贝蕾丝花边茶会架构 */
.chat-messages-box.bshape-lace_teacup .chat-bubble {
  border-radius: 18px !important;
  border: 2px dotted rgba(148, 163, 184, 0.75) !important;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5) !important;
}
.barch-lace {
  padding: 8px 14px;
}
.barch-lace .barch-lc-Ribbon {
  text-align: center;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.72;
  margin-bottom: 3px;
}

/* 30. stitched_linen — 高定裁缝车线亚麻布标架构 */
.chat-messages-box.bshape-stitched_linen .chat-bubble {
  border-radius: 10px !important;
  border: 2px dashed rgba(100, 116, 139, 0.6) !important;
  padding: 3px !important;
}
.barch-linen {
  padding: 7px 11px;
}
.barch-linen .barch-ln-tag {
  display: inline-block;
  width: fit-content;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.12);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

/* 31. origami_note — 折角便签与金属回形针架构 */
.chat-messages-box.bshape-origami_note .chat-bubble {
  border-radius: 4px 16px 4px 4px !important;
  border: 1.5px solid rgba(71, 85, 105, 0.42) !important;
}
.barch-origami {
  padding: 10px 14px;
  position: relative;
}
.barch-origami .barch-or-clip {
  position: absolute;
  top: -9px;
  left: 10px;
  font-size: 13px;
}
.barch-origami .barch-or-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(225deg, transparent 50%, rgba(71, 85, 105, 0.28) 50%);
}

/* 32. ribbon_bow — 手账十字和纸胶带蝴蝶结架构 */
.chat-messages-box.bshape-ribbon_bow .chat-bubble {
  border-radius: 12px !important;
  border: 1.5px solid rgba(100, 116, 139, 0.38) !important;
  margin-top: 8px !important;
}
.barch-ribbon {
  padding: 12px 14px 9px;
  position: relative;
}
.barch-ribbon .barch-rb-tape {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  padding: 1px 10px;
  background: rgba(148, 184, 226, 0.68);
  border-left: 1.5px dashed #fff;
  border-right: 1.5px dashed #fff;
  font-size: 8.5px;
  font-weight: 900;
  white-space: nowrap;
}

/* 33. glass_capsule — 太空金属端盖加压琉璃舱架构 */
.chat-messages-box.bshape-glass_capsule .chat-bubble {
  border-radius: 999px !important;
  border: 1.5px solid rgba(148, 184, 226, 0.65) !important;
  overflow: hidden !important;
}
.barch-capsule {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
}
.barch-capsule .barch-cp-cap {
  width: 8px;
  background: linear-gradient(180deg, #64748b, #1e293b);
  flex-shrink: 0;
}
.barch-capsule .barch-cp-glass {
  flex: 1;
  padding: 9px 14px;
  position: relative;
}
.barch-capsule .barch-cp-shine {
  position: absolute;
  top: 3px;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.65);
}

/* 34. liquid_mercury — 液态水银流体金属光泽架构 */
.chat-messages-box.bshape-liquid_mercury .chat-bubble {
  border-radius: 24px 10px 26px 8px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.75), 0 8px 18px rgba(51, 78, 104, 0.18) !important;
}
.barch-mercury {
  padding: 10px 15px;
  position: relative;
}
.barch-mercury .barch-mc-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #94b8e2);
  border: 1px solid #fff;
}
.barch-mercury .barch-mc-orb.o1 { width: 9px; height: 9px; top: -5px; right: 12px; }
.barch-mercury .barch-mc-orb.o2 { width: 5px; height: 5px; bottom: -4px; left: 16px; }

/* 35. crystal_prism — 钻石切面折光棱镜架构 */
.chat-messages-box.bshape-crystal_prism .chat-bubble {
  border-radius: 18px 2px 18px 2px !important;
  border-top: 2.5px solid #ffffff !important;
  border-left: 2.5px solid #ffffff !important;
  border-right: 2px solid rgba(59, 101, 152, 0.55) !important;
  border-bottom: 2.5px solid rgba(59, 101, 152, 0.55) !important;
  box-shadow: 4px 5px 0 rgba(59, 101, 152, 0.16) !important;
}
.barch-prism {
  padding: 8px 14px 10px;
}
.barch-prism .barch-pr-facet {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0.68;
  margin-bottom: 3px;
}



/* ============================================================================
   ROUND 58 (v125) UNIVERSAL APP VERTICAL & HORIZONTAL SCROLL + REPLY STAR SPIN
   Fixes Worldbook & All Apps Vertical/Horizontal Scroll + 54400.jpg Star Spin
   ============================================================================ */
#appScrollBody:not(.is-locked-flex-room),
.app-scroll-body:not(.is-locked-flex-room) {
  display: block !important;
  flex: 1 1 0% !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-y: contain !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* CRITICAL: Inner app canvases/shells inside #appScrollBody MUST have overflow: visible
   so they NEVER create nested overflow-y:auto traps that block vertical scrolling! */
.v44-app-canvas,
.noctis-shell,
.v24-app-shell,
.v26-flea-shell,
.v26-flea-scroll,
.v30-giftvault-stage,
.v31-peek-shell,
.cp-sheer-shell,
.rv3-wrap,
.ab3-wrap,
.ns-reader-stage,
.v29-theater-scroll,
.lily-wx-vertical-list {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#appScrollBody > *,
.v44-app-canvas > *,
.noctis-shell > *,
.v24-app-shell > *,
.v26-flea-shell > *,
.v30-giftvault-stage > *,
.v31-peek-shell > *,
.cp-sheer-shell > *,
.v44-editorial-hero-dark,
.v44-ed-card,
.glass-card,
.v44-stagger-list,
.v44-dossier-item {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Horizontal tab bars, category rails, and pill strips:
   touch-action MUST be pan-x pan-y so vertical swipes starting on a rail still scroll the page! */
.v44-ed-tabs[style*="overflow-x"],
.v44-ed-tabs.v46-scrollable-ed-tabs,
.v44-filter-strip,
.noctis-cat-rail,
.nv-h-carousel,
.v119-h-carousel,
.v119-lovers-deck-Viewport,
.v119-diary-spread-deck,
.v24-cat-rail,
.v47-horiz-cat-rail,
.v44-role-scroll,
.v26-flea-cats,
.atelier-role-strip,
.summary-char-rail,
.lily-wx-filter-row,
.wx-group-at-bar,
.pk-folder-bar,
.ch-tabs,
.seg-pill-bar,
.v45-pg-nums,
#appScrollBody [style*="overflow-x:auto"],
#appScrollBody [style*="overflow-x: auto"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
}

.v44-ed-tabs[style*="overflow-x"]::-webkit-scrollbar,
.v44-ed-tabs.v46-scrollable-ed-tabs::-webkit-scrollbar,
.v44-filter-strip::-webkit-scrollbar,
.noctis-cat-rail::-webkit-scrollbar,
.nv-h-carousel::-webkit-scrollbar,
.v24-cat-rail::-webkit-scrollbar,
.v47-horiz-cat-rail::-webkit-scrollbar,
.v44-role-scroll::-webkit-scrollbar,
.v26-flea-cats::-webkit-scrollbar,
.atelier-role-strip::-webkit-scrollbar,
.summary-char-rail::-webkit-scrollbar,
.lily-wx-filter-row::-webkit-scrollbar,
.pk-folder-bar::-webkit-scrollbar,
#appScrollBody [style*="overflow-x:auto"]::-webkit-scrollbar,
#appScrollBody [style*="overflow-x: auto"]::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.v44-ed-tabs[style*="overflow-x"] > *,
.v44-ed-tabs.v46-scrollable-ed-tabs > *,
.v44-filter-strip > *,
.noctis-cat-rail > *,
.nv-h-carousel > *,
.v24-cat-rail > *,
.v47-horiz-cat-rail > *,
.v44-role-scroll > *,
.v26-flea-cats > *,
.atelier-role-strip > *,
.summary-char-rail > *,
.lily-wx-filter-row > *,
.pk-folder-bar > *,
#appScrollBody [style*="overflow-x:auto"] > *,
#appScrollBody [style*="overflow-x: auto"] > * {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

/* Inner vertical scroll containers in locked flex rooms (Chat, Single Offline, Multi Offline, Novel Space) & Modals */
#offlineScrollBox,
#multiOfflineScrollBox,
#novelSpaceContinuousBox,
#wxChatMsgScroll,
#wxGroupMsgScroll,
.chat-messages-box,
.wx-chat-msg-scroll,
.v47-ns-modal-scroll,
.modal-card,
.wb38-prompt-preview {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
}

/* Spinning ✨ star icon inside ✨ 回复 buttons (Fixes 54400.jpg) */
.reply-star-ico {
  display: inline-block;
  margin-right: 3px;
  font-style: normal;
  transition: transform 0.2s ease;
}

#wxAiReplyBtn.spinning,
.chat-reply-btn.v41-labeled-reply.spinning,
#offlineAiBtn.spinning,
#moAiReplyBtn.spinning,
#grpOffAiBtn.spinning,
.v41-btn-reply.spinning {
  animation: none !important;
  opacity: 0.92 !important;
}

.spinning .reply-star-ico,
button.spinning .reply-star-ico,
#wxAiReplyBtn.spinning .reply-star-ico,
#offlineAiBtn.spinning .reply-star-ico,
#moAiReplyBtn.spinning .reply-star-ico,
#grpOffAiBtn.spinning .reply-star-ico {
  display: inline-block !important;
  animation: lilySpin360 0.72s linear infinite !important;
  transform-origin: center center !important;
}


/* ==========================================================================
   ROUND 59 (v126) FIXES:
   1. 微信聊天底部发消息框：删掉圆不拉几的外框，做成半透磨砂贴最底下 (Fixes 54476.jpg)
   2. 礼物库礼盒典藏馆：释放展柜背景图与6款色调切换权限 (Fixes 54471.jpg)
   ========================================================================== */
#appScrollBody.is-locked-flex-room > .chat-room-wrap,
.app-scroll-body > .chat-room-wrap,
.chat-room-wrap {
  padding: 6px 0 0 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.chat-room-wrap > .chat-messages-box,
#wxChatMsgScroll,
#wxGroupMsgScroll {
  padding: 8px 12px 10px 12px !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
}

.chat-room-wrap .chat-bottom-dock,
.chat-bottom-dock {
  position: relative !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(148, 184, 226, 0.32) !important;
  background: rgba(242, 248, 255, 0.56) !important;
  background-color: rgba(242, 248, 255, 0.56) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  box-shadow: none !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-shrink: 0 !important;
}

[data-palette="obsidian"] .chat-room-wrap .chat-bottom-dock,
[data-palette="obsidian"] .chat-bottom-dock,
[data-palette="pinemoss"] .chat-room-wrap .chat-bottom-dock,
[data-palette="pinemoss"] .chat-bottom-dock {
  background: rgba(20, 26, 36, 0.58) !important;
  background-color: rgba(20, 26, 36, 0.58) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.chat-bottom-dock .chat-icon-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.48) !important;
  border: 1px solid rgba(148, 184, 226, 0.35) !important;
  color: #1b3658 !important;
  box-shadow: none !important;
}

.chat-bottom-dock .chat-flat-inp {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 36px !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  background-color: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(148, 184, 226, 0.38) !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
}

.chat-bottom-dock .chat-send-btn.v41-labeled-send,
.chat-bottom-dock .chat-reply-btn.v41-labeled-reply {
  height: 34px !important;
  border-radius: 10px !important;
  padding: 0 11px !important;
  background: rgba(27, 54, 88, 0.82) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

#phoneRoot #appScreenLayer .chat-room-wrap .chat-bottom-dock,
#appScreenLayer .chat-room-wrap .chat-bottom-dock,
#appScreenLayer .chat-bottom-dock {
  position: relative !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(148, 184, 226, 0.32) !important;
  background: rgba(242, 248, 255, 0.48) !important;
  background-color: rgba(242, 248, 255, 0.48) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  box-shadow: none !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
}

#phoneRoot[data-palette="obsidian"] #appScreenLayer .chat-room-wrap .chat-bottom-dock,
#phoneRoot[data-palette="obsidian"] #appScreenLayer .chat-bottom-dock,
#phoneRoot[data-palette="pinemoss"] #appScreenLayer .chat-room-wrap .chat-bottom-dock,
#phoneRoot[data-palette="pinemoss"] #appScreenLayer .chat-bottom-dock {
  background: rgba(20, 26, 36, 0.52) !important;
  background-color: rgba(20, 26, 36, 0.52) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

#phoneRoot #appScreenLayer .chat-bottom-dock .chat-icon-btn,
#appScreenLayer .chat-bottom-dock .chat-icon-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.46) !important;
  background-color: rgba(255, 255, 255, 0.46) !important;
  border: 1px solid rgba(148, 184, 226, 0.35) !important;
  color: #1b3658 !important;
  box-shadow: none !important;
}

#phoneRoot #appScreenLayer .chat-bottom-dock .chat-flat-inp,
#appScreenLayer .chat-bottom-dock .chat-flat-inp {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 36px !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  background: rgba(255, 255, 255, 0.52) !important;
  background-color: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(148, 184, 226, 0.38) !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
}

#phoneRoot #appScreenLayer .chat-bottom-dock .chat-send-btn.v41-labeled-send,
#phoneRoot #appScreenLayer .chat-bottom-dock .chat-reply-btn.v41-labeled-reply,
#appScreenLayer .chat-bottom-dock .chat-send-btn.v41-labeled-send,
#appScreenLayer .chat-bottom-dock .chat-reply-btn.v41-labeled-reply {
  height: 34px !important;
  border-radius: 10px !important;
  padding: 0 11px !important;
  background: rgba(27, 54, 88, 0.78) !important;
  background-color: rgba(27, 54, 88, 0.78) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}


/* ==========================================================================
   ROUND 62 (v129) · 极简高定左下角悬浮方框 · 实况顶屏接管剧场 (Minimalist Editorial Takeover HUD)
   ========================================================================== */
.rev-takeover-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 99990 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif !important;
}

.rev-takeover-shield {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.01) 45%, rgba(15, 23, 42, 0.10) 100%) !important;
  pointer-events: auto !important;
  cursor: not-allowed !important;
}

/* 顶部极简高定灵动胶囊：纤薄克制，不挡底层软件顶栏 */
.rev-takeover-top-banner {
  position: absolute !important;
  top: 38px !important;
  left: 16px !important;
  right: 16px !important;
  z-index: 4 !important;
  padding: 7px 13px 6px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.84) !important;
  background-color: rgba(15, 23, 42, 0.84) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  pointer-events: auto !important;
}

.rev-tk-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.rev-tk-status-left {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.rev-tk-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.9) !important;
  flex-shrink: 0 !important;
  animation: revTkDotBreath 1.8s ease-in-out infinite !important;
}

@keyframes revTkDotBreath {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.18); }
}

.rev-tk-session-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #f8fafc !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rev-tk-step-num {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.06em !important;
  color: rgba(226, 232, 240, 0.78) !important;
  flex-shrink: 0 !important;
}

.rev-tk-seg-track {
  display: flex !important;
  gap: 3px !important;
  width: 100% !important;
  padding: 0 2px !important;
}

.rev-tk-seg-bar {
  flex: 1 !important;
  height: 1.5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  transition: background 0.3s ease !important;
}

.rev-tk-seg-bar.done {
  background: rgba(186, 230, 253, 0.62) !important;
}

.rev-tk-seg-bar.active {
  background: #ffffff !important;
}

/* 空气点击光学触控环：模拟角色手指在屏幕上滑动点按 */
.rev-air-tap-cursor {
  position: absolute !important;
  z-index: 3 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  transition: left 0.58s cubic-bezier(0.22, 1, 0.36, 1), top 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.rev-air-dot {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.28) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2), 0 0 0 4px rgba(186, 230, 253, 0.2) !important;
}

.rev-air-core {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.95) !important;
}

.rev-air-ripple {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  animation: revAirTapPulse 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}

.rev-air-ripple.r2 {
  animation-delay: 0.75s !important;
}

@keyframes revAirTapPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}

.rev-air-tag {
  margin-top: 6px !important;
  padding: 2.5px 8px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.74) !important;
  color: rgba(248, 250, 252, 0.95) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  border: 0.5px solid rgba(255, 255, 255, 0.22) !important;
}

/* 左下角极简高级角色方框：上层为头像+名字+状态，下层为统一纯净的说话方框 */
.rev-takeover-char-box {
  position: absolute !important;
  left: 12px !important;
  width: calc(100% - 24px) !important;
  max-width: 316px !important;
  bottom: 54px !important;
  z-index: 5 !important;
  padding: 11px 12px 10px !important;
  border-radius: 18px !important;
  background: rgba(252, 253, 255, 0.95) !important;
  background-color: rgba(252, 253, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16), 0 1px 4px rgba(15, 23, 42, 0.06) !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.rev-tk-char-head {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.rev-tk-char-ava {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  object-fit: cover !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  flex-shrink: 0 !important;
}

.rev-tk-char-meta {
  flex: 1 !important;
  min-width: 0 !important;
}

.rev-tk-char-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.rev-tk-char-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rev-tk-bpm-pill {
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.045) !important;
  color: #475569 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  font-variant-numeric: tabular-nums !important;
  flex-shrink: 0 !important;
}

.rev-tk-app-caption {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-top: 1px !important;
}

.rev-tk-dot-sep {
  opacity: 0.45 !important;
}

/* 下面的说话方框：干净纯粹的单一方框，分段逐句浮现角色台词 */
.rev-tk-speech-stream {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  max-height: 122px !important;
  min-height: 44px !important;
  overflow-y: auto !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(241, 245, 249, 0.65) !important;
  border: 0.5px solid rgba(15, 23, 42, 0.07) !important;
  cursor: pointer !important;
}

.rev-tk-seg-bubble {
  display: block !important;
  padding: 0 0 4px 7px !important;
  border-left: 1.5px solid rgba(15, 23, 42, 0.22) !important;
  border-bottom: 0.5px dashed rgba(15, 23, 42, 0.06) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  animation: revTkSegFadeIn 0.22s ease-out !important;
}

.rev-tk-seg-bubble:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  border-left-color: #0f172a !important;
}

@keyframes revTkSegFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.rev-tk-seg-idx {
  display: none !important;
}

.rev-tk-seg-text {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  line-height: 1.54 !important;
  letter-spacing: 0.01em !important;
}

.rev-tk-foot-btns {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding-top: 1px !important;
}

.rev-tk-foot-hint {
  font-size: 9px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.rev-tk-btn-group {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

.rev-tk-btn {
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
}

.rev-tk-btn.ghost {
  background: rgba(15, 23, 42, 0.055) !important;
  color: #334155 !important;
  border: 0.5px solid rgba(15, 23, 42, 0.1) !important;
}

.rev-tk-btn.solid {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: none !important;
}

.char-app-lock-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.85) !important;
  color: #ffffff !important;
  font-size: 9.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}


/* 实时点击详情特写条 & 逐字打字输入放大镜 */
.rev-tk-detail-lens {
  padding: 6px 10px !important;
  border-radius: 11px !important;
  background: rgba(15, 23, 42, 0.05) !important;
  border: 0.5px solid rgba(15, 23, 42, 0.10) !important;
  font-size: 10.5px !important;
  color: #1e293b !important;
  line-height: 1.48 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.rev-tk-detail-lens.typing-mode {
  background: rgba(15, 23, 42, 0.90) !important;
  color: #f8fafc !important;
  border: 0.5px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18) !important;
}

.rev-tk-lens-badge {
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.rev-tk-detail-lens.typing-mode .rev-tk-lens-badge {
  background: #38bdf8 !important;
  color: #0f172a !important;
}

.rev-tk-lens-body {
  flex: 1 !important;
  min-width: 0 !important;
  word-break: break-word !important;
  font-weight: 600 !important;
}

.rev-tk-btn.next-ready {
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22) !important;
  padding: 5px 12px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}


/* ==========================================================================
   ROUND 63 (v130) · 最前方「一机一码 · 纯白高定设备授权门禁」(位于开屏页之前 z-index: 99999)
   ========================================================================== */
#lilyDeviceLicenseGate {
  position: absolute !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 52px 26px 24px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  user-select: none;
  -webkit-user-select: none;
  color: #141c28 !important;
  background:
    radial-gradient(120% 60% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #ffffff 0%, #fafbfc 56%, #f3f5f8 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Noto Sans SC", sans-serif !important;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.55s !important;
}

#lilyDeviceLicenseGate.is-unlocked {
  opacity: 0 !important;
  transform: scale(1.015) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#lilyDeviceLicenseGate .lg-hairline-frame {
  position: absolute !important;
  inset: 14px !important;
  border: 0.5px solid rgba(20, 28, 40, 0.12) !important;
  border-radius: 34px !important;
  pointer-events: none !important;
}

#lilyDeviceLicenseGate .lg-top {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 310px !important;
  font: 500 9.5px/1 "Cormorant Garamond", "Didot", Georgia, serif !important;
  letter-spacing: 0.3em !important;
  color: rgba(20, 28, 40, 0.48) !important;
}

#lilyDeviceLicenseGate .lg-top-rule {
  flex: 1 !important;
  height: 0.5px !important;
  background: rgba(20, 28, 40, 0.18) !important;
}

#lilyDeviceLicenseGate .lg-main-wrap {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 316px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#lilyDeviceLicenseGate .lg-header {
  text-align: center !important;
  margin-bottom: 22px !important;
}

#lilyDeviceLicenseGate .lg-emblem {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(20, 28, 40, 0.10) !important;
  box-shadow: 0 8px 24px rgba(20, 28, 40, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  color: #141c28 !important;
}

#lilyDeviceLicenseGate .lg-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #141c28 !important;
  margin: 0 !important;
}

#lilyDeviceLicenseGate .lg-subtitle {
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  color: rgba(20, 28, 40, 0.45) !important;
  margin-top: 5px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

#lilyDeviceLicenseGate .lg-card {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(20, 28, 40, 0.09) !important;
  border-radius: 24px !important;
  padding: 20px 18px !important;
  box-sizing: border-box !important;
  box-shadow: 0 18px 45px rgba(20, 28, 40, 0.05), 0 1px 3px rgba(20, 28, 40, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#lilyDeviceLicenseGate .lg-field-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

#lilyDeviceLicenseGate .lg-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#lilyDeviceLicenseGate .lg-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#lilyDeviceLicenseGate .lg-step-num {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.08em !important;
}

#lilyDeviceLicenseGate .lg-device-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 11px 13px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(20, 28, 40, 0.08) !important;
}

#lilyDeviceLicenseGate #device-code-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #0f172a !important;
  user-select: all !important;
  -webkit-user-select: all !important;
}

#lilyDeviceLicenseGate .lg-copy-btn {
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(20, 28, 40, 0.14) !important;
  color: #1e293b !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.18s ease !important;
}

#lilyDeviceLicenseGate .lg-copy-btn:active {
  transform: scale(0.96) !important;
  background: #f1f5f9 !important;
}

#lilyDeviceLicenseGate .lg-hint {
  font-size: 10px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
}

#lilyDeviceLicenseGate .lg-divider {
  height: 0.5px !important;
  background: rgba(20, 28, 40, 0.08) !important;
  width: 100% !important;
}

#lilyDeviceLicenseGate .lg-input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(20, 28, 40, 0.15) !important;
  color: #0f172a !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#lilyDeviceLicenseGate .lg-input:focus {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06) !important;
}

#lilyDeviceLicenseGate .lg-input::placeholder {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: #94a3b8 !important;
}

#lilyDeviceLicenseGate .lg-status-msg {
  min-height: 16px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: #be123c !important;
  line-height: 1.4 !important;
}

#lilyDeviceLicenseGate .lg-status-msg.is-ok {
  color: #0f766e !important;
}

#lilyDeviceLicenseGate .lg-submit-btn {
  width: 100% !important;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  background: #141c28 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(20, 28, 40, 0.14) !important;
  transition: opacity 0.2s ease, transform 0.15s ease !important;
}

#lilyDeviceLicenseGate .lg-submit-btn:active {
  transform: scale(0.985) !important;
}

#lilyDeviceLicenseGate .lg-submit-btn:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
}

#lilyDeviceLicenseGate .lg-foot {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
}

#lilyDeviceLicenseGate .lg-foot-caption {
  font-size: 9.5px !important;
  letter-spacing: 0.22em !important;
  color: rgba(20, 28, 40, 0.38) !important;
}

#lilyDeviceLicenseGate .lg-home-bar {
  width: 124px !important;
  height: 4px !important;
  border-radius: 4px !important;
  background: rgba(20, 28, 40, 0.22) !important;
}