/* 自动生成，请勿手改；源码见 web/packages/theme/src */

/* ==================== theme.css ==================== */
/* ===========================================================
   设计变量 · 简约治愈系
   改主题色只需要动这里
   =========================================================== */
:root {
  /* 背景（纸感） */
  --bg-1: #f6f2ea;
  --bg-2: #e6dfd4;
  --surface: #efeae1;
  --surface-2: #e9e3d8;

  /* 文字 */
  --ink: #4a443e;
  --ink-strong: #33302c;
  --ink-mute: #9a9186;

  /* 卡片 / 描边 */
  --card: #fbf9f5;
  --card-2: #f4efe6;
  --line: rgba(74, 68, 62, 0.10);
  --line-strong: rgba(74, 68, 62, 0.18);

  /* 强调 */
  --accent: #6b6158;
  --accent-ink: #fbf9f5;
  --danger: #b06a5e;

  /* 圆角 */
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  /* 阴影 */
  --shadow-icon: 0 6px 14px rgba(70, 60, 50, 0.10), 0 1px 2px rgba(70, 60, 50, 0.06);
  --shadow-card: 0 4px 18px rgba(70, 60, 50, 0.07);

  /* 布局 */
  --page-x: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* 交互叠加色 / 纸纹（可被主题覆盖） */
  --press: rgba(74, 68, 62, 0.08);
  --texture: rgba(120, 108, 96, 0.05);

  /* 全局字体（主题商店可切换，只使用系统字体栈） */
  --app-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;

  /* 桌面壁纸（主题商店写入完整 background 简写；默认透明露出屏幕底色） */
  --wallpaper-layer: transparent;

  /* 屏幕底色（桌面与应用层共用，保证应用能盖住桌面） */
  --screen-bg: radial-gradient(90% 60% at 50% 0%, #f5f1e9 0%, var(--surface) 45%, var(--surface-2) 100%);
}

/* ==================== base.css ==================== */
/* ===========================================================
   基础重置与系统布局
   =========================================================== */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--app-font);
  color: var(--ink);
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-1) 0%, var(--bg-2) 100%);
  user-select: none;
  -webkit-user-select: none;
}

/* 系统唯一挂载点 */
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--screen-bg);
}

/* 轻纸纹（纯装饰，不吃点击） */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(var(--texture) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
}

/* 滚动容器统一隐藏滚动条 */
.scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll::-webkit-scrollbar {
  width: 0;
}

/* ==================== components.css ==================== */
/* ===========================================================
   通用组件
   =========================================================== */

/* ---------- 顶部导航 ---------- */
.navbar {
  flex: 0 0 auto;
  height: 54px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.navbar-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: 0.4px;
  margin: 0;
}
.navbar-spacer {
  flex: 1;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--ink);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.icon-btn:active {
  background: var(--press);
}
.icon-btn svg {
  width: 22px;
  height: 22px;
}
.icon-btn.plus svg {
  width: 24px;
  height: 24px;
}
.icon-btn.is-active {
  color: var(--accent);
}
/* 带小字的图标按钮（竖排）：如聊天页的「在线 / 离线」 */
.icon-btn.stacked {
  width: auto;
  min-width: 42px;
  height: 46px;
  flex-direction: column;
  gap: 0;
  padding: 2px 6px;
}
.icon-btn.stacked svg {
  width: 20px;
  height: 20px;
}
.icon-btn-label {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.3px;
}
/* 纯文字按钮：如影视首页的「我的收藏」 */
.icon-btn.text-action {
  width: auto;
  height: 34px;
  padding: 0 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- 应用内容区 ---------- */
.app-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px var(--page-x) calc(26px + var(--safe-bottom));
}
.app-body::-webkit-scrollbar {
  width: 0;
}

.section-label {
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.6px;
  margin: 16px 4px 8px;
}

/* ---------- 卡片 / 行 ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card + .card {
  margin-top: 12px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-height: 60px;
}
.row + .row {
  border-top: 1px solid var(--line);
}
.row .row-main {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.row .row-title {
  font-size: 15px;
  color: var(--ink-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}
.row .row-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 消息与公告：正文允许多行展示 */
.row .row-sub.notice-body {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
.row .chevron {
  color: var(--ink-mute);
  display: flex;
  cursor: pointer;
}.row .chevron svg {
  width: 20px;
  height: 20px;
}

.badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  letter-spacing: 0.4px;
}

/* ---------- 表单 ---------- */
.field {
  padding: 6px 16px 14px;
}
.field + .field {
  border-top: 1px solid var(--line);
}
.field label {
  display: block;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 12px 0 6px;
  letter-spacing: 0.4px;
}
.input,
.select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-strong);
  padding: 6px 0;
}
.input::placeholder {
  color: var(--line-strong);
}
.textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-strong);
  padding: 6px 0;
  resize: none;
  min-height: 96px;
}
.textarea::placeholder {
  color: var(--line-strong);
}
.hidden-file {
  display: none;
}
.select {
  appearance: none;
  -webkit-appearance: none;
}
.key-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-select {
  position: relative;
}
.field-select::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 20px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-mute);
  border-bottom: 1.5px solid var(--ink-mute);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ---------- 按钮 ---------- */
.btn {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.14s ease, opacity 0.14s ease;
}
.btn:active {
  transform: scale(0.985);
}
.btn:disabled {
  opacity: 0.45;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-soft {
  background: var(--card-2);
  color: var(--ink-strong);
}
.btn-outline {
  background: transparent;
  color: var(--ink-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn-danger {
  background: transparent;
  color: var(--danger);
  box-shadow: inset 0 0 0 1px rgba(176, 106, 94, 0.35);
}

.btn-group {
  display: grid;
  gap: 10px;
  padding-top: 14px;
}
.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ---------- 菜单行（设置首页那种） ---------- */
.menu-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-height: 74px;
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.menu-row + .menu-row {
  border-top: 1px solid var(--line);
}
.menu-row:active {
  background: var(--press);
}
.menu-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-icon svg {
  width: 24px;
  height: 24px;
}
.menu-main {
  flex: 1;
  min-width: 0;
}
.menu-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--ink-strong);
}
.menu-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.menu-value {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--ink-mute);
  white-space: nowrap;
}
/* 菜单行内嵌的按钮（如「关于本机」的昵称修改）：不占满整行，避免把标题挤到竖排 */
.menu-row .btn {
  width: auto;
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 13px;
}
/* 菜单行内的紧凑输入框（如「关于本机 → 积分兑换」） */
/* 关于本机：头像 */
.menu-row.avatar-row { gap: 10px; }
.account-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 18px;
  color: var(--accent-ink);
  background: var(--accent) center / cover no-repeat;
}
.account-avatar i { font-style: normal; }
.account-avatar.has-image i { visibility: hidden; }
.menu-row.redeem {
  gap: 10px;
}
.menu-row.redeem .menu-main {
  flex: 1 1 0;
}
.menu-row > .input {
  width: 112px;
  flex: 0 0 auto;
  text-align: center;
  letter-spacing: 1.5px;
  font-size: 14px;
  border-bottom: 1px solid var(--line-strong);
}
.menu-arrow {
  flex: 0 0 auto;
  color: var(--ink-mute);
  display: flex;
}
.menu-arrow svg {
  width: 18px;
  height: 18px;
}

/* ---------- 模型行 ---------- */
.model-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  min-height: 54px;
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.model-row + .model-row {
  border-top: 1px solid var(--line);
}
.model-row:active {
  background: var(--press);
}
.model-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.check {
  flex: 0 0 auto;
  color: var(--accent);
  display: flex;
}
.check svg {
  width: 20px;
  height: 20px;
}
.check.off {
  color: var(--line-strong);
}

/* ---------- 左右拨动开关 ---------- */
.switch {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.2s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.switch.on {
  background: var(--accent);
}
.switch.on::after {
  transform: translateX(18px);
}

.tag {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink-mute);
  letter-spacing: 0.3px;
}
.tag-accent {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------- 说明文字 ---------- */
.desc {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.8;
  padding: 2px 4px 12px;
}

/* ---------- 联系开发 ---------- */
.contact-value {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  max-width: 62%;
}
.contact-value .copy-icon {
  color: var(--ink-mute);
  display: flex;
}
.contact-value .copy-icon svg {
  width: 16px;
  height: 16px;
}
.contact-muted {
  color: var(--ink-mute);
}

/* ---------- 存储 ---------- */
.storage-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-strong);
  padding: 2px 0 8px;
}
.storage-pct {
  color: var(--ink-mute);
  font-size: 12px;
}
.storage-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--card-2);
  overflow: hidden;
}
.storage-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.storage-btn {
  width: auto;
  padding: 8px 16px;
  font-size: 13px;
}

/* ---------- 其他 ---------- */
.hint {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.7;
  padding: 12px 4px;
}
.hint strong {
  color: var(--ink);
  font-weight: 600;
}

.empty {
  text-align: center;
  padding: 46px 20px;
  color: var(--ink-mute);
}
.empty-icon {
  color: var(--line-strong);
  margin-bottom: 12px;
}
.empty-icon svg {
  width: 46px;
  height: 46px;
}
.empty-text {
  font-size: 13px;
  line-height: 1.7;
}

.stub {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-mute);
  font-size: 13px;
  padding-top: 40px;
}
.stub svg {
  width: 44px;
  height: 44px;
  color: var(--line-strong);
}
.stub-sub {
  font-size: 12px;
  color: var(--ink-mute);
}

/* ---------- toast ---------- */
.toast-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(46px + var(--safe-bottom));
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.toast {
  max-width: 78%;
  background: rgba(51, 48, 44, 0.94);
  color: #f6f2ea;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(40, 34, 28, 0.3);
  animation: toast-in 0.22s ease;
  white-space: pre-wrap;
  text-align: center;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 顶部横幅通知 ---------- */
.notify-layer {
  position: fixed;
  top: calc(8px + var(--safe-top));
  left: var(--page-x);
  right: var(--page-x);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.notify {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  font-family: inherit;
  color: inherit;
  background: rgba(251, 249, 245, 0.97);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(40, 34, 28, 0.24), 0 1px 2px rgba(40, 34, 28, 0.12);
  cursor: pointer;
  touch-action: pan-x;
  opacity: 0;
  transform: translateY(-130%);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.notify.visible {
  opacity: 1;
  transform: none;
}
.notify.leaving {
  opacity: 0;
  transform: translateY(-130%);
}
.notify-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--card-2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notify-icon svg {
  width: 20px;
  height: 20px;
}
.notify-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.notify-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.notify-app {
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.3px;
}
.notify-time {
  font-size: 11px;
  color: var(--ink-mute);
}
.notify-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
}
.notify-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notify-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.notify-action {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  background: var(--card-2);
  color: var(--ink-strong);
  cursor: pointer;
}
.notify-action:active {
  transform: scale(0.98);
}
.notify-action.primary {
  background: var(--accent);
  color: #fff;
}
.notify-action.danger {
  background: transparent;
  color: var(--ink-mute);
}

/* ---------- 加载 ---------- */
.spin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  vertical-align: -2px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.model-select-actions{display:flex;align-items:center;gap:8px;padding:0 2px 10px}.model-select-actions .btn{width:auto;padding:7px 12px;font-size:12px}.model-select-actions span{margin-left:auto;color:var(--ink-mute);font-size:12px}

/* 角色关系网：手机上可滚动的 SVG 连线图 */
.relation-overlay { position: fixed; inset: var(--safe-top) 0 calc(var(--safe-bottom) + var(--system-nav-height, 0px)); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0006; }
.relation-dialog { width: 100%; max-width: 620px; max-height: 100%; overflow: auto; padding: 16px; border-radius: 20px; background: var(--card); color: var(--ink-strong); }
.relation-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.relation-dialog header button { flex: none; border: 0; width: 40px; height: 40px; background: var(--card-2); color: inherit; border-radius: 50%; font-size: 26px; }
.relation-dialog > p { color: var(--ink-mute); font-size: 12px; }
.relation-scroll { max-height: 50vh; overflow: auto; background: var(--screen-bg); border-radius: 14px; }
.relation-map { position: relative; }
.relation-map svg { position: absolute; inset: 0; }
.relation-map line { stroke: var(--accent); stroke-width: 2; opacity: .45; }
.relation-node { position: absolute; transform: translate(-50%, -50%); width: 84px; min-height: 60px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--card); color: var(--ink-strong); font: inherit; font-size: 12px; overflow-wrap: anywhere; }
.relation-node.central { background: var(--accent); color: var(--accent-ink); }
.relation-legend p { display: flex; align-items: start; gap: 12px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.relation-legend strong { flex: 0 0 90px; }.relation-legend span { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ==================== apps.css ==================== */
/* ===========================================================
   桌面 与 应用层
   =========================================================== */

/* ---------- 桌面 ---------- */
.desktop {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  padding: calc(30px + var(--safe-top)) 16px 0;
  /* 壁纸由主题商店写入 --wallpaper-layer（完整 background 简写） */
  background: var(--wallpaper-layer, transparent);
}
.desktop-hidden,
.app-layer.app-inactive {
  display: none;
}
.desktop.desktop-hidden.launch-visible { display: block; }
.desktop-pages {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 180px;
  touch-action: pan-y;
}
.desktop-editing .desktop-pages { touch-action: none; }
.desktop-pages.desktop-swiping { overflow-y: hidden; }
.desktop-swiping .desktop-grid { position: absolute; top: 0; left: 0; right: 0; will-change: transform, opacity; backface-visibility: hidden; }
.desktop-bottom {
  position: absolute;
  /* 固定按「启用经典导航键」时的高度让位：底部固定栏不随导航键开关上下跳，
     永远停在导航栏存在时的位置（45px 与内核 SYSTEM_NAV_HEIGHT 一致）。 */
  bottom: calc(4px + var(--safe-bottom) + 45px);
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 7px;
}
.desktop-pager { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 20px; }
.page-dot { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.page-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.page-dot.active::after { background: var(--accent); transform: scale(1.25); }
.page-add { border: 0; background: var(--card); border-radius: 50%; color: var(--ink); width: 24px; height: 24px; }
.desktop-dock {
  display: grid;
  grid-template-columns: repeat(var(--desktop-columns, 4), 1fr);
  width: 100%;
  min-height: 82px;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 75%, transparent);
  backdrop-filter: blur(10px);
}
.desktop-editing .desktop-slot { outline: 1px dashed var(--line-strong); border-radius: 12px; }
.desktop-editing .app-cell { touch-action: none; }
.desktop-editing .desktop-widget-item,
.desktop-editing .widget { touch-action: none; }
.app-cell.drag-source,
.widget.drag-source { opacity: .3; }
.desktop-drag-ghost { position: fixed; z-index: 100; pointer-events: none; opacity: .9; filter: drop-shadow(0 9px 12px rgba(0,0,0,.15)); }
.desktop-drag-ghost .widget { height: 100%; }
/* 拖放落在不合法位置（占位被图标/组件占用，或跨区）时闪红光 */
.desktop-slot.drop-invalid,
.desktop-widget-item.drop-invalid,
.desktop-grid.drop-invalid,
.app-cell.drop-invalid {
  outline: 2px solid var(--danger) !important;
  border-radius: 12px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent);
}
/* 空页面中间出现的删除按钮 */
.page-empty-delete {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: var(--card);
  color: var(--danger);
  border-radius: 14px;
  padding: 10px 18px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.page-empty-delete:active { background: var(--press); }
.desktop-page-animating { perspective: 900px; }
.desktop-grid.page-exit { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; z-index: 2; }
.desktop-grid.page-enter { position: relative; z-index: 1; }
.page-slide.page-next.page-enter { animation: desktop-slide-next-in .34s ease-out both; }
.page-slide.page-next.page-exit { animation: desktop-slide-next-out .34s ease-out both; }
.page-slide.page-prev.page-enter { animation: desktop-slide-prev-in .34s ease-out both; }
.page-slide.page-prev.page-exit { animation: desktop-slide-prev-out .34s ease-out both; }
.page-flip.page-next.page-enter { transform-origin: left center; animation: desktop-flip-next-in .36s ease-out both; }
.page-flip.page-next.page-exit { transform-origin: right center; animation: desktop-flip-next-out .36s ease-out both; }
.page-flip.page-prev.page-enter { transform-origin: right center; animation: desktop-flip-prev-in .36s ease-out both; }
.page-flip.page-prev.page-exit { transform-origin: left center; animation: desktop-flip-prev-out .36s ease-out both; }
.page-fade.page-enter { animation: desktop-fade-in .3s ease-out both; }
.page-fade.page-exit { animation: desktop-fade-out .3s ease-out both; }
@keyframes desktop-slide-next-in { from { transform: translateX(95%); opacity: .7; } to { transform: none; opacity: 1; } }
@keyframes desktop-slide-next-out { from { transform: none; opacity: 1; } to { transform: translateX(-35%); opacity: .4; } }
@keyframes desktop-slide-prev-in { from { transform: translateX(-95%); opacity: .7; } to { transform: none; opacity: 1; } }
@keyframes desktop-slide-prev-out { from { transform: none; opacity: 1; } to { transform: translateX(35%); opacity: .4; } }
@keyframes desktop-flip-next-in { from { transform: rotateY(-82deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes desktop-flip-next-out { from { transform: none; opacity: 1; } to { transform: rotateY(82deg); opacity: .2; } }
@keyframes desktop-flip-prev-in { from { transform: rotateY(82deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes desktop-flip-prev-out { from { transform: none; opacity: 1; } to { transform: rotateY(-82deg); opacity: .2; } }
@keyframes desktop-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes desktop-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .desktop-grid.page-enter, .desktop-grid.page-exit { animation: none !important; }
}
.desktop::-webkit-scrollbar {
  width: 0;
}

.desktop-grid {
  display: grid;
  grid-template-columns: repeat(var(--desktop-columns, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(93px, auto);
  gap: 12px 5px;
}
.desktop-slot { min-width: 0; display: flex; justify-content: center; }

.app-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  touch-action: none;
}
.app-cell-icon {
  width: min(62px, 17vw);
  height: min(62px, 17vw);
  border-radius: 19px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  box-shadow: var(--shadow-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.app-cell-icon svg {
  width: 30px;
  height: 30px;
}
/* 特殊主题：整张图片当作图标，保持圆角方块（不受图标风格影响） */
.app-cell-icon.app-cell-icon-image {
  padding: 0;
  overflow: hidden;
  border-radius: 19px !important;
  background: transparent !important;
  box-shadow: var(--shadow-icon);
}
.app-cell-icon.app-cell-icon-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}
.app-cell:active .app-cell-icon {
  transform: scale(0.9);
  box-shadow: 0 3px 8px rgba(70, 60, 50, 0.12);
}
.app-cell-label {
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 高度固定（45px），与内核 SYSTEM_NAV_HEIGHT 保持一致 */
.classic-nav-on { --system-nav-height: 45px; }
.classic-nav-on .app-layer { bottom: calc(var(--system-nav-height) + var(--safe-bottom)); }
.classic-nav-on .app-body { padding-bottom: 26px; }
/* 软键盘弹出（原生 insets 标记）：收起外壳导航键，让输入框直接贴在键盘上方 */
html.keyboard-open .system-nav { display: none; }
html.keyboard-open .app-layer { bottom: 0; }
.system-nav {
  position: absolute; z-index: 30; left: 0; right: 0; bottom: 0;
  height: calc(var(--system-nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex; justify-content: space-around; align-items: center;
  background: color-mix(in srgb, var(--card) 62%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 -2px 12px var(--line);
}
.system-nav button { flex: 1; height: 100%; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink); transition: background .16s ease; }
.system-nav button:active,
.system-nav button.pressed { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.nav-square { width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 2px; }
.nav-circle { width: 17px; height: 17px; border: 2px solid currentColor; border-radius: 50%; }
.nav-triangle { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 17px solid currentColor; transform: scale(.75); }
.system-recents {
  position: absolute; z-index: 20; inset: 0;
  padding: calc(70px + var(--safe-top)) 20px calc(70px + var(--safe-bottom));
  background: var(--surface);
  animation: recents-in .24s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes recents-in {
  from { opacity: 0; transform: scale(.965) translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* 退出进程页：淡出并回缩，随后由内核移除节点 */
.system-recents.leaving {
  animation: none;
  opacity: 0;
  transform: scale(.965) translateY(14px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .system-recents { animation: none; }
  .system-recents.leaving { transition: none; }
}
.recent-title { font-size: 18px; font-weight: 600; margin-bottom: 14px; }
/* 居中轮播：卡片以 stage 中心为基准，由内核写入 translateX 偏移与缩放 */
.recent-stage { position: relative; margin-top: 8px; touch-action: none; overflow: visible; }
.recent-card {
  position: absolute; top: 0; left: 50%; width: 62%;
  transform: translateX(-50%);
  transform-origin: center top;
  border-radius: 22px; background: var(--card); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden;
  touch-action: none; will-change: transform, opacity;
  transition: transform .3s cubic-bezier(.22,.8,.3,1), opacity .3s ease;
}
.recent-card.recent-dismissing { pointer-events: none; }
/* 卡片比例 = 应用内可视区比例（--recent-aspect 由内核写入），预览铺满即不裁切 */
.recent-preview { flex: none; width: 100%; aspect-ratio: var(--recent-aspect, 1 / 2); min-height: 0; position: relative; overflow: hidden; background: var(--screen-bg); pointer-events: none; }
.recent-preview-frame { position: absolute; transform-origin: top left; overflow: hidden; }
.recent-preview-layer { position: absolute !important; inset: 0 !important; display: flex !important; opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: none !important; }
.recent-caption { flex: 0 0 auto; box-sizing: border-box; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; }
.recent-caption svg { width: 20px; height: 20px; }
.recent-empty { color: var(--ink-mute); text-align: center; padding: 60px 0; }
.recent-clear-all { position: absolute; left: 50%; bottom: calc(70px + var(--safe-bottom)); transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-card); font: inherit; font-size: 32px; line-height: 1; cursor: pointer; }
.system-options { margin-bottom: 12px; }
.system-warning { color: var(--danger); font-size: 12px; line-height: 1.6; padding: 0 16px 15px; margin: 0; }
.system-toggle { flex: none; width: 40px; height: 23px; background: var(--line-strong); border-radius: 20px; position: relative; }
.system-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--card); transition: transform .18s; }
.system-toggle.on { background: var(--accent); }
.system-toggle.on::after { transform: translateX(17px); }
.system-choice { display: flex; gap: 10px; padding: 4px 14px 14px; }
.system-choice button { flex: 1; padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; }
.system-choice button.selected { background: var(--accent); color: var(--accent-ink); }
.system-open-desktop { margin: 0 14px 14px; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: inherit; }

/* ---------- 图标风格（html[data-icon-style] 由内核主题服务写入） ---------- */
html[data-icon-style="round"] .app-cell-icon {
  border-radius: 50%;
}
html[data-icon-style="square"] .app-cell-icon {
  border-radius: 8px;
}
html[data-icon-style="soft"] .app-cell-icon {
  border-radius: 30px;
}
html[data-icon-style="outline"] .app-cell-icon {
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--ink-strong);
}
html[data-icon-style="glass"] .app-cell-icon {
  background: var(--card-2);
  background: color-mix(in srgb, var(--card) 52%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-icon);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- 主题商店：预览与素材网格 ---------- */
.theme-preview {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  padding: 16px;
  min-height: 168px;
  background: var(--screen-bg);
}
.theme-preview-wall {
  position: absolute;
  inset: 0;
  background: var(--wallpaper-layer, transparent);
}
.theme-preview-inner {
  position: relative;
  z-index: 1;
}
.theme-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.theme-preview-row + .theme-preview-row {
  margin-top: 8px;
}
.theme-preview-dot {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  box-shadow: var(--shadow-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.theme-preview-dot svg {
  width: 16px;
  height: 16px;
}
.theme-preview-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}
.theme-preview-bar.soft {
  background: var(--line-strong);
}
.theme-preview-label {
  font-size: 13px;
  color: var(--ink-strong);
}

.swatch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.swatch {
  position: relative;
  border: none;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.swatch:active {
  transform: scale(0.985);
}
.swatch-view {
  height: 86px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px;
}
.swatch-dots {
  display: flex;
  gap: 4px;
}
.swatch-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.swatch-name {
  font-size: 12px;
  color: var(--ink-strong);
  padding: 8px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.swatch-mood {
  font-size: 11px;
  color: var(--ink-mute);
  padding: 0 10px 10px;
}
.swatch.active {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-card);
}

/* ---------- 主题商店：系统 / 特殊 / 云端 / 我的 顶部标签 ---------- */
.theme-tabs {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 10px;
}
.theme-tab {
  position: relative;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink-mute);
  padding: 6px 0;
  cursor: pointer;
}
.theme-tab.active {
  color: var(--ink-strong);
  font-weight: 600;
}
.theme-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- 主题商店：云端主题 ---------- */
.special-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: 2px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.cloud-pack-list { display: flex; flex-direction: column; gap: 12px; }
.cloud-pack {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.cloud-pack-cover {
  flex: 0 0 auto;
  width: 112px;
  height: 70px;
  border-radius: 12px;
  background: var(--card-2) center / cover no-repeat;
}
.cloud-pack-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cloud-pack-title { display: flex; align-items: center; min-width: 0; }
.cloud-pack-title strong { font-size: 15px; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cloud-pack-mood, .cloud-pack-meta { margin: 0; font-size: 12px; color: var(--ink-mute); line-height: 1.45; }
.cloud-pack-progress { height: 4px; margin-top: 4px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.cloud-pack-progress i { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.cloud-pack-actions { display: flex; gap: 8px; margin-top: 6px; }
.cloud-pack-btn {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 14px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.cloud-pack-btn.primary { border-color: transparent; color: var(--accent-ink); background: var(--accent); }
.cloud-pack-btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.cloud-pack-btn:disabled { opacity: .6; cursor: default; }
.cloud-pack-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--danger); margin-bottom: 8px; }
.cloud-pack-actions { flex-wrap: wrap; }

/* 作者：头像 + 昵称 */
.cloud-pack-author { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--ink); }
.cloud-pack-nick { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cloud-pack-author .special-badge { margin-left: 0; vertical-align: 0; }
.cloud-pack-avatar {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 11px;
  font-style: normal;
  color: var(--accent-ink);
  background: var(--accent) center / cover no-repeat;
}
.cloud-pack-avatar i { font-style: normal; }
.cloud-pack-avatar.has-image i { visibility: hidden; }
.cloud-pack-avatar.official { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.cloud-pack-avatar.official svg { width: 13px; height: 13px; }

/* 云端主题页右下角「+」：上传我的主题 */
.theme-fab-space { height: 76px; }
.theme-fab {
  position: absolute;
  right: 20px;
  bottom: calc(22px + var(--safe-bottom, 0px));
  z-index: 6;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.theme-fab svg { width: 26px; height: 26px; }
.theme-fab:active { transform: scale(0.94); }

.share-sheet {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.32);
}
.share-sheet-card {
  width: 100%;
  max-height: 78%;
  overflow-y: auto;
  padding: 16px 18px calc(22px + var(--safe-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background: var(--card);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.14);
}
.share-sheet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.share-sheet-top strong { font-size: 16px; color: var(--ink-strong); }
.share-sheet-close {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--ink-mute); background: var(--card-2); cursor: pointer;
}
.share-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.share-row .menu-main { flex: 1; min-width: 0; }
.share-sheet-card .btn { margin-top: 12px; }

/* ---------- 主题商店：我的主题 ---------- */
.mine-card { cursor: default; }
.mine-card:active { transform: none; }
.mine-card-actions { padding: 0 10px 12px; margin-top: 0; }
.mine-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.mine-new-plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--accent-ink); background: var(--accent); }
.mine-new-plus svg { width: 18px; height: 18px; }
.mine-wall-card { padding: 12px; display: grid; gap: 10px; }
.mine-wall-card .setting-hint { margin: 0; }
.mine-wall {
  height: 220px;
  border-radius: var(--radius-sm);
  background: var(--card-2) center / cover no-repeat;
}
.mine-wall.empty { display: grid; place-items: center; font-size: 13px; color: var(--ink-mute); border: 1.5px dashed var(--line-strong); }
.mine-bases { display: flex; flex-wrap: wrap; gap: 8px; }
.mine-base {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--card);
  cursor: pointer;
}
.mine-base.active { border-color: var(--accent); color: var(--ink-strong); box-shadow: 0 0 0 1px var(--accent); }
.mine-base-dot { width: 20px; height: 20px; border-radius: 50%; }
/* 透明底图标：棋盘格底，看得出透明区域 */
.mine-icon-box {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e9e6e1 25%, transparent 25%, transparent 75%, #e9e6e1 75%),
    linear-gradient(45deg, #e9e6e1 25%, transparent 25%, transparent 75%, #e9e6e1 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.mine-placeholder { opacity: 0.6; }

/* ---------- 主题商店：特殊主题卡片 ---------- */
.special-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.special-view {
  position: relative;
  height: 168px;
  padding: 0;
  align-items: flex-start;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.special-icons {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 12px;
}
.special-icons img {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  box-shadow: var(--shadow-icon);
}
.special-view::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
}

/* ---------- 主题商店：壁纸透明度滑块 ---------- */
.dim-preview {
  height: 150px;
  margin: 12px 12px 0;
  border-radius: var(--radius-sm);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dim-preview-icons {
  display: flex;
  gap: 10px;
}
.dim-preview-icons img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  box-shadow: var(--shadow-icon);
}
.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.setting-label {
  flex: none;
  font-size: 14px;
  color: var(--ink-strong);
}
.setting-value {
  flex: none;
  min-width: 40px;
  text-align: right;
  font-size: 13px;
  color: var(--ink-mute);
}
.setting-range {
  flex: 1;
  min-width: 0;
  height: 4px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: var(--line-strong);
  outline: none;
}
.setting-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow-card);
  border: none;
}
.setting-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
}
.setting-hint {
  font-size: 11px;
  color: var(--ink-mute);
  margin: 0;
  padding: 0 14px 13px;
  line-height: 1.6;
}
.swatch-check {
  color: var(--accent);
  display: flex;
}
.swatch-check svg {
  width: 16px;
  height: 16px;
}
.swatch-view.solid {
  background: var(--swatch, transparent);
}
.swatch-view > svg {
  width: 26px;
  height: 26px;
  color: var(--ink-mute);
  margin: 0 auto;
}
.icon-demo {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.icon-demo + .icon-demo {
  border-top: 1px solid var(--line);
}
.icon-demo:active {
  background: var(--press);
}
.icon-demo-box {
  width: 62px;
  height: 62px;
  border-radius: 19px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  box-shadow: var(--shadow-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex: 0 0 auto;
}
.icon-demo-box svg {
  width: 30px;
  height: 30px;
}
.icon-demo[data-style="round"] .icon-demo-box {
  border-radius: 50%;
}
.icon-demo[data-style="square"] .icon-demo-box {
  border-radius: 8px;
}
.icon-demo[data-style="soft"] .icon-demo-box {
  border-radius: 30px;
}
.icon-demo[data-style="outline"] .icon-demo-box {
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--ink-strong);
}
.icon-demo[data-style="glass"] .icon-demo-box {
  background: var(--card-2);
  background: color-mix(in srgb, var(--card) 52%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-icon);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- 自定义桌面图标（逐应用图片，支持透明底） ---------- */
.app-cell-icon.app-cell-icon-custom,
.icon-demo-box.app-cell-icon-custom {
  padding: 0;
  overflow: visible;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.app-cell-icon.app-cell-icon-custom img,
.icon-demo-box.app-cell-icon-custom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
}
.icon-demo .menu-main {
  flex: 1 1 auto;
  min-width: 0;
}
.icon-custom-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.icon-custom-actions .btn {
  padding: 7px 12px;
  font-size: 13px;
}


/* ---------- 应用层 ---------- */
.app-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  /* 不透明背景：应用层必须完全盖住后面的桌面 */
  background: var(--screen-bg);
  opacity: 0;
  transform: translateY(10px) scale(0.995);
  transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.app-layer.visible {
  opacity: 1;
  transform: none;
}
.app-layer.leaving {
  opacity: 0;
  transform: translateY(8px) scale(0.995);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.app-layer.launch-underlay { visibility: hidden; }
.app-open-transition {
  position: absolute;
  inset: 0;
  z-index: 25;
  overflow: hidden;
  border-radius: 28px;
  background: var(--screen-bg);
  transform-origin: top left;
  pointer-events: auto;
  will-change: transform;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .2);
}
.app-open-content { position: absolute; inset: 0; opacity: 0; }
.app-open-transition .recent-preview-layer { width: 100%; height: 100%; }

/* ---------- 启动门禁：登录 / 注册 ---------- */
.gate-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-top)) var(--page-x) calc(24px + var(--safe-bottom));
  background: var(--screen-bg);
  overflow-y: auto;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: 0.6px;
}
.auth-logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  box-shadow: var(--shadow-icon);
}
.auth-logo svg {
  width: 22px;
  height: 22px;
}
.auth-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: 16px 0 18px;
  border-radius: var(--radius-sm);
  background: var(--card-2);
}
.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--ink-mute);
  padding: 10px 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.auth-tab.active {
  background: var(--card);
  color: var(--ink-strong);
  box-shadow: var(--shadow-card);
}
.auth-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-panel.hidden {
  display: none;
}
.auth-field label {
  display: block;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0 0 7px 2px;
  letter-spacing: 0.4px;
}
.auth-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 0 14px;
}
.auth-input .input {
  flex: 1;
  padding: 13px 0;
  font-size: 15px;
}
.pw-toggle {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
}
.pw-toggle svg {
  width: 20px;
  height: 20px;
}
.auth-panel .btn {
  margin-top: 4px;
}
.gate-desc {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-mute);
  text-align: center;
}
.gate-hint {
  margin: 18px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-mute);
  text-align: center;
}

/* ==================== wechat.css ==================== */
/* 用户反馈样式 */
.wx-system-notice { text-align: center; color: var(--ink-mute); font-size: 11px; margin: 14px 0; }
.wx-role-thought { font-size: 12px; color: var(--ink-mute); max-width: 100%; margin-top: 5px; }
.wx-role-thought p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 5px 0; }
.wx-portrait-card { padding: 12px; }
.wx-portrait-preview { display: block; max-width: 100%; height: 180px; object-fit: contain; margin: 0 auto 12px; }
/* 微信应用
   =========================================================== */

.wx {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- 可滚动内容（全屏、贴边） ---------- */
.wx-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
}
.wx-scroll::-webkit-scrollbar {
  width: 0;
}

/* ---------- 搜索 ---------- */
.wx-search {
  flex: 0 0 auto;
  padding: 8px var(--page-x);
  background: var(--card);
}
.wx-search-input {
  width: 100%;
  border: none;
  outline: none;
  background: var(--card-2);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-strong);
}

/* ---------- 列表行 ---------- */
.wx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--page-x);
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.wx-item + .wx-item {
  border-top: 1px solid var(--line);
}
.wx-item:active {
  background: rgba(74, 68, 62, 0.04);
}
.wx-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-size: 18px;
}
.wx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wx-avatar.big {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  font-size: 22px;
}
.wx-item-main {
  flex: 1;
  min-width: 0;
  display: block;
  overflow: hidden;
}
.wx-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.wx-item-name {
  font-size: 16px;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-item-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ink-mute);
}
.wx-item-sub {
  display: block;
  width: 100%;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 分组 ---------- */
.wx-group {
  background: var(--card);
}
.wx-group + .wx-group {
  margin-top: 8px;
}

/* ---------- 底部 Tab ---------- */
.wx-tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bottom);
}
.wx-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 0 5px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-mute);
  cursor: pointer;
}
.wx-tab-icon {
  display: flex;
}
.wx-tab-icon svg {
  width: 24px;
  height: 24px;
}
.wx-tab.active {
  color: #3fae3f;
}

/* ---------- 账号卡（我） ---------- */
.wx-account {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px var(--page-x);
  background: var(--card);
  width: 100%;
  border: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
}
.wx-account-main {
  flex: 1;
  min-width: 0;
}
.wx-account-name {
  display: block;
  font-size: 18px;
  color: var(--ink-strong);
}
.wx-account-id {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-mute);
}
.wx-login-btn {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: #3fae3f;
  padding: 18px;
  cursor: pointer;
}

