:root {
  --safe-top: env(safe-area-inset-top, 20px);
  --safe-bottom: env(safe-area-inset-bottom, 20px);
  --bg-pure: #f4f5f8;
  --dark-pure: #141619;
  --text-muted: #868e96;
}

/* 彻底隐藏页面所有滚动条，保留丝滑滑动能力 */
.archive-page-wrap::-webkit-scrollbar,
.archive-page-screen::-webkit-scrollbar,
.expand-modal-textarea::-webkit-scrollbar,
.ruled-textarea::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.archive-page-wrap,
.archive-page-screen,
.expand-modal-textarea,
.ruled-textarea {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE */
}

/* ========== 顶部四芒星绑定按钮与激活发光态 ========== */
.arch-tool-pill.bind-star-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.arch-tool-pill.bind-star-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  transition: all 0.25s ease;
}

/* 绑定成功后的点亮微光态：优雅清冷灰粉色 */
.arch-tool-pill.bind-star-btn.is-bound {
  background: #231c20 !important;
  color: #e0b4c2 !important; /* 柔和高级灰粉色 */
  border-color: #3d2c33 !important;
  box-shadow: 0 0 10px rgba(224, 180, 194, 0.35) !important;
}

.arch-tool-pill.bind-star-btn.is-bound svg {
  fill: #e0b4c2 !important;
  stroke: #e0b4c2 !important;
  transform: scale(1.08);
}

/* 暗夜模式下的灰粉高光 */
.char-screen-bg-2 .arch-tool-pill.bind-star-btn.is-bound,
.char-screen-bg-3 .arch-tool-pill.bind-star-btn.is-bound {
  background: rgba(224, 180, 194, 0.15) !important;
  color: #e0b4c2 !important;
  border-color: rgba(224, 180, 194, 0.4) !important;
  box-shadow: 0 0 10px rgba(224, 180, 194, 0.25) !important;
}

/* ========== 绑定专属用户按钮样式 ========== */
.bind-select-btn {
  margin-left: auto !important; /* 👈 核心：自动顶到卡片最右侧边缘！ */
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  background: #18191c;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.bind-select-btn.is-cancel {
  background: #f1f5f9;
  color: #c94a4a;
  border: 0.5px solid rgba(239, 68, 68, 0.3);
}

.bind-select-btn:active {
  transform: scale(0.94);
}

/* 抽屉普通条框（默认纯白底色） */
.drawer-user-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: #ffffff; /* 👈 去掉 !important，允许被 active 覆盖 */
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.drawer-user-item.active {
  background: rgba(24, 25, 28, 0.07)!important; /* 微深边框凸显当前 */
  border-color: #f1f5f9 !important; /* 优雅微灰高亮 */ 
}

/* 中间文字列：不占满整行，紧凑两行排版 */
.drawer-user-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important; /* 👈 名称与建档日期之间的空隙恢复紧凑！ */
  flex: 0 0 auto !important; /* 核心：不霸道撑开，紧随文字宽度 */
  min-width: 0 !important;
}

.drawer-user-name {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #18191c !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.2 !important;
}

.drawer-user-date {
  font-size: 9.5px !important;
  color: #94a3b8 !important;
  font-family: monospace !important;
  line-height: 1.2 !important;
}

/* 紧随文字右侧的【爱心 + 等大头像】：整行居中 */
.drawer-couple-binding {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* 多角色守护头像并排（微叠错落感，精致不占地） */
.drawer-multi-bound-avatars {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

.drawer-couple-binding .drawer-avatar.bound-target {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #e2e8f0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: #64748b !important;
  box-shadow: 0 2px 6px rgba(224, 180, 194, 0.2) !important;
  flex-shrink: 0 !important;
}

.drawer-couple-binding .drawer-avatar.bound-target img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 心电图脉搏连接爱心容器 */
.drawer-heart-pulse-svg {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e0b4c2 !important; /* 指定的高定灰粉色 */
  flex-shrink: 0 !important;
  margin: 0 -2px !important;
}

.drawer-heart-pulse-svg svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  filter: drop-shadow(0 1px 3px rgba(224, 180, 194, 0.3)) !important;
}

/* 核心：把删除按钮自动顶到最右侧边缘！ */
.drawer-del-btn {
  margin-left: auto !important;
  background: none;
  border: none;
  color: #c94a4a; /* 删除红色位置 1 */
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 5px;
}

/* =========================================================
   顶部高定艺术图案舞台（融入背景·单层紧凑横排）
========================================================= */
.header-ornament-stage {
  width: 100%;
  max-width: 370px;
  position: relative;
  padding: 2px 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  flex-shrink: 0;
}

.ornament-artwork-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* 1. 左上角玄月星芒圣盘 */
.celestial-crescent-emblem {
  position: absolute;
  top: -24px;
  left: -16px;
  width: 120px;
  height: 120px;
  color: rgba(20, 22, 25, 0.16);
}

.char-screen-bg-2 .celestial-crescent-emblem,
.char-screen-bg-3 .celestial-crescent-emblem { 
  color: rgba(136, 171, 218, 0.22) !important; 
}
.celestial-crescent-emblem svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3. 点缀星芒与准星刻度 */
.art-star {
  position: absolute;
  font-size: 11px;
  color: rgba(20, 22, 25, 0.4);
  line-height: 1;
}

.char-screen-bg-2 .art-star,
.char-screen-bg-3 .art-star { 
  color: rgba(136, 171, 218, 0.4) !important; 
}
.art-star.s1 { top: 8px; left: 105px; font-size: 11px; }
.art-star.s2 { top: 8px; right: 20px; font-size: 9px; }
.art-star.s3 { bottom: 6px; left: 40%; font-size: 8px; }

.art-crosshair {
  position: absolute;
  font-family: monospace;
  font-size: 9px;
  color: rgba(20, 22, 25, 0.25);
  font-weight: 300;
}
.art-crosshair.c1 { top: 36px; left: 10px; }
.art-crosshair.c2 { top: 34px; right: 12px; }

/* 标题区域（单层三等分横向对齐） */
.archive-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
  padding: 0 2px;
  position: relative;
  z-index: 20;
}