/* ---------- 聊天 ---------- */
.wx-chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px var(--page-x);
  background: var(--surface-2);
}
.wx-chat-body::-webkit-scrollbar {
  width: 0;
}
.wx-time {
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  margin: 12px 0 8px;
}
.wx-msg {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.wx-msg.mine {
  flex-direction: row-reverse;
}
.wx-msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-size: 14px;
}
.wx-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wx-bubble-wrap {
  max-width: 72%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.wx-msg.mine .wx-bubble-wrap {
  align-items: flex-end;
}
.wx-bubble {
  display: inline-block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-strong);
  background: var(--card);
  word-break: break-word;
  white-space: pre-wrap;
}
.wx-msg.mine .wx-bubble {
  background: #95ec69;
}
.wx-bubble.media {
  padding: 0;
  background: transparent;
}
.wx-bubble .bubble-text:empty::before {
  content: "正在输入…";
  color: var(--ink-mute);
  font-size: 13px;
}
.wx-sticker {
  max-width: 132px;
  display: block;
  border-radius: 10px;
}
.wx-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.wx-voice-icon {
  display: flex;
  color: var(--ink);
}
.wx-voice-icon svg {
  width: 18px;
  height: 18px;
}
.wx-voice-text {
  display: block;
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--card-2);
  font-size: 13px;
  color: var(--ink);
  max-width: 230px;
  white-space: pre-wrap;
}

/* ---------- 输入区 ---------- */
.wx-input-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px var(--page-x) calc(8px + var(--safe-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.wx-input-bar .icon-btn.glow {
  color: var(--accent);
}
.wx-input-bar .icon-btn.busy svg {
  animation: spin 0.9s linear infinite;
}
.wx-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: var(--card);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-strong);
}
.wx-input::placeholder {
  color: var(--line-strong);
}

/* ---------- 功能面板 ---------- */
.wx-panel {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 16px var(--page-x) calc(16px + var(--safe-bottom));
}
.wx-func-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.wx-func {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.wx-func-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.wx-func-icon svg {
  width: 26px;
  height: 26px;
}
.wx-func-icon.wx-func-red {
  color: #d44739;
}

/* ---------- 表情包 ---------- */
.wx-sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
}
.wx-sticker-cell {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.wx-sticker-cell img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--card);
  border-radius: 10px;
}
.wx-sticker-cell .del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.wx-sticker-name {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 表情包导入预览 ---------- */
.wx-import-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.wx-import-row + .wx-import-row {
  border-top: 1px solid var(--line);
}
.wx-import-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--card-2);
  flex: 0 0 auto;
}
.wx-import-row .input {
  flex: 1;
}

/* ---------- 人设头像 ---------- */
.wx-avatar-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 6px;
}
.wx-avatar-pick .wx-avatar {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  font-size: 26px;
}

/* 唤醒开关熄灭态：暗色，和常亮（accent）区分 */
.icon-btn.wake-off {
  color: var(--line-strong);
}

/* ---------- 聊天头像可点击（进入主页） ---------- */
.wx-msg-avatar.link {
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ---------- 聊天图片 ---------- */
.wx-chat-image {
  max-width: 190px;
  max-height: 260px;
  display: block;
  border-radius: 10px;
}
.wx-image-loading {
  display: inline-block;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink-mute);
}

/* 图片按钮：去掉默认按钮外观，只留图片 */
.wx-image-btn {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  font-family: inherit;
  line-height: 0;
  display: block;
  cursor: pointer;
}
.wx-moment .wx-image-btn {
  max-width: 100%;
}

/* 全屏看图 */
.wx-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: wx-viewer-fade 0.15s ease;
}
.wx-image-viewer img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
@keyframes wx-viewer-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- 消息引用 ---------- */
.wx-quote {
  display: block;
  margin-bottom: 6px;
  padding: 5px 8px;
  border-left: 3px solid var(--line-strong);
  background: rgba(74, 68, 62, 0.07);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-mute);
  white-space: normal;
}
.wx-msg.mine .wx-quote {
  background: rgba(0, 0, 0, 0.06);
}
.wx-quote-name {
  color: var(--ink);
  margin-right: 6px;
}
.wx-quote-text {
  display: inline;
  word-break: break-word;
}

/* ---------- 撤回提示 ---------- */
.wx-recall {
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 10px 0;
}

/* ---------- 拍一拍提示 ---------- */
.wx-poke {
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 10px 0;
}

/* ---------- 长按操作菜单 ---------- */
.wx-sheet-mask {
  bottom: calc(var(--system-nav-height, 0px) + var(--safe-bottom));
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: flex-end;
}
.wx-sheet {
  width: 100%;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 8px var(--page-x) calc(10px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: wx-sheet-up 0.18s ease;
}
@keyframes wx-sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.wx-sheet-item {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink-strong);
  padding: 14px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
}
.wx-sheet-item:active {
  background: var(--press);
}
.wx-sheet-item.danger {
  color: var(--danger);
}
.wx-sheet-cancel {
  width: 100%;
  border: none;
  background: var(--card);
  font-family: inherit;
  font-size: 16px;
  color: var(--ink-strong);
  padding: 14px;
  margin-top: 6px;
  border-radius: 12px;
  cursor: pointer;
}

/* ---------- 输入框上方的引用条 ---------- */
.wx-quote-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px var(--page-x);
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-mute);
}
.wx-quote-bar .wx-quote-name {
  flex: 0 0 auto;
}
.wx-quote-bar .wx-quote-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-quote-bar .icon-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

/* ---------- 角色主页 ---------- */
.wx-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 14px;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.wx-profile .wx-avatar.big {
  width: 66px;
  height: 66px;
  border-radius: 14px;
  font-size: 24px;
}
.wx-profile-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wx-profile-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: var(--ink-strong);
}
.wx-profile-line {
  font-size: 13px;
  color: var(--ink-mute);
}
.wx-profile-sign {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.menu-row.static {
  cursor: default;
  align-items: flex-start;
}
.menu-row.static:active {
  background: transparent;
}

/* ---------- 朋友圈 ---------- */
.wx-moments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wx-moment {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.wx-moment .wx-avatar {
  width: 44px;
  height: 44px;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.wx-moment-main {
  flex: 1;
  min-width: 0;
}
.wx-moment-name {
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--accent-strong, var(--accent));
  cursor: pointer;
}
.wx-moment-text {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-strong);
  white-space: pre-wrap;
  word-break: break-word;
}
.wx-moment-image {
  margin-top: 8px;
  max-width: 100%;
  border-radius: 10px;
  display: block;
}
.wx-moment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.wx-moment-time {
  font-size: 11px;
  color: var(--ink-mute);
}
.wx-moment-btns {
  display: flex;
  gap: 4px;
}
.wx-moment-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: var(--card-2);
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.wx-moment-btn svg {
  width: 15px;
  height: 15px;
}
.wx-moment-btn.on {
  color: var(--accent);
}
.wx-moment-likes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 10px;
  background: var(--card-2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink);
}
.wx-moment-likes svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.wx-moment-comments {
  margin-top: 6px;
  padding: 7px 10px;
  background: var(--card-2);
  border-radius: 8px;
}
.wx-moment-comment {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-strong);
  word-break: break-word;
}
.wx-moment-comment + .wx-moment-comment {
  margin-top: 4px;
}
.wx-moment-comment .who {
  color: var(--accent-strong, var(--accent));
}
.wx-moment-comment-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.wx-moment-comment-bar .wx-input {
  flex: 1;
  min-width: 0;
}
.wx-moment-comment-bar .storage-btn {
  padding: 8px 12px;
}

/* ---------- 群聊 / 通讯录补充 ---------- */
/* 已拉黑角标 */
.wx-tag-mini {
  margin-left: 6px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink-mute);
  vertical-align: middle;
}
/* 群聊 / 系统项头像 */
.wx-avatar.group {
  color: var(--ink-mute);
}
.wx-avatar.group svg {
  width: 26px;
  height: 26px;
}
.wx-avatar.icon {
  color: var(--accent);
}
.wx-avatar.icon svg {
  width: 24px;
  height: 24px;
}
.wx-avatar.small {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
}
/* 新的朋友数量角标 */
.wx-item-badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 回收站灰显 */
.wx-item.dim {
  opacity: 0.72;
}
.wx-item.dim .wx-avatar {
  filter: grayscale(0.6);
}
.wx-item.dim .wx-item-name {
  color: var(--ink-mute);
}
/* 复原按钮 */
.wx-restore {
  flex: 0 0 auto;
  border: none;
  background: var(--card-2);
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.wx-restore:active {
  background: var(--press);
}
/* 好友申请操作 */
.wx-req-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}
.wx-req-btn {
  border: none;
  background: var(--card-2);
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.wx-req-btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.wx-req-btn:active {
  background: var(--press);
}
/* 群聊发送者名 */
.wx-msg-name {
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 3px;
}
/* 正在输入 */
.wx-typing {
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 6px 0 2px;
}
/* 拉黑 / 删除提示条（替代输入栏） */
.wx-blocked-bar {
  flex: 0 0 auto;
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 14px var(--page-x) calc(14px + var(--safe-bottom));
}
/* 菜单危险项 */
.menu-title.danger {
  color: var(--danger);
}
.wx-wallet{display:grid;align-content:start;gap:18px;padding:24px 18px}.wx-wallet-card{display:grid;gap:10px;padding:25px;border-radius:20px;background:linear-gradient(135deg,#43ad77,#22794f);color:#fff}.wx-wallet-card strong{font-size:36px}.wx-wallet-card span{font-size:13px;opacity:.85}.wx-wallet .field{display:grid;gap:8px}.wx-wallet .field label{font-size:13px}
.wx-red-packet{display:flex;align-items:center;gap:12px;min-width:180px;max-width:245px;padding:16px;border-radius:12px;background:linear-gradient(145deg,#ed7650,#d44739);color:#fff;box-shadow:0 5px 14px #b443342e}.wx-red-packet strong,.wx-red-packet small{display:block}.wx-red-packet strong{font-size:14px}.wx-red-packet small{font-size:11px;opacity:.85;margin-top:5px}.wx-red-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:8px;background:#ffcf84;color:#9f3c30;font-weight:700}.wx-red-compose{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7px;width:100%}.wx-red-compose span{grid-column:1/-1;font-size:12px}.wx-red-compose input{min-width:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}.wx-red-compose button{padding:8px 10px;border:0;border-radius:8px;background:var(--accent);color:#fff}

.wx-item.wx-pinned { background: var(--card-2); }
.wx-sheet { max-height: 85vh; overflow-y: auto; }

.wx-correction{margin:12px;padding:14px;background:#fff5d9;border-radius:12px;color:#685324;font-size:13px}.wx-correction p{white-space:pre-wrap}
.wx-inline-session { margin:8px 2px; padding:8px 10px; border:0; border-left:2px solid #a6b8bd; border-radius:0 10px 10px 0; background:rgba(220,230,233,.38); }
.wx-inline-session header { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.wx-inline-meta { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.wx-inline-meta strong { font-size:12px; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wx-inline-meta small { font-size:10px; color:var(--ink-mute); }
.wx-inline-actions { display:flex; flex:none; gap:2px; }
.wx-inline-actions button { width:auto; margin:0; padding:5px 6px; border:0; border-radius:5px; background:transparent; color:var(--ink-mute); font-size:11px; line-height:1.3; white-space:nowrap; }
.wx-inline-actions button:active { background:var(--press); }
.wx-inline-messages { padding-top:7px; }
.wx-inline-session .wx-msg { gap:7px; margin:5px 0; }
.wx-inline-session .wx-msg-avatar { width:24px; height:24px; flex:0 0 24px; border-radius:7px; font-size:11px; }
.wx-inline-session .wx-bubble { padding:7px 10px; background:rgba(255,255,255,.65); font:inherit; font-size:.92em; border-radius:10px; }
.wx-inline-session .mine .wx-bubble { background:#dce8df; }
.wx-inline-summary { margin:7px 0 0; white-space:pre-wrap; font-size:12px; color:var(--ink-mute); }
.wx-inline-session.collapsed { padding-top:6px; padding-bottom:6px; }
.wx-regen-bar button { border:0; border-radius:8px; padding:8px; margin:4px; background:#fff; color:#345; }
.wx-regen-choice{display:block;margin:10px;padding:16px;text-align:left;white-space:pre-wrap;border:1px solid #aaa;border-radius:12px;background:#fff;color:#222}.wx-regen-choice.selected{border:2px solid #7597c2;background:#e1edfb}.wx-regen-bar{padding:10px;background:var(--surface,#fff)}

/* ---------- 表情包分类 ---------- */
.wx-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.wx-chip-row::-webkit-scrollbar {
  display: none;
}
.wx-chip {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.wx-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.wx-chip.add {
  border-style: dashed;
  color: var(--ink-mute);
}
.wx-link-btn {
  border: none;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: 12px;
  padding: 0 0 0 8px;
  cursor: pointer;
}

/* Runway call modal is outside chat repaint so media tracks stay attached. */
.wx-video-call {
  box-sizing: border-box;
  width: min(94vw, 520px);
  max-height: 88dvh;
  overflow: auto;
  border: 0;
  border-radius: 20px;
  padding: 20px;
  background: var(--surface, #fff);
  color: var(--ink, #222);
}
.wx-video-call::backdrop { background: rgb(0 0 0 / 70%); }
.wx-video-call [hidden] { display: none !important; }
.wx-call-setup label { display: block; margin: 14px 0; }
.wx-call-setup p { font-size: 13px; line-height: 1.6; }
.wx-call-live { text-align: center; }
.wx-call-live video { display: block; width: 100%; max-height: 48dvh; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 14px; background: #111; }
.wx-call-subtitle { min-height: 3em; max-height: 5em; overflow: auto; font-size: 14px; line-height: 1.5; }

/* ---------- 朋友圈封面（用户本人） ---------- */
.wx-moments-cover {
  position: relative;
  min-height: 186px;
  margin: -4px calc(-1 * var(--page-x)) 0;
  background: linear-gradient(140deg, #cfd9c8, #9fb3a1);
  background-size: cover;
  background-position: center;
}
.wx-moments-avatar {
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.wx-moments-identity {
  position: absolute;
  left: 16px;
  right: 86px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.wx-moments-name {
  font-size: 17px;
  font-weight: 600;
}
.wx-moments-sign {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.96;
  max-width: 100%;
  word-break: break-word;
}

/* 朋友圈按钮：操作多时换行，避免溢出 */
.wx-moment-meta {
  flex-wrap: wrap;
  gap: 6px;
}
.wx-moment-btns {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wx-moment-btn.danger {
  color: var(--danger);
}

/* 朋友圈封面设置预览 */
.wx-cover-preview {
  height: 148px;
  border-radius: 12px;
  background: var(--card-2) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-size: 13px;
}
.wx-cover-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wx-cover-hint svg {
  width: 18px;
  height: 18px;
}

/* ==================== gomoku.css ==================== */
/* ===========================================================
   五子棋（05_gomoku）· 对手角色 + 发言
   =========================================================== */

.gm-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
}

/* ---------- 头像（系统角色图片 / 用户角色 blob / 文字兜底） ---------- */
.gm-avatar,
.gm-say-face,
.gm-pick-face {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--tone, var(--accent));
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.gm-avatar img,
.gm-say-face img,
.gm-pick-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 对手信息卡 ---------- */
.gm-opp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.gm-opp-face {
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.gm-opp-face .gm-avatar {
  width: 46px;
  height: 46px;
  font-size: 18px;
  transition: transform 0.14s ease;
}
.gm-opp-face:active .gm-avatar {
  transform: scale(0.93);
}
.gm-opp-main {
  flex: 1;
  min-width: 0;
}
.gm-opp-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-opp-state {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-score {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.3px;
  color: var(--ink-mute);
}

/* ---------- 对手发言 ---------- */
.gm-say {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 0 2px;
}
.gm-say-face {
  width: 30px;
  height: 30px;
  font-size: 13px;
}
.gm-say-bubble {
  position: relative;
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 4px 14px 14px 14px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
  min-height: 19px;
}
.gm-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 19px;
}
.gm-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-mute);
  animation: gm-typing 1.1s infinite ease-in-out;
}
.gm-typing i:nth-child(2) {
  animation-delay: 0.16s;
}
.gm-typing i:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes gm-typing {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* ---------- 棋盘 ---------- */
.gm-board-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.gm-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 结束遮罩 ---------- */
.gm-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 24, 18, 0.34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: gm-fade 0.2s ease;
}
@keyframes gm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.gm-overlay-card {
  width: 76%;
  max-width: 260px;
  padding: 20px 22px;
  text-align: center;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.gm-overlay-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-strong);
}
.gm-overlay-sub {
  margin: 6px 0 14px;
  font-size: 12px;
  color: var(--ink-mute);
}

/* ---------- 操作按钮 ---------- */
.gm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gm-actions .btn {
  padding: 12px 10px;
  font-size: 14px;
}

/* ---------- 选择对手 ---------- */
.gm-pick-head {
  padding: 4px 2px 2px;
}
.gm-pick-head h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: 0.4px;
}
.gm-pick-head p {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.gm-pick-section {
  margin-top: 4px;
}
.gm-pick-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 2px 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
}
.gm-pick-title small {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-mute);
}
.gm-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 9px;
}
.gm-pick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.gm-pick-item:active {
  transform: scale(0.96);
}
.gm-pick-item.active {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-card);
}
.gm-pick-face {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.gm-pick-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-strong);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-pick-tag {
  font-size: 10px;
  color: var(--ink-mute);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-pick-empty {
  margin: 2px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--card-2);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-mute);
}

.gm-chat{padding:12px;border-radius:14px;background:var(--card)}.gm-chat-log{max-height:180px;overflow:auto;font-size:13px}.gm-chat-log p{padding:8px;border-radius:10px;background:#eff1f6;white-space:pre-wrap}.gm-chat-log p.mine{background:#ddedda;text-align:right}

/* The board keeps its square shape; secondary controls never squeeze it. */
.gm-body { gap:8px; padding-bottom:calc(72px + var(--safe-bottom)); min-height:0; }
.app-layer > .gm-body { padding-bottom:calc(72px + var(--safe-bottom)); }
.gm-body > * { flex-shrink:0; }
.gm-opp { padding:8px 10px; gap:10px; }
.gm-opp-face .gm-avatar { width:40px; height:40px; }
.gm-opp-name { font-size:14px; }
.gm-opp-state { font-size:11px; margin-top:1px; }
.gm-preferences { display:flex; gap:6px; margin-top:4px; }
.gm-preferences button { width:auto; border:0; border-radius:6px; padding:4px 7px; font:inherit; font-size:10px; line-height:1.3; color:var(--ink-mute); background:var(--card-2); }
.gm-preferences button[aria-pressed="true"] { color:var(--accent); }
.gm-score { font-size:10px; }
.gm-say { align-items:center; }
.gm-say-face { width:24px; height:24px; }
.gm-say-bubble { font-size:12px; padding:7px 10px; max-height:60px; overflow:auto; box-shadow:none; }
.gm-say.mine { flex-direction:row-reverse; }
.gm-say.mine .gm-say-bubble { border-radius:14px 4px 14px 14px; background:color-mix(in srgb,var(--accent) 14%,var(--card)); }
.gm-chat-log .gm-say { margin:7px 0; }
.gm-chat-log .gm-say-bubble { max-height:none; white-space:pre-wrap; }
.gm-board-wrap { aspect-ratio:1; flex-shrink:0; }
.gm-actions { display:flex; gap:4px; }
.gm-actions .btn { flex:1; width:auto; padding:7px 2px; min-height:32px; font-size:12px; border-radius:8px; }
.gm-chat { padding:0; background:transparent; }
.app-layer > .gm-composer { position:absolute; z-index:30; left:var(--page-x); right:var(--page-x); bottom:var(--gm-composer-bottom,calc(12px + var(--safe-bottom))); min-height:44px; display:flex; align-items:center; gap:6px; padding:4px 5px 4px 12px; background:var(--card); border-radius:22px; box-shadow:0 2px 18px #0002; }
.gm-composer .input { flex:1; width:0; min-width:0; border:0; background:transparent; border-radius:0; box-shadow:none; padding:6px 0; font-size:14px; }
.gm-composer > button { width:32px; height:32px; flex-shrink:0; border:0; border-radius:50%; font-size:20px; color:var(--accent-ink); background:var(--accent); }
.gm-composer > button:disabled { opacity:.5; }
.gm-history { margin-top:5px; }
.gm-history summary { padding:4px 8px; font-size:10px; color:var(--ink-mute); cursor:pointer; }
.gm-history summary span { margin-left:4px; }
.gm-chat-log p { margin:5px 0; }
.gm-rule { margin:0; font-size:10px; color:var(--ink-mute); text-align:center; }
.app-layer.gm-keyboard { height:var(--gm-stage-height); bottom:auto; overflow:hidden; }
.gm-keyboard .gm-body { overflow:hidden; }

/* ==================== forum.css ==================== */
/* ===========================================================
   论坛应用
   =========================================================== */

.forum {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.forum-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.forum-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.forum-scroll::-webkit-scrollbar {
  width: 0;
}

/* ---------- 世界观切换栏 ---------- */
.forum-worlds {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px var(--page-x) 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.forum-worlds::-webkit-scrollbar {
  height: 0;
}
.forum-world-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: var(--card-2);
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
}
.forum-world-chip svg {
  width: 15px;
  height: 15px;
}
.forum-world-chip.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.forum-world-chip.add {
  background: transparent;
  border: 1px dashed var(--line-strong);
}

/* ---------- 世界观管理 ---------- */
.forum-world-list {
  overflow: hidden;
  padding: 0;
}
.forum-world-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
}
.forum-world-row + .forum-world-row {
  border-top: 1px solid var(--line);
}
.forum-world-row:active {
  background: var(--press);
}
.forum-world-main {
  flex: 1;
  min-width: 0;
}
.forum-world-name {
  font-size: 15px;
  color: var(--ink-strong);
}
.forum-world-sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.forum-world-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}
.forum-world-trash {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
}
.forum-world-trash svg {
  width: 17px;
  height: 17px;
}
.forum-world-trash:active {
  background: var(--press);
}

/* ---------- 首页 推荐 / 关注 ---------- */
.forum-tabs {
  display: flex;
  gap: 22px;
  padding: 2px var(--page-x) 8px;
}
.forum-tab {
  position: relative;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink-mute);
  padding: 6px 0;
  cursor: pointer;
}
.forum-tab.active {
  color: var(--ink-strong);
  font-weight: 600;
}
.forum-tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

/* ---------- 帖子列表 ---------- */
.forum-posts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px var(--page-x) calc(22px + var(--safe-bottom));
}
.forum-post {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px;
  cursor: pointer;
}
.forum-post:active {
  background: var(--card-2);
}
.forum-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.forum-post-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.forum-post-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-strong);
}
.forum-post-time {
  font-size: 11px;
  color: var(--ink-mute);
}
.forum-post-title {
  margin-top: 11px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.45;
}
.forum-post-body {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.forum-post-foot {
  display: flex;
  gap: 16px;
  margin-top: 11px;
}
.forum-post-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
}
.forum-post-stat svg {
  width: 15px;
  height: 15px;
}
.forum-post-stat.on {
  color: var(--accent);
}

/* ---------- 头像 ---------- */
.forum-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-size: 15px;
  border: none;
  padding: 0;
  font-family: inherit;
}
.forum-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.forum-avatar.big {
  width: 66px;
  height: 66px;
  font-size: 24px;
}

/* ---------- 发帖 ---------- */
.forum-compose {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px var(--page-x) calc(22px + var(--safe-bottom));
}

/* ---------- 帖子详情 ---------- */
.forum-detail {
  padding: 4px var(--page-x) 16px;
}
.forum-detail-card {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px;
}
.forum-detail-title {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.45;
}
.forum-detail-body {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.forum-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.forum-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: var(--card-2);
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.forum-pill svg {
  width: 16px;
  height: 16px;
}
.forum-pill.on {
  color: var(--accent);
}

.forum-comments {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.forum-comment {
  display: flex;
  gap: 10px;
}
.forum-comment .forum-avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
}
.forum-comment-main {
  flex: 1;
  min-width: 0;
}
.forum-comment-name {
  font-size: 13px;
  color: var(--ink);
}
.forum-comment-text {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-strong);
  white-space: pre-wrap;
  word-break: break-word;
}
.forum-comment-time {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-mute);
}

.forum-comment-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--page-x) calc(8px + var(--safe-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.forum-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: var(--card);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-strong);
}
.forum-input::placeholder {
  color: var(--line-strong);
}
.forum-comment-bar .storage-btn {
  padding: 9px 16px;
}

/* ---------- 主页（用户 / 角色共用） ---------- */
.forum-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 14px;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.forum-profile-main {
  flex: 1;
  min-width: 0;
}
.forum-profile-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  color: var(--ink-strong);
}
.forum-profile-bio {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}
.forum-stats {
  display: flex;
  gap: 28px;
  margin-top: 16px;
  padding: 0 4px;
}
.forum-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.forum-stat b {
  font-size: 17px;
  color: var(--ink-strong);
}
.forum-stat span {
  font-size: 11px;
  color: var(--ink-mute);
}

/* ---------- 分组卡片 ---------- */
.forum-group {
  margin-top: 14px;
  background: var(--card);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ---------- 我的关注 ---------- */
.forum-follow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}
.forum-follow-row + .forum-follow-row {
  border-top: 1px solid var(--line);
}
.forum-follow-row:active {
  background: var(--press);
}
.forum-follow-main {
  flex: 1;
  min-width: 0;
}
.forum-follow-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--ink-strong);
}
.forum-follow-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-follow-btn {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 16px;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
}
.forum-follow-btn.on {
  background: var(--card-2);
  color: var(--ink-mute);
}

/* ---------- 头像编辑 ---------- */
.forum-avatar-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
}

/* ---------- 马甲管理 ---------- */
.forum-me-list {
  overflow: hidden;
  padding: 0;
}
.forum-me-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.forum-me-row + .forum-me-row {
  border-top: 1px solid var(--line);
}
.forum-me-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.forum-me-main:active {
  opacity: 0.7;
}
.forum-me-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}
.forum-me-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
}
.forum-me-icon svg {
  width: 17px;
  height: 17px;
}
.forum-me-icon:active {
  background: var(--press);
}

/* ---------- 底部 Tab ---------- */
.forum-tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bottom);
}
.forum-tabbar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 0 5px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-mute);
  cursor: pointer;
}
.forum-tabbar-icon {
  display: flex;
}
.forum-tabbar-icon svg {
  width: 24px;
  height: 24px;
}
.forum-tabbar-btn.active {
  color: var(--accent);
}

/* ==================== story.css ==================== */
/* 剧情模式 */
.story-start { width: 100%; margin: 12px 0 20px; }
.story-setup .textarea { min-height: 112px; }
.story-setup .model-name { display: flex; align-items: center; gap: 7px; }
.story-setup .tag { flex: 0 0 auto; }

.story-reader {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.story-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px var(--page-x) 20px;
  -webkit-overflow-scrolling: touch;
}
.story-log::-webkit-scrollbar { width: 0; }
.story-intro {
  margin: 2px 0 20px;
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.story-scene {
  margin: 12px 0 24px;
  padding: 18px 16px;
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink-strong);
  font-size: 14px;
  line-height: 1.85;
}
.story-scene p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-scene > * + * { margin-top: 12px; }
.story-narration { text-indent: 1.8em; }
.story-action, .story-thought, .story-dialogue {
  border-radius: 10px;
  padding: 10px 12px;
}
.story-action { border-left: 3px solid var(--accent); background: var(--card-2); }
.story-thought { border-left: 3px solid var(--ink-mute); background: var(--screen-bg); font-style: italic; }
.story-dialogue { border-left: 3px solid var(--line-strong); background: var(--card-2); }
.story-action span, .story-thought span, .story-dialogue span {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-mute);
  font-size: 11px;
  font-style: normal;
}
.story-player {
  margin: 16px 0 16px 14%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--card-2);
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.story-player span { display: block; margin-bottom: 5px; font-size: 11px; color: var(--ink-mute); }
.story-player p { margin: 0; line-height: 1.6; white-space: pre-wrap; }
.story-wait { display: flex; align-items: center; gap: 7px; color: var(--ink-mute); font-size: 13px; padding: 10px; }
.story-wait svg { width: 16px; height: 16px; }
.story-retry { width: 100%; }
/* 重新生成：右下角的小按钮，弱化存在感 */
.story-regen {
  width: auto;
  display: block;
  margin: 2px 0 6px auto;
  padding: 6px 16px;
  font-size: 13px;
}
.story-composer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px var(--page-x) calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--screen-bg);
}
.story-composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 120px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink-strong);
  background: var(--card);
  font: inherit;
  line-height: 1.5;
}
.story-composer .btn { flex: 0 0 auto; width: auto; max-width: 40%; min-height: 44px; padding-inline: 14px; }
.story-composer textarea { flex: 1 1 0%; width: 0; resize: none; }

.story-turn-actions { display: flex; flex-wrap: nowrap; gap: 3px; width: 100%; align-items: center; }
.story-turn-actions .btn { flex: 1 1 0; min-width: 0; width: auto; margin: 0; padding: 7px 2px; min-height: 34px; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.story-sheet-mask { position: absolute; inset: 0; z-index: 80; display: flex; align-items: flex-end; background: rgba(0,0,0,.25); }
.story-sheet { width: 100%; padding: 12px var(--page-x) calc(12px + var(--safe-bottom)); border-radius: 18px 18px 0 0; background: var(--card); }
.story-sheet button { display: block; width: 100%; padding: 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink-strong); font: inherit; }

/* ==================== memory.css ==================== */
/* 记忆图鉴：纸感星图与可触摸的记忆碎片 */
.memory-home, .memory-atlas { color: var(--ink-strong); }
.memory-eyebrow { color: var(--ink-mute); font-size: 10px; font-weight: 700; letter-spacing: 2.2px; }
.memory-home-intro { padding: 24px 10px 24px; position: relative; }
.memory-home-intro::after { content: ""; position: absolute; right: 10px; top: 24px; width: 72px; height: 72px; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 0 0 15px var(--line), 0 0 0 31px var(--texture); opacity: .65; pointer-events: none; }
.memory-home-intro h1 { margin: 14px 0 12px; font-size: clamp(27px, 8vw, 38px); line-height: 1.28; font-weight: 550; letter-spacing: 1px; }
.memory-home-intro h1 em, .memory-atlas-heading h1 em { font-style: normal; color: var(--accent); }
.memory-home-intro p { max-width: 280px; margin: 0; color: var(--ink-mute); font-size: 13px; line-height: 1.8; }
.memory-home-label { display: flex; align-items: center; justify-content: space-between; margin: 8px 6px 15px; padding-top: 14px; border-top: 1px solid var(--line-strong); font-size: 13px; }
.memory-home-label span:last-child { color: var(--ink-mute); font-size: 11px; }
.memory-shelf { display: grid; gap: 12px; padding-bottom: 16px; }
.memory-book { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) 18px; grid-template-rows: auto auto; align-items: center; gap: 1px 13px; min-height: 96px; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: var(--card); box-shadow: var(--shadow-card); color: var(--ink-strong); font: inherit; text-align: left; overflow: hidden; cursor: pointer; }
.memory-book:active { transform: scale(.985); }
.memory-book-glow { position: absolute; left: -25px; top: -45px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(205, 176, 136, .18), transparent 72%); pointer-events: none; }
.memory-book-1 .memory-book-glow { background: radial-gradient(circle, rgba(145, 171, 176, .2), transparent 72%); }
.memory-book-2 .memory-book-glow { background: radial-gradient(circle, rgba(183, 154, 177, .2), transparent 72%); }
.memory-book-3 .memory-book-glow { background: radial-gradient(circle, rgba(151, 177, 151, .2), transparent 72%); }
.memory-book-avatar { grid-row: 1 / 3; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; background: var(--card-2); border: 2px solid var(--card); box-shadow: 0 2px 8px var(--line-strong); color: var(--accent); font-size: 25px; overflow: hidden; }
.memory-book-avatar img, .memory-core-avatar img, .memory-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.memory-book-name { z-index: 1; align-self: end; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-book-meta { z-index: 1; align-self: start; margin-top: 3px; color: var(--ink-mute); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-book-arrow { grid-column: 3; grid-row: 1 / 3; color: var(--ink-mute); }
.memory-book-arrow svg { width: 18px; height: 18px; }
.memory-empty-home { display: grid; justify-items: center; gap: 12px; padding: 44px 10px; color: var(--ink-mute); text-align: center; font-size: 13px; line-height: 1.8; }
.memory-empty-home svg { width: 42px; height: 42px; opacity: .55; }

.memory-atlas { padding-top: 0; }
.memory-atlas-heading { padding: 12px 8px 2px; text-align: center; }
.memory-atlas-heading h1 { margin: 7px 0 1px; font-size: 28px; font-weight: 550; letter-spacing: 1px; }
.memory-atlas-heading p { margin: 0; color: var(--ink-mute); font-size: 11px; letter-spacing: .5px; }
.memory-sky { position: relative; width: 100%; height: min(104vw, 420px); min-height: 330px; margin: 6px auto 0; touch-action: pan-y; user-select: none; overflow: hidden; }
.memory-sky::before { content: ""; position: absolute; left: 50%; top: 46%; width: 68%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 68%); pointer-events: none; }
.memory-sky-halo { position: absolute; left: 50%; top: 46%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.memory-sky-halo-outer { width: 74%; aspect-ratio: 1; border: 1px dashed color-mix(in srgb, var(--accent) 23%, transparent); }
.memory-sky-halo-inner { width: 47%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); }
.memory-sky-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.memory-sky-lines path { fill: none; stroke: var(--line-strong); stroke-width: .3; stroke-dasharray: 1.2 1.6; }
.memory-core { position: absolute; z-index: 2; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 140px; min-height: 152px; border: 0; background: transparent; font: inherit; color: var(--ink-strong); cursor: pointer; }
.memory-core-ring { position: absolute; top: 1px; left: 13px; width: 114px; height: 114px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 12px color-mix(in srgb, var(--accent) 4%, transparent); transition: transform .3s ease; }
.memory-core:active .memory-core-ring { transform: scale(.94); }
.memory-core.is-thinking .memory-core-ring { animation: memory-breathe 2s ease-in-out infinite; }
.memory-core-avatar { z-index: 1; display: grid; place-items: center; width: 104px; height: 104px; overflow: hidden; border: 4px solid var(--card); border-radius: 50%; background: var(--card-2); box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 43px; }
.memory-core-name { z-index: 1; margin-top: 5px; font-size: 13px; font-weight: 650; }
.memory-core-hint { z-index: 1; color: var(--ink-mute); font-size: 10px; }
.memory-orb { position: absolute; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; width: min(27%, 98px); min-height: 68px; padding: 7px 7px 8px; border: 1px solid color-mix(in srgb, var(--accent) 21%, var(--card)); border-radius: 15px; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 5px 19px color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink-strong); font: inherit; text-align: center; cursor: pointer; transform: translate(-50%, -50%); animation: memory-appear .35s ease both; }
.memory-orb:active { transform: translate(-50%, -50%) scale(.94); }
.memory-orb:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.memory-orb-0 { left: 50%; top: 12%; animation-delay: .02s; }
.memory-orb-1 { left: 80%; top: 27%; animation-delay: .07s; }
.memory-orb-2 { left: 80%; top: 65%; animation-delay: .12s; }
.memory-orb-3 { left: 50%; top: 83%; animation-delay: .17s; }
.memory-orb-4 { left: 20%; top: 65%; animation-delay: .22s; }
.memory-orb-5 { left: 20%; top: 27%; animation-delay: .27s; }
.memory-orb-spark { position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--card); }
.memory-orb-kind { color: var(--ink-mute); font-size: 9px; letter-spacing: 1px; }
.memory-orb-title { max-width: 100%; margin-top: 3px; font-size: 12px; line-height: 1.35; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.memory-tone-likes .memory-orb-spark { background: #c48b76; }
.memory-tone-wish .memory-orb-spark { background: #a390be; }
.memory-tone-promise .memory-orb-spark { background: #b99967; }
.memory-tone-moment .memory-orb-spark { background: #80a99b; }
.memory-tone-other .memory-orb-spark { background: var(--accent); }
.memory-sky-empty { position: absolute; bottom: 7px; left: 12%; right: 12%; color: var(--ink-mute); font-size: 12px; line-height: 1.5; text-align: center; }
.memory-sky-caption { margin: -2px 0 13px; text-align: center; color: var(--ink-mute); font-size: 11px; }
.memory-pages { display: flex; align-items: center; justify-content: center; gap: 17px; margin: -2px 0 12px; color: var(--ink-mute); font-size: 11px; }
.memory-pages button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--accent); }
.memory-pages button:disabled { opacity: .35; }
.memory-pages svg { width: 16px; height: 16px; }
.memory-atlas-actions { display: flex; gap: 10px; padding: 4px 4px 0; }
.memory-extract-btn { flex: 1; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); color: var(--ink-strong); font: inherit; font-size: 13px; cursor: pointer; }
.memory-extract-btn:disabled { opacity: .6; }
.memory-extract-btn svg { width: 18px; height: 18px; color: var(--accent); }
.memory-add-btn { display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.memory-add-btn svg { width: 21px; height: 21px; }
.memory-status { margin: 10px 8px 0; color: var(--ink-mute); text-align: center; font-size: 12px; line-height: 1.6; }
.memory-rescan { display: block; margin: 13px auto 0; padding: 6px 10px; border: 0; background: none; color: var(--ink-mute); font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; }

.memory-overlay { position: fixed; z-index: 12; inset: 0; display: flex; align-items: flex-end; }
.memory-overlay-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(28, 25, 23, .42); }
.memory-sheet { position: relative; width: 100%; max-height: min(84vh, 690px); overflow-y: auto; padding: 0 22px calc(20px + var(--safe-bottom)); border-radius: 26px 26px 0 0; background: var(--card); box-shadow: 0 -16px 55px rgba(30, 26, 24, .16); animation: memory-sheet-in .26s cubic-bezier(.2,.8,.2,1); }
.memory-sheet-handle { width: 42px; height: 4px; margin: 10px auto 19px; border-radius: 9px; background: var(--line-strong); }
.memory-sheet-top { display: flex; justify-content: space-between; align-items: center; }
.memory-sheet-top button { width: 31px; height: 31px; border: 0; border-radius: 50%; background: var(--card-2); color: var(--ink-mute); font-size: 23px; line-height: 1; }
.memory-detail-category { display: inline-block; margin-top: 20px; padding: 4px 9px; border-radius: 8px; background: var(--card-2); color: var(--accent); font-size: 11px; }
.memory-detail-category.memory-tone-likes { color: #ab725e; }
.memory-detail-category.memory-tone-wish { color: #9277ac; }
.memory-detail-category.memory-tone-promise { color: #a7824f; }
.memory-detail-category.memory-tone-moment { color: #598c7b; }
.memory-detail h2 { margin: 9px 0 16px; font-size: 27px; font-weight: 550; line-height: 1.3; }
.memory-detail-voice { display: flex; align-items: center; gap: 8px; color: var(--ink-mute); font-size: 12px; }
.memory-detail-avatar { display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: var(--card-2); color: var(--accent); }
.memory-detail-story { margin: 18px 0 22px; padding-left: 15px; border-left: 2px solid var(--accent); color: var(--ink-strong); font-size: 16px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-source { padding: 14px 15px; border-radius: 13px; background: var(--card-2); }
.memory-source span { color: var(--ink-mute); font-size: 11px; }
.memory-source p { margin: 7px 0 0; color: var(--ink); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-detail-foot { display: flex; gap: 10px; margin: 17px 0 22px; color: var(--ink-mute); font-size: 11px; }
.memory-delete-link { display: block; margin: 12px auto 0; padding: 7px; border: 0; background: none; color: var(--ink-mute); font: inherit; font-size: 11px; text-decoration: underline; }
.memory-delete-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; color: var(--ink-mute); font-size: 11px; }
.memory-delete-confirm button { border: 0; background: transparent; color: var(--danger); font: inherit; font-size: 11px; }
.memory-edit-form { display: grid; gap: 13px; padding-top: 18px; }
.memory-edit-form label { display: grid; gap: 6px; color: var(--ink-mute); font-size: 12px; }
.memory-edit-form input, .memory-edit-form textarea, .memory-edit-form select { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 11px; outline: none; background: var(--card-2); color: var(--ink-strong); font: inherit; font-size: 14px; }
.memory-edit-form textarea { min-height: 136px; line-height: 1.65; resize: vertical; }
.memory-edit-form p { margin: 0; color: var(--ink-mute); font-size: 11px; line-height: 1.5; }
.memory-sheet-buttons { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px; }
@keyframes memory-appear { from { opacity: 0; transform: translate(-50%, -45%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes memory-breathe { 50% { transform: scale(1.09); opacity: .65; } }
@keyframes memory-sheet-in { from { transform: translateY(35px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 340px) { .memory-orb { width: 82px; min-height: 62px; } .memory-core-avatar { width: 92px; height: 92px; } .memory-core-ring { top: 7px; left: 19px; width: 102px; height: 102px; } }
@media (prefers-reduced-motion: reduce) { .memory-orb, .memory-sheet, .memory-core.is-thinking .memory-core-ring { animation: none; } }

/* ==================== undercover.css ==================== */
/* ===========================================================
   谁是卧底（13_undercover）
   =========================================================== */
/* 同时是外壳 .app-body（column flex 子项）：写 min-height:100% 会让滚动区不收缩、底部被导航键压住，用 0。 */
.undercover-app{min-height:0;padding:20px 18px calc(42px + var(--safe-bottom));color:var(--ink)}
.uc-kicker{font-size:10px;letter-spacing:.22em;color:var(--ink-mute)}

/* ---------- 首页 ---------- */
.uc-hero{text-align:center;padding:18px 6px 25px}.uc-hero-icon{width:72px;height:72px;margin:18px auto 15px;border-radius:25px;display:grid;place-items:center;background:linear-gradient(140deg,#8e6a69,#3f505b);color:#fff;box-shadow:0 12px 22px #4c3a3529}.uc-hero-icon svg{width:37px;height:37px}.uc-hero h1{font-size:28px;line-height:1.32;letter-spacing:-.04em;margin:0}.uc-hero h1 em{font-style:normal;color:#b26d61}.uc-hero p{margin:12px auto 0;max-width:310px;font-size:13px;line-height:1.7;color:var(--ink-mute)}.uc-start{margin-top:21px;min-width:148px}
.uc-npc-library,.uc-rules,.uc-setup-card,.uc-npc-preview,.uc-action-card,.uc-secret,.uc-log{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-card)}
.uc-npc-library{padding:16px;margin:3px 0 12px;text-align:left}.uc-npc-library>div:first-child{display:flex;justify-content:space-between;align-items:baseline}.uc-npc-library>div:first-child span,.uc-rules>span{font-size:14px;font-weight:700}.uc-npc-library small{font-size:10px;color:var(--ink-mute)}.uc-npc-stack{display:flex;margin:14px 0 0}.uc-npc-face{margin-left:-7px;border:2px solid var(--card)}.uc-npc-face:first-child{margin-left:0}
.uc-rules{padding:16px;line-height:1.75}.uc-rules p{margin:7px 0 0;font-size:12px;color:var(--ink-mute)}

/* ---------- 头像 ---------- */
.uc-avatar{--avatar:#8e6a69;width:37px;height:37px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--avatar);color:#fff;font-size:15px;font-weight:700;box-shadow:inset 0 0 0 1px #fff5}
.uc-avatar img{width:100%;height:100%;display:block;object-fit:cover}

/* ---------- 组队页 ---------- */
.uc-setup-head{margin:4px 0 20px}.uc-setup-head h1{font-size:28px;margin:7px 0}.uc-setup-head p{font-size:13px;line-height:1.65;color:var(--ink-mute);margin:0}
.uc-setup-card{padding:15px 16px}.uc-setup-card label{display:flex;justify-content:space-between;font-size:13px}.uc-setup-card label strong{font-size:15px}.uc-seats{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:14px 0 9px}.uc-seats button{border:1px solid var(--line-strong);border-radius:10px;padding:9px 0;background:var(--card-2);font:inherit;color:var(--ink)}.uc-seats button.active{background:var(--ink);border-color:var(--ink);color:var(--card)}.uc-setup-card p{margin:0;font-size:11px;color:var(--ink-mute)}
.uc-section-title{display:flex;justify-content:space-between;margin:23px 3px 10px;font-size:13px;font-weight:700}.uc-section-title small{font-size:11px;color:var(--ink-mute);font-weight:400}
.uc-persona-list{display:grid;gap:8px}.uc-persona{width:100%;display:flex;gap:11px;align-items:center;padding:10px 11px;border:1px solid var(--line);border-radius:15px;background:var(--card);text-align:left;color:var(--ink)}.uc-persona.selected{border-color:#a5756a;background:#fff8f4}.uc-persona>span:nth-child(2){min-width:0;flex:1;display:grid;gap:3px}.uc-persona strong{font-size:14px}.uc-persona small{font-size:10px;line-height:1.35;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uc-persona i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-style:normal;color:var(--accent);background:var(--card-2)}.uc-persona.selected i{color:#fff;background:#a5756a}
.uc-empty-card{padding:20px;text-align:center;border:1px dashed var(--line-strong);border-radius:15px;color:var(--ink-mute);font-size:12px}
.uc-npc-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:13px}.uc-npc-preview>div:first-child{display:grid;gap:3px}.uc-npc-preview strong{font-size:13px}.uc-npc-preview small{font-size:10px;color:var(--ink-mute)}.uc-npc-preview>div:last-child{display:flex;align-items:center}.uc-npc-preview>div:last-child .uc-avatar{margin-left:-6px;border:2px solid var(--card);position:relative}.uc-npc-preview>div:last-child span:not(.uc-avatar){display:none}
.uc-launch{width:100%;margin:22px 0 8px}

/* ---------- 游戏页：顶部与身份 ---------- */
.uc-game-head{display:flex;align-items:flex-start;justify-content:space-between;margin:3px 1px 13px}.uc-game-head span{font-size:11px;color:var(--ink-mute)}.uc-game-head h1{font-size:23px;margin:5px 0 0}.uc-game-head button{border:0;background:none;color:var(--ink-mute);font:inherit;font-size:12px;padding:5px}
.uc-secret{padding:13px 16px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:15px;background:linear-gradient(120deg,#443d42,#69605b);border:0;color:#fff}.uc-secret span{grid-column:1/-1;font-size:10px;letter-spacing:.15em;opacity:.65}.uc-secret strong{font-size:22px;margin-top:5px}.uc-secret small{justify-self:end;margin-top:8px;font-size:10px;opacity:.74}

/* ---------- 游戏页：座位舞台 ---------- */
.uc-stage{position:relative;height:378px;margin:12px 0 13px;border-radius:22px;overflow:hidden;border:1px solid #ffffff1f;background:radial-gradient(120% 78% at 50% -8%,#3b4a76 0%,#232a44 42%,#12151f 100%);box-shadow:var(--shadow-card)}
.uc-stage::before{content:"";position:absolute;left:50%;top:-6px;width:210px;height:105%;transform:translateX(-50%);background:linear-gradient(180deg,#c8dcff5c,#c8dcff00 76%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(1.5px);pointer-events:none}
.uc-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 26%,#0000 44%,#00000094);pointer-events:none}
.uc-emblem{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:5px;color:#eaf1ff;text-align:center;pointer-events:none}
.uc-emblem svg{width:32px;height:32px;opacity:.85}
.uc-emblem strong{font-size:19px;letter-spacing:.1em;text-shadow:0 5px 16px #000d}
.uc-emblem small{font-size:10px;color:#a6b7d6}
.uc-seat-col{position:absolute;top:8px;bottom:8px;z-index:2;display:flex;flex-direction:column;justify-content:space-around}
.uc-seat-col.left{left:14px;align-items:flex-start}
.uc-seat-col.right{right:14px;align-items:flex-end}
.uc-seat{position:relative;display:grid;justify-items:center;gap:3px;width:62px}
.uc-seat .uc-avatar{width:46px;height:46px;font-size:17px;border:2px solid #ffffff2e;box-shadow:0 6px 15px #0000008c}
.uc-seat.me .uc-avatar{border-color:#f0c675;box-shadow:0 0 0 3px #f0c67533,0 6px 15px #0000008c}
.uc-seat.speaking .uc-avatar{border-color:#8fd3ff;animation:uc-pulse 1.1s ease-in-out infinite}
.uc-seat.out{opacity:.34;filter:grayscale(.8)}
.uc-seat-no{position:absolute;top:-4px;left:-3px;width:17px;height:17px;z-index:3;border-radius:50%;display:grid;place-items:center;background:#e9eef8;color:#1a2030;font-size:10px;font-weight:700;box-shadow:0 2px 6px #0000008c}
.uc-seat-col.right .uc-seat-no{left:auto;right:-3px}
.uc-seat-name{max-width:64px;font-size:10px;color:#cfd8ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
.uc-seat.me .uc-seat-name{color:#f5d79a}
.uc-bubble{position:absolute;top:0;z-index:6;width:120px;padding:7px 9px;border-radius:11px;background:#fff;color:#2b2f3a;font-size:11px;line-height:1.5;box-shadow:0 9px 20px #0000008c;animation:uc-pop .26s ease-out}
.uc-seat-col.left .uc-bubble{left:calc(100% - 5px)}
.uc-seat-col.right .uc-bubble{right:calc(100% - 5px)}
.uc-bubble::after{content:"";position:absolute;top:15px;width:0;height:0;border:6px solid transparent}
.uc-seat-col.left .uc-bubble::after{left:-11px;border-right-color:#fff}
.uc-seat-col.right .uc-bubble::after{right:-11px;border-left-color:#fff}
.uc-dots{display:inline-flex;gap:3px;padding:3px 1px}
.uc-dots b{width:4px;height:4px;border-radius:50%;background:#8b93a7;animation:uc-blink 1s ease-in-out infinite}
.uc-dots b:nth-child(2){animation-delay:.15s}
.uc-dots b:nth-child(3){animation-delay:.3s}

/* ---------- 游戏页：操作区与交流区 ---------- */
.uc-action-card{padding:15px;margin:0 0 13px}
.uc-action-card>span{font-size:14px;font-weight:700}
.uc-action-card>p{font-size:12px;line-height:1.6;margin:7px 0 12px;color:var(--ink-mute)}
.uc-action-card textarea{box-sizing:border-box;display:block;width:100%;min-height:76px;resize:none;border:1px solid var(--line-strong);border-radius:13px;padding:10px;background:var(--card-2);font:inherit;font-size:13px;color:var(--ink)}
.uc-action-card .btn{width:100%;margin-top:10px}
.uc-wait{text-align:center;padding:21px}
.uc-wait>span{display:flex;justify-content:center;align-items:center;gap:7px}
.uc-wait svg{width:18px;height:18px;color:#ba8b68}
.uc-vote-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.uc-vote-list button{display:flex;align-items:center;gap:7px;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--card-2);padding:8px;color:var(--ink);font:inherit;font-size:12px;text-align:left}
.uc-vote-list .uc-avatar{width:28px;height:28px;font-size:11px}
.uc-result>span{color:#9b5f53}
.uc-log{padding:15px}
.uc-log>span{display:block;font-size:12px;font-weight:700;margin-bottom:10px}
.uc-log-body{display:flex;flex-direction:column;gap:10px;max-height:290px;overflow-y:auto}
.uc-log-empty{margin:0;font-size:12px;color:var(--ink-mute)}
.uc-log article{display:flex;gap:9px}
.uc-log article.mine{flex-direction:row-reverse;text-align:right}
.uc-log .uc-avatar{width:30px;height:30px;font-size:11px}
.uc-log article>div{min-width:0;flex:1}
.uc-log strong{font-size:11px;color:var(--ink-mute)}
.uc-log p{margin:3px 0 0;padding:8px 10px;border-radius:4px 12px 12px 12px;background:var(--card-2);font-size:13px;line-height:1.5}
.uc-log .mine p{border-radius:12px 4px 12px 12px;background:#f5e5de}
.uc-log em{display:inline-block;margin-top:4px;font-size:10px;font-style:normal;color:var(--ink-mute)}

@keyframes uc-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes uc-pop{from{opacity:0;transform:translateY(5px) scale(.94)}to{opacity:1;transform:none}}
@keyframes uc-blink{0%,100%{opacity:.25}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){.undercover-app *{transition:none!important;animation:none!important}}

/* ==================== characters.css ==================== */
/* ===========================================================
   系统角色库（14_characters）
   =========================================================== */
/* 同时是外壳 .app-body（column flex 子项）：写 min-height:100% 会让滚动区不收缩、底部被导航键压住，用 0。 */
.char-app{min-height:0;padding:6px 2px calc(34px + var(--safe-bottom));color:var(--ink)}
.char-kicker{font-size:10px;letter-spacing:.22em;color:var(--ink-mute)}
.char-hero{padding:12px 4px 4px}
.char-hero h1{font-size:27px;line-height:1.32;letter-spacing:-.03em;margin:9px 0 0}
.char-hero h1 em{font-style:normal;color:#b26d61}
.char-hero p{margin:11px 0 0;max-width:330px;font-size:13px;line-height:1.75;color:var(--ink-mute)}

.char-filters{display:flex;gap:8px;margin:20px 0 16px}
.char-filter{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--card);color:var(--ink-mute);font:inherit;font-size:13px}
.char-filter i{font-style:normal;font-size:10px;color:var(--ink-mute);opacity:.8}
.char-filter.active{background:var(--ink);border-color:var(--ink);color:var(--card)}
.char-filter.active i{color:var(--card);opacity:.75}

.char-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.char-card{display:flex;flex-direction:column;gap:8px;padding:15px 14px 16px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow-card);text-align:left;color:var(--ink);min-width:0}
.char-card:active{background:var(--card-2)}
.char-avatar{--tone:#8e6a69;width:46px;height:46px;flex:0 0 auto;border-radius:15px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,var(--tone),rgba(63,80,91,.92));color:#fff;font-size:19px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.char-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.char-card-top{display:flex;align-items:center;gap:7px;min-width:0}
.char-card-top strong{font-size:17px;color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char-gender{flex:0 0 auto;font-size:10px;line-height:1;padding:3px 7px;border-radius:999px;letter-spacing:.06em;color:#fff}
.char-gender.is-male{background:#6e8faa}
.char-gender.is-female{background:#b26d61}
.char-card-meta{font-size:12px;color:var(--ink);line-height:1.5}
.char-card-sub{font-size:10px;letter-spacing:.1em;color:var(--ink-mute)}
.char-empty{grid-column:1/-1;padding:40px 0;text-align:center;font-size:13px;color:var(--ink-mute)}

.char-profile-hero{display:flex;align-items:center;gap:15px;padding:16px 4px 20px}
.char-avatar-lg{width:70px;height:70px;border-radius:22px;font-size:29px}

.char-visual{position:relative;display:block;width:100%;margin:4px 0 14px;padding:0;border:0;border-radius:22px;overflow:hidden;background:var(--card-2);box-shadow:var(--shadow-card)}
.char-visual-img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.char-visual-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,22,20,.74) 0%,rgba(26,22,20,.20) 36%,rgba(26,22,20,0) 62%)}
.char-visual-info{position:absolute;left:16px;right:16px;bottom:15px;display:flex;flex-direction:column;gap:9px;text-align:left}
.char-visual-info .char-profile-name{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.char-visual-info .char-chip{background:rgba(255,255,255,.24);color:#fff}
.char-visual-hint{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:rgba(26,22,20,.42);color:#fff;font-size:11px}
.char-visual-hint svg{width:13px;height:13px}
.char-visual-hint em{font-style:normal}

.char-lightbox{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}
.char-lightbox-scrim{position:absolute;inset:0;border:0;background:rgba(20,18,17,.94)}
.char-lightbox img{position:relative;max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.char-profile-id{min-width:0;display:grid;gap:9px}
.char-profile-name{display:flex;align-items:center;gap:9px;font-size:24px;font-weight:700;color:var(--ink-strong)}
.char-profile-tags{display:flex;flex-wrap:wrap;gap:7px}
.char-chip{font-size:11px;padding:4px 10px;border-radius:999px;background:var(--card-2);color:var(--ink-mute)}

.char-block{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-card);padding:16px;margin-bottom:12px}
.char-block-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.char-block-icon{width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:var(--card-2);color:var(--accent)}
.char-block-icon svg{width:19px;height:19px}
.char-block-head strong{display:block;font-size:15px;color:var(--ink-strong)}
.char-block-head small{font-size:11px;color:var(--ink-mute)}
.char-prompt{margin:0;font-size:14px;line-height:1.95;color:var(--ink)}

.char-fact{display:flex;align-items:baseline;gap:9px;margin:0 0 11px;font-size:14px;color:var(--ink)}
.char-fact small{flex:0 0 auto;font-size:11px;color:var(--ink-mute)}
.char-tags{display:flex;flex-wrap:wrap;gap:7px}

.char-scenes{display:grid;gap:10px}
.char-scene{padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:var(--card-2)}
.char-scene-head{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.char-scene-head svg{width:18px;height:18px;color:var(--accent)}
.char-scene-head strong{font-size:14px;color:var(--ink-strong)}
.char-scene-head small{font-size:10px;color:var(--ink-mute)}
.char-scene p{margin:0;font-size:13px;line-height:1.8;color:var(--ink)}

.char-footnote{margin:4px 4px 0;font-size:11px;line-height:1.8;color:var(--ink-mute)}

@media(prefers-reduced-motion:reduce){.char-app *{transition:none!important}}

/* ==================== new-apps.css ==================== */
/* Album, diary, music and novel share the phone's paper palette.
   注意：这些类名同时是外壳的 .app-body（column flex 子项），绝不能写 min-height:100%，
   否则滚动区不再收缩、底部会比 .app-layer 长出导航栏那么多，最后一行（小说阅读页的
   「续写下一章」按钮等）会被底部导航键压住。用 min-height:0 让 flex 正常收缩。 */
.album-app,.diary-app,.music-app,.novel-app{min-height:0;padding:22px 18px 90px;color:var(--ink)}
.album-heading span,.diary-intro span,.novel-intro span,.music-heading span,.novel-reader-head span{font-size:10px;letter-spacing:.25em;color:var(--ink-mute)}
.album-heading h1,.diary-intro h1,.novel-intro h1{font-size:28px;line-height:1.2;margin:8px 0}
.album-heading p,.diary-intro p,.novel-intro p,.music-subpage>p,.novel-form>p{font-size:13px;color:var(--ink-mute)}
.album-tabs{display:flex;gap:7px;margin:25px 0 20px;overflow-x:auto}
.album-tabs button{border:0;border-radius:20px;padding:9px 14px;white-space:nowrap;background:var(--card);color:var(--ink-mute)}
.album-tabs button.active{background:var(--ink);color:var(--card)}
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.album-grid button{aspect-ratio:1;border:0;padding:0;background:var(--card-2);overflow:hidden;border-radius:5px}
.album-grid img{width:100%;height:100%;object-fit:cover}
.album-empty,.diary-empty,.novel-empty{min-height:42vh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--ink-mute);gap:8px}
.album-empty svg,.diary-empty svg,.novel-empty svg{width:44px;height:44px;opacity:.45}
.album-empty p,.diary-empty p,.novel-empty p{margin:10px 0 0;color:var(--ink);font-size:16px}
.album-empty small,.diary-empty small,.novel-empty small{max-width:230px;line-height:1.6}
.album-lightbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center}
.album-scrim{position:absolute;inset:0;border:0;background:rgba(20,18,17,.94)}
.album-lightbox>img{position:relative;max-width:100%;max-height:78%;object-fit:contain}
.album-caption{position:absolute;bottom:35px;left:20px;right:20px;color:white;display:flex;align-items:center;justify-content:space-between;font-size:12px}
.album-caption button{border:0;background:none;color:white;font-size:30px}
.diary-people,.diary-list,.music-track-list{display:grid;gap:10px;margin-top:26px}
.diary-people button,.diary-list button,.music-track-list button{display:flex;align-items:center;gap:15px;width:100%;border:1px solid var(--line);border-radius:17px;background:var(--card);padding:14px;text-align:left;color:var(--ink)}
.diary-people button>span:nth-child(2),.music-track-list button>span:nth-child(2){display:grid;gap:5px;flex:1}
.diary-people small,.diary-list small,.music-track-list small{font-size:11px;color:var(--ink-mute)}
.diary-people svg,.music-track-list svg{width:22px;height:22px}
.diary-initial,.music-people button span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--accent);font-size:18px}
.diary-list button{display:grid;gap:8px;padding:19px}
.diary-list button>span,.diary-date{font-size:11px;letter-spacing:.12em;color:var(--ink-mute)}
.diary-list button strong{font-size:18px}
.diary-list button small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.diary-paper{min-height:70vh;margin:8px 0;padding:26px 22px;background:var(--card);box-shadow:var(--shadow-card);border-radius:8px}
.diary-paper h1{font-size:25px;margin:30px 0}
.diary-text{font-size:15px;line-height:2.1;white-space:normal;overflow-wrap:anywhere}
.diary-sign{text-align:right;color:var(--ink-mute);margin-top:40px}
.music-app{display:flex;flex-direction:column;min-height:0;padding:22px 18px calc(10px + var(--safe-bottom))}
.music-player{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto}
.music-player::-webkit-scrollbar{width:0}
.music-heading{display:flex;justify-content:space-between;align-items:center}
.music-heading button,.music-actions button,.music-controls button{border:0;background:none;color:var(--ink);display:grid;place-items:center;padding:8px}
.music-heading button svg{width:25px;height:25px}
.music-art{flex:0 0 auto;width:min(74vw,270px);height:min(74vw,270px);margin:22px auto 16px;border:0;background:none;display:grid;place-items:center;overflow:hidden}
.music-disc{width:95%;height:95%;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle at center,#28272a 0,#28272a 5px,#343236 6px,#252426 8px);box-shadow:0 15px 30px #0002,inset 0 0 0 5px #29272a;position:relative;overflow:hidden}
.music-disc img{width:55%;height:55%;border-radius:50%;object-fit:cover}
.music-disc-center svg{width:75px;height:75px;color:#e0d4c5}
.music-art.spinning .music-disc{animation:music-spin 8s linear infinite}
@keyframes music-spin{to{transform:rotate(360deg)}}
.music-lyrics{max-height:100%;overflow-y:auto;display:grid;gap:18px;text-align:center;font-size:16px;line-height:1.65;scroll-behavior:smooth}
.music-lyrics span{color:var(--ink-mute);transition:color .25s ease,transform .25s ease}
.music-lyrics span.active{color:var(--ink-strong);font-weight:600;transform:scale(1.05)}
.music-title{text-align:center;display:grid;gap:6px}.music-title strong{font-size:21px}.music-title span{font-size:13px;color:var(--ink-mute)}
.music-actions{display:flex;justify-content:center;gap:42px;margin:19px 0}.music-actions svg{width:24px;height:24px}.music-actions .liked{color:#df4054}.music-actions .liked svg{fill:currentColor}.music-actions button:disabled{opacity:.35}
.music-progress{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:11px;color:var(--ink-mute)}.music-progress input{flex:1;accent-color:var(--accent)}
.music-controls{display:flex;justify-content:space-between;align-items:center;margin-top:13px}.music-controls svg{width:24px;height:24px}.music-controls .music-main-play{width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--card)}.music-controls .music-main-play svg{width:29px;height:29px}.music-order{position:relative}.music-order small{position:absolute;right:0;bottom:0;font-size:9px}
.music-error{font-size:11px;color:var(--danger);text-align:center}
.music-subpage{flex:0 0 auto;padding-top:12px}.music-subpage h1,.novel-form h1{font-size:27px;margin:12px 0}.music-subpage label,.novel-form label{display:grid;gap:8px;font-size:13px;margin:19px 0;color:var(--ink)}
.music-subpage input,.music-subpage textarea,.novel-form input,.novel-form textarea{width:100%;border:1px solid var(--line-strong);border-radius:12px;padding:12px;background:var(--card);color:var(--ink);font:inherit}
.music-subpage textarea,.novel-form textarea{min-height:110px;resize:vertical}.music-subpage>.btn,.novel-form>.btn{width:100%;margin:12px 0}.music-subpage>small{display:block;color:var(--ink-mute);line-height:1.6}.music-profile-icon{width:65px;height:65px;border-radius:50%;background:var(--card);display:grid;place-items:center}.music-profile-icon svg{width:29px;height:29px}
.music-new-track{border:0;background:none;color:var(--accent);padding:8px 0;font:inherit}
.music-track-list button>span:first-child{width:35px;height:35px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center}.music-track-list i{color:#df4054}.music-empty{padding:40px 0;text-align:center;color:var(--ink-mute)}
.music-people{display:grid;gap:9px;margin-top:25px}.music-people button{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:13px;background:var(--card);padding:9px;text-align:left;color:var(--ink)}.music-reaction{margin:25px 0;padding:20px;border-radius:17px;background:var(--card);line-height:1.7}.music-reaction p{margin-bottom:0}
.novel-app{position:relative}.novel-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin-top:24px}.novel-shelf button{display:grid;gap:9px;background:none;border:0;text-align:left;color:var(--ink);min-width:0}.novel-cover{height:178px;border-radius:4px 12px 12px 4px;background:#b9a48e;color:#fff;padding:18px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 7px 0 8px #0002,3px 7px 12px #0002}.novel-cover svg{width:27px;height:27px}.novel-cover strong{font-size:16px;line-height:1.4}.novel-cover-1{background:#7f938c}.novel-cover-2{background:#ad8a84}.novel-cover-3{background:#8e8b9e}.novel-book-meta{font-size:13px;display:grid;gap:3px;overflow:hidden;text-overflow:ellipsis}.novel-book-meta small{color:var(--ink-mute)}.novel-fab{position:fixed;right:27px;bottom:calc(37px + var(--safe-bottom) + var(--system-nav-height,0px));width:56px;height:56px;border:0;border-radius:50%;background:var(--ink);color:var(--card);box-shadow:var(--shadow-card)}.novel-fab svg{width:26px;height:26px}
.novel-choices{display:grid;gap:14px;margin-top:30px}.novel-choices>button{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);text-align:left}.novel-choices svg{width:30px;height:30px}.novel-choices button span{display:grid;gap:6px}.novel-choices small{color:var(--ink-mute);font-size:11px}.novel-suggestions{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;color:var(--ink-mute)}.novel-suggestions button{border:1px solid var(--line-strong);border-radius:15px;padding:5px 9px;background:var(--card);color:var(--ink)}
.novel-reader-head{text-align:center;margin:12px 0 34px}.novel-reader-head h1{font-size:23px;margin:10px 0}.novel-reader-head small{color:var(--ink-mute)}.novel-reader article{background:var(--card);padding:24px 21px;border-radius:7px;box-shadow:var(--shadow-card)}.novel-reader article h2{font-size:18px;text-align:center;margin:3px 0 30px}.novel-reader article p{font-size:15px;line-height:2.05;text-indent:2em;overflow-wrap:anywhere}.novel-reader-controls{display:flex;justify-content:space-between;margin:25px 0}.novel-reader-controls button{border:0;background:none;color:var(--accent);font-size:13px}.novel-reader-controls button:disabled{opacity:.35}.novel-continue{width:100%}
@media(prefers-reduced-motion:reduce){.music-art.spinning .music-disc{animation:none}}

/* ---------- 音乐 · 网易云 ---------- */
.music-heading-actions{display:flex;align-items:center;gap:2px}
.music-netease{display:flex;flex-direction:column;gap:16px}
.music-login{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 0}
.music-qr{width:min(60vw,214px);height:min(60vw,214px);border-radius:16px;background:#fff;padding:10px;box-shadow:var(--shadow-card);display:block}
.music-login p{font-size:13px;color:var(--ink-mute);text-align:center;margin:0;line-height:1.7}
.music-profile{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;background:var(--card);box-shadow:var(--shadow-card)}
.music-profile img,.music-profile .music-profile-fallback{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--card-2);flex:0 0 auto}
.music-profile .music-profile-fallback{display:grid;place-items:center;color:var(--accent)}
.music-profile .music-profile-fallback svg{width:26px;height:26px}
.music-profile-main{flex:1;min-width:0;display:grid;gap:5px}
.music-profile-main strong{font-size:17px;display:flex;align-items:center;gap:7px}
.music-profile-main small{font-size:12px;color:var(--ink-mute)}
.music-vip{font-size:10px;padding:1px 7px;border-radius:999px;background:#c8442f;color:#fff;font-weight:400}
.music-net-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.music-net-actions .btn{padding:12px}
.music-net-list{display:grid;gap:10px}
.music-net-list button{display:flex;align-items:center;gap:13px;width:100%;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:10px;text-align:left;color:var(--ink);min-width:0}
.music-net-list button.active{box-shadow:inset 0 0 0 1.5px var(--accent)}
.music-net-cover{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto;color:var(--accent)}
.music-net-cover img{width:100%;height:100%;border-radius:10px;object-fit:cover}
.music-net-main{flex:1;min-width:0;display:grid;gap:4px}
.music-net-main strong,.music-net-main small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.music-net-main strong{font-size:14px}
.music-net-main small{font-size:11px;color:var(--ink-mute)}
.music-net-list .music-net-play{flex:0 0 auto;color:var(--accent);display:flex}
.music-net-list .music-net-play svg{width:20px;height:20px}
.music-search-row{display:flex;gap:9px}
.music-search-row input{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:12px;padding:11px 12px;background:var(--card);color:var(--ink);font:inherit}
.music-search-row .btn{width:auto;padding:0 18px}
.music-net-empty{padding:26px 0;text-align:center;color:var(--ink-mute);font-size:13px}
.music-net-note{font-size:11px;color:var(--ink-mute);text-align:center;line-height:1.6}
.music-net-error{font-size:12px;color:var(--danger);text-align:center;line-height:1.6}

/* ---------- 小红书（云端代理：登录 / 信息流 / 搜索 / 笔记） ---------- */
.redbook{display:flex;flex-direction:column;gap:14px}
.redbook-login{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px 0 4px}
.redbook-logo{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:var(--card);box-shadow:var(--shadow-card);color:#d9403f}
.redbook-logo svg{width:38px;height:38px}
.redbook-login h1{font-size:24px;margin:6px 0 0}
.redbook-hint{font-size:13px;color:var(--ink-mute);line-height:1.7;max-width:290px;margin:0}
.redbook-scan{width:100%;padding:15px}
.redbook-qr{width:220px;height:220px;image-rendering:pixelated;border-radius:16px;background:#fff;box-shadow:var(--shadow-card);padding:8px}
.redbook-error{font-size:12px;color:var(--danger);text-align:center;line-height:1.6;margin:0}
.redbook-empty{padding:26px 0;text-align:center;color:var(--ink-mute);font-size:13px}
.redbook-search-entry{width:100%;padding:12px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-mute);font-size:13px;text-align:left}
.redbook-grid{column-count:2;column-gap:10px}
.redbook-card{display:inline-block;width:100%;margin:0 0 10px;padding:0;border:0;background:transparent;text-align:left;break-inside:avoid;color:inherit;cursor:pointer}
.redbook-cover{position:relative;display:block;width:100%;border-radius:14px;overflow:hidden;background:var(--card);aspect-ratio:3/4}
.redbook-cover img{width:100%;height:100%;object-fit:cover;display:block}
.redbook-play{position:absolute;right:8px;top:8px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.5)}
.redbook-play::after{content:"";position:absolute;left:7px;top:5px;border-left:6px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.redbook-card-title{display:block;font-size:13px;line-height:1.45;margin:7px 2px 4px;color:var(--ink,#5c5450)}
.redbook-card-meta{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--ink-mute);margin:0 2px}
.redbook-card-meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.redbook-more{width:100%;padding:14px}
.redbook-logout{width:100%;padding:12px;border:0;background:transparent;color:var(--danger);font-size:12px}
.redbook-search{display:flex;flex-direction:column;gap:14px}
.redbook-search-row{display:flex;gap:8px}
.redbook-search-row input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:inherit;font-size:14px}
.redbook-search-row .btn{width:auto;padding:0 18px}
.redbook-note{display:flex;flex-direction:column;gap:12px}
.redbook-note-media{display:flex;flex-direction:column;gap:8px}
.redbook-note-media img,.redbook-note-media video{width:100%;border-radius:14px;display:block;background:var(--card)}
.redbook-note-title{font-size:19px;margin:4px 0 0;line-height:1.4}
.redbook-note-desc{font-size:14px;line-height:1.8;color:var(--ink,#5c5450);white-space:pre-wrap;margin:0}
.redbook-tags{display:flex;flex-wrap:wrap;gap:8px}
.redbook-tags span{font-size:12px;color:#3b6ea5}
.redbook-note-author{display:flex;align-items:center;gap:10px;font-size:14px}
.redbook-note-author img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.redbook-note-stats{display:flex;gap:18px;font-size:12px;color:var(--ink-mute)}
.redbook-note-error{display:flex;flex-direction:column;gap:14px;align-items:center;padding:20px 0}

.image-studio{display:grid;gap:14px;padding:16px}.image-studio label{display:grid;gap:7px;font-size:13px;color:var(--ink)}.image-studio .input{width:100%;box-sizing:border-box;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:11px;background:var(--surface-2);color:var(--ink);font:inherit;line-height:1.6}.image-studio .desc{margin:0;line-height:1.6}.image-studio-result{margin-top:16px}.image-studio-result img{display:block;width:100%;border-radius:12px}.image-studio input:disabled{opacity:.65}

/* ==================== widgets.css ==================== */
/* ===========================================================
   桌面小组件：时钟 / 天气 / 音乐
   渲染在桌面页顶部（见 widgets/index.ts），用设计令牌跟随主题
   =========================================================== */

/* 组件与图标共用桌面网格：每个组件由内核按标准占位（高 2 行、半宽 2 列）显式放置 */
.desktop-widget-item {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.widget {
  position: relative;
  min-width: 0;
  flex: 1;
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
  color: var(--ink);
  /* 随主题配色变化：不透明卡片，在当前主题的卡片色上叠一层主题强调色 */
  background: var(--card);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 14%, var(--card)),
      color-mix(in srgb, var(--accent) 6%, var(--card)));
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card);
}

/* 皮肤钩子：默认隐藏，由云端主题包样式按需显示（见 widgets/*.ts 注释） */
.clock-minor, .clock-num, .clock-period, .clock-week, .clock-day, .clock-day-text,
.weather-summary, .music-state, .music-remain, .frame-caption { display: none; }

/* 编辑态：卡片可移动 + 删除，右上角露出删除按钮 */
.widget-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  display: none;
  place-items: center;
  color: #fff;
  background: rgba(30, 26, 23, .62);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.widget-remove svg { width: 15px; height: 15px; }
.desktop-editing .widget-remove { display: grid; }
.desktop-editing .desktop-widget-item { outline: 1px dashed var(--line-strong); border-radius: 24px; }


/* ---------- 时钟 ---------- */
.widget-clock {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}
.clock-face { flex: 0 0 auto; width: 92px; height: 92px; }
.clock-face svg { display: block; width: 100%; height: 100%; }
.clock-dial { fill: var(--card); stroke: var(--line-strong); stroke-width: 1.4; }
.clock-tick { stroke: var(--ink-mute); stroke-width: 1.4; stroke-linecap: round; }
.clock-tick.major { stroke: var(--ink); stroke-width: 2.4; }
.clock-hand { transform-box: view-box; transform-origin: 50% 50%; }
.clock-hand line { stroke-linecap: round; }
.clock-hand-hour line { stroke: var(--ink-strong); stroke-width: 3.4; }
.clock-hand-minute line { stroke: var(--ink-strong); stroke-width: 2.4; }
.clock-hand-second line { stroke: var(--accent); stroke-width: 1.2; }
.clock-hand-second { transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.clock-pin { fill: var(--accent); }
.clock-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clock-meta strong {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 1px;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.clock-meta span { font-size: 12px; color: var(--ink-mute); }

/* ---------- 天气 ---------- */
.widget-weather {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
}
.widget-weather:active { background: color-mix(in srgb, var(--card-2) 55%, transparent); }
.weather-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.weather-now { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.weather-now strong {
  font-size: 32px;
  line-height: 1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.weather-now span {
  font-size: 11px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-icon { width: 22px; height: 22px; }
.weather-icon-box { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent); }
.weather-icon-now { width: 100%; height: 100%; }
.weather-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.weather-city { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.weather-head small { font-size: 10px; color: var(--ink-mute); }
.weather-days { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: auto; }
.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 12px;
  background: var(--card-2);
  background: color-mix(in srgb, var(--card-2) 62%, transparent);
}
.weather-day > span { font-size: 10px; color: var(--ink-mute); }
.weather-day .weather-icon { width: 18px; height: 18px; color: var(--ink); }
.weather-day small { font-size: 10px; color: var(--ink); }

/* ---------- 相框 ---------- */
.widget-frame { padding: 0; }
.frame-stage {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--card-2);
  color: var(--ink-mute);
  cursor: pointer;
  overflow: hidden;
}
.frame-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.frame-empty svg { width: 26px; height: 26px; }
.frame-empty small { font-size: 11px; color: var(--ink-mute); }

/* ---------- 音乐播放器 ---------- */
.widget-music { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.music-cover {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 0;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-2);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.music-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-vinyl {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center, #2a2827 0, #2a2827 4px, #3a3734 5px, #262524 7px);
}
.music-vinyl svg { width: 26px; height: 26px; color: #e0d4c5; }
.music-vinyl.spinning { animation: music-spin 8s linear infinite; }
@keyframes music-spin { to { transform: rotate(360deg); } }
.music-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.music-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.music-text strong {
  font-size: 15px;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-text span {
  font-size: 11px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-line { display: flex; align-items: center; gap: 8px; }
.music-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.music-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s linear; }
.music-line small { font-size: 10px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.music-buttons { display: flex; align-items: center; gap: 10px; }
.music-buttons button {
  border: 0;
  padding: 2px;
  background: none;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.music-buttons svg { width: 20px; height: 20px; }
.music-buttons .music-play { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--card); }
.music-buttons .music-play svg { width: 18px; height: 18px; }
.widget-music .music-buttons { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .music-vinyl.spinning { animation: none; }
  .clock-hand-second { transition: none; }
}

/* ---------- 设置页：小组件管理 ---------- */
.widget-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.widget-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.widget-add:active { background: var(--press); }
.widget-add .widget-add-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--card-2);
}
.widget-add .widget-add-icon svg { width: 22px; height: 22px; }
.widget-add strong { font-size: 15px; color: var(--ink-strong); }
.widget-add small { font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.widget-add.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.widget-place {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
}
.widget-place-tip { margin: 0; font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.widget-place-btn {
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  cursor: pointer;
}
.widget-place-btn:active { opacity: .85; }
.widget-manage-list { margin-top: 4px; }
.widget-manage-row { padding: 14px 16px; }
.widget-manage-row + .widget-manage-row { border-top: 1px solid var(--line); }
.widget-manage-head { display: flex; align-items: center; gap: 12px; }
.widget-manage-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--card-2);
}
.widget-manage-icon svg { width: 20px; height: 20px; }
.widget-manage-title { flex: 1; min-width: 0; font-size: 15px; color: var(--ink-strong); }
.widget-manage-remove {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 6px;
  color: var(--danger);
  cursor: pointer;
}
.widget-manage-remove svg { width: 20px; height: 20px; }
.widget-manage-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.widget-manage-opts .seg { display: flex; gap: 6px; }
.widget-manage-opts button {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.widget-manage-opts button.selected { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.widget-manage-opts .widget-reset { color: var(--danger); border-color: rgba(176, 106, 94, .35); }
.widget-manage-field { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.widget-manage-field label { font-size: 12px; color: var(--ink-mute); flex: 0 0 auto; }
.widget-file-btn {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.widget-manage-field .widget-reset {
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--danger);
  background: transparent;
  cursor: pointer;
}
.widget-manage-field input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

/* ==================== island.css ==================== */
/* ===========================================================
   系统灵动岛：桌面与应用之上常驻（本轮只接音乐）
   结构见 packages/kernel/src/system/island.ts
   =========================================================== */

.system-island {
  position: fixed;
  /* 对齐状态栏：把胶囊居中在安全区那条带子里；无安全区时贴顶（3px） */
  top: max(8px, calc((var(--safe-top) - 34px) / 2 + 5px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  width: 130px;
  height: 34px;
  border-radius: 18px;
  /* 跟随主题配色：用当前主题的强调色，隐藏状态栏后顶部那条黑带也不再突兀 */
  background: var(--accent, #0a0a0b);
  color: var(--accent-ink, #f4f1ec);
  overflow: hidden;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent, #0a0a0b) 34%, transparent),
    0 1px 2px rgba(0, 0, 0, .32),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-ink, #f4f1ec) 10%, transparent);
  transition: top .36s cubic-bezier(.22, .9, .28, 1),
    width .36s cubic-bezier(.22, .9, .28, 1),
    height .36s cubic-bezier(.22, .9, .28, 1),
    border-radius .36s cubic-bezier(.22, .9, .28, 1);
}
.system-island[hidden] { display: none; }
.system-island[data-state="expanded"] {
  /* 展开后落到状态栏/安全区下方，不再压住顶部那一条 */
  top: max(40px, calc(var(--safe-top) + 2px));
  width: min(440px, calc(100% - 16px));
  height: 168px;
  border-radius: 30px;
}

/* ---------- 小岛：唱片 + 律动 ---------- */
.island-compact {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 左右分列：中间留出空档给前置摄像头挖孔 */
  padding: 0 15px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: opacity .12s ease;
}
.system-island[data-state="expanded"] .island-compact { opacity: 0; pointer-events: none; }
.island-art {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-ink, #f4f1ec) 20%, transparent);
}
.island-art img { width: 100%; height: 100%; object-fit: cover; }
.island-vinyl {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    color-mix(in srgb, var(--accent-ink, #f4f1ec) 22%, transparent) 0 3px,
    color-mix(in srgb, var(--accent-ink, #f4f1ec) 34%, transparent) 4px,
    color-mix(in srgb, var(--accent-ink, #f4f1ec) 16%, transparent) 5px
  );
  animation: island-spin 3.2s linear infinite;
}
.island-vinyl svg { width: 13px; height: 13px; color: var(--accent-ink, #e6d8c7); }
.system-island:not(.is-playing) .island-vinyl { animation-play-state: paused; }
.island-wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.island-wave i {
  display: block;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleY(.4);
  animation: island-bar .78s ease-in-out infinite alternate;
}
.island-wave i:nth-child(1) { height: 8px; animation-delay: -.62s; }
.island-wave i:nth-child(2) { height: 13px; animation-delay: -.34s; }
.island-wave i:nth-child(3) { height: 15px; animation-delay: -.5s; }
.island-wave i:nth-child(4) { height: 11px; animation-delay: -.16s; }
.island-wave i:nth-child(5) { height: 8px; animation-delay: -.72s; }
.system-island:not(.is-playing) .island-wave i {
  animation-play-state: paused;
  transform: scaleY(.4);
}

@keyframes island-bar {
  from { transform: scaleY(.28); }
  to { transform: scaleY(1); }
}
@keyframes island-spin {
  to { transform: rotate(360deg); }
}

/* ---------- 展开：迷你播放器 ---------- */
.island-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 15px 18px 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.system-island[data-state="expanded"] .island-panel {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s ease .1s;
}
/* 背景：封面模糊 + 深色蒙版（无封面时只留深色） */
.island-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--island-cover, none);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.25) brightness(.5);
  transform: scale(1.4);
  opacity: .8;
}
.island-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #0a0a0b) 62%, transparent),
    color-mix(in srgb, var(--accent, #0a0a0b) 96%, transparent));
}
.island-open {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-ink, #f4f1ec) 14%, transparent);
  color: color-mix(in srgb, var(--accent-ink, #f4f1ec) 90%, transparent);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.island-open svg { width: 15px; height: 15px; }
.island-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
}
.island-cover {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-ink, #f4f1ec) 10%, transparent);
}
.island-cover img { width: 100%; height: 100%; object-fit: cover; }
.island-cover .island-vinyl { animation: none; }
.island-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.island-meta strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.island-meta span {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--accent-ink, #fff) 64%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.island-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 11px;
}
.island-controls button {
  border: 0;
  padding: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--accent-ink, #fff) 92%, transparent);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.island-controls button svg { width: 22px; height: 22px; }
.island-controls button[hidden] { display: none; }
.island-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-ink, #fff) 18%, transparent);
}
.island-play svg { width: 20px; height: 20px; }
.island-like.liked { color: #ff6b81; }
.island-like.liked svg { fill: currentColor; }
.island-lyric {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent-ink, #fff) 30%, transparent);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink, #fff);
}
.system-island.lyric-on .island-lyric {
  background: color-mix(in srgb, var(--accent-ink, #fff) 92%, transparent);
  color: var(--accent, #16161a);
  border-color: transparent;
}
.island-progress {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 10px;
}
.island-progress [data-island-cur],
.island-progress [data-island-dur] {
  font-size: 10.5px;
  color: color-mix(in srgb, var(--accent-ink, #fff) 72%, transparent);
  font-variant-numeric: tabular-nums;
}
.island-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-ink, #fff) 22%, transparent);
  overflow: hidden;
  cursor: pointer;
}
.island-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent-ink, #fff);
}

/* ---------- 桌面歌词 ---------- */
/* z-index 3：高于桌面（2），低于应用层（5）/ 进程页（20），只在桌面露出 */
.system-lyric {
  position: fixed;
  left: 50%;
  bottom: calc(196px + var(--safe-bottom) + var(--system-nav-height, 0px));
  transform: translateX(-50%);
  z-index: 3;
  max-width: 82%;
  padding: 9px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(70, 60, 50, .14), inset 0 0 0 1px var(--line);
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  animation: island-lyric-in .28s ease both;
}
.system-lyric[hidden] { display: none; }
.system-lyric span { display: block; animation: island-lyric-line .3s ease; }
@keyframes island-lyric-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes island-lyric-line {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .island-vinyl, .island-wave i { animation: none; }
  .system-island { transition: none; }
  .island-panel, .system-island[data-state="expanded"] .island-panel { transition: none; }
  .system-lyric, .system-lyric span { animation: none; }
}

/* ==================== life-apps.css ==================== */
/* 同时是外壳 .app-body（column flex 子项）：写 min-height:100% 会让滚动区不收缩、底部被导航键压住，用 0。 */
.ml-app{min-height:0;padding:22px 18px 92px;color:var(--ink)}
.ml-hero{margin:4px 1px 24px}.ml-hero>span{font-size:10px;letter-spacing:.25em;color:var(--ink-mute)}
.ml-hero h1{font-size:27px;line-height:1.25;margin:10px 0}.ml-hero p{font-size:13px;line-height:1.7;color:var(--ink-mute);margin:0}
.ml-list{display:grid;gap:10px}.ml-card{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:17px}
.ml-person{width:100%;display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:17px;background:var(--card);color:var(--ink);text-align:left}
.ml-person>span:nth-child(2){flex:1;min-width:0;display:grid;gap:4px}.ml-person strong{font-size:15px}.ml-person small{font-size:12px;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ml-person svg{width:20px;height:20px}
.ml-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);font-size:18px}
.ml-empty{padding:45px 24px;text-align:center;color:var(--ink-mute);line-height:1.7;font-size:13px}
.ml-form{display:grid;gap:18px}.ml-form label{display:grid;gap:8px;font-size:13px;font-weight:600}
.ml-form input,.ml-form textarea,.ml-form select{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:12px;background:var(--card-2);color:var(--ink);padding:12px;font:inherit;font-weight:400}
.ml-form textarea{min-height:115px;resize:vertical;line-height:1.6}.ml-form .ml-switch{display:flex;align-items:center;font-weight:400;gap:10px}.ml-switch input{width:18px;height:18px;accent-color:var(--accent)}
.ml-primary{border:0;border-radius:12px;background:var(--ink);color:var(--card);padding:13px 16px;font:inherit;font-weight:600}.ml-primary:disabled{opacity:.45}
.ml-plain{border:0;background:transparent;color:var(--danger);padding:9px;font:inherit}.ml-wide{width:100%;margin-top:16px}
.ml-request-head,.ml-section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.ml-request-head strong{font-size:16px}.ml-request-head time,.ml-request>small{font-size:11px;color:var(--ink-mute)}
.ml-request p{font-size:14px;line-height:1.65}.ml-snapshot{display:block;max-width:100%;max-height:350px;object-fit:contain;border:1px solid var(--line);border-radius:12px;margin:14px auto}
.ml-hint{padding:12px;color:var(--danger);font-size:12px}.ml-actions{display:flex;gap:9px;margin-top:15px}.ml-actions button{flex:1;border:1px solid var(--line-strong);border-radius:12px;background:var(--card-2);padding:11px;color:var(--ink);font:inherit}.ml-actions .ml-primary{background:var(--ink);color:var(--card)}
.ml-response{border-top:1px solid var(--line);margin-top:15px;padding-top:14px;font-size:13px;line-height:1.7;white-space:pre-wrap}
.ml-calendar-card{padding:15px}.ml-calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.ml-calendar-head strong{font-size:16px}.ml-calendar-head button{width:32px;height:32px;border:0;background:transparent;color:var(--ink)}.ml-calendar-head svg{width:20px;height:20px}
.ml-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}.ml-calendar>span,.ml-calendar>button{height:39px;display:grid;place-items:center}.ml-weekday{font-size:11px;color:var(--ink-mute)}.ml-calendar button{position:relative;border:0;border-radius:11px;background:transparent;color:var(--ink);font:inherit;font-size:13px}.ml-calendar button.selected{background:var(--ink);color:var(--card)}.ml-calendar button.today:not(.selected){border:1px solid var(--line-strong)}.ml-calendar button i{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--accent)}.ml-calendar button.selected i{background:var(--card)}
.ml-section-head{margin:22px 1px 12px}.ml-section-head strong{font-size:15px}.ml-section-head button{border:0;background:none;color:var(--accent);font:inherit;font-size:12px}
.ml-plan{display:flex;justify-content:space-between;gap:9px}.ml-plan>div:first-child{min-width:0;display:grid;gap:6px}.ml-plan span{font-size:11px;color:var(--ink-mute)}.ml-plan strong{font-size:15px}.ml-plan p{margin:0;font-size:12px;line-height:1.6;color:var(--ink-mute);white-space:pre-wrap}.ml-plan.done{opacity:.5}.ml-plan.done strong{text-decoration:line-through}
.ml-plan-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.ml-plan-actions button{border:0;background:var(--card-2);color:var(--ink-mute);border-radius:8px;padding:5px 7px;font-size:10px}.ml-bottom-actions{margin-top:20px}
.music-together{display:flex;flex-direction:column;flex:1;min-height:0;gap:10px;padding:2px 0 12px;color:var(--ink)}.music-together-head{display:flex;justify-content:space-between;align-items:start;text-align:center}.music-together-head>span{flex:1;font-size:15px}.music-together-head small{display:block;color:var(--ink-mute);font-size:12px;margin-top:3px}.music-together-head button{border:0;background:none;color:var(--ink);font-size:25px}.music-duo{display:flex;justify-content:center;align-items:center;margin:8px 0 -5px}.music-duo>span:not(.music-duo-heart){width:56px;height:56px;border:3px solid var(--card);border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:15px;font-weight:600;box-shadow:0 4px 12px #0002}.music-duo>span:last-child{margin-left:-8px;background:var(--accent);color:#fff}.music-duo-heart{z-index:1;color:#ed6680;font-size:15px;margin:0 -4px}.music-together-chat{height:76px;display:flex;flex-direction:column;align-items:start;gap:5px;overflow:hidden;font-size:12px}.music-together-chat>div{max-width:80%;padding:6px 10px;border-radius:12px;background:var(--card);line-height:1.35}.music-together-chat>div.mine{align-self:end;background:var(--surface-2)}.music-together-disc{width:min(60vw,245px);height:min(60vw,245px);flex:0 0 auto;display:grid;place-items:center;align-self:center;border:0;background:none}.music-together-vinyl{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle,#dfe2ea 0,#dfe2ea 2px,#c5c9d3 3px,#e9ebf0 4px);box-shadow:0 14px 22px #1a203329,inset 0 0 0 10px #ffffffb0;overflow:hidden}.music-together-vinyl>img{width:46%;height:46%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px #ffffff99}.music-together-vinyl>svg{width:55px;height:55px;color:#65718a}.music-together-disc.spinning .music-together-vinyl{animation:music-spin 8s linear infinite}.music-together-vinyl .music-lyrics{width:75%;height:70%;font-size:12px;background:#ffffffbb;border-radius:15px;padding:10px}.music-together-actions{display:flex;justify-content:space-around;padding:6px 10px;border-radius:999px;background:var(--surface-2)}.music-together-actions button{border:0;background:none;color:var(--ink-mute);font-size:21px;min-width:38px}.music-together-actions button:first-child{color:#df5564}.music-together-input{display:flex;gap:8px}.music-together-input input{min-width:0;flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}.music-together-input button{border:0;border-radius:999px;background:var(--accent);color:#fff;padding:0 14px}.music-together .music-progress{margin-top:auto}.music-together .music-controls{margin-top:0}@media(max-height:650px){.music-together-chat{height:54px}.music-together-disc{width:min(49vw,190px);height:min(49vw,190px)}}
.music-duo img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ml-map-entry{display:block;width:100%;margin:0 0 17px;padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--card);color:var(--ink);font:inherit;text-align:left}
.ml-map-date{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:13px}.ml-map-date button{border:0;background:var(--card);border-radius:10px;color:var(--ink);font-size:22px;width:36px;height:36px}.ml-map-date input{border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:8px;font:inherit}
.ml-map-wrap{padding:6px;background:linear-gradient(155deg,#edf4ef,#f8eee4);border-radius:18px;overflow:hidden}.ml-map-wrap svg{display:block;width:100%}.ml-map-outline{fill:#d9e5d8;stroke:#95b4a0;stroke-width:2;stroke-linejoin:round}.ml-map-pin circle{fill:#a7b4a6;stroke:#fff;stroke-width:1.5}.ml-map-pin.lit circle{fill:#e5ae61;stroke:#fff4d8;stroke-width:2}.ml-map-pin.here circle{fill:#ef6f87;stroke:#fff;stroke-width:3;r:6}.ml-map-pin text{font-size:7px;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:2;fill:#455b4c}.ml-visit{display:grid;gap:8px}.ml-collect{display:flex;gap:8px}.ml-collect button{flex:1;padding:9px 4px;border:1px solid var(--line);border-radius:9px;background:var(--card-2);color:var(--ink);font-size:11px}.ml-collect button:disabled{opacity:.55}
.wx-identities{display:grid;gap:8px;margin:8px 0 12px}.wx-identity-row{display:flex;align-items:center;gap:10px}.wx-identity-copy{min-width:0;flex:1;display:grid;gap:3px}.wx-identity-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-mute)}
.camera-app{padding:18px 17px 100px;background:#faf5f3;color:#473d43}.camera-heading span,.couple-title span{font-size:10px;letter-spacing:.24em;color:#be829c}.camera-heading h1{font-size:26px;margin:8px 0}.camera-heading p{font-size:12px;color:#927e86;margin:0 0 18px}.camera-stage{position:relative;aspect-ratio:3/4;border-radius:17px;overflow:hidden;background:#292630;display:grid;place-items:center}.camera-stage video,.camera-stage>.camera-source{position:absolute;width:100%;height:100%;object-fit:cover}.camera-frame{position:absolute;inset:0;pointer-events:none}.camera-stage.frame-pink .camera-frame{border:14px solid #ffe0eb;box-shadow:inset 0 0 0 4px #fff8fa}.camera-stage.frame-film .camera-frame{border:18px solid #25242c;box-shadow:inset 0 0 0 3px #e8d9bf}.camera-sticker{position:absolute;bottom:7%;right:7%;color:#f16b91;font-size:68px;text-shadow:0 3px 8px #fff}.camera-sticker img{width:80px;max-height:110px;object-fit:contain}.camera-controls,.camera-options>div{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.camera-controls button,.camera-options button{padding:9px 12px;border:1px solid #eedbe3;border-radius:10px;background:#fff;color:#725361}.camera-options{display:grid;gap:3px;margin-top:12px}.camera-options strong{font-size:13px}.camera-options button.on{background:#f9d9e5;border-color:#e89cb9}.camera-shutter{width:100%;margin:20px 0;padding:14px;border:0;border-radius:14px;background:#e879a0;color:white;font-weight:700}.camera-result img{width:100%;border-radius:13px}.camera-result p{font-size:13px}
.couple-app{padding:22px 18px 100px;background:linear-gradient(#fff0f5,#fffaf7);color:#653e52}.couple-stars{text-align:center;color:#e7aac2;letter-spacing:1.3em}.couple-title{text-align:center;margin:18px 0 22px}.couple-title h1{font-size:24px;margin:9px 0}.couple-title p{font-size:12px;color:#b58b9a}.couple-people{display:flex;gap:7px;overflow-x:auto;padding:5px 0 18px}.couple-people button{flex:0 0 auto;border:1px solid #efcfdb;border-radius:999px;background:#fff;color:#915f76;padding:8px 14px}.couple-people button.on{background:#e8749c;color:white}.couple-card{padding:24px 18px;text-align:center;border-radius:23px;background:#fff;box-shadow:0 9px 30px #e9adc44d;display:grid;justify-items:center;gap:8px}.couple-heart{font-size:35px;color:#ed7da4}.couple-card small{color:#a47d90}.couple-card>strong{font:700 68px Georgia,serif;color:#df6c93;line-height:1}.couple-card>span{font-size:16px}.couple-card p{margin:0;color:#b38d9e;font-size:12px}.couple-card blockquote{margin:10px 0;line-height:1.65}.couple-card button,.couple-note-form button{border:0;border-radius:12px;background:#e7769b;color:#fff;padding:10px 18px}.couple-milestones{display:flex;justify-content:space-around;margin:17px 0;padding:14px;border-radius:18px;background:#ffffffbb}.couple-milestones div{display:grid;text-align:center;gap:4px}.couple-milestones b{color:#db7899;font-size:20px}.couple-milestones span{font-size:10px;color:#ac8295}.couple-notes h2{font-size:16px}.couple-note-form{display:flex;gap:7px}.couple-note-form input{min-width:0;flex:1;border:1px solid #efcfdb;border-radius:10px;padding:10px;background:#fff}.couple-notes article{margin:10px 0;padding:13px;border-radius:13px;background:#fff}.couple-notes article span{font-size:11px;color:#d186a4}.couple-notes article p{margin:6px 0 0;font-size:13px}.couple-form label{display:grid;width:100%;gap:6px;text-align:left;font-size:12px}.couple-form input,.couple-form textarea{border:1px solid #efcfdb;border-radius:10px;padding:10px;font:inherit}.couple-form textarea{min-height:70px}.couple-empty{text-align:center;padding:45px 10px;color:#aa8295}
.ml-map-pin .ml-map-role{fill:#a63e67;font-weight:700;font-size:7px}.ml-collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ml-collection>div{display:grid;gap:5px;padding:14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:22px}.ml-collection strong{font-size:12px}.ml-collection small{font-size:10px;color:var(--ink-mute)}.ml-collection p{grid-column:1/-1;font-size:12px;color:var(--ink-mute)}

/* ==================== travel-map.css ==================== */
/* 行程 · 中国旅行地图。省级边界来自 app 内离线矢量数据。 */
.travel-page{display:grid;gap:0;margin:-4px -3px 0;color:var(--ink)}
.travel-intro{padding:3px 3px 19px}
.travel-intro>span,.travel-section-title>span{font-size:10px;letter-spacing:.2em;color:#9b806e;font-weight:700}
.travel-intro h1{font-size:26px;line-height:1.25;letter-spacing:.02em;margin:9px 0 7px}
.travel-intro p{font-size:12px;line-height:1.65;color:var(--ink-mute);margin:0}
.travel-stats{display:flex;align-items:center;gap:19px;padding:15px 19px;margin:0 0 19px;background:linear-gradient(110deg,#e9f1ec,#f6f1e9);border:1px solid #e3e9e2;border-radius:18px}
.travel-stats>div{display:flex;align-items:baseline;gap:7px}.travel-stats strong{font:700 27px Georgia,serif;color:#264f4a}.travel-stats span{font-size:11px;color:#617b74}.travel-stats i{height:25px;width:1px;background:#cedbd2}
.travel-map-card{overflow:hidden;background:#f9faf7;border:1px solid #e2e9e2;border-radius:21px;box-shadow:0 9px 24px #4b625513}
.travel-map-heading{display:flex;justify-content:space-between;align-items:end;padding:17px 17px 12px;gap:8px}.travel-map-heading>div{display:grid;gap:3px}.travel-map-heading span{font-size:10px;letter-spacing:.13em;color:#738f83}.travel-map-heading strong{font-size:17px;color:#263e3b}.travel-map-heading small{font-size:10px;color:#96a59b;white-space:nowrap}
.travel-map-date{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:0 15px 10px;padding:5px;background:#eaf0eb;border-radius:13px}
.travel-map-date button{width:36px;height:33px;flex:none;border:0;border-radius:9px;background:#fff;color:#426459;font-size:23px;line-height:1}.travel-map-date input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#304d44;text-align:center;font-family:inherit;font-weight:600;font-size:13px;padding:5px 1px;color-scheme:light}
.travel-map-scene{position:relative;background:radial-gradient(circle at 34% 37%,#eaf5f5 0,#e2eff0 58%,#d7e8eb 100%);padding:4px 3px 7px}
.travel-main-map{display:block;width:100%;aspect-ratio:725/550;overflow:visible}.travel-region{stroke:#fffdf7;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;fill:#cbdccc;fill-rule:evenodd;cursor:pointer;vector-effect:non-scaling-stroke}.travel-region-1{fill:#d4e2d2}.travel-region-2{fill:#c6dad1}.travel-region-3{fill:#dbe7d5}.travel-region.chosen{fill:#e7bd86;stroke:#886d4c;stroke-width:2.2}
.travel-pin-halo{fill:#d79960;opacity:.25}.travel-pin-core{fill:#b77a49;stroke:#fff;stroke-width:2.3;vector-effect:non-scaling-stroke}.travel-pin.active .travel-pin-halo{fill:#dc665c;opacity:.35;r:15}.travel-pin.active .travel-pin-core{fill:#d9534d;r:6}
.travel-south{position:absolute;right:9px;bottom:8px;display:grid;justify-items:center;width:61px;height:79px;padding:5px 4px;border:1px solid #b4cbd0;border-radius:7px;background:#e5f1f2e6;box-shadow:0 2px 6px #536f7414}.travel-south span{font-size:9px;color:#678a90;letter-spacing:.08em}.travel-south svg{display:block;width:61px;height:61px}.travel-island{fill:#cbdccc;stroke:#81aaaf;stroke-width:1.8;fill-rule:evenodd;vector-effect:non-scaling-stroke}
.travel-map-legend{display:flex;align-items:center;gap:15px;min-height:35px;padding:0 16px;font-size:10px;color:#698078}.travel-map-legend span{display:flex;align-items:center;gap:5px}.travel-map-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.travel-legend-past{background:#b77a49}.travel-legend-today{background:#d9534d}.travel-map-legend strong{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#926334;font-size:10px}
.travel-section-title{display:grid;gap:5px;margin:24px 2px 12px}.travel-section-title strong{font-size:17px}
.travel-visit{padding:15px 16px;border:1px solid var(--line);border-radius:17px;background:var(--card);box-shadow:0 3px 11px #233b2c0a}.travel-visit-top{display:flex;align-items:center;gap:11px;margin-bottom:13px}.travel-location{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#e8eee8;color:#5d826d;font-size:25px}.travel-visit-top>div{display:grid;gap:2px}.travel-visit-top small{font-size:11px;color:var(--ink-mute)}.travel-visit-top strong{font-size:17px}
.travel-visit .ml-collect{display:flex;gap:8px}.travel-visit .ml-collect button{flex:1;padding:9px 3px;border:1px solid #d9e5dd;border-radius:10px;background:#eef5ef;color:#446557;font-size:11px}.travel-visit .ml-collect button:disabled{opacity:.6}
.travel-empty{display:grid;justify-items:center;gap:7px;padding:25px 19px;border:1px dashed #d6e0d8;border-radius:18px;background:#f5f8f4;text-align:center}.travel-empty span{font-size:23px;color:#b78b67}.travel-empty strong{font-size:14px}.travel-empty p{margin:0;font-size:11px;line-height:1.6;color:var(--ink-mute)}
.travel-page .ml-collection{margin-bottom:12px}.travel-page .ml-collection>div{box-shadow:0 3px 11px #233b2c0a}
@media(max-width:360px){.travel-map-heading small{display:none}.travel-stats{gap:12px;padding:13px}.travel-stats strong{font-size:24px}.travel-south{width:50px;height:67px}.travel-south svg{width:50px;height:50px}}

/* ==================== draw-guess.css ==================== */
/* 你画我猜：画板、玩家栏和讨论区 */
.draw-guess-app{padding:18px 16px 34px;background:linear-gradient(180deg,#171927 0%,#232137 52%,#1b1b2b 100%);color:#f9f5ee}
.draw-guess-app button,.draw-guess-app input{font:inherit}
.dg-eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;color:#b9a7d2}
.dg-home{padding:28px 10px 30px;text-align:center}.dg-home-mark{width:86px;height:86px;margin:8px auto 22px;border-radius:27px;display:grid;place-items:center;font-size:53px;background:linear-gradient(145deg,#f2ba72,#df6f85);box-shadow:0 16px 35px #0a091756}.dg-home h1{margin:10px 0 14px;font-size:38px;line-height:1.18;letter-spacing:-.05em}.dg-home h1 em{font-style:normal;color:#ffd783}.dg-home p{max-width:270px;margin:auto;color:#c6bfce;font-size:13px;line-height:1.8}.dg-primary{width:100%;margin-top:28px;padding:15px 20px;border:0;border-radius:16px;background:#c7faac;color:#202631;font-weight:800;text-align:left;display:flex;justify-content:space-between;align-items:center}.dg-primary span{font-size:22px;font-weight:400}.dg-home-note{margin:4px 2px;padding:20px;border:1px solid #ffffff1b;border-radius:19px;background:#ffffff0c}.dg-home-note b{font-size:14px}.dg-home-note p{margin:8px 0 0;color:#bfb8c9;font-size:12px;line-height:1.7}
.dg-setup-head{padding:9px 3px 15px}.dg-setup-head h1{margin:8px 0;font-size:28px}.dg-setup-head p{margin:0;color:#bcb6c6;font-size:12px}.dg-room-count{padding:17px 19px;border-radius:19px;background:linear-gradient(115deg,#5c4a65,#38344e);box-shadow:0 8px 30px #0d0d1830}.dg-room-count>div{display:flex;justify-content:space-between;align-items:baseline}.dg-room-count span{font-size:13px}.dg-room-count strong{font-size:25px}.dg-room-count strong small{font-size:13px;font-weight:400;color:#d9d1df}.dg-room-count p{margin:4px 0 0;font-size:11px;color:#ded5e3}.dg-picker{margin-top:22px}.dg-section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:11px}.dg-section-heading strong{font-size:14px}.dg-section-heading small{font-size:10px;color:#a9a3b7}.dg-pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dg-pick{display:flex;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid #ffffff1a;border-radius:14px;background:#ffffff0c;color:#f9f5ee;text-align:left}.dg-pick.selected{border-color:#c7faac99;background:#c7faac14}.dg-pick>span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.dg-pick i{font-style:normal;color:#c7faac}.dg-avatar{width:35px;height:35px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#bb91ab,#7c759d);font-size:14px;font-weight:700;color:#fff}.dg-avatar img{width:100%;height:100%;object-fit:cover}.dg-none{grid-column:1/-1;margin:0;padding:15px;border:1px dashed #ffffff33;border-radius:12px;color:#b8b1c0;font-size:12px}.dg-launch{margin:25px 0 5px}
.dg-game-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 1px 13px}.dg-game-top h1{font-size:21px;line-height:1.25;margin:4px 0 0}.dg-game-top button{border:1px solid #ffffff33;border-radius:11px;background:#ffffff10;color:#d8d1de;padding:7px 10px;font-size:11px}.dg-board{border-radius:23px;overflow:hidden;background:#fffefa;color:#263243;box-shadow:0 15px 36px #10111d75}.dg-board-head{height:53px;padding:0 15px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #eae4df}.dg-board-head strong{font-size:13px}.dg-board-head small{margin-left:auto;font-size:11px;color:#8f8a91}.dg-live-dot{width:8px;height:8px;border-radius:50%;background:#70cfa1;box-shadow:0 0 0 4px #70cfa126}.dg-canvas-wrap{position:relative}.dg-canvas-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:10/9;touch-action:none}.dg-canvas-prompt{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#aba9a6;font-size:14px}.dg-tools{min-height:53px;padding:8px 10px;display:flex;align-items:center;gap:7px;border-top:1px solid #eae4df}.dg-colors{display:flex;gap:5px;flex:1}.dg-colors button{width:22px;height:22px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #d4d2cf}.dg-colors button.active{box-shadow:0 0 0 2px #2e3847}.dg-tool-text{border:0;background:#f2efeb;border-radius:8px;padding:6px;color:#4b5360;font-size:10px;white-space:nowrap}.dg-word-card{margin-top:13px;padding:16px;border-radius:17px;background:#fff0d1;color:#3c3540}.dg-word-card strong{font-size:14px}.dg-word-card p{margin:5px 0 12px;font-size:11px;color:#6b6370}.dg-word-card>div{display:flex;gap:8px}.dg-word-card button{flex:1;padding:9px 2px;border:1px solid #d1a97c;border-radius:10px;background:#fffaf0;color:#4a3b3e;font-size:12px;font-weight:700}.dg-players,.dg-chat{margin-top:17px}.dg-seat-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.dg-seat{min-width:0;display:flex;flex-direction:column;align-items:center;position:relative;gap:5px}.dg-seat .dg-avatar,.dg-empty-avatar{width:39px;height:39px;border:2px solid #ffffff29}.dg-seat.drawing .dg-avatar{border-color:#ffd27d;box-shadow:0 0 0 3px #ffd27d2e}.dg-seat>span:nth-child(2){max-width:100%;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dfd9e4}.dg-seat b{position:absolute;top:-5px;right:0;padding:2px 4px;border-radius:6px;background:#ffdb8b;color:#403347;font-size:8px}.dg-empty-avatar{border-radius:50%;display:grid;place-items:center;color:#aaa0b3;background:#ffffff0c;font-size:19px}.dg-seat.is-empty>span:nth-child(2){color:#aaa0b3}.dg-chat{padding:14px 13px 12px;border:1px solid #ffffff17;border-radius:17px;background:#ffffff0a}.dg-messages{height:160px;overflow-y:auto;overscroll-behavior:contain}.dg-chat-empty{margin:28px 0;text-align:center;color:#aaa1b3;font-size:12px}.dg-message{margin:8px 0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:12px}.dg-message strong{color:#d5b9d8;font-size:11px}.dg-message span{line-height:1.5;overflow-wrap:anywhere}.dg-message.mine strong{color:#c7faac}.dg-message.system{color:#ffd989;font-size:11px}.dg-message i{font-style:normal;color:#c7faac;font-size:10px}.dg-compose{display:flex;gap:8px;margin-top:10px}.dg-compose input{flex:1;min-width:0;height:42px;padding:0 12px;border:1px solid #ffffff24;border-radius:12px;outline:none;background:#ffffff10;color:#fff;font-size:12px;user-select:text}.dg-compose input::placeholder{color:#aaa2b2}.dg-compose input:focus{border-color:#c7faac}.dg-compose button{border:0;border-radius:12px;padding:0 17px;background:#c7faac;color:#26312c;font-size:12px;font-weight:800}.dg-round-actions{display:flex;gap:8px;margin-top:10px}.dg-round-actions button{flex:1;padding:10px;border:1px solid #ffffff3b;border-radius:11px;background:#ffffff13;color:#f6f1f5;font-size:11px}.dg-round-actions button:last-child{background:#ffd78c;color:#39303a;border-color:#ffd78c;font-weight:700}.dg-round-actions button:disabled{opacity:.55}
/* 对局态：画板与操作区常驻，只有讨论区内部滚动 */
.draw-guess-app.dg-game-mode{display:flex;flex-direction:column;padding-bottom:calc(12px + var(--safe-bottom))}
.dg-game-mode .dg-game-top,.dg-game-mode .dg-players,.dg-game-mode .dg-compose,.dg-game-mode .dg-round-actions,.dg-game-mode .dg-word-card{flex:0 0 auto}
.dg-game-mode .dg-game-top{margin-bottom:10px}
.dg-game-mode .dg-board{flex:1 1 auto;min-height:122px;display:flex;flex-direction:column}
.dg-game-mode .dg-canvas-wrap{flex:1 1 auto;min-height:44px}
.dg-game-mode .dg-canvas-wrap canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.dg-game-mode .dg-players{margin-top:12px}
.dg-game-mode .dg-chat{flex:0 1 auto;min-height:112px;display:flex;flex-direction:column;margin-top:12px}
.dg-game-mode .dg-chat .dg-section-heading{margin-bottom:6px}
.dg-game-mode .dg-messages{flex:0 1 auto;height:auto;min-height:56px;max-height:24vh}
.dg-game-mode .dg-compose{margin-top:8px}
.dg-game-mode .dg-round-actions{margin-top:8px}
@media(max-width:370px){.dg-seat .dg-avatar,.dg-empty-avatar{width:33px;height:33px}.dg-seat-row{gap:2px}.dg-board-head small{font-size:9px}.dg-tools{gap:4px}.dg-colors{gap:3px}.dg-colors button{width:19px;height:19px}.dg-tool-text{padding:5px 3px}}

/* ==================== liars-bar.css ==================== */
/* 骗子酒馆：所有场景、纸牌和肖像均由 CSS 绘制，离线可用。 */
.lb-app{--lb-gold:#e7c58a;--lb-cream:#f7edda;--lb-red:#ad544c;min-height:0;padding:0 0 calc(34px + var(--safe-bottom))!important;background:#131b1b;color:var(--lb-cream);font-family:Georgia,"Noto Serif SC","Songti SC",serif;overflow-x:hidden}
.lb-app button{font-family:inherit}.lb-overline{font-family:Arial,sans-serif;font-size:9px;font-weight:700;letter-spacing:.25em;color:#e6c993a6}.lb-main-button{width:100%;min-height:52px;padding:0 20px;border:1px solid #ffe5ac7a;border-radius:3px;background:linear-gradient(135deg,#b89054,#f2d29a 53%,#b78d4c);box-shadow:inset 0 1px #fff7,0 12px 28px #0008;color:#281d14;font-size:16px;font-weight:700;text-align:left;display:flex;justify-content:space-between;align-items:center}.lb-main-button span{font-family:Arial,sans-serif;font-size:22px;font-weight:400}.lb-main-button:active{transform:translateY(2px)}
.lb-home{min-height:100%;background:radial-gradient(100% 50% at 50% 23%,#583a2d 0%,#222421 55%,#121a1a 100%);padding-bottom:28px}.lb-home-scene{height:305px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% -20%,#c08a5c58,transparent 54%),linear-gradient(90deg,#141b1a 0%,#372a25 48%,#141b1a 100%)}.lb-home-scene:before,.lb-home-scene:after{content:"";position:absolute;top:0;bottom:0;width:18%;background:repeating-linear-gradient(90deg,#090e0dbb 0 10px,#43342b69 11px 14px,#090e0dbb 15px 28px);filter:blur(2px)}.lb-home-scene:before{left:0}.lb-home-scene:after{right:0}.lb-neon{position:absolute;top:35px;left:50%;transform:translateX(-50%) rotate(-2deg);font:bold 35px/1.04 Georgia,serif;letter-spacing:.12em;text-align:center;color:#ffdda5;text-shadow:0 0 6px #fff3d3,0 0 21px #d77c3f,0 0 50px #a43222;z-index:2;white-space:nowrap}.lb-neon b{font-size:59px;letter-spacing:.28em;margin-right:-.28em;color:#eab66e}.lb-home-table{position:absolute;z-index:1;left:50%;bottom:-115px;width:110%;height:260px;transform:translateX(-50%) perspective(420px) rotateX(50deg);border:14px solid #3b1f19;border-radius:50%;background:radial-gradient(ellipse at 50% 43%,#2e6555,#164b40 63%,#0d372f);box-shadow:0 0 0 4px #9a653f,0 18px 0 #241511,0 25px 35px #000}.lb-home-scene .lb-back{position:absolute;z-index:3;left:50%;bottom:30px;width:66px;height:96px;box-shadow:0 18px 13px #0007}.lb-cover-one{transform:translateX(-90%) rotate(-24deg)}.lb-cover-two{transform:translateX(-30%) rotate(4deg)}.lb-cover-three{transform:translateX(28%) rotate(25deg)}.lb-home-copy{padding:28px 25px 0}.lb-home-copy h1{font-size:32px;line-height:1.27;letter-spacing:.04em;margin:12px 0 10px;color:#fff6e9}.lb-home-copy h1 em{font-style:normal;color:var(--lb-gold)}.lb-home-copy p{font-family:Arial,"Microsoft YaHei",sans-serif;color:#c4c3b9;font-size:12px;line-height:1.75;margin:0 0 24px}.lb-offline{display:block;text-align:center;margin:13px 0 0;color:#9ea9a0;font:10px Arial,sans-serif;letter-spacing:.04em}.lb-rule-strip{display:flex;justify-content:space-around;margin:26px 16px 0;padding-top:17px;border-top:1px solid #c9b28238;font:10px Arial,sans-serif;color:#9caaa0}
.lb-back{position:relative;display:block;flex:none;border:3px solid #e8d2af;border-radius:6px;background:repeating-linear-gradient(45deg,#9c4545 0 4px,#a9514b 4px 8px);box-shadow:inset 0 0 0 3px #983d3a,inset 0 0 0 5px #e1caa3}.lb-back:before{content:"";position:absolute;inset:12%;border:1px solid #ecd7ab;border-radius:40% 40% 15% 15%;box-shadow:inset 0 0 0 2px #a24c45}.lb-back i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;font-size:30px;color:#f5deae;text-shadow:0 1px 3px #603025}
.lb-setup,.lb-game{padding:23px 18px 30px;background:radial-gradient(100% 35% at 50% 5%,#3b302a 0%,#171f1e 100%);min-height:100%}.lb-setup h1{font-size:29px;margin:10px 0;color:#fff3dc}.lb-setup>p{font:12px/1.7 Arial,"Microsoft YaHei",sans-serif;color:#bfc7c1;margin:0 0 24px}.lb-setup-preview{display:flex;gap:8px;justify-content:center;margin:0 0 22px}.lb-setup-preview>span{width:24%;height:82px;display:grid;justify-items:center;align-content:center;gap:7px;border:1px solid #e7c58a37;background:linear-gradient(150deg,hsl(var(--seat-hue) 24% 29%),#17201e);border-radius:6px}.lb-setup-preview b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:hsl(var(--seat-hue) 38% 55%);color:#221c17;font-size:17px}.lb-setup-preview small{font:10px Arial,sans-serif;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.lb-setup-card,.lb-rules,.lb-reveal,.lb-log{border:1px solid #d6bb8542;background:#162321d9;border-radius:6px;padding:15px;margin:0 0 15px;box-shadow:0 10px 22px #0003}.lb-section-head{display:flex;justify-content:space-between;align-items:center;gap:9px}.lb-section-head strong{font-size:14px;color:#f0dfbd}.lb-section-head small{font:10px Arial,sans-serif;color:#aebcb1}.lb-person{width:100%;display:flex;align-items:center;gap:10px;margin-top:9px;padding:8px 10px;border:1px solid #a6b6a333;border-radius:5px;background:#26332e;color:#ede5d7;text-align:left}.lb-person.chosen{border-color:#e2ba6d;background:#4b4231}.lb-person span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#8d7560;font-size:14px}.lb-person b{flex:1;font-size:12px;font-weight:400}.lb-person i{font:18px Arial,sans-serif;color:#e5c17f}.lb-no-person{font:11px/1.6 Arial,sans-serif;color:#aeb9ad;padding:14px 0 4px}.lb-rules b{font-size:14px;color:#eace91}.lb-rules p{font:11px/1.75 Arial,"Microsoft YaHei",sans-serif;color:#bac8bd;margin:8px 0 0}
.lb-game-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.lb-game-head button{border:0;background:none;color:#b1bdb4;font:11px Arial,sans-serif;padding:5px}.lb-target{min-height:67px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border:1px solid #d6aa6975;border-radius:5px;background:linear-gradient(110deg,#46382b,#251e1b 70%);box-shadow:inset 0 1px #fff1,0 8px 25px #0004}.lb-target>span{font:10px Arial,sans-serif;letter-spacing:.12em;color:#c6baa7}.lb-target strong{font-size:34px;line-height:1;color:#f7e1ad;text-shadow:0 2px 10px #e2a25373}.lb-target strong small{font-size:14px;margin-left:3px}.lb-target em{font:10px Arial,sans-serif;color:#cbb693;font-style:normal;text-align:right}
.lb-stage{position:relative;height:330px;margin:13px -6px 12px;overflow:hidden;border-radius:8px;border:1px solid #7067447d;background:radial-gradient(ellipse at 50% 7%,#78593c 0%,#413429 21%,#1b2423 62%,#101917 100%);box-shadow:inset 0 0 45px #000b,0 11px 26px #0008;isolation:isolate}.lb-lamp{position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:290px;height:340px;background:radial-gradient(ellipse,#fbd6a14d,transparent 70%);pointer-events:none}.lb-wall-line{position:absolute;top:88px;left:0;right:0;height:7px;background:linear-gradient(#a580513e,#090f0d7a);box-shadow:0 20px 20px #0009}.lb-table-shadow{position:absolute;top:106px;left:50%;transform:translateX(-50%);width:340px;height:205px;border-radius:50%;background:#000b;filter:blur(22px)}.lb-table-rim,.lb-table-felt{position:absolute;left:50%;top:112px;width:340px;height:216px;border-radius:50%;transform:translateX(-50%) perspective(500px) rotateX(48deg)}.lb-table-rim{background:linear-gradient(145deg,#a16b46,#3e211a 50%,#24140f 74%,#815334);box-shadow:0 15px 0 #24140f,0 25px 19px #000d}.lb-table-felt{top:119px;width:321px;height:194px;border:5px solid #261914;background:radial-gradient(ellipse at 42% 30%,#296758,#124738 75%,#093b32);box-shadow:inset 0 0 0 2px #bb905790,inset 0 0 35px #000b}.lb-table-emblem{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:grid;text-align:center;color:#cbab7780;font-size:28px}.lb-table-emblem small{font:6px Arial,sans-serif;letter-spacing:.24em;white-space:nowrap}.lb-pile{position:absolute;z-index:4;left:50%;top:156px;transform:translateX(-50%);width:93px;height:80px;display:grid;place-items:center}.lb-empty-pile{font:9px Arial,sans-serif;color:#e4dab172;white-space:nowrap}.lb-pile-card{width:47px;height:68px;position:absolute;left:23px;top:5px;transform:rotate(-8deg);box-shadow:0 4px 8px #0008}.lb-pile-1{transform:translate(4px,-2px) rotate(13deg)}.lb-pile-2{transform:translate(-5px,3px) rotate(-21deg)}.lb-pile-3{transform:translate(1px,-5px) rotate(3deg)}.lb-pile-4{transform:translate(7px,1px) rotate(22deg)}.lb-pile-card i{font-size:19px}.lb-stage.flash .lb-pile{animation:lb-card-drop .48s cubic-bezier(.2,.8,.2,1)}
.lb-seat{position:absolute;z-index:5;display:grid;justify-items:center;min-width:66px;max-width:88px;text-align:center;color:#f7ebd6}.lb-seat-left{left:7px;top:112px}.lb-seat-top{top:8px;left:50%;transform:translateX(-50%)}.lb-seat-right{right:7px;top:112px}.lb-seat-self{bottom:7px;left:50%;transform:translateX(-50%)}.lb-seat.out{opacity:.32;filter:grayscale(1)}.lb-portrait{position:relative;display:block;width:46px;height:48px;overflow:hidden;border:2px solid #b6a070a3;border-radius:50% 50% 38% 38%;background:linear-gradient(160deg,hsl(var(--seat-hue) 32% 32%),#111b1a);box-shadow:0 6px 11px #000b}.lb-seat.active .lb-portrait{border-color:#f6d48e;box-shadow:0 0 0 3px #d9a45163,0 0 16px #f6d48e7a;animation:lb-active-pulse 1.3s ease-in-out infinite}.lb-hair{position:absolute;z-index:1;left:10px;top:5px;width:23px;height:24px;border-radius:50% 50% 20% 20%;background:#27201f}.lb-face{position:absolute;z-index:2;left:12px;top:11px;width:19px;height:22px;border-radius:45%;background:#c8a182}.lb-face i{position:absolute;top:9px;width:2px;height:2px;border-radius:50%;background:#1a1515}.lb-face i:first-child{left:5px}.lb-face i:last-child{right:5px}.lb-jacket{position:absolute;z-index:3;left:5px;bottom:-12px;width:35px;height:27px;border-radius:50% 50% 0 0;background:hsl(var(--seat-hue) 30% 27%)}.lb-portrait>b{position:absolute;z-index:4;right:2px;bottom:0;font:8px Arial,sans-serif;color:#fff9}.lb-seat-meta{display:grid;gap:1px;padding:2px 5px;border-radius:4px;background:#091411ba;text-shadow:0 1px 3px #000}.lb-seat-meta strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-seat-meta small{font:8px Arial,sans-serif;color:#cabf9e;white-space:nowrap}.lb-speech{position:absolute;top:7px;width:72px;padding:5px;border-radius:4px;background:#ede2c8;color:#2c2920;font:9px/1.3 Arial,sans-serif;box-shadow:0 4px 9px #0008;animation:lb-pop .25s ease-out}.lb-seat-left .lb-speech{left:62px}.lb-seat-right .lb-speech{right:62px}.lb-seat-top .lb-speech{left:67px}.lb-seat-self .lb-speech{left:67px}.lb-stage-floor{position:absolute;bottom:-5px;left:0;right:0;height:45px;background:linear-gradient(transparent,#080e0ddd);pointer-events:none}
.lb-status{display:flex;align-items:center;gap:7px;min-height:31px}.lb-status-dot{width:6px;height:6px;border-radius:50%;background:#e6bd78;box-shadow:0 0 8px #e6bd78;flex:none}.lb-status strong{font-size:13px;color:#f2dcad}.lb-status small{margin-left:auto;font:10px Arial,sans-serif;color:#b4bbb0;text-align:right}.lb-hand-panel{margin-top:13px}.lb-hand{display:flex;justify-content:center;align-items:flex-end;min-height:119px;gap:4px;padding-top:11px;perspective:700px}.lb-card{position:relative;flex:0 0 auto;width:52px;height:81px;padding:0;border:3px solid #f1dfc0;border-radius:5px;background:linear-gradient(150deg,#fff9ed,#e8dcc6);box-shadow:0 4px 0 #9b876b,0 8px 10px #0009;color:#642f31;text-align:left;transform:rotateX(8deg);transition:transform .18s,box-shadow .18s}.lb-card:not(:disabled){cursor:pointer}.lb-card.selected{transform:translateY(-16px) rotateX(0);box-shadow:0 0 0 2px #e8bd70,0 10px 18px #000b}.lb-card:disabled{opacity:1}.lb-card.wild{color:#906a32}.lb-card-corner{position:absolute;top:3px;left:4px;display:grid;font:bold 15px/1 Georgia,serif}.lb-card-corner small{font-size:8px;text-align:center}.lb-card-mark{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:30px;line-height:1}.lb-card-name{position:absolute;bottom:4px;right:4px;font-size:8px}.lb-reveal-cards .lb-card{width:43px;height:65px}.lb-reveal-cards .lb-card-mark{font-size:23px}.lb-no-cards{font:11px Arial,sans-serif;color:#aeb8a9;margin:auto}.lb-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin-top:10px}.lb-actions button{height:45px;border-radius:4px;font-size:13px;font-weight:700}.lb-play{display:flex;justify-content:space-between;align-items:center;padding:0 13px;border:1px solid #efd39a;background:linear-gradient(120deg,#b48d50,#efd099);color:#261c14}.lb-play span{font:20px Arial,sans-serif}.lb-call{border:1px solid #c66b5d;color:#f4dad2;background:linear-gradient(120deg,#7d2f2b,#a04b42)}.lb-actions button:disabled{opacity:.4;filter:grayscale(.5)}.lb-tip{font:10px/1.6 Arial,sans-serif;color:#a6b3a8;margin:9px 0 20px;text-align:center}
.lb-reveal{margin-top:16px;text-align:center;animation:lb-pop .35s ease-out}.lb-reveal h2{font-size:22px;color:#f5e2b8;margin:10px 0}.lb-reveal p{font:11px/1.7 Arial,sans-serif;color:#c8c6b7}.lb-reveal-cards{display:flex;justify-content:center;gap:7px;margin:14px auto}.lb-chambers{display:flex;justify-content:center;gap:6px;margin:14px auto}.lb-chambers span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #b6ad8d66;color:#9cac9a;font:14px Arial,sans-serif}.lb-chambers span.safe{border-color:#97c5a2;background:#43644c;color:white}.lb-chambers span.danger{border-color:#e9a28c;background:#a84d42;color:white}.lb-chambers span.used{background:#67736655}.lb-verdict{display:block;color:#e2c58f;font-size:13px;margin-bottom:15px}.lb-reveal .lb-main-button{margin-top:14px}.lb-log{margin-top:17px}.lb-log p{padding:8px 0;margin:0;border-bottom:1px solid #bdc9ae22;color:#c6c9ba;font:11px/1.55 Arial,sans-serif}.lb-log p:last-child{border-bottom:0;padding-bottom:0}.lb-game-foot{font:9px Arial,sans-serif;color:#8d9d91;text-align:center;margin-top:19px}
@keyframes lb-card-drop{from{opacity:.2;transform:translate(-50%,75px) scale(1.4) rotate(-18deg)}to{opacity:1;transform:translate(-50%,0) scale(1) rotate(0)}}@keyframes lb-active-pulse{50%{box-shadow:0 0 0 4px #d9a45138,0 0 20px #f6d48e93}}@keyframes lb-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:350px){.lb-stage{height:310px}.lb-table-rim{width:310px}.lb-table-felt{width:292px}.lb-card{width:47px;height:76px}.lb-target{padding:10px}.lb-target strong{font-size:29px}.lb-target em{font-size:9px}}
@media(prefers-reduced-motion:reduce){.lb-app *{animation:none!important;transition:none!important}}

/* ==================== landlord.css ==================== */
/* ===========================================================
   斗地主（23_landlord）· 沉浸式全屏牌桌
   进入时原生桥切横屏并隐藏系统栏；Phaser 画布按 960x540（或设备比例）
   等比缩放在整个可视区内，背景与牌桌一致，不出现黑边。
   =========================================================== */

/* 应用层默认给安全区留了顶部留白，牌桌要贴边铺满 */
.landlord-layer {
  padding-top: 0;
}

/* 游戏进行时：隐藏外壳自己的经典导航键 / 灵动岛，应用层铺满整屏 */
html.landlord-immersive .system-nav,
html.landlord-immersive .system-island {
  display: none;
}
html.landlord-immersive .app-layer.landlord-layer {
  bottom: 0;
}

.landlord-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 0;
  overflow: hidden;
  background: #182d3b;
}

.landlord-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
  background: #182d3b;
}

/* Phaser 会把 canvas 追加到这里；页面居中由 Phaser 的 pageAlign 处理 */
.landlord-game {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.landlord-game canvas {
  display: block;
  margin: 0 auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* ==================== pool.css ==================== */
/* ===========================================================
   台球（24_pool）— 沉浸式全屏台面
   进入时原生桥切横屏并隐藏系统栏；游戏在独立 iframe（LittleJS + Box2D）
   内铺满整个可视区，只保留一个退出按钮。
   =========================================================== */

/* 应用层默认给安全区留了顶部留白，台面要贴边铺满 */
.pool-layer {
  padding: 0 !important;
  background: #050705 !important;
}

/* 游戏进行时：隐藏外壳自己的经典导航键 / 灵动岛，应用层铺满整屏 */
html.pool-immersive .system-nav,
html.pool-immersive .system-island {
  display: none;
}
html.pool-immersive .app-layer.pool-layer {
  bottom: 0;
}

.pool-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050705;
}

.pool-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050705;
}

.pool-exit {
  position: absolute;
  z-index: 5;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #ffffff3d;
  border-radius: 12px;
  color: #eafff1;
  background: #0b1c0ecc;
  font-size: 26px;
  line-height: 34px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pool-exit:active {
  background: #1d5b2e;
}

.pool-compat { position: absolute; z-index: 10; top: 12px; left: 12px; border: 1px solid #fff5; border-radius: 8px; background: #0008; color: white; padding: 9px 12px; font-size: 12px; }

/* ==================== piaxi.css ==================== */
/* pia戏（26_piaxi，自研）：固定麦位 + 可滑动剧本的房间样式。作用域限定在 .piaxi-layer。
   注意：本元素同时是外壳的 .app-layer（absolute inset:0），经典导航键开启时外壳会改它的
   bottom 预留导航栏高度；这里**不能**再写 height:100%，否则会覆盖 bottom、让底栏钻到导航键下面。 */
.piaxi-layer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  color: #eef2ff;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(126, 92, 255, 0.35), transparent 60%),
    radial-gradient(90% 50% at 90% 0%, rgba(255, 120, 190, 0.18), transparent 55%),
    linear-gradient(180deg, #0a0a1f 0%, #0d0b24 45%, #08060f 100%);
  font-family: var(--font-sans, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif);
}

.piaxi-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, #7a5cff, #c44ad6);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
.piaxi-btn.ghost {
  background: transparent;
  color: #c9c6e6;
}
.piaxi-btn:disabled {
  opacity: 0.55;
}

.piaxi-message {
  margin: 8px 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffd9a8;
  font-size: 13px;
}
.piaxi-hint {
  margin: 4px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #ffcf8f;
}

/* ---------------- 剧本架 ---------------- */

.piaxi-shelf {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.piaxi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 10px;
}
.piaxi-head h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 2px;
}
.piaxi-head-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: #9ea0c8;
}
.piaxi-import {
  margin: 6px 14px 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.piaxi-import-tip {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #b9bce0;
}
.piaxi-import input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
}
.piaxi-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.piaxi-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.piaxi-empty {
  margin: auto;
  text-align: center;
  color: #8f92ba;
  font-size: 13px;
  line-height: 1.8;
}
.piaxi-card {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
}
.piaxi-card.is-current {
  border-color: rgba(196, 74, 214, 0.7);
  box-shadow: 0 0 0 1px rgba(196, 74, 214, 0.4);
}
.piaxi-cover {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #3a2b6b, #7a5cff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.piaxi-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.piaxi-cover-fallback {
  font-size: 28px;
  color: #fff;
}
.piaxi-card-body {
  min-width: 0;
  flex: 1;
}
.piaxi-card-body h3 {
  margin: 2px 0 6px;
  font-size: 15px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.piaxi-card-desc {
  margin: 0 0 8px;
  font-size: 12px;
  color: #a6a9cf;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.piaxi-card-meta {
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: #8f92ba;
}
.piaxi-card-meta .is-ok {
  color: #7be0a8;
}
.piaxi-card-del {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #ffb4c4;
  font-size: 11.5px;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

/* ---------------- 房间 ---------------- */

.piaxi-room {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.piaxi-room-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 8px;
}
.piaxi-back {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.piaxi-room-title {
  min-width: 0;
}
.piaxi-room-title h2 {
  margin: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.piaxi-room-title p {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: #9ea0c8;
}

.piaxi-seats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 6px;
  padding: 10px 12px 12px;
}
.piaxi-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.piaxi-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(196, 74, 214, 0.35), rgba(30, 30, 70, 0.9));
  border: 2px solid rgba(196, 74, 214, 0.55);
  box-shadow: 0 0 14px rgba(122, 92, 255, 0.35);
  color: #dfe2ff;
  font-size: 20px;
  font-weight: 600;
}
.piaxi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.piaxi-seat.is-empty .piaxi-avatar {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  color: #7d80a8;
  font-size: 16px;
}
.piaxi-seat p {
  margin: 0;
  max-width: 72px;
  font-size: 12px;
  color: #cfd2f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.piaxi-seat.is-empty p {
  color: #7d80a8;
}

.piaxi-script {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 12px;
  padding: 12px 12px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: #1c1b2e;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
  -webkit-overflow-scrolling: touch;
}
.piaxi-line {
  position: relative;
  padding: 7px 22px 7px 8px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.75;
}
.piaxi-line.is-line {
  cursor: pointer;
}
.piaxi-line.is-line:active {
  background: rgba(122, 92, 255, 0.1);
}
.piaxi-line.is-playing {
  background: rgba(122, 92, 255, 0.16);
  box-shadow: inset 3px 0 0 #7a5cff;
}
.piaxi-speaker {
  margin-right: 4px;
  font-weight: 700;
}
.piaxi-line.is-heading {
  margin: 10px 0 6px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #3b2f7a;
}
.piaxi-line.is-narration {
  color: #6b6b8c;
  font-size: 13px;
}
.piaxi-dot {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.14);
}
.piaxi-line.is-ready .piaxi-dot {
  background: #22c55e;
}

.piaxi-voices {
  flex: 0 0 auto;
  margin: 8px 12px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.piaxi-voices summary {
  padding: 8px 12px;
  font-size: 13px;
  color: #c9c6e6;
  cursor: pointer;
}
.piaxi-voice-list {
  max-height: 30vh;
  overflow-y: auto;
  padding: 4px 12px 10px;
}
.piaxi-voice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}
.piaxi-voice-row select {
  flex: 0 1 55%;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
}

.piaxi-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.piaxi-bar-btn {
  flex: 1;
  padding: 11px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #dfe2ff;
  font-size: 13.5px;
  cursor: pointer;
}
.piaxi-bar-btn.primary {
  background: linear-gradient(135deg, #7a5cff, #c44ad6);
  border-color: transparent;
  color: #fff;
}
.piaxi-bar-btn.is-on {
  border-color: rgba(123, 224, 168, 0.7);
  color: #7be0a8;
}
.piaxi-bar-btn:disabled {
  opacity: 0.5;
}

/* ---------------- 剧本架分页 / 云端剧本库 ---------------- */

.piaxi-tabs {
  display: flex;
  gap: 8px;
  padding: 4px 14px 8px;
}
.piaxi-tab {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #c9c6e6;
  font-size: 13px;
  cursor: pointer;
}
.piaxi-tab.is-active {
  background: linear-gradient(135deg, #7a5cff, #c44ad6);
  color: #fff;
  border-color: transparent;
}
.piaxi-card-meta .is-tag {
  color: #c9a6ff;
}
.piaxi-cloud-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: none;
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, #7a5cff, #c44ad6);
  color: #fff;
}
.piaxi-cloud-btn.is-done {
  background: rgba(123, 224, 168, 0.16);
  color: #7be0a8;
}
.piaxi-cloud-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

/* ==================== video.css ==================== */
/* ===========================================================
   影视（27_video）· 聚合搜索 / 详情选集 / 播放器
   播放时点横屏沉浸（原生桥 setOrientation + html.video-immersive）。
   =========================================================== */

.video-app {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 90px;
  color: var(--ink);
}

/* ---------- 搜索页 ---------- */
.video-search {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.video-search-row {
  display: flex;
  gap: 9px;
}
.video-search-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.video-search-row .btn {
  width: auto;
  padding: 0 18px;
}
.video-hot {
  display: grid;
  gap: 9px;
}
.video-hot > span {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.video-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.video-chips button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
}

/* ---------- 结果 / 收藏列表 ---------- */
.video-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
}
.video-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}
.video-cover {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  color: var(--ink-mute);
}
.video-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-cover svg {
  width: 34px;
  height: 34px;
  opacity: 0.4;
}
.video-card-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.video-card-main strong,
.video-card-main small,
.video-card-main em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.video-card-main strong {
  font-size: 13px;
}
.video-card-main small {
  font-size: 11px;
  color: var(--ink-mute);
}
.video-card-main em {
  font-size: 10px;
  font-style: normal;
  color: var(--accent);
}

/* ---------- 详情页 ---------- */
.video-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.video-detail-head {
  display: flex;
  gap: 14px;
}
.video-cover.big {
  width: 110px;
  flex: 0 0 auto;
}
.video-detail-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.video-detail-info h2 {
  font-size: 19px;
  line-height: 1.35;
}
.video-detail-info p {
  font-size: 12px;
  color: var(--ink-mute);
}
.video-actor {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.video-detail-info .btn {
  align-self: flex-start;
  width: auto;
  margin-top: 4px;
  padding: 9px 18px;
}
.video-desc {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card);
}
.video-desc summary {
  font-size: 13px;
  color: var(--ink);
}
.video-desc p {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-mute);
  white-space: pre-wrap;
}
.video-episodes h3 {
  margin-bottom: 10px;
  font-size: 15px;
}
.video-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
}
.video-ep-grid button {
  overflow: hidden;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 空态 / 提示 ---------- */
.video-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40vh;
  text-align: center;
  color: var(--ink-mute);
}
.video-empty svg {
  width: 42px;
  height: 42px;
  opacity: 0.45;
}
.video-empty p {
  color: var(--ink);
  font-size: 15px;
}
.video-empty small {
  max-width: 230px;
  line-height: 1.6;
}
.video-empty .btn {
  width: auto;
  margin-top: 6px;
  padding: 9px 20px;
}
.video-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.video-error {
  font-size: 12px;
  color: var(--danger);
}

/* ---------- 播放器（横屏沉浸） ---------- */
.video-player-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  background: #000;
  color: #fff;
}
.video-el {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: #000;
}
/* 选集栏默认隐藏，点右上角「选集」再展开，避免挡住画面 */
.video-player-wrap:not(.strip-open) .video-strip {
  display: none;
}
.video-strip-toggle {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
}
.video-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px calc(8px + var(--safe-bottom, 0px));
  background: #0b0b0b;
}
.video-strip button {
  white-space: nowrap;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: #222;
  color: #ccc;
  font-size: 12px;
}
.video-strip button.active {
  background: var(--accent);
  color: #fff;
}
.video-player-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
}
.video-player-error p {
  font-size: 13px;
}
.video-player-error .btn {
  width: auto;
  padding: 9px 20px;
}

/* 播放时点：隐藏外壳的经典导航键 / 灵动岛，应用层铺满整屏 */
html.video-immersive .system-nav,
html.video-immersive .system-island {
  display: none;
}
html.video-immersive .app-layer.video-layer {
  bottom: 0;
  padding-top: 0;
}

/* ==================== novel.css ==================== */
/* ===========================================================
   小说 · 在线书城（12_novel）：聚合搜索 / 详情目录 / 在线阅读
   复用 video.css 的搜索框与空态；本文件补结果列表、详情与目录抽屉。
   =========================================================== */

/* ---------- 书城搜索结果 ---------- */
.novel-results {
  display: grid;
  gap: 10px;
}
.novel-result {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
}
.novel-result-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.novel-result-main strong,
.novel-result-main small,
.novel-result-main em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.novel-result-main strong {
  font-size: 15px;
}
.novel-result-main small {
  font-size: 12px;
  color: var(--ink-mute);
}
.novel-result-main em {
  font-size: 10px;
  font-style: normal;
  color: var(--accent);
}

/* ---------- 详情 ---------- */
.novel-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.novel-detail-head {
  display: flex;
  gap: 14px;
  align-items: center;
}
.novel-detail-cover {
  display: grid;
  place-items: center;
  width: 86px;
  height: 116px;
  flex: 0 0 auto;
  border-radius: 4px 12px 12px 4px;
  background: #b9a48e;
  color: #fff;
}
.novel-detail-cover svg {
  width: 30px;
  height: 30px;
}
.novel-detail-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.novel-detail-info h2 {
  font-size: 19px;
  line-height: 1.35;
}
.novel-detail-info p {
  font-size: 12px;
  color: var(--ink-mute);
}
.novel-detail-info .btn {
  align-self: flex-start;
  width: auto;
  margin-top: 4px;
  padding: 9px 18px;
}
.novel-intro-text {
  max-height: 180px;
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-mute);
  white-space: pre-wrap;
}
.novel-episodes h3 {
  margin-bottom: 10px;
  font-size: 15px;
}
.novel-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.novel-ep-grid button {
  overflow: hidden;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 阅读页目录抽屉 ---------- */
.novel-toc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.45);
}
.novel-toc {
  position: fixed;
  left: 0;
  right: 0;
  /* 经典导航键开启时外壳导航栏高 --system-nav-height，抽屉整体抬到它上面，
     否则底部章节会被导航栏压住（关闭时该变量为 0，行为不变）。 */
  bottom: var(--system-nav-height, 0px);
  z-index: 21;
  display: flex;
  flex-direction: column;
  max-height: 72%;
  padding-bottom: var(--safe-bottom, 0px);
  border-radius: 18px 18px 0 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.novel-toc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.novel-toc-head strong {
  flex: 1;
  font-size: 15px;
}
.novel-toc-head span {
  font-size: 12px;
  color: var(--ink-mute);
}
.novel-toc-head button {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 13px;
}
.novel-toc-list {
  overflow-y: auto;
  padding: 8px 12px 16px;
}
.novel-toc-list button {
  display: block;
  width: 100%;
  padding: 11px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.novel-toc-list button.active {
  color: var(--accent);
  font-weight: 600;
}

.novel-app.reading{overflow:hidden;display:flex;flex-direction:column;min-height:0;padding:8px;flex:1;background:#f8f1e4;color:#39332c}.novel-app.reading.night{background:#161d27;color:#d6d4ce}.reading .novel-reader{display:flex;flex-direction:column;height:100%;min-height:0;width:100%;padding:12px;box-sizing:border-box;background-size:cover;background-position:center}.reading .novel-reader-head{flex:none}.reading .novel-reader-head h1{font-size:17px;margin:4px 0}.reading .novel-page-viewport{flex:1;min-height:0;overflow:hidden;width:100%;touch-action:pan-y}.reading .novel-page-viewport article{height:100%;margin:0;column-gap:24px;column-fill:auto;font-size:var(--reader-font,19px);line-height:1.85;overflow:visible;padding:0;user-select:text;-webkit-user-select:text;color:inherit;background:transparent;box-shadow:none;border-radius:0}.reading article p{font-size:inherit;line-height:inherit;color:inherit;margin:0 0 1em;overflow-wrap:anywhere}.reading article h2{color:inherit}.reading .novel-reader-controls{flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px 0}.novel-tools{display:flex;flex-wrap:wrap;gap:5px;flex:none;margin:8px 0}.novel-tools button,.novel-notes button{font-size:12px;border:1px solid #9b9a99;border-radius:8px;padding:6px;background:rgba(255,255,255,.8);color:#333}.novel-notes{position:absolute;inset:10% 10px 10px;z-index:20;overflow:auto;padding:18px;background:var(--card,#fff);color:var(--ink,#333);border-radius:16px;box-shadow:0 5px 50px #0005}.novel-notes blockquote{margin:12px 0;padding:10px;border-left:3px solid #aaa;white-space:pre-wrap}.novel-notes p{white-space:pre-wrap}.novel-notes section{padding:12px 0;border-bottom:1px solid #aaa}

/* Reader chrome overlays the page, so opening it never repaginates the text. */
.novel-immersive .novel-app.reading { --paper:#f8f1e4; position:absolute; inset:var(--safe-top,0px) 0 var(--safe-bottom,0px); padding:0; }
.classic-nav-on .novel-immersive .novel-app.reading { bottom:0; }
.novel-immersive .novel-app.reading.night { --paper:#161d27; }
.novel-immersive .navbar { position:absolute; top:var(--safe-top,0px); left:0; right:0; z-index:12; background:var(--card); box-shadow:0 2px 16px #0001; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s; }
.novel-immersive.reader-ui-visible .navbar { opacity:1; visibility:visible; pointer-events:auto; }
.novel-immersive .navbar-title { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; }
.reading .novel-reader { position:relative; padding:12px 20px 26px; }
.reading .novel-reader-head { height:20px; margin:0 0 8px; overflow:hidden; color:inherit; opacity:.45; }
.reading .novel-reader-head span,.reading .novel-reader-head small { display:none; }
.reading .novel-reader-head h1 { margin:0; font-size:11px; font-weight:400; text-align:left; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.reading .novel-page-viewport { touch-action:none; scroll-behavior:auto; overscroll-behavior:none; }
.reading article { text-align:justify; }
.reading article h2 { margin:0 0 1em; font-size:1.1em; }
.novel-page-progress { position:absolute; bottom:7px; left:20px; right:20px; font-size:10px; opacity:.45; text-align:right; pointer-events:none; }
.reading .novel-tools { position:absolute; left:0; right:0; bottom:46px; z-index:12; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0; padding:12px 14px; background:var(--card); box-shadow:0 -8px 24px #0001; opacity:0; visibility:hidden; pointer-events:none; }
.reading .novel-tools button { min-height:34px; border:0; border-radius:8px; background:var(--card-2); color:var(--ink); padding:7px 2px; font-size:12px; }
.reading .novel-reader-controls { position:absolute; left:0; right:0; bottom:0; height:46px; box-sizing:border-box; margin:0; padding:6px 14px; z-index:12; background:var(--card); color:var(--ink-mute); font-size:11px; opacity:0; visibility:hidden; pointer-events:none; }
.reading .novel-reader-controls button { width:auto; padding:6px 8px; border:0; background:transparent; color:var(--ink); font-size:12px; }
.reader-ui-visible .novel-tools,.reader-ui-visible .novel-reader-controls { opacity:1; visibility:visible; pointer-events:auto; }
.reading .novel-continue { position:absolute; bottom:145px; right:14px; z-index:12; width:auto; padding:7px 12px; font-size:12px; visibility:hidden; }
.reader-ui-visible .novel-continue { visibility:visible; }
.novel-curl-scene { position:absolute; z-index:6; overflow:hidden; pointer-events:none; contain:layout paint; }
.reading .novel-curl-page,.novel-curl-back { position:absolute; inset:0; overflow:hidden; background-color:var(--paper); background-size:cover; background-position:center; }
.novel-curl-front { z-index:3; }
.novel-curl-back { z-index:2; width:100%; height:100%; }
.reading .novel-curl-ink { opacity:.025; background:transparent; transform-origin:0 0; will-change:transform; }
.novel-curl-defs { position:absolute; }
.novel-curl-shadow,.novel-curl-crease { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.novel-curl-shadow { z-index:1; }
.novel-curl-shadow path { fill:#00000012; stroke:#00000018; stroke-width:10; stroke-linejoin:round; }
.novel-curl-crease { z-index:4; }
.novel-curl-crease path { fill:none; stroke:#ffffff80; stroke-width:1; }
.novel-dragging .novel-page-viewport,.novel-dragging .novel-page-viewport article { user-select:none; -webkit-user-select:none; }

/* 上下滑动阅读 */
.reading.scroll-mode .novel-page-viewport { overflow-x:hidden; overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.reading.scroll-mode .novel-page-viewport article { height:auto; columns:auto; column-width:auto; padding-bottom:24px; }
.novel-chapter-nav { display:flex; gap:12px; justify-content:center; margin:28px 0 12px; }
.novel-chapter-nav button { min-width:96px; min-height:38px; border:1px solid currentColor; border-radius:999px; background:transparent; color:inherit; opacity:.7; font-size:13px; }
/* 翻页纸张覆盖整个阅读区：内部页面元素按原位置绝对定位 */
.novel-curl-page .novel-curl-view { flex:none; }

/* ==================== watch-together.css ==================== */
/* ===========================================================
   一起看（watch-together）：小说 / 影视共用的角色陪看聊天抽屉
   底部抽屉让位给系统导航键；影视横屏沉浸时铺到底。
   =========================================================== */

/* 无导航栏页面（影视播放器）上的入口按钮 */
.wt-launch {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
}

.wt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.42);
}

.wt-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--system-nav-height, 0px);
  z-index: 31;
  display: flex;
  flex-direction: column;
  min-height: 46%;
  max-height: 74%;
  border-radius: 18px 18px 0 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  padding-bottom: var(--safe-bottom, 0px);
}

/* 影视横屏沉浸：没有系统导航键，抽屉直接贴底 */
html.video-immersive .wt-sheet {
  bottom: 0;
}
html.video-immersive .wt-backdrop {
  background: rgba(0, 0, 0, 0.22);
}

.wt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.wt-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.wt-identity > span {
  display: grid;
  min-width: 0;
}
.wt-identity strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt-identity small {
  font-size: 11px;
  color: var(--ink-mute);
}
.wt-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 600;
}
.wt-avatar.sm {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.wt-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wt-swap,
.wt-close {
  border: 0;
  background: none;
  color: var(--ink-mute);
  font-size: 12px;
  padding: 4px 4px;
}
.wt-close {
  font-size: 20px;
  line-height: 1;
}

.wt-hint {
  padding: 8px 14px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-mute);
}

.wt-picker {
  overflow-y: auto;
  padding: 6px 14px 14px;
}
.wt-picker p {
  margin: 6px 2px 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.wt-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.wt-picker-grid button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--ink);
  font-size: 12px;
  text-align: left;
}
.wt-picker-grid button > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wt-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
}
.wt-log-empty {
  margin: auto;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-mute);
}
.wt-msg {
  display: flex;
  gap: 8px;
  max-width: 100%;
}
.wt-msg.user {
  flex-direction: row-reverse;
}
.wt-bubble {
  max-width: 78%;
  padding: 8px 11px;
  border-radius: 12px;
  background: var(--card-2);
  color: var(--ink-strong);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.wt-msg.user .wt-bubble {
  background: var(--accent);
  color: var(--accent-ink);
}
.wt-typing {
  padding: 2px 4px;
  font-size: 12px;
  color: var(--ink-mute);
}

.wt-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
}
.wt-compose input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.wt-compose button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.wt-compose .wt-send {
  background: var(--accent);
  color: var(--accent-ink);
}
.wt-compose .wt-nudge {
  background: var(--card-2);
  color: var(--ink-strong);
}
.wt-compose button:disabled {
  opacity: 0.5;
}

/* ==================== watch-app.css ==================== */
/* ===========================================================
   一起看（31_watch）：真实手机屏幕抽帧陪伴
   =========================================================== */

.wtg-app {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  overflow-y: auto;
}

.wtg-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.wtg-status {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wtg-status strong {
  display: block;
  font-size: 16px;
  color: var(--ink-strong);
}
.wtg-status small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-mute);
}

.wtg-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--line-strong);
}
.wtg-dot.watching {
  background: #58b57e;
  box-shadow: 0 0 0 5px #58b57e26;
}
.wtg-dot.starting {
  background: #d9a53f;
  box-shadow: 0 0 0 5px #d9a53f26;
}
.wtg-dot.paused {
  background: #d9a53f;
}

.wtg-controls {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.wtg-btn {
  flex: 1;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 600;
}
.wtg-btn.primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}
.wtg-btn.danger {
  border-color: transparent;
  background: #d96a5f1f;
  color: #c4503f;
}
.wtg-btn.plain {
  flex: 0 0 auto;
  align-self: center;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-mute);
}
.wtg-btn:disabled {
  opacity: 0.5;
}

.wtg-unsupported {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-mute);
}

.wtg-section h2 {
  margin: 0 2px 10px;
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 600;
}

.wtg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.wtg-persona {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
}
.wtg-persona.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.wtg-initial {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 600;
}
.wtg-persona-name {
  display: grid;
  min-width: 0;
}
.wtg-persona-name strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wtg-persona-name small {
  font-size: 11px;
  color: var(--ink-mute);
}

.wtg-notes {
  margin: 0;
  padding: 12px 14px 12px 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.wtg-notes li {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-mute);
}

.wtg-empty {
  margin: 4px 2px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-mute);
}

.wtg-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wtg-entry {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
}
.wtg-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.wtg-entry-head strong {
  font-size: 12px;
  color: var(--ink-strong);
}
.wtg-entry-head small {
  font-size: 10px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.wtg-entry p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==================== shop.css ==================== */
.shop-app{padding:18px 16px calc(26px + var(--safe-bottom));color:var(--ink)}.shop-balance{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-radius:15px;background:var(--card);font-size:13px}.shop-balance strong{font-size:19px;color:var(--accent)}.shop-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0}.shop-tabs button{border:0;border-radius:10px;padding:11px 3px;background:var(--surface-2);color:var(--ink-mute);font:inherit;font-size:13px}.shop-tabs button.active{background:var(--accent);color:#fff}.shop-intro,.shop-empty{font-size:13px;color:var(--ink-mute);line-height:1.6}.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.shop-card{display:grid;gap:7px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:15px;background:var(--card);color:var(--ink);text-align:left;font:inherit}.shop-card strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px}.shop-card>button{border:0;background:none;color:var(--danger);text-align:left}.shop-image{display:grid;place-items:center;height:108px;border-radius:11px;background:var(--surface-2);overflow:hidden}.shop-image img{width:75px;height:75px;object-fit:contain}.shop-image span{font-size:54px}.shop-price{color:var(--accent);font-size:15px;font-weight:700}.shop-form{display:grid;gap:13px;padding:17px;border-radius:16px;background:var(--card)}.shop-form h2,.shop-app>h2{font-size:18px;margin:0}.shop-form label{display:grid;gap:7px;font-size:13px}.shop-form input,.shop-form select{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:10px;color:var(--ink);font:inherit}.shop-upload-preview img{width:72px;height:72px;object-fit:cover;border-radius:9px}.shop-app>h2{margin-top:24px}.shop-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:end;background:#0008}.shop-sheet-card{position:relative;width:100%;max-height:80vh;overflow:auto;display:grid;gap:12px;padding:22px 20px calc(24px + var(--safe-bottom) + var(--system-nav-height,0px));border-radius:23px 23px 0 0;background:var(--card)}.shop-sheet-card h2,.shop-sheet-card p{margin:0}.shop-sheet-card>strong{color:var(--accent);font-size:21px}.shop-sheet-image{display:grid;place-items:center;height:115px}.shop-sheet-image img{height:100px;width:100px;object-fit:contain}.shop-close{position:absolute;right:16px;top:12px;border:0;background:none;color:var(--ink);font-size:27px}.shop-recipients{display:flex;flex-wrap:wrap;gap:8px}.shop-recipients button{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink)}.shop-recipients button.active{border-color:var(--accent);color:var(--accent)}
.shop-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.shop-tabs button{font-size:12px;padding:9px 2px;white-space:nowrap}.shop-categories{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin:0 0 14px;scrollbar-width:none}.shop-categories button{flex:none;padding:6px 10px;font-size:11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-mute)}.shop-categories button.active{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}.shop-card-open{display:grid;gap:7px;border:0;background:none;padding:0;color:var(--ink);font:inherit;text-align:left;min-width:0;width:100%}.shop-card-open small{font-size:10px;color:var(--ink-mute)}.shop-card .shop-card-open{color:var(--ink)}.shop-card-open .shop-image img{width:100%;height:100%;object-fit:contain}.shop-form textarea{box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface-2);color:var(--ink);font:inherit;resize:vertical}.shop-app .shop-grid{margin-bottom:16px}

/* ==================== arcade.css ==================== */
/* ===========================================================
   小游戏合集（30_arcade）
   菜单在竖屏下展示；选中游戏后原生桥切到该游戏的方向并沉浸式
   全屏，游戏在独立 iframe（LittleJS 引擎）里铺满整个可视区，
   只保留一个返回菜单按钮。
   =========================================================== */

.arcade-layer {
  padding-top: 0 !important;
  background: #0b0f17 !important;
}

/* 游戏进行时：隐藏外壳的经典导航键 / 灵动岛，应用层铺满整屏 */
html.arcade-immersive .system-nav,
html.arcade-immersive .system-island {
  display: none;
}
html.arcade-immersive .app-layer.arcade-layer {
  bottom: 0;
}

/* ---------- 菜单 ---------- */
.arcade-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: max(16px, var(--safe-top)) 16px calc(18px + var(--safe-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
}

.arcade-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #f2f6ff;
  letter-spacing: 0.5px;
}
.arcade-head p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #8a97ad;
}

.arcade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 620px) and (orientation: landscape) {
  .arcade-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.arcade-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #ffffff14;
  border-radius: 16px;
  background: linear-gradient(160deg, #1a2233, #131a27);
  color: #eef3ff;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.arcade-card:active {
  transform: scale(0.97);
  border-color: #4d7cff88;
}

.arcade-emoji {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #0e1420;
  font-size: 26px;
  line-height: 1;
}
.arcade-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.arcade-name {
  font-size: 15px;
  font-weight: 600;
}
.arcade-tagline {
  font-size: 11px;
  color: #92a0b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 游戏舞台 ---------- */
.arcade-stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: #000;
}
.arcade-playing .arcade-shell {
  display: none;
}
.arcade-stage[hidden] {
  display: none;
}

.arcade-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.arcade-back {
  position: absolute;
  z-index: 11;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  width: 38px;
  height: 38px;
  padding: 0 0 4px;
  border: 1px solid #ffffff3d;
  border-radius: 12px;
  color: #eef3ff;
  background: #0b1220cc;
  font-size: 26px;
  line-height: 34px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.arcade-back:active {
  background: #24406e;
}

.arcade-compat { display: flex; align-items: center; gap: 8px; color: #e5e8ed; margin: 0 0 16px; font-size: 13px; }

/* ==================== home.css ==================== */
/* ===========================================================
   小小家园（34_home）· 横屏沉浸式 3D 家园
   样式源自 10.home 的 HomePage.module.css（自研），全部挂在 .home-layer 下。
   进入时原生桥切横屏并隐藏外壳导航键 / 灵动岛（同 19_pvz、22_moonfall-run）。
   =========================================================== */

.home-layer { padding: 0 !important; background: #f5f2eb; }
html.home-immersive .system-nav,
html.home-immersive .system-island { display: none; }
html.home-immersive .app-layer.home-layer { bottom: 0; }

/* --- 分层：背景图（换装页）→ 共用 3D canvas → 页面 → 编辑纹理 --- */
.home-layer .hm-app {
  --drawer-w: min(318px, 44vw);
  --gl: max(14px, env(safe-area-inset-left, 0px));
  --gr: max(14px, env(safe-area-inset-right, 0px));
  --gt: max(12px, env(safe-area-inset-top, 0px));
  --gb: max(12px, env(safe-area-inset-bottom, 0px));
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #e7e8df;
  color: #353d38;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-user-select: none;
  user-select: none;
}
.home-layer .hm-app *,
.home-layer .hm-app *::before,
.home-layer .hm-app *::after { box-sizing: border-box; }
.home-layer .hm-app button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home-layer .hm-app button:focus-visible { outline: 3px solid #b77752; outline-offset: 2px; }
.home-layer .hm-app [hidden] { display: none !important; }
.home-layer h1 { font-size: 21px; letter-spacing: -.04em; margin: 7px 0 4px; color: #343d37; }
.home-layer .hm-bg { position: absolute; inset: 0; background: #2a2432 center / cover no-repeat; }
.home-layer .hm-app[data-view="home"] .hm-bg { display: none; }
.home-layer .hm-canvas-host { position: absolute; inset: 0; }
.home-layer .hm-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
/* 页面层本身不挡触摸（透到下面的 3D canvas），只有控件接收点击 */
.home-layer .hm-page { position: absolute; inset: 0; pointer-events: none; }
.home-layer .hm-root { position: absolute; inset: 0; pointer-events: none; }

/* --- 家园页 --- */
.home-layer .stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.home-layer .catalog,
.home-layer .drawer-toggle,
.home-layer .area-chip,
.home-layer .zoom-actions,
.home-layer .hm-joystick,
.home-layer .selection-bar,
.home-layer .hm-confirm { pointer-events: auto; }

/* --- 家具抽屉（布置模式） --- */
.home-layer .catalog {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 6;
  width: calc(var(--drawer-w) + env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; min-height: 0;
  padding: var(--gt) 14px var(--gb) var(--gl);
  background: #fcfaf6f2; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-right: 1px solid #e9e5dc; box-shadow: 6px 0 24px #535b3f18;
}
.home-layer .drawer-toggle {
  position: absolute; z-index: 7; top: 50%; transform: translateY(-50%);
  left: env(safe-area-inset-left, 0px);
  width: 28px; height: 68px; padding: 0;
  border: 1px solid #e8e4dc; border-left: 0; border-radius: 0 12px 12px 0;
  background: #fcfaf6ee; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #9f6244; font-size: 22px; line-height: 1; box-shadow: 3px 3px 12px #535b3f18;
  transition: left .2s;
}
.home-layer .drawer-open .drawer-toggle { left: calc(var(--drawer-w) + env(safe-area-inset-left, 0px)); }
.home-layer .catalog-head { padding: 0 6px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.home-layer .hm-eyebrow { font-size: 9px; letter-spacing: .21em; font-weight: 700; color: #b47c5b; }
.home-layer .catalog-head p { margin: 0; color: #9aa198; font-size: 11px; }
.home-layer .count-pill { background: #edf0e9; color: #79907c; border-radius: 20px; font-size: 10px; padding: 6px 9px; white-space: nowrap; margin-top: 26px; }
.home-layer .catalog-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 2px 0; }
.home-layer .filter-chip { border: 1px solid #ebe6dc; background: #fff; color: #7d837b; border-radius: 16px; font-size: 11px; padding: 5px 10px; min-height: 30px; white-space: nowrap; }
.home-layer .filter-chip[aria-pressed="true"] { background: #ac704f; border-color: #ac704f; color: #fff; }
.home-layer .catalog-subhead { display: flex; justify-content: space-between; margin: 14px 5px 10px; font-size: 11px; font-weight: 700; color: #656c65; }
.home-layer .catalog-subhead span:last-child { color: #b4b5aa; font-weight: 500; }
.home-layer .catalog-grid {
  flex: 1; min-height: 0; overflow: auto; align-content: start;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 9px;
  padding: 2px 3px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.home-layer .furniture-card { min-width: 0; text-align: left; position: relative; min-height: 124px; border: 1px solid #efebe3; border-radius: 14px; background: #fff; padding: 9px; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.home-layer .furniture-card:active,
.home-layer .furniture-card:focus-visible { border-color: #d4b59b; box-shadow: 0 5px 16px #614f3c16; }
.home-layer .furniture-card:disabled { opacity: .6; cursor: wait; }
.home-layer .furniture-art { flex: none; height: 68px; display: grid; place-items: center; width: 100%; border-radius: 9px; background: #efe8dc; font-size: 34px; color: #a87556; overflow: hidden; }
.home-layer .furniture-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-layer .furniture-art--flat { background: #f6f2ea; color: #b9a187; }
.home-layer .furniture-copy { flex: none; display: flex; flex-direction: column; margin: 8px 22px 0 3px; line-height: 1.25; }
.home-layer .furniture-copy strong { font-size: 11px; color: #4b514a; font-weight: 700; }
.home-layer .furniture-copy small { font-size: 9px; color: #acafa5; margin-top: 3px; }
.home-layer .add-mark { position: absolute; right: 9px; bottom: 9px; background: #eef2eb; color: #809a80; font-weight: 600; font-size: 17px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; line-height: 1; }
.home-layer .catalog-footer { margin-top: 8px; background: #f6f3ed; border-radius: 12px; padding: 9px 10px; display: flex; align-items: center; gap: 10px; flex: none; }
.home-layer .footer-sparkle { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #ede3d5; color: #b7835c; display: grid; place-items: center; }
.home-layer .catalog-footer strong { display: block; font-size: 11px; }
.home-layer .catalog-footer p { margin: 3px 0 0; color: #a0a69d; font-size: 9px; }
.home-layer .clear-button { flex: none; margin-left: auto; border: 1px solid #f0d9d2; background: #faf0ed; color: #b46b5e; border-radius: 9px; font-size: 11px; padding: 0 12px; min-height: 36px; }

/* --- 顶部：区域牌 + ☰ 菜单 + 区域导航 --- */
.home-layer .stage-top {
  position: absolute; z-index: 5; top: var(--gt); left: var(--gl); right: var(--gr);
  display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; transition: left .2s;
}
.home-layer .stage-top > * { pointer-events: auto; }
.home-layer .room-chip { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 0 13px; border: 1px solid #e8e9df; background: #ffffffd9; border-radius: 11px; font-size: 11px; color: #556157; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 5px 20px #535b3f11; white-space: nowrap; }
.home-layer .room-chip b { font-weight: 700; }
.home-layer .room-dot,
.home-layer .save-state i { width: 7px; height: 7px; border-radius: 50%; background: #80a889; display: inline-block; }
.home-layer .room-divider { color: #bec2b8; }
.home-layer .mode-menu { position: relative; }
.home-layer .menu-button { width: 44px; height: 44px; padding: 0; border: 1px solid #e8e9df; background: #ffffffdd; border-radius: 11px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 5px 20px #535b3f11; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.home-layer .menu-button span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #6d786d; }
.home-layer .menu-button[aria-expanded="true"] { background: #fff3e8; border-color: #d4b59b; }
.home-layer .menu-panel { position: absolute; right: 0; top: 52px; min-width: 156px; padding: 6px; border: 1px solid #e8e9df; border-radius: 13px; background: #fffdf8f4; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); box-shadow: 0 10px 28px #535b3f26; display: flex; flex-direction: column; gap: 3px; z-index: 9; }
.home-layer .menu-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #4b514a; font-size: 13px; text-align: left; }
.home-layer .menu-item:active { background: #f5f2ec; }
.home-layer .menu-item.is-current { background: #fff3e8; color: #9f6244; font-weight: 700; }
.home-layer .menu-icon { display: grid; place-items: center; width: 20px; height: 20px; }
.home-layer .menu-icon svg { width: 19px; height: 19px; }
.home-layer .menu-panel .save-state { display: flex; align-items: center; gap: 7px; padding: 7px 12px 5px; border-top: 1px solid #efebe3; margin-top: 3px; font-size: 10px; color: #82907f; white-space: nowrap; }
.home-layer .save-state.save-error { color: #b95d4e; }
.home-layer .save-state.save-error i { background: #b95d4e; }
.home-layer .menu-exit { color: #8a8f88; font-size: 12px; min-height: 38px; }

.home-layer .area-nav {
  position: absolute; z-index: 4; top: calc(var(--gt) + 50px); left: var(--gl); right: calc(var(--gr) + 150px);
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; pointer-events: none; padding-bottom: 2px; transition: left .2s;
}
.home-layer .area-nav::-webkit-scrollbar { display: none; }
.home-layer .area-chip { pointer-events: auto; flex: none; min-height: 34px; border: 1px solid #e8e9df; background: #ffffffc9; color: #6b7469; border-radius: 17px; padding: 0 12px; font-size: 11px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 3px 12px #535b3f10; }
.home-layer .area-chip.is-current { background: #fff3e8; color: #9f6244; border-color: #d4b59b; font-weight: 700; }
.home-layer .area-chip--overview { background: #39433cd0; color: #fff; border-color: transparent; }
.home-layer .drawer-open .stage-top,
.home-layer .drawer-open .area-nav { left: calc(var(--drawer-w) + env(safe-area-inset-left, 0px) + 40px); }

/* --- 右下角功能键 --- */
.home-layer .stage-bottom { position: absolute; z-index: 4; right: var(--gr); bottom: var(--gb); display: flex; pointer-events: none; }
.home-layer .zoom-actions { display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.home-layer .zoom-actions button { border: 1px solid #e9e9e2; background: #ffffffdd; width: 42px; height: 42px; padding: 0; border-radius: 10px; color: #778276; font-size: 19px; line-height: 1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.home-layer .zoom-actions .wall-toggle { font-size: 10px; }
.home-layer .zoom-actions svg { width: 20px; height: 20px; display: block; margin: auto; }
.home-layer [data-mode="arrange"] .walk-only,
.home-layer [data-mode="walk"] .arrange-only { display: none; }
/* 行走模式要沉浸：顶部只留 ☰ */
.home-layer [data-mode="walk"] .room-chip,
.home-layer [data-mode="walk"] .area-nav { display: none; }
.home-layer [data-mode="walk"] .stage-top { justify-content: flex-end; }

/* --- 选中家具浮条 --- */
.home-layer .selection-bar { position: absolute; z-index: 5; bottom: var(--gb); left: 50%; transform: translateX(-50%); max-width: calc(100% - 140px); border: 1px solid #e8e9df; border-radius: 13px; background: #fffdf8ed; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); box-shadow: 0 8px 25px #535b3f20; display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 13px; gap: 12px; }
.home-layer .selection-name { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; font-weight: 700; }
.home-layer .selection-name small { font-size: 9px; color: #a6a9a0; font-weight: 400; }
.home-layer .selection-dot { width: 7px; height: 7px; background: #dc9d72; border-radius: 50%; }
.home-layer .selection-actions { display: flex; gap: 4px; }
.home-layer .selection-actions button { border: 0; background: #f5f2ec; border-radius: 8px; min-height: 40px; min-width: 44px; padding: 0 10px; color: #6d786d; font-size: 11px; white-space: nowrap; }
.home-layer .selection-actions .delete-button { color: #b46b5e; background: #faf0ed; }
.home-layer .drawer-open .selection-bar { left: calc(50% + var(--drawer-w) / 2); }

/* --- 提示 / 载入 / Toast --- */
.home-layer .hm-toast { position: absolute; z-index: 8; left: 50%; top: calc(var(--gt) + 94px); transform: translate(-50%, -8px); background: #39433cdd; color: #fff; border-radius: 22px; font-size: 12px; padding: 9px 16px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.home-layer .hm-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.home-layer .hm-notice { position: absolute; z-index: 5; left: 50%; top: calc(var(--gt) + 94px); transform: translateX(-50%); background: #faf0ed; color: #b46b5e; border: 1px solid #f0d9d2; border-radius: 20px; font-size: 11px; padding: 7px 14px; white-space: nowrap; pointer-events: none; }
.home-layer .hm-loading { position: absolute; z-index: 5; left: 50%; bottom: var(--gb); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 20px; background: #fffdf8ee; border: 1px solid #e8e9df; color: #6d786d; font-size: 12px; box-shadow: 0 6px 20px #535b3f1f; pointer-events: none; }
.home-layer .hm-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #e4d6c8; border-top-color: #ac704f; animation: hm-spin .8s linear infinite; }
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* --- 虚拟摇杆（行走模式） --- */
.home-layer .hm-joystick { position: absolute; z-index: 4; left: calc(var(--gl) + 8px); bottom: calc(var(--gb) + 8px); width: 118px; height: 118px; border-radius: 50%; background: #fffdf8c9; border: 1px solid #e8e9df; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 22px #535b3f1f; touch-action: none; }
.home-layer .hm-joystick-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: #ac704f; opacity: .85; box-shadow: 0 3px 10px #614f3c3d; transition: transform .05s linear; pointer-events: none; }

/* --- 确认框 / 不可用 --- */
.home-layer .hm-confirm { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #1e241f66; }
.home-layer .hm-confirm-card { width: min(340px, calc(100% - 40px)); padding: 20px 20px 16px; border-radius: 16px; background: #fffdf8; box-shadow: 0 16px 40px #0003; }
.home-layer .hm-confirm-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #3f4740; }
.home-layer .hm-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.home-layer .hm-confirm-actions button { min-height: 38px; padding: 0 18px; border: 1px solid #e8e4dc; border-radius: 10px; background: #fff; color: #6d786d; font-size: 13px; }
.home-layer .hm-confirm-actions .hm-danger { border-color: #b46b5e; background: #b46b5e; color: #fff; }
.home-layer .hm-unavailable { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #4b514a; background: #f5f2eb; }
.home-layer .hm-unavailable h2 { margin: 0; font-size: 18px; }
.home-layer .hm-unavailable p { margin: 0; font-size: 13px; color: #82907f; }
.home-layer .hm-unavailable button { min-height: 40px; padding: 0 22px; border: 0; border-radius: 10px; background: #39433c; color: #fff; }

/* --- 横屏手机：高度很矮，压缩抽屉与按钮 --- */
@media (max-height: 520px) {
  .home-layer .catalog-head .hm-eyebrow,
  .home-layer .catalog-head p,
  .home-layer .catalog-subhead,
  .home-layer .catalog-footer p,
  .home-layer .footer-sparkle { display: none; }
  .home-layer .catalog-head { align-items: center; }
  .home-layer h1 { font-size: 16px; margin: 0; letter-spacing: 0; }
  .home-layer .count-pill { margin: 0; }
  .home-layer .catalog-filter { margin: 8px 0 8px; gap: 5px; }
  .home-layer .filter-chip { min-height: 28px; padding: 0 9px; }
  .home-layer .furniture-card { min-height: 0; padding: 6px; }
  .home-layer .furniture-art { height: 54px; }
  .home-layer .furniture-copy { margin-top: 5px; }
  .home-layer .furniture-copy small { display: none; }
  .home-layer .add-mark { width: 20px; height: 20px; font-size: 14px; right: 6px; bottom: 6px; }
  .home-layer .catalog-footer { padding: 6px 8px; margin-top: 6px; }
  .home-layer .zoom-actions { gap: 5px; }
  .home-layer .zoom-actions button { width: 38px; height: 38px; font-size: 17px; }
  .home-layer .area-nav { top: calc(var(--gt) + 48px); }
  .home-layer .hm-joystick { width: 104px; height: 104px; }
  .home-layer .hm-joystick-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .home-layer .hm-toast,
  .home-layer .hm-notice { top: calc(var(--gt) + 88px); }
}

/* 竖屏兜底（浏览器预览 / 原生桥未切横屏时）：抽屉更宽 */
@media (orientation: portrait) and (max-width: 600px) {
  .home-layer .hm-app { --drawer-w: min(300px, 82vw); }
  .home-layer .area-nav { right: var(--gr); }
}

/* ===========================================================
   换装页（p01）· 深色毛玻璃面板 + 绿色强调（沿用 10.home Appearance 页配色）
   =========================================================== */
.home-layer .dr-root { position: absolute; inset: 0; pointer-events: none; color: #f2f7f5; }
.home-layer .dr-root > * { pointer-events: auto; }
.home-layer .dr-root .hm-loading,
.home-layer .dr-root .hm-toast { pointer-events: none; }
.home-layer .dr-top { position: absolute; z-index: 6; top: var(--gt); left: var(--gl); display: flex; align-items: center; gap: 8px; }
.home-layer .dr-icon-btn { width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff1a; border-radius: 12px; background: #090f14d1; color: #f2f7f5; font-size: 22px; line-height: 1; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.home-layer .dr-name { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid #08eaa059; border-radius: 12px; background: #090f14d1; color: #fff; font-size: 14px; font-weight: 700; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.home-layer .dr-name span:last-child { font-size: 10px; color: #08eaa0; }
.home-layer .dr-name-menu { position: absolute; top: 46px; left: 48px; min-width: 130px; padding: 5px; border: 1px solid #08eaa059; border-radius: 10px; background: #050b0ef5; }
.home-layer .dr-name-menu button { width: 100%; min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: #d1d7df; font-size: 13px; text-align: left; padding: 0 12px; }
.home-layer .dr-name-menu button:active { background: #08eaa029; color: #fff; }

.home-layer .dr-side {
  position: absolute; z-index: 5; left: var(--gl); top: calc(var(--gt) + 50px); bottom: var(--gb);
  width: min(380px, 48vw); display: flex; gap: 8px; transition: transform .22s ease, opacity .22s ease;
}
.home-layer .side-closed .dr-side { transform: translateX(calc(-100% - var(--gl))); opacity: 0; pointer-events: none; }
.home-layer .dr-cats, .home-layer .dr-panel { border: 1px solid #ffffff14; border-radius: 16px; background: #090f14d1; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.home-layer .dr-cats { flex: none; width: 76px; padding: 6px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: none; }
.home-layer .dr-cats::-webkit-scrollbar { display: none; }
.home-layer .dr-cat { flex: none; min-height: 38px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #c9d1cd; font-size: 12px; }
.home-layer .dr-cat.is-on { background: #08eaa01a; border-color: #08eaa059; color: #fff; font-weight: 700; }
.home-layer .dr-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.home-layer .dr-panel-head { padding: 9px 12px 6px; font-size: 13px; }
.home-layer .dr-panel-head strong { background: linear-gradient(90deg, #009564, #08eaa0); color: #fff; border-radius: 8px; padding: 3px 10px; font-size: 12px; }
.home-layer .dr-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); grid-auto-rows: min-content; gap: 7px; align-content: start; -webkit-overflow-scrolling: touch; }
.home-layer .dr-item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 4px; min-width: 0; border: 1px solid #ffffff14; border-radius: 12px; background: #ffffff0d; color: #e7ecea; text-align: center; }
.home-layer .dr-item.is-on { border-color: #08eaa0cc; background: #08eaa01f; }
.home-layer .dr-item.is-mine::before { content: "我的"; position: absolute; z-index: 1; top: 3px; left: 3px; padding: 1px 5px; border-radius: 6px; background: #f26d8f; color: #fff; font-size: 9px; }
.home-layer .dr-item.is-busy::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: #090f14aa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%2308eaa0' stroke-width='2.5' stroke-dasharray='30 60'/%3E%3C/svg%3E") center / 24px no-repeat; }
.home-layer .dr-thumb { flex: none; display: grid; place-items: center; aspect-ratio: 1; border-radius: 9px; background: #ffffff12; overflow: hidden; font-size: 22px; color: #9fb1aa; }
.home-layer .dr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-layer .dr-plus { font-size: 28px; color: #f26d8f; }
.home-layer .dr-item.is-template { border-style: dashed; border-color: #f26d8f88; }
.home-layer .dr-item-name { font-size: 10px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-layer .dr-mine { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-top: 1px solid #ffffff14; font-size: 11px; color: #f7b6c8; }
.home-layer .dr-mine span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-layer .dr-mine button, .home-layer .dr-panel-foot button { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid #ffffff26; border-radius: 9px; background: #ffffff10; color: #e7ecea; font-size: 12px; }
.home-layer .dr-mine .dr-danger { border-color: #f26d8f88; color: #ffb3c6; }
.home-layer .dr-panel-foot { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid #ffffff14; }
.home-layer .dr-panel-foot button:disabled { opacity: .4; }
.home-layer .dr-color { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #c9d1cd; }
.home-layer .dr-color.is-off { opacity: .4; }
.home-layer .dr-role { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.home-layer .dr-role-card { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid #08eaa059; border-radius: 12px; background: #ffffff08; }
/* 角色卡原图是 640×1080 全身照：只取上半身（原图 x 170–470、y 60–360 这一块），露出脸 */
.home-layer .dr-role-face { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 9px; background: #2b2238; }
.home-layer .dr-role-face img { display: block; width: 213.3%; max-width: none; height: auto; margin: -20% 0 0 -56.7%; }
.home-layer .dr-role-face.is-square img { width: 100%; margin: 0; }
.home-layer .dr-role-initial { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 26px; color: #f26d8f; }
.home-layer .dr-role-btn.dr-danger { border-color: #d9546f88; color: #ff9fb2; }
.home-layer .dr-role-hint a { color: #08eaa0; }
.home-layer .dr-role-card b { display: block; font-size: 14px; }
.home-layer .dr-role-card small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.4; color: #9fb1aa; }
.home-layer .dr-role-btn { min-height: 38px; border: 1px solid #ffffff26; border-radius: 10px; background: #ffffff10; color: #e7ecea; font-size: 13px; }
.home-layer .dr-role-btn:active { background: #08eaa029; }
.home-layer .dr-role-hint { margin: 0; font-size: 10px; line-height: 1.5; color: #9fb1aa; }
.home-layer .dr-color input { width: 38px; height: 28px; padding: 0; border: 1px solid #ffffff33; border-radius: 7px; background: none; }
.home-layer .dr-empty { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; color: #9fb1aa; font-size: 12px; }
.home-layer .dr-side-toggle {
  position: absolute; z-index: 6; top: 50%; transform: translateY(-50%);
  left: calc(var(--gl) + min(380px, 48vw) + 4px); width: 24px; height: 64px; padding: 0;
  border: 1px solid #ffffff1a; border-radius: 0 10px 10px 0; background: #090f14c7; color: #08eaa0; font-size: 20px; transition: left .22s ease;
}
.home-layer .side-closed .dr-side-toggle { left: env(safe-area-inset-left, 0px); }
.home-layer .dr-destinations {
  position: absolute; z-index: 6; right: var(--gr); bottom: var(--gb);
  display: flex; flex-direction: column; gap: 10px;
}
.home-layer .dr-enter {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 14px; background: linear-gradient(90deg, #009564, #08eaa0); color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 24px #00956455;
}
.home-layer .dr-enter span { font-size: 20px; line-height: 1; }
.home-layer .dr-town { background: linear-gradient(90deg, #438bb4, #72bfd4); box-shadow: 0 8px 24px #438bb455; }
.home-layer .dr-loading { left: auto; right: var(--gr); transform: none; bottom: calc(var(--gb) + 116px); background: #090f14d9; border-color: #ffffff1a; color: #d1d7df; }
.home-layer .dr-root .hm-toast { top: var(--gt); }
.home-layer .dr-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #000000a0; }
.home-layer .dr-picker { width: min(560px, calc(100% - 40px)); max-height: calc(100% - 24px); overflow: auto; padding: 16px; border: 1px solid #08eaa059; border-radius: 18px; background: #090f14f2; display: flex; flex-direction: column; gap: 12px; }
.home-layer .dr-picker > strong { font-size: 15px; }
.home-layer .dr-picker-cards { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 2px; }
.home-layer .dr-card { flex: 1 0 128px; display: flex; flex-direction: column; gap: 5px; padding: 8px; border: 1px solid #08eaa059; border-radius: 14px; background: #ffffff08; color: #fff; text-align: center; }
.home-layer .dr-card.is-on { border-color: #08eaa0; background: #08eaa01a; }
.home-layer .dr-card-import { border-style: dashed; border-color: #f26d8f88; }
.home-layer .dr-card-initial { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; max-height: 190px; border-radius: 10px; background: #2b2238; font-size: 34px; color: #f26d8f; }
.home-layer .dr-card b, .home-layer .dr-card small { overflow-wrap: anywhere; }
.home-layer .dr-card img { width: 100%; max-height: 190px; object-fit: contain; border-radius: 10px; background: #2b2238; }
.home-layer .dr-card b { font-size: 14px; }
.home-layer .dr-card small { font-size: 10px; color: #9fb1aa; }
.home-layer .dr-link { align-self: flex-end; border: 0; background: none; color: #08eaa0; font-size: 13px; }
/* 设置主副角色：主 / 副 两个页签，卡片右上角标「主」「副」 */
.home-layer .dr-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.home-layer .dr-picker-head strong { font-size: 15px; }
.home-layer .dr-tabs { display: flex; padding: 3px; border-radius: 11px; background: #ffffff10; }
.home-layer .dr-tab { min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: #9fb1aa; font-size: 13px; }
.home-layer .dr-tab.is-on { background: #08eaa0; color: #05241a; font-weight: 700; }
.home-layer .dr-tabs[data-active=mate] .dr-tab.is-on { background: #f26d8f; color: #2b0d16; }
.home-layer .dr-picker-hint { margin: -4px 0 0; font-size: 11px; line-height: 1.5; color: #9fb1aa; }
.home-layer .dr-card { position: relative; }
.home-layer .dr-card.is-mate { border-color: #f26d8f; background: #f26d8f1a; }
.home-layer .dr-card.is-locked { opacity: .45; }
.home-layer .dr-badge { position: absolute; top: 4px; right: 4px; z-index: 1; min-width: 22px; padding: 2px 6px; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 1.4; }
.home-layer .dr-badge.is-main { background: #08eaa0; color: #05241a; }
.home-layer .dr-badge.is-mate { background: #f26d8f; color: #2b0d16; }
.home-layer .dr-picker-foot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.home-layer .dr-picker-foot .dr-link { align-self: auto; }
.home-layer .dr-link.is-muted { color: #ff9fb2; }
.home-layer .dr-dialog { width: min(340px, calc(100% - 40px)); padding: 20px 20px 16px; border-radius: 16px; background: #0d1519; border: 1px solid #ffffff1a; }
.home-layer .dr-dialog p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.home-layer .dr-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.home-layer .dr-dialog-actions button { min-height: 38px; padding: 0 16px; border: 1px solid #ffffff26; border-radius: 10px; background: transparent; color: #d1d7df; font-size: 13px; }
.home-layer .dr-dialog-actions .hm-danger { border-color: #d9546f; background: #d9546f; color: #fff; }

/* ===========================================================
   编辑纹理（p01 子页 w01）· 左：角色预览 · 中：UV 画布 · 右：工具
   =========================================================== */
.home-layer .te-host { z-index: 10; }
.home-layer .te-root {
  --te-panel: #16141ef0; --te-field: #ffffff12; --te-line: #ffffff1c; --te-text: #f3eef6; --te-muted: #b5aec0; --te-accent: #ff8fb1;
  position: absolute; inset: 0; display: flex; gap: 8px; padding: var(--gt) var(--gr) var(--gb) var(--gl);
  color: var(--te-text); pointer-events: none;
}
.home-layer .te-root > * { pointer-events: auto; }
.home-layer .te-stage { flex: 1 1 0; min-width: 120px; pointer-events: none !important; }
.home-layer .te-canvas-panel, .home-layer .te-side { background: var(--te-panel); border: 1px solid var(--te-line); border-radius: 16px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.home-layer .te-canvas-panel { position: relative; flex: 0 0 auto; width: min(46vw, calc(100dvh - var(--gt) - var(--gb) + 10px)); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.home-layer .te-toolbar { display: flex; align-items: center; gap: 3px; padding: 5px 6px; border-bottom: 1px solid var(--te-line); overflow-x: auto; scrollbar-width: none; }
.home-layer .te-toolbar::-webkit-scrollbar { display: none; }
.home-layer .te-tool { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 40px; padding: 3px 4px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--te-muted); font-size: 9px; }
.home-layer .te-tool.is-on { background: #f26d8f2e; border-color: #ff8fb18c; color: var(--te-accent); }
.home-layer .te-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-layer .te-gap { flex: 1; }
.home-layer .te-small { flex: none; min-height: 28px; min-width: 28px; padding: 0 7px; border: 1px solid var(--te-line); border-radius: 8px; background: var(--te-field); color: var(--te-text); font-size: 11px; }
.home-layer .te-small.is-on { border-color: #ff8fb199; color: var(--te-accent); }
.home-layer .te-small:disabled { opacity: .4; }
.home-layer .te-zoom { flex: none; min-width: 34px; text-align: center; font-size: 10px; color: var(--te-muted); }
.home-layer .te-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; padding: 10px; -webkit-overflow-scrolling: touch; }
.home-layer .te-frame { position: relative; flex: none; margin: auto; aspect-ratio: 1; background-color: #cfd3dc; background-image: linear-gradient(45deg, #bfc4cf 25%, transparent 25%, transparent 75%, #bfc4cf 75%), linear-gradient(45deg, #bfc4cf 25%, transparent 25%, transparent 75%, #bfc4cf 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; border-radius: 4px; overflow: hidden; }
.home-layer .te-view, .home-layer .te-grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-layer .te-view { touch-action: none; cursor: crosshair; }
.home-layer .te-grid { pointer-events: none; transition: opacity .15s; }
.home-layer .te-cursor { position: absolute; pointer-events: none; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #0008; transform: translate(-50%, -50%); }
.home-layer .te-status { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 7px 10px; border-radius: 9px; background: #000000b3; color: #fff; font-size: 11px; text-align: center; pointer-events: none; }
.home-layer .te-side { flex: 0 0 auto; width: min(270px, 30vw); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.home-layer .te-title { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 8px; border-bottom: 1px solid var(--te-line); font-size: 13px; font-weight: 700; }
.home-layer .te-title small { font-size: 10px; font-weight: 400; color: var(--te-muted); }
.home-layer .te-options { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.home-layer .te-group { display: flex; flex-direction: column; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--te-line); }
.home-layer .te-group-title { font-size: 11px; font-weight: 700; color: var(--te-muted); }
.home-layer .te-color-row { display: flex; align-items: center; gap: 6px; }
.home-layer .te-color-row input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--te-line); border-radius: 8px; background: none; }
.home-layer .te-hex { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--te-line); border-radius: 8px; background: var(--te-field); color: var(--te-text); font: 12px ui-monospace, monospace; -webkit-user-select: text; user-select: text; }
.home-layer .te-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.home-layer .te-swatch { aspect-ratio: 1; padding: 0; border: 1px solid #ffffff40; border-radius: 6px; }
.home-layer .te-slider { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.home-layer .te-slider-head { display: flex; justify-content: space-between; color: var(--te-muted); }
.home-layer .te-slider-head b { color: var(--te-text); font-weight: 600; }
.home-layer .te-slider input { width: 100%; accent-color: #f26d8f; }
.home-layer .te-segmented { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--te-field); }
.home-layer .te-segmented button { flex: 1; min-height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--te-muted); font-size: 11px; }
.home-layer .te-segmented .is-on { background: #f26d8f; color: #fff; }
.home-layer .te-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--te-text); }
.home-layer .te-check input { accent-color: #f26d8f; }
.home-layer .te-hint { margin: 0; font-size: 10px; line-height: 1.5; color: var(--te-muted); }
.home-layer .te-row { display: flex; gap: 6px; }
.home-layer .te-row > * { flex: 1; }
.home-layer .te-primary, .home-layer .te-secondary { min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
.home-layer .te-primary { border: 0; background: #f26d8f; color: #fff; font-weight: 700; }
.home-layer .te-primary:disabled { opacity: .5; }
.home-layer .te-secondary { border: 1px solid var(--te-line); background: var(--te-field); color: var(--te-text); }
.home-layer .te-footer { display: flex; flex-direction: column; gap: 7px; padding: 9px 12px; border-top: 1px solid var(--te-line); }
.home-layer .te-name { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--te-muted); }
.home-layer .te-name input { height: 32px; padding: 0 9px; border: 1px solid var(--te-line); border-radius: 8px; background: var(--te-field); color: var(--te-text); font-size: 13px; -webkit-user-select: text; user-select: text; }
.home-layer .te-footer-row { display: flex; gap: 6px; }
.home-layer .te-footer-row > * { flex: 1; }
.home-layer .te-fallback { align-items: center; justify-content: center; flex-direction: column; background: #16141ef0; }

@media (max-height: 520px) {
  .home-layer .dr-side { top: calc(var(--gt) + 46px); }
  .home-layer .dr-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px; }
  .home-layer .dr-enter { min-height: 42px; padding: 0 16px; font-size: 14px; }
  .home-layer .te-title { padding: 7px 10px 5px; }
  .home-layer .te-group { padding: 7px 10px; gap: 5px; }
  .home-layer .te-footer { padding: 7px 10px; gap: 5px; }
  .home-layer .te-swatches { grid-template-columns: repeat(12, 1fr); gap: 3px; }
}

/* ==================== moba.css ==================== */
.app-layer.moba-layer { padding: 0 !important; background: #bfe9ff; }
html.moba-immersive .system-nav,
html.moba-immersive .system-island { display: none; }
html.moba-immersive .app-layer.moba-layer { bottom: 0; }
.moba-layer .moba-frame { display: block; width: 100%; height: 100%; border: 0; }
.moba-layer .moba-rotate { display: none; }
@media (orientation: portrait) {
  .moba-layer .moba-frame { visibility: hidden; }
  .moba-layer .moba-rotate {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #bfe9ff;
    color: #4a3b5c;
    font-size: 20px;
    font-weight: 700;
  }
}

/* ==================== sound.css ==================== */
/* 有声 · inherit Moonlit's paper palette and theme variables */
.sound-app{height:100%;min-height:0;display:flex;flex-direction:column;color:var(--ink);background:var(--screen-bg)}
.sound-app button,.sound-app input,.sound-app select{font:inherit;color:inherit}
.sound-app button{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 14px}
.sound-app button:disabled{opacity:.5;cursor:wait}
.sound-app button:focus-visible,.sound-app a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sound-content{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 22px;overscroll-behavior:contain}
.sound-content h2{font-size:21px;margin:6px 0 18px}.sound-muted,.sound-content p{color:var(--ink-mute);line-height:1.7;font-size:13px}
.sound-hero{position:relative;padding:22px 20px 28px;margin-bottom:20px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(130deg,var(--card),var(--surface-2));overflow:hidden}
.sound-eyebrow{font-size:10px;letter-spacing:2px;color:var(--ink-mute)}.sound-hero h1{font-size:22px;line-height:1.5;margin:12px 0 7px;font-weight:600}.sound-hero p{margin:0}.sound-hero-wave{display:block;letter-spacing:8px;color:var(--accent);opacity:.7;margin-top:20px;font-size:22px;line-height:1}
.sound-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.sound-pills button{padding:9px 15px;border-radius:20px;font-size:13px}.sound-pills button.on,.sound-tabs button.on{background:var(--surface-2);color:var(--accent);font-weight:600;border-color:var(--line-strong)}
.sound-search{display:flex;gap:8px;margin-bottom:12px}.sound-search input,.sound-source-form input,.sound-source-form select{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px;width:100%;min-width:0}.sound-search input{flex:1}.sound-search button{flex-shrink:0}.sound-topics button{font-size:11px;padding:7px 11px;color:var(--ink-mute)}
.sound-section-title{display:flex;align-items:center;justify-content:space-between;margin:23px 0 12px;gap:12px;font-size:14px}.sound-section-title small{font-size:10px;color:var(--ink-mute)}
.sound-app .sound-show{width:100%;display:flex;align-items:center;gap:13px;text-align:left;margin-bottom:10px;padding:12px;border-radius:17px}.sound-show>span:not(.sound-chevron){flex:1;min-width:0}.sound-show strong,.sound-now strong{display:block;font-size:14px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-show small,.sound-now small{display:block;font-size:11px;color:var(--ink-mute);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-chevron{color:var(--ink-mute);font-size:20px}
.sound-cover{width:54px;height:54px;flex-shrink:0;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;color:var(--accent)}.sound-cover img{width:100%;height:100%;object-fit:cover}.sound-cover svg{width:27px;height:27px}
.sound-empty{display:flex;align-items:center;flex-direction:column;text-align:center;gap:14px;padding:36px 15px;color:var(--ink-mute)}.sound-empty svg{width:38px;height:38px;opacity:.6}.sound-empty strong{font-size:14px;color:var(--ink)}.sound-empty p{font-size:12px;margin:0;max-width:250px}
.sound-show-heading{text-align:center;padding:12px 0}.sound-show-heading .sound-cover{margin:0 auto 18px;width:102px;height:102px;border-radius:24px}.sound-show-heading .sound-cover svg{width:46px;height:46px}.sound-show-heading h2{margin:12px 0 4px;font-size:22px;line-height:1.5;overflow-wrap:anywhere}.sound-show-heading p{margin:0 0 16px}.sound-show-heading a,.sound-source-links a{display:block;color:var(--ink-mute);font-size:11px;margin-top:14px;text-decoration:none}
.sound-row{display:flex;gap:10px;justify-content:center}.sound-description{font-size:12px;background:var(--card);padding:13px;border:1px solid var(--line);border-radius:12px;margin-top:12px}.sound-description p{overflow-wrap:anywhere}.sound-track{display:flex;align-items:center;border-bottom:1px solid var(--line);gap:4px;padding:5px 0}.sound-track.selected{background:var(--surface-2);border-radius:13px}.sound-app .sound-track-main{display:flex;align-items:center;gap:10px;text-align:left;flex:1;min-width:0;background:none;border:0;padding:13px 7px}.sound-track-main>span:last-child{flex:1;min-width:0}.sound-track-main strong{font-size:13px;font-weight:500;line-height:1.6;display:block;overflow-wrap:anywhere}.sound-track-main small{display:block;font-size:10px;line-height:1.5;color:var(--ink-mute);margin-top:5px}.sound-track-icon svg{width:18px;height:18px;opacity:.6}.sound-app .sound-star{background:none;border:0;padding:12px;font-size:20px}.sound-star.on{color:var(--accent)}
.sound-source-form{display:grid;gap:15px;margin:22px 0}.sound-source-form label{display:grid;gap:8px;font-size:12px}.sound-source-info{border:1px solid var(--line);background:var(--card);padding:18px;border-radius:20px;font-size:13px}.sound-source-info p{margin:5px 0 16px;font-size:12px}.sound-source-info small{color:var(--ink-mute);font-size:11px}
.sound-notice{font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px;line-height:1.6;overflow-wrap:anywhere}.sound-notice.error{color:var(--ink)}.sound-notice button{padding:4px 9px;margin-left:5px}
.sound-player{flex-shrink:0;padding:10px 18px 8px;border-top:1px solid var(--line);background:var(--card);box-shadow:0 -5px 24px #00000005;max-height:58%;overflow-y:auto}.sound-app .sound-now{display:flex;align-items:center;gap:11px;padding:0;width:100%;border:0;background:none;text-align:left}.sound-now>span:first-of-type{flex:1;min-width:0}.sound-now .sound-cover{width:38px;height:38px;border-radius:10px}.sound-now strong{font-size:12px}.sound-now small{font-size:10px}.sound-player-extra{padding:8px 0;font-size:11px}.sound-player-extra p{font-size:12px;color:var(--ink-mute);line-height:1.6;max-height:70px;overflow-y:auto;overflow-wrap:anywhere}.sound-player-extra label{flex:1}.sound-player-extra select{display:block;width:100%;background:var(--surface);padding:8px;border:1px solid var(--line);border-radius:10px;margin-top:5px}.sound-check{display:flex;gap:6px;align-items:center;margin:12px 0}.sound-player-status{font-size:10px;color:var(--ink-mute);line-height:1.5;margin:4px 0}.sound-player-status:empty{display:none}.sound-progress{width:100%;height:16px;margin-top:8px;accent-color:var(--accent)}.sound-times{display:flex;justify-content:space-between;font-size:9px;color:var(--ink-mute)}.sound-transport{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:4px}.sound-app .sound-transport button{border:0;background:none;font-size:13px;padding:9px;min-width:35px}.sound-app .sound-transport .sound-play{width:42px;height:42px;border-radius:50%;background:var(--surface-2);color:var(--accent);font-size:17px}.sound-tabs{display:flex;gap:8px;padding:8px 18px 12px;flex-shrink:0;background:var(--card);border-top:1px solid var(--line)}.sound-tabs button{flex:1;background:none;border:0;font-size:12px;padding:9px}
.sound-show-heading{display:grid;grid-template-columns:72px minmax(0,1fr);gap:5px 15px;text-align:left;padding:4px 0}
.sound-show-heading .sound-cover{grid-column:1;grid-row:1/4;margin:0;width:72px;height:72px;border-radius:18px}
.sound-show-heading>.sound-eyebrow,.sound-show-heading>h2,.sound-show-heading>p{grid-column:2;margin:0}
.sound-show-heading>h2{font-size:21px}.sound-show-heading>.sound-row{grid-column:1/-1;justify-content:flex-start;margin-top:12px}
.sound-show-heading>a{grid-column:1/-1;margin-top:8px}.sound-show-heading .sound-eyebrow{align-self:end;font-size:9px;letter-spacing:1px}
.sound-mini{position:relative;flex-shrink:0;display:flex;align-items:center;gap:2px;padding:8px 8px 8px 14px;background:var(--card);border-top:1px solid var(--line)}
.sound-mini-bar{position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent}.sound-mini-bar b{display:block;height:100%;width:0;background:var(--accent);border-radius:0 2px 2px 0;transition:width .3s linear}
.sound-mini .sound-now{flex:1;min-width:0}.sound-mini .sound-cover{width:40px;height:40px;border-radius:10px}.sound-mini .sound-now strong{font-size:13px;font-weight:600}
.sound-app .sound-icon{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;border-radius:50%;color:var(--ink)}.sound-icon svg{width:24px;height:24px}.sound-icon.on{color:#e5484d}
.sound-app .sound-transport button svg{width:22px;height:22px;display:block;margin:auto}.sound-app .sound-transport .sound-play svg{width:24px;height:24px}
.sound-np{display:flex;flex-direction:column;align-items:stretch;padding:6px 4px 10px}
.sound-np .sound-np-cover{width:min(62vw,240px);height:min(62vw,240px);margin:6px auto 18px;border-radius:24px;box-shadow:0 14px 34px #0000001a}.sound-np .sound-np-cover svg{width:72px;height:72px}
.sound-np>.sound-eyebrow{text-align:center;letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-np>h2{text-align:center;font-size:19px;line-height:1.5;margin:6px 0 10px;overflow-wrap:anywhere}
.sound-np .sound-progress{margin-top:6px}.sound-np .sound-times{font-size:10px}.sound-np .sound-transport{justify-content:space-around;margin:8px 0 14px}.sound-app .sound-np .sound-transport .sound-play{width:58px;height:58px}
.sound-np-tools{display:flex;align-items:flex-end;gap:12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.sound-np-tools label{flex:1;display:grid;gap:5px;font-size:11px;color:var(--ink-mute)}.sound-np-tools select{width:100%;background:var(--surface);padding:8px;border:1px solid var(--line);border-radius:10px}
.sound-app .sound-np-tools .sound-icon{width:auto;height:auto;gap:3px;border-radius:12px;padding:2px 6px;color:var(--ink-mute)}.sound-np-tools .sound-icon.on{color:#e5484d}.sound-np-tools .sound-icon small{font-size:10px}
.sound-np .sound-check{font-size:12px;margin:12px 2px 4px}.sound-sleep{font-size:11px;color:var(--ink-mute);margin:0 2px}.sound-sleep:empty{display:none}
@media(max-width:340px){.sound-content{padding:12px}.sound-hero{padding:18px 14px}.sound-hero h1{font-size:19px}.sound-player{padding:8px 12px}.sound-row{gap:6px}}

/* ==================== ludo.css ==================== */
/* 飞行棋（38_ludo）。注意：.ld-app 直接加在外壳的 .app-layer 上（absolute inset:0 + flex 列），
   经典导航键开启时外壳会改它的 bottom 预留导航栏；这里不能写 height:100%，否则底部聊天输入框会钻到导航键下面。 */
.ld-app{display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,#f3f7fb 0%,#f7f3ec 60%);color:#514d46;font-size:13px;overflow:hidden}.ld-app button,.ld-app input,.ld-app select{font:inherit}.ld-app button{border:0;border-radius:12px;padding:9px 12px;background:#ebe7dd;color:#514d46;cursor:pointer}.ld-app button:disabled{cursor:default;opacity:.5}.ld-app button:focus-visible,.ld-app input:focus-visible,.ld-app select:focus-visible{outline:2px solid #45a990;outline-offset:2px}
.ld-header{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #e6e0d5;flex:none;background:#fffdf8cc;backdrop-filter:blur(8px)}.ld-header>div{flex:1}.ld-header strong{font-size:17px}.ld-header small{display:block;font-size:10px;color:#a09788;margin-top:2px}.ld-header>button:first-child{font-size:26px;padding:0 12px}
.ld-main{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}.ld-home{padding:16px;max-width:540px;margin:auto}.ld-hero{text-align:center;padding:12px 0 18px}.ld-hero>span{display:block;font-size:48px;color:#6399d9;transform:rotate(-15deg)}.ld-hero h2{font-size:22px;margin:10px}.ld-hero p,.ld-card p{color:#9a9082;font-size:12px;line-height:1.8}.ld-card{background:#fffdf8;border:1px solid #eae3d8;border-radius:20px;padding:16px;margin-bottom:14px}.ld-card h3{margin:0 0 14px;font-size:16px}.ld-card label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.ld-card label[hidden]{display:none}.ld-card select,.ld-join input{min-width:0;max-width:72%;border:1px solid #e8e2d8;background:#f8f6f0;border-radius:10px;padding:8px}.ld-primary{background:#45a990!important;color:white!important;width:100%;margin-top:8px}.ld-card>button:not(.ld-primary){width:100%;margin-top:8px}.ld-join{display:flex;gap:8px;margin-top:12px}.ld-join input{flex:1;width:0;letter-spacing:2px}.ld-source{display:block;text-align:center;color:#a09788;line-height:1.8;padding:10px}.ld-source a{color:#7b9caa}
.ld-table{padding:10px 12px;max-width:600px;margin:auto}
.ld-seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px}.ld-seat{display:flex;align-items:center;gap:8px;padding:7px;border-radius:14px;border:1.5px solid transparent;background:#fffdf8;min-width:0;box-shadow:0 1px 6px #6b5a3a0d;transition:border-color .2s,box-shadow .2s}.ld-seat.active{border-color:var(--piece);box-shadow:0 0 0 3px color-mix(in srgb,var(--piece) 16%,transparent)}.ld-seat i{font-style:normal;width:26px;height:26px;background:var(--piece);color:white;border-radius:9px;display:grid;place-items:center;flex:none;font-weight:700}.ld-seat span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ld-seat small,.ld-turn small{display:block;font-size:10px;color:#a09788;margin-top:2px}.ld-turn small:empty{display:none}
.ld-board{position:relative;width:100%;max-width:440px;margin:auto;aspect-ratio:1;border-radius:24px;box-shadow:0 6px 22px #5a6e8a1f,0 0 0 1px #ffffff inset}.ld-board svg{width:100%;height:100%;display:block}
.ld-board .ld-piece{position:absolute;padding:0;min-width:0;width:6.6%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--piece) 70%,white),var(--piece) 55%,var(--deep,var(--piece)));color:white;box-shadow:0 3px 6px #3c302a55;border:2px solid white;transform:translate(-50%,-50%);transition:left .22s cubic-bezier(.3,1.4,.6,1),top .22s cubic-bezier(.3,1.4,.6,1);z-index:2;opacity:1}
.ld-board .ld-piece svg{width:70%;height:70%;filter:drop-shadow(0 1px 0 #0003)}
.ld-board .ld-piece::after{content:attr(data-n);position:absolute;right:-22%;bottom:-18%;min-width:46%;height:46%;padding:0 2px;border-radius:999px;background:white;color:var(--deep,var(--piece));font-size:clamp(7px,1.9vw,10px);font-weight:800;line-height:1;display:grid;place-items:center;box-shadow:0 1px 2px #0003}
.ld-board .ld-piece:disabled{opacity:1}.ld-piece.selectable{z-index:4;animation:ld-pick 0.9s ease-in-out infinite}.ld-piece.finished{background:white;color:var(--piece);border-color:var(--piece)}.ld-piece.left{opacity:.35!important}
.ld-roll-pop{position:absolute;left:50%;top:50%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6)}.ld-roll-pop.show{animation:ld-pop 1.6s ease .6s forwards}.ld-roll-pop b{font-size:12px;color:#fff;background:var(--piece);padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 10px #0002}
.ld-event{list-style:none;padding:0;margin:10px 2px 6px;min-height:48px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}.ld-event li{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.5;color:#b0a696}.ld-event li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot,#c9bfae);flex:none;opacity:.6}.ld-event li.now{font-size:13px;color:#5c5548;font-weight:600}.ld-event li.now::before{opacity:1;width:8px;height:8px}
.ld-turn{display:flex;align-items:center;gap:10px;background:#fffdf8;padding:8px 10px 8px 14px;border-radius:18px;border:1.5px solid #ece5d9;box-shadow:0 2px 10px #6b5a3a0f;transition:border-color .2s}.ld-turn>span{flex:1;min-width:0;font-weight:600}.ld-turn.mine{border-color:var(--piece);background:color-mix(in srgb,var(--piece) 7%,#fffdf8)}.ld-turn-dot{width:10px;height:10px;border-radius:50%;background:var(--piece);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--piece) 20%,transparent)}.ld-turn.mine .ld-turn-dot{animation:ld-beat 1.2s infinite}
.ld-app .ld-dice{padding:0;width:62px;height:62px;border-radius:16px;background:none;flex:none;display:grid;place-items:center;overflow:visible}.ld-app .ld-dice:disabled{opacity:1;filter:saturate(.75) brightness(.97)}.ld-turn.mine .ld-dice:not(:disabled):not(.rolling){animation:ld-nudge 1.6s ease-in-out infinite}.ld-app .ld-dice{perspective:420px;transition:transform .2s}.ld-app .ld-dice.rolling{transform:translateY(-6px)}
/* 实心 3D 骰子：6 个不透明面 + 中心 3 片正交填充板（挡住圆角缝隙，翻转时不会像纸片） */
.ld-cube-wrap{--s:38px;--h:calc(var(--s) / 2);display:block;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(22deg)}
.ld-cube{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.ld-cube-side,.ld-cube-core{position:absolute;inset:0;display:block;backface-visibility:hidden}
.ld-cube-core{background:#e6ddcc;backface-visibility:visible;border-radius:12%}
.ld-cube-side .ld-die-face{padding:16%;gap:0;border-radius:18%;background:radial-gradient(circle at 30% 25%,#ffffff,#f3eee4 70%,#e7dfd0);box-shadow:inset 0 0 0 1px #d8cfbf,inset 0 -2px 4px #c9bfae66}
.ld-cube-side .ld-die-face i{width:72%}
.ld-roll-pop .ld-cube-wrap{--s:60px}.ld-roll-pop{perspective:500px}
.ld-die-face{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:9px;gap:2px;box-sizing:border-box;border-radius:16px;background:linear-gradient(145deg,#ffffff,#efe9de);box-shadow:inset 0 -3px 0 #d9d0c1,0 4px 10px #4b3d2a26}.ld-die-face i{width:78%;aspect-ratio:1;border-radius:50%;place-self:center;background:transparent}.ld-die-face i.on{background:radial-gradient(circle at 35% 30%,#6a6255,#2f2a24)}.ld-die-face[data-value="1"] i.on{background:radial-gradient(circle at 35% 30%,#f08a95,#c9414f);width:95%}
.ld-room-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;font-size:11px}.ld-room-bar span{flex:1}.ld-room-bar button{padding:6px;font-size:10px}.ld-room-bar b{letter-spacing:2px}.ld-error{color:#b45e66;font-size:11px}.ld-lobby{text-align:center;padding:36px 12px}.ld-lobby p{line-height:1.8;color:#a09788}.ld-lobby button{margin-top:10px}
.ld-chat{flex:none;border-top:1px solid #e6e0d5;background:#fffdf8;padding:6px 12px 10px;box-shadow:0 -4px 16px #6b5a3a0d}.ld-chat[hidden]{display:none}.ld-chat-title{display:flex;align-items:center;justify-content:space-between;color:#9a9082;font-size:11px;font-weight:600;margin-bottom:2px}.ld-chat-title select{border:0;background:none;color:#918474;font-size:11px;max-width:65%}.ld-messages{height:64px;overflow:auto;overscroll-behavior:contain}.ld-message{display:flex;align-items:baseline;gap:7px;margin:4px 0;font-size:12px;line-height:1.6}.ld-message b{color:#8f9c9b;font-size:10px;flex:none;max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ld-message span{overflow-wrap:anywhere}.ld-message.mine b{color:#45a990}
.ld-composer{display:flex;gap:8px;margin-top:6px}.ld-composer input{flex:1;width:0;border:1.5px solid #e2dbcf;border-radius:20px;background:#f8f6f0;padding:9px 14px;font-size:14px}.ld-composer input:focus{border-color:#45a990;background:#fff}.ld-app .ld-composer button{background:#45a990;color:white;font-size:13px;border-radius:20px;padding:9px 16px}
.ld-app:has(.ld-composer input:focus) .ld-messages{height:48px}
.ld-options{display:flex;gap:6px;margin-top:8px}.ld-options button{flex:1;min-height:40px;font-size:12px;background:#e2f1eb;font-weight:600;color:#2f7a66}
@keyframes ld-pick{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 3px 6px #3c302a55,0 0 0 0 color-mix(in srgb,var(--piece) 60%,transparent)}50%{transform:translate(-50%,-62%) scale(1.12);box-shadow:0 8px 10px #3c302a33,0 0 0 6px color-mix(in srgb,var(--piece) 0%,transparent)}}
@keyframes ld-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-20deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(4deg)}30%{transform:translate(-50%,-50%) scale(1) rotate(0)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(.92)}}
@keyframes ld-beat{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--piece) 6%,transparent)}}
@keyframes ld-nudge{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-10deg)}90%{transform:rotate(9deg)}95%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.ld-app *{animation:none!important;transition:none!important}}
@media(max-height:640px){.ld-messages{height:44px}.ld-header{padding:6px 12px}.ld-table{padding:6px 12px}.ld-seats{gap:4px;margin-bottom:6px}.ld-event{min-height:32px;margin:6px 2px 4px}.ld-event li:not(.now){display:none}.ld-app .ld-dice{width:50px;height:50px}}
/* 月影岛联机：房间名 / 公开开关 / 带角色入座 / 围观 / 角色发言标注 */
.ld-card label input[data-title]{min-width:0;max-width:72%;flex:1;border:1px solid #e8e2d8;background:#f8f6f0;border-radius:10px;padding:8px}.ld-check input{width:20px;height:20px;accent-color:#45a990}.ld-tip{margin:10px 0 0;font-size:11px!important}
.ld-flash{animation:ld-flash 1.4s ease 2}@keyframes ld-flash{50%{box-shadow:0 0 0 4px #45a99055}}
.ld-room-bar strong{display:block;font-size:13px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-seat em,.ld-message em{font-style:normal;font-size:9px;color:#d0738a;margin-left:4px;font-weight:600}.ld-seat em{display:block;margin:1px 0 0}.ld-seat.pal{background:linear-gradient(135deg,#fffdf8,#fdf1f3)}
.ld-message.pal b{color:#d0738a;max-width:140px}.ld-message.pal span{color:#6b5560}
.ld-pal-row{display:flex;align-items:center;gap:8px;justify-content:center;margin:4px auto 6px;max-width:340px;background:#fdf1f3;border-radius:14px;padding:6px 6px 6px 12px;color:#b25d72;font-size:12px}.ld-pal-row span{flex:1;text-align:left}.ld-pal-row select{flex:1;min-width:0;border:1px solid #f0d5dc;background:#fff;border-radius:10px;padding:7px}.ld-app .ld-pal-row button{margin:0;background:#d0738a;color:#fff;padding:7px 10px;font-size:12px}
.ld-composer input:disabled{opacity:.6}

/* ==================== comic.css ==================== */
.comic-app{--bg:var(--surface);--muted:var(--ink-mute);height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-size:14px;overflow:hidden}
.comic-content{flex:1;min-height:0;overflow:auto;padding:16px;overscroll-behavior:contain}
.comic-app h1{font-size:23px;line-height:1.35;margin:8px 0 12px}.comic-app button,.comic-app select,.comic-app input{font:inherit;color:inherit}
.comic-app button{cursor:pointer}.comic-app button:disabled{opacity:.45;cursor:default}
.comic-hero{position:relative;padding:22px 20px;border-radius:24px;background:linear-gradient(130deg,var(--card),color-mix(in srgb,var(--accent) 18%,var(--card)));margin-bottom:18px;overflow:hidden}.comic-hero small{font-size:10px;letter-spacing:2px;color:var(--muted)}.comic-hero h1{font-size:25px;max-width:85%;margin:12px 0}.comic-hero p{color:var(--muted);font-size:12px}.comic-hero>span{position:absolute;right:15px;bottom:2px;font-size:70px;color:var(--accent);opacity:.2}
.comic-search{display:flex;gap:8px}.comic-search input{min-width:0;flex:1;padding:12px;border:1px solid var(--line);background:var(--card);border-radius:12px}.comic-search button,.comic-continue{border:0;background:var(--accent);color:white;border-radius:12px;padding:10px 15px}.comic-section{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:20px 0 14px}.comic-section select{max-width:50%;border:1px solid var(--line);border-radius:10px;padding:7px;background:var(--card)}
.comic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}.comic-card{background:none;border:0;text-align:left;min-width:0;padding:0;display:flex;flex-direction:column;gap:5px}.comic-card strong{font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.comic-card small{font-size:10px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%}
.comic-cover{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(140deg,var(--card),color-mix(in srgb,var(--accent) 15%,var(--card)));border-radius:12px;width:100%;border:1px solid var(--line)}.comic-cover img{width:100%;height:100%;object-fit:cover}.comic-cover svg{width:34px;height:34px;color:var(--accent)}
.comic-tabs{display:flex;flex-shrink:0;border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--card);gap:8px}.comic-tabs button{flex:1;border:0;background:none;padding:10px;border-radius:12px;color:var(--muted)}.comic-tabs button.on,.comic-pills button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.comic-pills,.comic-reader-options{display:flex;gap:8px;margin:12px 0}.comic-pills button,.comic-pill{border:1px solid var(--line);padding:8px 13px;background:var(--card);border-radius:100px}.comic-pill.on{color:var(--accent)}.comic-more{display:block;width:100%;border:1px solid var(--line);background:var(--card);padding:12px;border-radius:12px;margin:16px 0}.comic-muted{color:var(--muted);font-size:12px;line-height:1.8}
.comic-detail-head{display:flex;gap:16px;align-items:flex-start}.comic-detail-head .comic-cover{width:100px;flex-shrink:0}.comic-detail-head h1{font-size:21px;overflow-wrap:anywhere}.comic-detail-head p,.comic-detail-head small{color:var(--muted);font-size:12px}.comic-intro{margin:20px 0;padding:12px;background:var(--card);border-radius:12px}.comic-intro p{white-space:pre-line;color:var(--muted);font-size:12px;line-height:1.8;max-height:230px;overflow:auto}.comic-continue{display:block;width:100%;margin:10px 0;text-align:left;font-size:12px!important}
.comic-chapters{display:flex;flex-direction:column}.comic-chapters button{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;font-size:12px}.comic-chapters button span{min-width:0;overflow-wrap:anywhere}.comic-chapters button small{flex-shrink:0;color:var(--muted)}
.comic-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:38px 16px;gap:12px}.comic-empty svg{width:44px;height:44px;color:var(--accent);opacity:.65}.comic-empty p{color:var(--muted);font-size:12px;line-height:1.8;margin:0}.comic-notice{border-radius:10px;padding:10px;background:var(--card);font-size:12px;margin-bottom:12px;overflow-wrap:anywhere}.comic-notice button{background:none;border:0;color:var(--accent)}
.comic-source{position:relative;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px;text-align:left}.comic-source.on{border-color:var(--accent)}.comic-source small{color:var(--muted);font-size:11px}.comic-source span{position:absolute;top:16px;right:12px;font-size:11px;color:var(--accent)}
.comic-reader-title{display:flex;flex-direction:column;gap:5px}.comic-reader-title small{color:var(--muted);font-size:11px}.comic-reader-options{position:sticky;top:-16px;z-index:1;background:var(--bg);padding:8px 0}.comic-reader-options button{font-size:11px}.comic-pages.strip{display:flex;flex-direction:column;gap:0}.comic-image{margin:0;min-height:160px;position:relative;background:var(--card);display:flex;align-items:center;justify-content:center}.comic-image img{display:block;width:100%;height:auto;min-height:160px;object-fit:contain}.comic-pages.page img{max-height:65vh}.comic-image-retry{position:absolute;top:45%;border:0;border-radius:12px;padding:12px;background:var(--card);color:var(--accent)!important}.comic-image-retry[hidden]{display:none}
.comic-reader-bar,.comic-chapter-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;flex-shrink:0;background:var(--card);border-top:1px solid var(--line);font-size:12px}.comic-reader-bar button,.comic-chapter-bar button{border:0;background:none;padding:8px}.comic-chapter-bar{padding-top:0;padding-bottom:calc(8px + env(safe-area-inset-bottom));border-top:0}.comic-app.night{--bg:#17191e;--card:#23262d;--ink:#ebedf1;--ink-strong:#ebedf1;--muted:#a1a7b1;--line:#363b45}
@media(max-width:340px){.comic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.comic-content{padding:12px}.comic-detail-head .comic-cover{width:80px}}

/* ==================== play-companion.css ==================== */
/* ===========================================================
   陪玩角色（packages/portable/src/play-companion.ts）
   台球 / 斗地主 / 萌萌moba / 小小家园共用：头像停靠栏 + 说话气泡 + 顶部输入条 + 选人面板。
   整层不吃触摸，只有按钮、气泡与面板可点，避免挡住下面的游戏。
   =========================================================== */

.pc-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  --pc-glass: rgba(18, 22, 30, 0.74);
  --pc-line: rgba(255, 255, 255, 0.18);
  --pc-ink: #f4f6fb;
  --pc-accent: #ffd37a;
}

.pc-dock,
.pc-composer,
.pc-sheet {
  pointer-events: auto;
}

/* ---------- 停靠栏 ---------- */
.pc-dock {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 6px;
}

.pc-dock button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--pc-line);
  border-radius: 18px;
  color: var(--pc-ink);
  background: var(--pc-glass);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pc-dock button:active { filter: brightness(1.25); }
.pc-dock svg { width: 18px; height: 18px; }
.pc-dock .pc-btn { width: 36px; padding: 0; justify-content: center; }
.pc-dock .pc-invite { padding: 0 12px 0 10px; }

.pc-mate img,
.pc-mate i,
.pc-pick img,
.pc-pick i {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.pc-mate i,
.pc-pick i {
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-style: normal;
  font-size: 13px;
}
.pc-mate span { max-width: 6em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 左侧竖排（台球：右上角是游戏工具栏，左上角是退出键） */
.pc-left .pc-dock {
  top: calc(max(10px, env(safe-area-inset-top)) + 50px);
  right: auto;
  left: max(10px, env(safe-area-inset-left));
  flex-direction: column;
  align-items: flex-start;
}
.pc-left .pc-bubbles {
  top: calc(max(10px, env(safe-area-inset-top)) + 50px);
  right: auto;
  left: calc(max(10px, env(safe-area-inset-left)) + 150px);
  align-items: flex-start;
}

/* 斗地主：左右上角是两个座位头像，停靠栏放在顶部「房间号」右侧 */
.pc-landlord .pc-dock {
  top: 6px;
  right: auto;
  left: calc(50% + 70px);
}

/* 萌萌moba：左上头像、右上小地图与按钮，停靠栏放比分下面 */
.pc-moba .pc-dock {
  top: calc(max(8px, env(safe-area-inset-top)) + 44px);
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.pc-moba .pc-bubbles {
  top: calc(max(8px, env(safe-area-inset-top)) + 88px);
  right: auto;
  left: 50%;
  align-items: center;
  transform: translateX(-50%);
}

/* 小小家园：右上角 ☰ 菜单左边；浅色界面 */
.pc-home .pc-dock {
  top: var(--gt, 12px);
  right: calc(var(--gr, 12px) + 52px);
}
.pc-home .pc-dock button {
  border-color: #e8e9df;
  color: #4b514a;
  background: #ffffffdd;
}

/* ---------- 气泡 ---------- */
.pc-bubbles {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 46px);
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: min(46vw, 320px);
}

.pc-bubble {
  position: relative;
  padding: 7px 11px 8px;
  border-radius: 14px;
  color: #2b2833;
  background: #fffdf7;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  line-height: 1.45;
  animation: pc-pop 0.22s ease-out;
}
.pc-bubble b {
  display: block;
  margin-bottom: 1px;
  color: #a0743a;
  font-size: 11px;
  font-weight: 700;
}
.pc-bubble.typing span { letter-spacing: 3px; color: #9a94a6; }
.pc-bubble[hidden] { display: none; }

/* 锚在角色身上：气泡层铺满，气泡按锚点绝对定位，尖角指向锚点 */
.pc-anchored .pc-bubbles {
  inset: 0;
  display: block;
  max-width: none;
  pointer-events: none;
}
.pc-bubble.anchored {
  position: absolute;
  transform: translateY(calc(-100% - 12px));
}
.pc-bubble.anchored::after {
  content: "";
  position: absolute;
  left: calc(var(--pc-shift, 50%) - 7px);
  bottom: -7px;
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: #fffdf7;
}
.pc-bubble.anchored.flip { transform: translateY(12px); }
.pc-bubble.anchored.flip::after {
  top: -7px;
  bottom: auto;
  border: 7px solid transparent;
  border-top: 0;
  border-bottom-color: #fffdf7;
}

@keyframes pc-pop {
  from { opacity: 0; scale: 0.92; }
  to { opacity: 1; scale: 1; }
}

/* ---------- 输入条（放顶部：横屏键盘在下方） ---------- */
.pc-composer {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  gap: 6px;
  width: min(560px, calc(100% - 32px));
  padding: 6px;
  border: 1px solid var(--pc-line);
  border-radius: 14px;
  background: var(--pc-glass);
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.pc-composer[hidden] { display: none; }
.pc-composer input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  color: #2b2833;
  background: #fffdf7;
  font: inherit;
  font-size: 15px;
  outline: none;
}
.pc-composer button,
.pc-card button {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  color: #2b2833;
  background: var(--pc-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pc-composer .pc-ghost,
.pc-card .pc-ghost {
  color: var(--pc-ink);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 400;
}

/* ---------- 面板（选人 / 记录） ---------- */
.pc-sheet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(8, 10, 16, 0.45);
}
.pc-sheet[hidden] { display: none; }

.pc-card {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: calc(100% - 8px);
  border: 1px solid var(--pc-line);
  border-radius: 18px;
  color: var(--pc-ink);
  background: rgba(22, 26, 36, 0.94);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.pc-card header,
.pc-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}
.pc-card header b { font-size: 15px; }
.pc-card header .pc-ghost { width: 36px; padding: 0; font-size: 20px; }
.pc-card footer { justify-content: flex-end; border-top: 1px solid var(--pc-line); }
.pc-hint { margin: 0 12px 6px; color: #b8bfcc; font-size: 12px; line-height: 1.5; }
.pc-scroll { flex: 1; min-height: 0; padding: 0 12px 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pc-scroll h3 { margin: 8px 0 6px; color: #b8bfcc; font-size: 12px; font-weight: 600; }

.pc-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pc-card .pc-pick {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  height: auto;
  padding: 7px 8px;
  border: 1px solid transparent;
  color: var(--pc-ink);
  background: rgba(255, 255, 255, 0.07);
  text-align: left;
  font-weight: 400;
}
.pc-pick img, .pc-pick i { grid-row: span 2; }
.pc-pick b { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.pc-pick small { overflow: hidden; color: #9aa3b2; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.pc-card .pc-pick.on { border-color: var(--pc-accent); background: rgba(255, 211, 122, 0.16); }
.pc-pick em {
  position: absolute;
  top: 4px;
  right: 6px;
  color: var(--pc-accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.pc-talk { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; color: #b8bfcc; font-size: 12px; }
.pc-card .pc-pill { height: 28px; padding: 0 10px; color: var(--pc-ink); background: rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 400; }
.pc-card .pc-pill.on { color: #2b2833; background: var(--pc-accent); }

.pc-log p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.pc-log p b { margin-right: 6px; color: var(--pc-accent); font-weight: 600; }
.pc-log p.mine b { color: #8fd3ff; }

/* ==================== moonisle.css ==================== */
/* 月影岛（40_moonisle）：夜色岛屿上的联机游戏中心。
   .mi-app 直接加在外壳 .app-layer 上，不能写 height:100%（会盖掉导航键预留）。 */
.mi-app{--mi-bg:#141a33;--mi-card:#1f274a;--mi-line:#2c3560;--mi-text:#e9ecf8;--mi-dim:#9aa3c7;--mi-moon:#f4e7b8;--mi-pink:#f39bb4;display:flex;flex-direction:column;min-height:0;overflow:hidden;color:var(--mi-text);font-size:13px;background:radial-gradient(120% 60% at 85% -10%,#3b3f7a 0%,transparent 60%),linear-gradient(180deg,#171d3b 0%,var(--mi-bg) 55%,#10152b 100%)}
.mi-app button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}.mi-app button:focus-visible{outline:2px solid var(--mi-moon);outline-offset:2px}
.mi-head{display:flex;align-items:center;gap:10px;padding:12px 14px 6px;flex:none}.mi-head>div{flex:1;min-width:0}.mi-head h1{margin:0;font-size:24px;letter-spacing:2px;font-weight:800;background:linear-gradient(90deg,#fff,var(--mi-moon));-webkit-background-clip:text;background-clip:text;color:transparent}.mi-head small{display:block;color:var(--mi-dim);font-size:11px;margin-top:2px}
.mi-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#ffffff10!important}.mi-icon.spin{animation:mi-spin .9s linear infinite}
.mi-main{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 0 18px}
.mi-games{display:flex;gap:10px;overflow-x:auto;padding:10px 14px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}.mi-games::-webkit-scrollbar{display:none}
.mi-game{position:relative;flex:none;width:46%;min-width:150px;max-width:220px;height:112px;border-radius:20px!important;padding:14px!important;text-align:left;overflow:hidden;scroll-snap-align:start;background:var(--tone)!important;box-shadow:0 8px 22px #0006,inset 0 1px 0 #ffffff30}.mi-game b{display:block;font-size:18px;letter-spacing:1px}.mi-game small{display:block;margin-top:4px;font-size:10px;opacity:.82}.mi-game span{position:absolute;right:10px;bottom:-4px;font-size:52px;opacity:.9;transform:rotate(-14deg);text-shadow:0 6px 14px #0005}.mi-game em{position:absolute;left:14px;bottom:12px;font-style:normal;font-size:10px;padding:3px 9px;border-radius:999px;background:#ffffff2e}
.mi-game:active{transform:scale(.97)}.mi-soon{--tone:linear-gradient(135deg,#262e55,#1f2647);border:1px dashed #ffffff26;box-shadow:none;color:var(--mi-dim);display:block}.mi-soon span{color:var(--mi-moon);opacity:.5}
.mi-tabs{display:flex;gap:4px;padding:12px 14px 4px;position:sticky;top:0;z-index:2;background:linear-gradient(180deg,var(--mi-bg) 70%,transparent)}.mi-tabs button{padding:6px 12px;border-radius:999px;color:var(--mi-dim);font-size:13px}.mi-tabs button.on{color:#fff;font-weight:700;background:#ffffff14;box-shadow:inset 0 -2px 0 var(--mi-moon)}
.mi-list{padding:4px 14px;display:flex;flex-direction:column;gap:10px}
.mi-room{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px!important;border-radius:20px!important;background:var(--mi-card)!important;border:1px solid var(--mi-line)!important;box-shadow:0 6px 16px #0003}.mi-room:active{transform:scale(.985)}.mi-room.back{border-color:#f4e7b866!important}
.mi-cover{position:relative;flex:none;width:68px;height:68px;border-radius:16px;background:var(--tone);display:grid;place-items:center;overflow:hidden}.mi-cover>span{font-size:30px;transform:rotate(-14deg)}.mi-cover small{position:absolute;left:0;right:0;bottom:0;font-size:9px;text-align:center;padding:2px 0;background:#0005}
.mi-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.mi-title{display:flex;align-items:center;gap:6px;min-width:0}.mi-title em{flex:none;font-style:normal;font-size:10px;padding:2px 7px;border-radius:7px;background:#45a99033;color:#7fd8bf}.mi-title b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-meta{font-size:11px;color:var(--mi-dim)}.mi-names{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:11px;color:#c9cfeb}.mi-names span{white-space:nowrap}.mi-pair{color:#ffd1dd}.mi-pair em{font-style:normal;color:var(--mi-pink)}
.mi-dots{display:flex;gap:4px}.mi-dots i{width:14px;height:14px;border-radius:50%;background:var(--c);font-style:normal;font-size:8px;line-height:14px;text-align:center;color:#fff}.mi-dots i.pal{box-shadow:0 0 0 2px #f39bb455}.mi-dots i.left{opacity:.3}.mi-dots i.mi-slot{background:none;border:1.5px dashed #ffffff40}
.mi-cta{flex:none;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;background:#ffffff14;color:var(--mi-dim)}.mi-room.join .mi-cta{background:linear-gradient(135deg,#f4e7b8,#f3c58b);color:#2a2340}.mi-room.back .mi-cta{background:#f4e7b8;color:#2a2340}
.mi-empty{text-align:center;padding:36px 10px;color:var(--mi-dim);line-height:1.9}.mi-moon{display:block;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;box-shadow:inset -14px -6px 0 0 var(--mi-moon);filter:drop-shadow(0 0 14px #f4e7b866);transform:rotate(-20deg)}
.mi-primary{margin-top:8px;padding:10px 20px!important;border-radius:999px!important;background:linear-gradient(135deg,#f4e7b8,#f3c58b)!important;color:#2a2340!important;font-weight:700}
.mi-error{margin:0;padding:8px 12px;border-radius:12px;background:#e2667322;color:#ffb3bc;font-size:11px}.mi-error button{text-decoration:underline;margin-left:6px}
@keyframes mi-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mi-app *{animation:none!important;transition:none!important}}

/* ==================== qinglan.css ==================== */
.app-layer.qinglan-layer { padding: 0 !important; background: #7cc0f2; }
html.qinglan-immersive .system-nav,
html.qinglan-immersive .system-island { display: none; }
html.qinglan-immersive .app-layer.qinglan-layer { bottom: 0; }
.qinglan-layer .qinglan-frame { display: block; width: 100%; height: 100%; border: 0; }
.qinglan-layer .qinglan-exit {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  width: 44px; height: 44px; padding: 0; border: 2px solid #26304a;
  border-radius: 13px; background: #fffaf0ee; color: #26304a; font-size: 27px;
  line-height: 1; z-index: 5; cursor: pointer;
}