.archive-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.arch-native-back {
  background: none;
  border: none;
  cursor: pointer;
  color: #3c3c43;
  display: flex;
  align-items: center;
  padding: 2px;
  margin-left: -4px;
}
/* 1. 让特工令(bg-2)和塔罗牌(bg-3)的返回箭头都变成纯白 */
.char-screen-bg-2 .arch-native-back { 
  color: #f8fafc !important; 
}
.arch-native-back:active { opacity: 0.5; }
.arch-native-back svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.archive-title {
  font-size: 23px !important;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #141619;
  line-height: 1;
}

/* 2. 让特工令和塔罗牌的“档案”大标题都变成纯白！ */
.char-screen-bg-2 .archive-title { 
  color: #ffffff !important; 
}

.archive-header-right {
  display: flex;
  align-items: center;
  gap: 6px !important; 
  flex-shrink: 0;
}

/* 顶部三横线图标圆形胶囊按钮 */
.arch-tool-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(20, 22, 25, 0.12);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  color: #18191c;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  transition: all 0.15s ease;
}
.arch-tool-pill:active { background: #e2e6ea; transform: scale(0.96); }
.arch-tool-pill svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; fill: none; }



/* 悬浮分段双滑块导航栏（单层紧凑版） */
.archive-nav-capsule {
  display: flex;
  width: 136px;
  height: 34px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 2.5px;
  border-radius: 18px;
  border: 1px solid rgba(20, 22, 25, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff;
  position: relative;
  overflow: hidden;
  z-index: 30;
}
.char-screen-bg-2 .archive-nav-capsule,
.char-screen-bg-3 .archive-nav-capsule {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.nav-glider-pill {
  position: absolute;
  top: 2.5px;
  bottom: 2.5px;
  left: 2.5px;
  width: calc(50% - 2.5px);
  background: linear-gradient(135deg, #22252a 0%, #111214 100%);
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(18, 20, 23, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.3, 1);
  z-index: 30;
  pointer-events: none;
}
/* 3. 让特工令和塔罗牌的右上角圆形按钮变成通透白 */
.char-screen-bg-2 .arch-tool-pill,
.char-screen-bg-3 .arch-tool-pill {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* 角色标签激活时：黑色滑块平移到右侧 */
.nav-glider-pill.char-pos {
  transform: translateX(100%) !important;
}

.archive-nav-item {
  flex: 1;
  height: 100%;
  border: none;
  border-radius: 15px;
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  color: #6c757d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
  font-family: inherit;
  position: relative;
  z-index: 30;
  letter-spacing: 0.5px;
}
.archive-nav-item.active {
  color: #ffffff;
  font-weight: 700;
}

/* ======================================================== */
/* 最初 100% 满血完美的卡片与手账排版（完全不动）        */
/* ======================================================== */
.arch-card-wrapper [contenteditable="true"],
.t1-bio, .t2-bio, .t3-bio, .t4-bio, .t5-sub-cn {
  white-space: pre-wrap !important;
}

.arch-card-wrapper [contenteditable="true"],
.char-card-wrapper [contenteditable="true"],
.t1-bio, .t2-bio, .t3-bio, .t4-bio, .t5-sub-cn,
.char-intro-text, .char-quote,
[contenteditable="true"] {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  white-space: pre-wrap !important; /* 强制保留空格与换行 */
  word-break: break-word !important;
}

/* 修复：移除导致黑底白字标签隐形的全局透明背景 */
.arch-card-wrapper [contenteditable="true"],
.char-card-wrapper [contenteditable="true"],
[contenteditable="true"] {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.arch-card-wrapper [contenteditable="true"]:focus,
.char-card-wrapper [contenteditable="true"]:focus,
[contenteditable="true"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

[data-page="archive"] .app-header {
  display: none !important;
}

.page[data-page="archive"] {
  background: #ffffff !important; /* 核心：实心纯白兜底，死死挡住桌面壁纸 */
  z-index: 30 !important;
  position: absolute !important;
  inset: 0 !important;
}

/* 1. 卡片展示时彻底锁死，禁止任何上下晃动 */
.archive-page-wrap {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important; /* 彻底锁死滑动 */
  overscroll-behavior: none !important;
}

/* 2. 满屏 100% 严丝合缝贴死屏幕，绝不多出 1 像素 */
.archive-page-screen {
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: calc(12px + var(--safe-top)) 16px calc(14px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden !important;
}

/* 3. 只有在手账填单编辑时，才开启内容滚动 */
.archive-page-wrap:has(.journal-sheet) {
  overflow-y: auto !important;
}
.archive-page-screen:has(.journal-sheet) {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: visible !important;
}

.archive-page-screen.screen-bg-0 {
  background-color: #f2f4f7 !important;
  background-image: linear-gradient(180deg, #f7f9fb 0%, #ebedf0 100%) !important;
}
.archive-page-screen.screen-bg-1 {
  background-color: #eef2f7 !important;
  background-image: 
    radial-gradient(circle at 20% 15%, rgba(176, 204, 232, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(136, 171, 218, 0.35) 0%, transparent 40%) !important;
}
.archive-page-screen.screen-bg-2 {
  background: #ffffff !important;
}
.archive-page-screen.screen-bg-3 {
  background-color: #f2e8eb !important;
  background-image: 
    radial-gradient(circle at 50% 15%, rgba(184, 143, 157, 0.28) 0%, transparent 60%),
    radial-gradient(#e2d3d8 1.2px, transparent 1.2px) !important;
  background-size: 100% 100%, 16px 16px !important;
}
.archive-page-screen.screen-bg-4 {
  background: #ffffff !important;
}

/* 角色第3款（特工令）：实心纯黑科技底色 */
.archive-page-screen.char-screen-bg-2 {
  background-color: #08090d !important;
  background-image: 
    radial-gradient(circle at 50% 15%, rgba(136, 171, 218, 0.15) 0%, transparent 60%),
    radial-gradient(rgba(136, 171, 218, 0.08) 1.2px, transparent 1.2px) !important;
  background-size: 100% 100%, 16px 16px !important;
}

/* 角色第4款（血月塔罗）：实心暗夜深红神秘底色 */
.archive-page-screen.char-screen-bg-3 {
  background-color: #fff !important; /* 实心暗黑深红，绝不透底 */
  background-image: 
    radial-gradient(circle at 50% 15%, rgba(181, 34, 52, 0.25) 0%, transparent 60%),
    radial-gradient(rgba(241, 245, 249, 0.06) 1.2px, transparent 1.2px) !important;
  background-size: 100% 100%, 16px 16px !important;
}

.archive-showcase-wrap {
  width: 100%;
  max-width: 370px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.archive-full-card-box {
  width: 100%;
  max-width: 370px;
  display: flex;
  justify-content: center;
  touch-action: pan-y;
  position: relative;
}

.arch-card-wrapper {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ======================================================== */
/* 风格 1：冰蓝条形码票根                                    */
/* ======================================================== */
.t1-wrapper {
  width: 100%;
  background: #ffffff;
  border-radius: 24px;
  padding: 16px 14px 18px;
  box-shadow: 0 20px 50px rgba(74, 107, 143, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.t1-inner {
  border: 1.2px solid #2b333e;
  border-radius: 18px;
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  position: relative;
}

.t1-inner::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 70px;
  height: 70px;
  background-image: radial-gradient(#2b333e 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0.18;
  pointer-events: none;
  border-radius: 0 14px 0 0;
}

.t1-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 30;
}
.t1-serial {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #7a9ec7;
  font-family: monospace;
}
.t1-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #242b35;
  display: flex;
  align-items: center;
  gap: 4px;
}
.t1-stamp {
  font-size: 10.5px;
  font-weight: 700;
  background: #242b35;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 1px;
}

.t1-body {
  display: flex;
  align-items: stretch;
  gap: 10px;
  position: relative;
}

.t1-left-rail {
  width: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  flex-shrink: 0;
}
.t1-qr-icon {
  width: 20px;
  height: 20px;
  border: 1px solid #2b333e;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b333e;
}
.t1-qr-icon svg { width: 13px; height: 13px; fill: currentColor; }
.t1-barcode-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 14px;
  padding: 8px 0;
}
.t1-bline { height: 1.2px; background: #2b333e; width: 100%; }
.t1-bline.thick { height: 2.8px; }
.t1-bline.thin { height: 0.8px; }
.t1-vertical-code {
  writing-mode: vertical-rl;
  font-family: monospace;
  font-size: 9.5px;
  letter-spacing: 2px;
  color: #4a5568;
  transform: rotate(180deg);
}

.t1-photo-stage,
.arch-shared-photo-box {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 350px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f7fafc;
  border: 1.5px solid #2b333e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.t1-photo-stage img,
.arch-shared-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  transition: transform 0.3s ease;
}
.t1-photo-stage.has-img img,
.arch-shared-photo-box.has-img img {
  display: block;
}
.t1-photo-stage.has-img .t1-photo-empty,
.arch-shared-photo-box.has-img .t1-photo-empty {
  display: none;
}
.t1-photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  text-align: center;
}
.t1-photo-empty svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.t1-photo-empty span { font-size: 11.5px; font-weight: 500; }

.t1-right-rail {
  width: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 6px 0;
  flex-shrink: 0;
}
.t1-star { font-size: 12px; color: #242b35; }
.t1-dash { width: 1px; height: 30px; border-left: 1.2px dashed #a0aec0; }
.t1-rail-dot { width: 3.5px; height: 3.5px; background: #a0aec0; border-radius: 50%; }

.t1-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(43, 51, 62, 0.25);
  position: relative;
  flex-shrink: 0;
  margin-top: 12px !important; 
}
.t1-cutout-left, .t1-cutout-right {
  position: absolute;
  top: -8px;
  width: 14px;
  height: 14px;
  background: #eef2f7;
  border-radius: 50%;
  border: 1.2px solid #2b333e;
  z-index: 30;
}
.t1-cutout-left { left: -20px; border-left: none; }
.t1-cutout-right { right: -20px; border-right: none; }

.t1-user-row { display: flex; justify-content: space-between; align-items: baseline; }
.t1-username { font-size: 20px; font-weight: 800; color: #242b35; letter-spacing: 0.5px; }
.t1-userid { font-size: 11px; font-family: monospace; font-weight: 600; color: #7a9ec7; }
.t1-bio { font-size: 13.5px; color: #3a424e; line-height: 1.55; font-weight: 500; }
.t1-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.t1-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3.5px 9px;
  border-radius: 8px;
  background: #f0f5fa;
  color: #4a6b8f;
  border: 0.5px solid rgba(176, 204, 232, 0.6);
}
.t1-tag.primary { background: #000; color: #ffffff; border: none; }

/* ======================================================== */
/* 风格 2：双对角冰蓝缎带亚克力                             */
/* ======================================================== */
.t2-wrapper {
  width: 100%;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 28px;
  padding: 18px 18px 18px;
  box-shadow: 0 25px 60px rgba(50, 75, 105, 0.18), inset 0 1px 2px #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.t2-ribbon-tr {
  position: absolute; top: 18px; right: -36px; width: 130px;
  background: linear-gradient(135deg, #b0cce8, #7fa5d1);
  color: #ffffff; font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-align: center; padding: 6px 0; transform: rotate(45deg);
  box-shadow: 0 3px 8px rgba(127, 165, 209, 0.45); z-index: 30; user-select: none;
}
.t2-ribbon-bl {
  position: absolute; bottom: 18px; left: -36px; width: 130px;
  background: linear-gradient(135deg, #7fa5d1, #b0cce8);
  color: #ffffff; font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-align: center; padding: 6px 0; transform: rotate(45deg);
  box-shadow: 0 -3px 8px rgba(127, 165, 209, 0.35); z-index: 30; user-select: none;
}

.t2-top-ring {
  width: 32px;
  height: 8px;
  background: #cbd5e1 !important;
  border-radius: 4px;
  margin: 0 auto 4px !important; 
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.25) !important;
  position: relative;
  flex-shrink: 0;
  border: none !important;
}
.t2-top-ring::after {
  content: none;
}
.t2-frame {
  position: relative; border: 1px solid rgba(30, 36, 45, 0.15);
  background: #ffffff; border-radius: 20px; padding: 6px 18px;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.t2-cross {
  position: absolute; font-size: 11px; color: #94a3b8; font-weight: 300; pointer-events: none; z-index: 30;
}
.t2-cross.tl { top: 6px; left: 8px; }
.t2-cross.tr { top: 6px; right: 8px; }
.t2-cross.bl { bottom: 6px; left: 8px; }
.t2-cross.br { bottom: 6px; right: 8px; }

.t2-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; }
.t2-icons { display: flex; gap: 6px; color: #7fa5d1; font-size: 13px; }
.t2-brand { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #7d8b99; text-transform: uppercase; }

.t2-photo-stage {
  width: 100%;
  height: 370px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background: #edf2f7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t2-photo-stage img { width: 100%; height: 100%; object-fit: cover; display: none; }
.t2-photo-stage.has-img img { display: block; }
.t2-photo-stage.has-img .t1-photo-empty { display: none; }

.t2-music-pill {
  position: absolute; bottom: 10px; right: 10px; background: rgba(30, 36, 45, 0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff;
  padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.t2-music-wave { display: flex; gap: 2px; align-items: center; }
.t2-wave-bar {
  width: 2px; height: 8px; background: #a1c4fd; border-radius: 1px;
  animation: waveBounce 1s ease-in-out infinite alternate;
}
.t2-wave-bar:nth-child(2) { height: 12px; animation-delay: 0.2s; }
.t2-wave-bar:nth-child(3) { height: 6px; animation-delay: 0.4s; }
@keyframes waveBounce { 0% { transform: scaleY(0.4); } 100% { transform: scaleY(1.2); } }

.t2-footer { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 0; }
.t2-user-row { display: flex; justify-content: space-between; align-items: center; }
.t2-username { font-size: 20px; font-weight: 800; color: #1e242d; letter-spacing: 0.5px; }
.t2-stars { color: #7fa5d1; font-size: 13px; letter-spacing: 2px; }
.t2-bio { font-size: 13.5px; color: #5c6773; line-height: 1.55; font-weight: 500; }

.t2-barcode-deck {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid #edf2f7; margin-top: 2px;
}
.t2-barcode-wrap { display: flex; flex-direction: column; gap: 2px; }
.t2-graphic { height: 16px; display: flex; gap: 1.5px; }
.t2-bar { width: 1.5px; background: #1e242d; }
.t2-bar.w2 { width: 3px; }
.t2-bar.w3 { width: 4.5px; }
.t2-digits { font-family: monospace; font-size: 8px; color: #7d8b99; letter-spacing: 1px; }
.t2-tag {
  font-size: 10px; font-weight: 700; background: #f1f5f9; color: #475569;
  padding: 4px 8px; border-radius: 6px; border: 0.5px solid #cbd5e1; display: flex; align-items: center; gap: 3px;
}

/* ======================================================== */
/* 风格 3：极浅奶霜燕麦火漆邮票                            */
/* ======================================================== */
.t3-wrapper {
  width: 100%; background: #faf8f5; border-radius: 14px;
  padding: 16px 14px 20px; box-shadow: 0 20px 45px rgba(50, 45, 41, 0.1);
  position: relative; border: 1px solid #ded9cf; display: flex; flex-direction: column;
}
.t3-perfs-left, .t3-perfs-right {
  position: absolute; top: 24px; bottom: 24px; width: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none; z-index: 10;
}
.t3-perfs-left { left: -5px; }
.t3-perfs-right { right: -5px; }
.t3-perf-hole {
  width: 9px; height: 9px; background: #eef2f7; border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(50, 45, 41, 0.12);
}
.t3-inner-box {
  border: 1px solid #322d29; padding: 14px 15px; position: relative;
  display: flex; flex-direction: column; gap: 12px; background: #ffffff;
  box-shadow: inset 0 0 0 2px #faf8f5, inset 0 0 0 3px rgba(50, 45, 41, 0.12);
}
.t3-header-row { display: flex; justify-content: space-between; align-items: center; }
.t3-postmark { display: flex; align-items: center; gap: 6px; color: #8a7e72; }
.t3-pm-circle {
  width: 28px; height: 28px; border: 1px dashed #8a7e72; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 8.5px;
  font-weight: 700; transform: rotate(-12deg);
}
.t3-pm-lines { display: flex; flex-direction: column; gap: 2.5px; }
.t3-pm-line { width: 22px; height: 1px; background: #8a7e72; opacity: 0.7; }
.t3-tag-text {
  font-size: 10px; font-weight: 700; color: #322d29; letter-spacing: 2px;
  border-bottom: 1.5px solid #8a7e72; padding-bottom: 1px; display: flex; align-items: center; gap: 3px;
}

.t3-photo-stage {
  width: 100%;
  height: 340px;
  position: relative;
  background: #f4f1eb;
  border: 1.2px solid #322d29;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t3-photo-stage img { width: 100%; height: 100%; object-fit: cover; display: none; }
.t3-photo-stage.has-img img { display: block; }
.t3-photo-stage.has-img .t1-photo-empty { display: none; }

.t3-photo-tag {
  position: absolute; top: 8px; left: 8px; background: rgba(50, 45, 41, 0.88);
  color: #ffffff; font-size: 9.5px; font-weight: 600; padding: 3px 7px;
  border-radius: 3px; letter-spacing: 1px; display: flex; align-items: center; gap: 4px;
}
.t3-footer-body { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.t3-username { font-size: 20px; font-weight: 800; color: #322d29; }
.t3-serial { font-size: 10px; font-family: monospace; color: #8a7e72; font-weight: 700; }
.t3-bio { font-size: 13.5px; color: #5c544d; line-height: 1.55; font-weight: 500; }

.t3-bottom-deck {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px dashed rgba(50, 45, 41, 0.18); margin-top: 2px;
}
.t3-french-tags { display: flex; flex-direction: column; gap: 4px; }
.t3-french-quote { font-size: 10px; font-style: italic; color: #8a7e72; }
.t3-chips { display: flex; gap: 5px; }
.t3-chip {
  font-size: 10px; font-weight: 700; background: #f0ece6; color: #8a7e72;
  padding: 3px 7px; border-radius: 4px; border: 0.5px solid rgba(138, 126, 114, 0.3);
}
.t3-wax-seal {
  width: 42px; height: 42px;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f4f0e8 50%, #e2dacd 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(138, 126, 114, 0.18), inset 0 1.5px 2px rgba(255,255,255,0.9), inset 0 -1.5px 2.5px rgba(181, 170, 155, 0.3);
  border: 1px solid rgba(222, 217, 207, 0.8); flex-shrink: 0;
}
.t3-wax-inner {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.85);
  display: flex; align-items: center; justify-content: center; color: #8a7e72; font-size: 13px;
}

/* ======================================================== */
/* 风格 4：浅灰粉晶哥特教堂圣殿                            */
/* ======================================================== */
.t4-wrapper {
  width: 100%; background: #fcf8f9; border-radius: 20px; padding: 14px;
  box-shadow: 0 20px 45px rgba(150, 107, 122, 0.15), inset 0 1px 2px #ffffff;
  border: 1px solid rgba(235, 219, 224, 0.8); display: flex; flex-direction: column;
}
.t4-inner-frame {
  border: 1px solid #ebdbe0; border-radius: 14px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 8px; background: rgba(255, 255, 255, 0.85);
  position: relative;
}
.t4-cross { position: absolute; color: #b88f9d; font-size: 11px; pointer-events: none; }
.t4-cross.tl { top: 4px; left: 6px; }
.t4-cross.tr { top: 4px; right: 6px; }
.t4-cross.bl { bottom: 4px; left: 6px; }
.t4-cross.br { bottom: 4px; right: 6px; }

.t4-header { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.t4-title-wrap { 
  display: flex; 
  align-items: center; 
  gap: 5px; 
}
.t4-title-wrap span:first-child {
  font-size: 14px;
  font-weight: 900;
  color: #3a2e33;
  transform: scale(1.15);
  display: inline-block;
}
.t4-title { font-size: 14px; font-weight: 800; letter-spacing: 3px; color: #3a2e33; text-transform: uppercase; }
.t4-stamp {
  font-size: 9.5px; font-weight: 700; border: 1px solid #b88f9d; color: #966b7a;
  padding: 2px 7px; border-radius: 4px; background: #f6edf0;
}

.t4-arch-stage {
  width: 100%;
  height: 350px;
  position: relative;
  border-radius: 130px 130px 10px 10px !important;
  border: 1.5px solid #b88f9d;
  box-shadow: 0 8px 20px rgba(150, 107, 122, 0.1);
  cursor: pointer;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t4-arch-stage img { width: 100%; height: 100%; object-fit: cover; display: none; }
.t4-arch-stage.has-img img { display: block; }
.t4-arch-stage.has-img .t1-photo-empty { display: none; }

.t4-arch-overlay {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(58, 46, 51, 0.4); pointer-events: none; letter-spacing: 2px;
}

.t4-footer-body { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.t4-username { font-size: 20px; font-weight: 800; color: #3a2e33; letter-spacing: 1.5px; }
.t4-serial { font-size: 9px; font-family: monospace; color: #966b7a; font-weight: 700; }
.t4-bio { font-size: 13.5px; color: #695b60; line-height: 1.55; font-weight: 500; }

.t4-plague-bar {
  width: 100%; background: linear-gradient(90deg, rgba(246, 237, 240, 0.2), rgba(235, 219, 224, 0.8), rgba(246, 237, 240, 0.2));
  border-top: 1px solid #ebdbe0; border-bottom: 1px solid #ebdbe0; padding: 4px 0;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 9.5px;
  font-weight: 800; letter-spacing: 3px; color: #966b7a; text-transform: uppercase;
}
.t4-stats-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.t4-stat-box {
  background: #ffffff; border: 0.8px solid #ebdbe0; border-radius: 8px; padding: 5px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.t4-stat-label { font-size: 8px; font-weight: 700; color: #b88f9d; text-transform: uppercase; }
.t4-stat-val { font-size: 10.5px; font-weight: 800; color: #3a2e33; letter-spacing: 1px; }

/* ======================================================== */
/* 风格 5：白金冷银 35mm 电影特刊                          */
/* ======================================================== */
.t5-wrapper {
  background: #141619;
  border-radius: 16px;
  padding: 12px 20px 14px;
  box-shadow: 0 22px 55px rgba(20, 22, 25, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 8px;
  color: #f6f3ee;
}

.t5-sprockets {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  flex-shrink: 0;
}
.t5-hole {
  width: 15px;
  height: 10px;
  background: #eef2f7;
  border-radius: 2.5px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.t5-sprocket-code {
  font-family: monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: #dcdfe4;
  letter-spacing: 2px;
}

.t5-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px 0;
  flex-shrink: 0;
}
.t5-scene {
  font-size: 11px;
  font-weight: 800;
  color: #dcdfe4;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.t5-dot {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff;
}
.t5-fps {
  font-family: monospace;
  font-size: 9.5px;
  color: #9aa2ac;
  letter-spacing: 1px;
}

.t5-frame-stage {
  height: 340px !important; 
  width: 100%;
  position: relative;
  background: #000000;
  border-radius: 5px;
  border: 1.2px solid #23272e;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t5-frame-stage img { width: 100%; height: 100%; object-fit: cover; display: none; }
.t5-frame-stage.has-img img { display: block; }
.t5-frame-stage.has-img .t1-photo-empty { display: none; }

.t5-edge-mark {
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: monospace;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 1.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.t5-footer-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
  flex-shrink: 0;
}
.t5-username-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px;
}
.t5-username {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 1px;
}
.t5-director {
  font-size: 10.5px;
  color: #dcdfe4;
  font-weight: 700;
  letter-spacing: 1px;
}

.t5-subtitles-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.t5-sub-cn {
  font-size: 12.5px;
  color: #f1f3f5;
  line-height: 1.45;
  font-weight: 500;
}
.t5-sub-en {
  font-size: 10px;
  color: #a0a8b4;
  font-style: italic;
  letter-spacing: 0.5px;
}

.t5-stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  margin-top: 4px;
}
.t5-admit-pill {
  background: #dcdfe4;
  color: #141619;
  font-size: 9px;
  font-weight: 900;
  padding: 2.5px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

/* ========== 底部吸底控制坞 ========== */
.archive-bottom-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  padding-top: 6px;
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}

.dock-arrow-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(24, 25, 28, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #18191c;
  cursor: pointer;
  position: relative; /* 必须加这行 */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

/* 核心优化：生成隐形 360° 向外延伸的感应热区，彻底解决右下角点不到的问题！ */
.dock-arrow-btn::after {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -12px;
  right: -12px; /* 向外四周全部扩大 12px 触摸感应圈 */
  z-index: 30;
}
.dock-arrow-btn:active { transform: scale(0.92); background: #f8f9fa; }
.dock-arrow-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.5; fill: none; }

.dock-edit-btn {
  flex: 1;
  height: 42px;
  border-radius: 21px;
  background: #18191c;
  color: #ffffff;
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(24, 25, 28, 0.2);
  cursor: pointer;
  font-family: inherit;
}
.dock-edit-btn:active { transform: scale(0.97); background: #000000; }
.dock-edit-btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }

/* 仅限 PWA 桌面端生效：拉开编辑按钮与卡片的距离 */
@media (display-mode: standalone) {
  .archive-bottom-dock {
    margin-top: 28px !important;
    padding-bottom: calc(14px + var(--safe-bottom)) !important;
  }
}

/* ========== 通用多步骤 SPA 动画 ========== */
.archive-step-panel {
  display: none;
  width: 100%;
  animation: archPanelIn 0.27s cubic-bezier(0.16, 1, 0.3, 1);
}
.archive-step-panel.step-active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes archPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========== 空状态凝聚冰晶卡片 ========== */
.empty-card-stage {
  width: 100%;
  max-width: 370px;
  flex: 1; /* 重点：自动吃满屏幕下方所有剩余垂直高度 */
  min-height: calc(100vh - 120px - var(--safe-top) - var(--safe-bottom)); /* 撑满屏幕兜底 */
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 20px;
  border: 1px solid rgba(24, 25, 28, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 重点：让冰晶与所有文字在满屏卡片里正中心垂直居中 */
  text-align: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 让父容器的动画面板也随之 100% 撑开 */
#archStep1.archive-step-panel {
  flex: 1;
  display: flex;
  width: 100%;
}

.deco-cross {
  position: absolute;
  font-size: 11px;
  color: #ced4da;
  font-weight: 300;
  pointer-events: none;
}
.deco-cross.tl { top: 10px; left: 12px; }
.deco-cross.tr { top: 10px; right: 12px; }
.deco-cross.bl { bottom: 10px; left: 12px; }
.deco-cross.br { bottom: 10px; right: 12px; }

.empty-illustration-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
}

.empty-illustration-circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  color: #18191c;
}

/* ========== 初雪 Pure Crystal 清透雪晶蓝 ========== */
.frost-crystal-svg { width: 46px; height: 46px; overflow: visible; }
.crystal-stroke { 
  stroke: rgba(90, 145, 210, 0.75) !important; 
  stroke-width: 1.35; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
  fill: none; 
}
.crystal-core circle[fill],
.crystal-sparkles circle[fill] {
  fill: rgba(90, 145, 210, 0.85) !important;
}
.empty-sparkle {
  position: absolute;
  font-size: 11px;
  color: rgba(110, 160, 215, 0.75) !important;
  opacity: 0;
}

.empty-card-stage .crystal-core { 
  opacity: 0; 
  transform-origin: 24px 24px; 
  animation: crystalCoreSlow 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) 0.1s forwards; 
}
@keyframes crystalCoreSlow { 
  0% { opacity: 0; transform: scale(0.2) rotate(-45deg); } 
  100% { opacity: 1; transform: scale(1) rotate(0deg); } 
}

.empty-card-stage .crystal-spears { 
  stroke-dasharray: 60; 
  stroke-dashoffset: 60; 
  animation: crystalDrawSpears 0.6s cubic-bezier(0.3, 0, 0.2, 1) 0.35s forwards; 
}
@keyframes crystalDrawSpears { to { stroke-dashoffset: 0; } }

.empty-card-stage .crystal-petals { 
  stroke-dasharray: 50; 
  stroke-dashoffset: 50; 
  animation: crystalDrawPetals 0.6s cubic-bezier(0.3, 0, 0.2, 1) 0.65s forwards; 
}
@keyframes crystalDrawPetals { to { stroke-dashoffset: 0; } }

.empty-card-stage .crystal-sparkles { 
  opacity: 0; 
  transform-origin: 24px 24px; 
  animation: crystalSparkleSlow 0.4s ease-out 1.0s forwards; 
}
@keyframes crystalSparkleSlow { 
  0% { opacity: 0; transform: scale(0.3); } 
  100% { opacity: 1; transform: scale(1); } 
}

.empty-sparkle { position: absolute; font-size: 11px; color: rgba(110, 160, 215, 0.75) !important; opacity: 0; }
.empty-card-stage .empty-sparkle.s1 { top: 4px; right: 6px; animation: sparkleSlowIn 0.4s ease 1.1s forwards; }
.empty-card-stage .empty-sparkle.s2 { bottom: 6px; left: 4px; animation: sparkleSlowIn 0.4s ease 1.25s forwards; }
@keyframes sparkleSlowIn { 
  0% { opacity: 0; transform: scale(0.4); } 
  100% { opacity: 0.85; transform: scale(1); } 
}

.empty-title { font-size: 17px; font-weight: 700; color: #18191c; letter-spacing: 0.5px; margin-bottom: 6px; }
.empty-desc { font-size: 12.5px; color: #5c6470; line-height: 1.6; max-width: 250px; margin-bottom: 24px; }

.action-trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 220px;
  height: 42px;
  background: #18191c;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(24, 25, 28, 0.22);
  font-family: inherit;
}
.action-trigger-btn:active { transform: scale(0.97); background: #000000; }
.action-trigger-btn svg { width: 15px; height: 15px; stroke: #ffffff; stroke-width: 2.2; fill: none; }

/* ========== 法式手账填单本面 ========== */
.journal-sheet {
  width: 100%;
  max-width: 370px;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 18px 24px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.journal-header { display: flex; flex-direction: column; align-items: center; text-align: center; }

.journal-header-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.journal-header-top-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.journal-inline-back {
  background: none;
  border: none;
  cursor: pointer;
  color: #3c3c43;
  display: flex;
  align-items: center;
  padding: 2px;
  margin-left: -4px;
}
.journal-inline-back:active { opacity: 0.5; }
.journal-inline-back svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-confidential { font-size: 8px; font-family: monospace; font-weight: 800; color: #18191c; background: #f1f3f5; padding: 2.5px 7px; border-radius: 4px; letter-spacing: 1.5px; }
.brand-serial { font-size: 9px; font-family: monospace; font-weight: 700; color: #5c6470; letter-spacing: 0.5px; }

.journal-main-title { font-size: 20px; font-weight: 800; letter-spacing: 2px; color: #18191c; font-family: "Didot", "Playfair Display", "Times New Roman", "PingFang SC", serif; margin-bottom: 4px; }
.journal-desc-text { font-size: 11px; color: #5c6470; line-height: 1.5; max-width: 280px; margin-bottom: 12px; }
.journal-header-divider { width: 100%; display: flex; align-items: center; gap: 8px; }
.divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(24, 25, 28, 0.22), transparent); }
.divider-star { font-size: 9px; color: #18191c; }

.journal-section { display: flex; flex-direction: column; gap: 8px; }
.section-lead-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important; /* 核心：绝对禁止换到第二行 */
  border-bottom: 1px solid rgba(24, 25, 28, 0.12);
  padding-bottom: 3px;
  width: 100%;
}

/* 左侧标题 */
.section-name {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #18191c;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0; /* 禁止被压缩 */
}

/* 右侧：英文标签 + 放大按钮 牢牢吸附在最右侧同一行 */
.section-lead-right {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important; /* 核心：死死待在第一行最右边 */
}
.section-name { font-size: 13.5px; font-weight: 800; letter-spacing: 1.5px; color: #18191c; display: flex; align-items: center; gap: 4px; }
.section-name .sec-index { font-family: monospace; font-size: 10px; color: #5c6470; }
.section-tag-en { font-size: 8.5px; font-family: monospace; color: #5c6470; letter-spacing: 1px; }

.ruled-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ruled-item { display: flex; flex-direction: column; gap: 2px; }
.ruled-label { font-size: 10px; font-weight: 700; color: #5c6470; letter-spacing: 0.5px; }
.ruled-input { width: 100%; border: none; border-bottom: 1px dashed rgba(24, 25, 28, 0.22); padding: 3px 0; font-size: 13.5px; font-weight: 600; color: #18191c; background: transparent; outline: none; font-family: inherit; }
.ruled-input:focus { border-bottom-color: #18191c; border-bottom-style: solid; }
.ruled-input::placeholder { color: #cbd5e1; font-weight: 400; font-size: 11.5px; }

.ruled-textarea { width: 100%; border: none; background: transparent; font-size: 13.5px; line-height: 22px; color: #18191c; font-family: inherit; outline: none; resize: none; padding: 0; background-image: linear-gradient(transparent, transparent 21px, rgba(24, 25, 28, 0.22) 21px, rgba(24, 25, 28, 0.22) 22px); background-size: 100% 22px; }
.ruled-textarea::placeholder { color: #cbd5e1; line-height: 22px; font-size: 11.5px; }

.journal-tear-strip { border-top: 1.5px dashed rgba(24, 25, 28, 0.22); padding-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.journal-sign-box { display: flex; flex-direction: column; gap: 2px; }
.sign-label { font-size: 8px; font-family: monospace; color: #5c6470; letter-spacing: 1px; }
.sign-handwriting { font-size: 12.5px; font-weight: 700; letter-spacing: 0.5px; color: #18191c; font-style: italic; }
.journal-seal-stamp { width: 38px; height: 38px; border: 1.5px solid #18191c; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 6.5px; font-weight: 900; letter-spacing: 0.5px; transform: rotate(-8deg); color: #18191c; opacity: 0.85; }
.seal-star { font-size: 8px; line-height: 1; }

/* ========== 用户/角色档案抽屉（盖住所有底层内容） ========== */
.user-drawer-mask, .char-drawer-mask {
  position: fixed;
  inset: 0;
  background: transparent !important; /* 彻底去掉黑灰色阴影，完全透明 */
  backdrop-filter: none !important;    /* 彻底去掉毛玻璃模糊 */
  -webkit-backdrop-filter: none !important;
  z-index: 40;
  display: none;
}
.user-drawer-mask.show, .char-drawer-mask.show { display: block; }
.user-drawer-card, .char-drawer-card { position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff; border-radius: 20px 20px 0 0; padding: 18px 18px calc(20px + var(--safe-bottom)); z-index: 40; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); max-height: 65vh; display: flex; flex-direction: column; }
.user-drawer-card.show, .char-drawer-card.show { transform: translateY(0); }
.drawer-header, .char-drawer-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.drawer-title, .char-drawer-title { font-size: 15px; font-weight: 800; color: #18191c; }
.drawer-close-btn, .char-drawer-close { background: none; border: none; font-size: 15px; color: #94a3b8; cursor: pointer; padding: 3px; }
.drawer-list, .char-drawer-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 0 4px; }
.drawer-user-item, .char-drawer-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,0.04); cursor: pointer; }
.drawer-user-item.active, .char-drawer-item.active { background: #f2f2f2; border-color: #f2f4f7; }
.drawer-avatar, .char-drawer-avatar { width: 38px; height: 38px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; color: #64748b; overflow: hidden; font-size: 13px; flex-shrink: 0; }
.drawer-avatar img, .char-drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.drawer-user-info, .char-drawer-info { flex: 1; min-width: 0; }
.drawer-user-name, .char-drawer-name { font-size: 14px; font-weight: 800; color: #18191c; display: flex; align-items: center; gap: 5px; }
.drawer-active-tag, .char-active-tag { font-size: 10px; font-weight: 700; color: #ffffff; background: #18191c; padding: 2px 5px; border-radius: 3px; }
.drawer-user-date, .char-drawer-date { font-size: 11px; color: #94a3b8; font-family: monospace; margin-top: 1px; }
.drawer-del-btn, .char-drawer-del { background: none; border: none; color: #c94a4a; font-size: 12.5px; font-weight: 600; padding: 5px 8px; cursor: pointer; border-radius: 5px; }
.drawer-del-btn:active, .char-drawer-del:active { background: rgba(239, 68, 68, 0.1); }

/* 02-05 扩大编辑按钮样式 */
.expand-edit-btn {
  background: none;
  border: none;
  color: #868e96;
  padding: 2px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.expand-edit-btn:active {
  background: rgba(0, 0, 0, 0.05);
  color: #18191c;
  transform: scale(0.92);
}
.expand-edit-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

/* 全屏手写纸板弹窗（完全透明、无毛玻璃模糊、无黑灰遮罩） */
.expand-modal-overlay {
  position: fixed;
  inset: 0;
  background: transparent !important; /* 彻底去除灰色/黑色遮罩 */
  backdrop-filter: none !important;    /* 彻底去除毛玻璃模糊 */
  -webkit-backdrop-filter: none !important;
  z-index: 40;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.expand-modal-overlay.show {
  display: flex;
  animation: modalFadeIn 0.25s ease-out;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.expand-modal-panel {
  width: 100%;
  max-width: 430px;
  height: 88vh;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  padding: 18px 20px calc(16px + var(--safe-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.expand-modal-overlay.show .expand-modal-panel {
  transform: translateY(0);
}

.expand-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(24, 25, 28, 0.08);
  flex-shrink: 0;
}
.expand-modal-back {
  background: none;
  border: none;
  color: #5c6470;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  margin-left: -6px;
}
.expand-modal-back svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}
.expand-modal-title {
  font-size: 15px;
  font-weight: 800;
  color: #18191c;
  letter-spacing: 0.5px;
}
.expand-modal-done {
  background: #18191c;
  border: none;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
}
.expand-modal-done:active {
  transform: scale(0.95);
  background: #000000;
}

.expand-modal-body {
  flex: 1;
  min-height: 0;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
}
.expand-modal-textarea {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 26px;
  color: #18191c;
  font-family: inherit;
  outline: none;
  resize: none;
  padding: 0;
  background-image: linear-gradient(transparent, transparent 25px, rgba(24, 25, 28, 0.12) 25px, rgba(24, 25, 28, 0.12) 26px);
  background-size: 100% 26px;
}
.expand-modal-textarea::placeholder {
  color: #cbd5e1;
  line-height: 26px;
  font-size: 13px;
}

.expand-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed rgba(24, 25, 28, 0.12);
  flex-shrink: 0;
}
.expand-word-count {
  font-size: 11px;
  font-family: monospace;
  color: #868e96;
  font-weight: 600;
}
.expand-clear-btn {
  background: none;
  border: none;
  color: #c94a4a;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.expand-clear-btn:active {
  opacity: 0.6;
}

/* ========== 纯粹微白浮雕扣「+ 新建」 ========== */
.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#drawerNewUserBtn,
#drawerNewCharBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  color: #1e242d !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  white-space: nowrap !important; /* 重点：强制绝对不许上下折行 */
  width: auto !important;          /* 重点：宽度随文字自适应撑开 */
  flex-shrink: 0 !important;       /* 重点：绝对不许被两边挤压 */
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#drawerNewUserBtn:active,
#drawerNewCharBtn:active {
  transform: scale(0.92) !important;
  background: #edf2f7 !important;
}

#drawerNewUserBtn svg,
#drawerNewCharBtn svg {
  width: 10px !important;
  height: 10px !important;
  stroke: #1e242d !important;
  stroke-width: 2.4 !important;
  fill: none !important;
}

/* ========== 编辑手账底部封存按钮（100% 完美撑开居中） ========== */
#generateCardBtn,
#generateCharCardBtn,
.save-seal-btn {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  border-radius: 12px !important;
  margin: 6px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ========== 统一所有卡片上传立绘区域的底色为纯白 ========== */
.t1-photo-stage,
.t2-photo-stage,
.t3-photo-stage,
.t4-arch-stage,
.t5-frame-stage,
.arch-shared-photo-box,
.char-photo-box,
.photo-box {
  background: #ffffff !important;
}

/* ========== 彻底消灭收起工具栏后的点击延迟 ========== */
.archive-bottom-dock,
.dock-arrow-btn,
.dock-edit-btn,
.arch-tool-pill,
.arch-native-back,
.archive-nav-item,
.archive-nav-capsule {
  touch-action: manipulation !important; /* 禁用系统双击缩放与手势等待 */
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

.dock-arrow-btn,
.dock-edit-btn {
  transform: translateZ(0); /* 强制提升到独立硬件图层，视口变大时瞬间重绘 */
}