/* ==========================================================================
   叶白 · 极简高奢第一性原理 UI/UX 设计系统 (Anti-Slop Modern Frontend)
   作者：叶白 (YEBAI)
   ========================================================================== */

/* 1. 默认主题 (极简云白 · Apple 苹果雪瓷白现代纯净美学) */
:root {
  --bg-primary: #fafbfc;
  --bg-secondary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --border-color: rgba(15, 23, 42, 0.055);
  --border-subtle: rgba(15, 23, 42, 0.035);
  --border-color-glow: rgba(14, 165, 233, 0.25);
  --card-inner-highlight: inset 0 1px 1px rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  
  --accent-primary: #0f172a;
  --accent-text: #ffffff;
  --accent-secondary: #0284c7;
  --theme-accent: #0284c7;
  --theme-accent-subtle: rgba(2, 132, 199, 0.08);
  --theme-glow: rgba(2, 132, 199, 0.22);
  --accent-gold: #f59e0b;
  --accent-success: #10b981;
  --accent-danger: #ef4444;
  
  --text-main: #090d16;
  --text-muted: #526071;
  --text-dim: #94a3b8;
  
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.03), 0 6px 16px -4px rgba(15, 23, 42, 0.035);
  --shadow-card-hover: 0 20px 38px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(14, 165, 233, 0.05);
  --shadow-lux: 0 24px 50px -12px rgba(15, 23, 42, 0.09);
  
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-full: 9999px;
  
  --ease-luxury: cubic-bezier(0.32, 0.72, 0, 1);
  --transition: all 0.28s var(--ease-luxury);
  --transition-spring: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s var(--ease-luxury), border-color 0.25s ease;
}

/* 2. 🍃 竹翠叶青主题 (自然翡翠竹林风) */
[data-theme="leaf"] {
  --bg-primary: #f5f9f6;
  --bg-secondary: #eaf3ec;
  --bg-card: #ffffff;
  --bg-card-hover: #fcfefc;
  --border-color: rgba(16, 185, 129, 0.22);
  --border-color-glow: rgba(16, 185, 129, 0.65);
  --card-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  
  --accent-primary: #059669;
  --accent-text: #ffffff;
  --accent-secondary: #10b981;
  --theme-accent: #059669;
  --theme-accent-subtle: rgba(5, 150, 105, 0.08);
  --theme-glow: rgba(16, 185, 129, 0.28);
  --accent-gold: #f59e0b;
  --accent-success: #10b981;
  
  --text-main: #132e18;
  --text-muted: #3b5a41;
  --text-dim: #7da585;
  
  --shadow-sm: 0 1px 2px rgba(5, 150, 105, 0.04);
  --shadow-card: 0 2px 8px -2px rgba(5, 150, 105, 0.06), 0 1px 2px rgba(5, 150, 105, 0.03);
  --shadow-card-hover: 0 14px 30px -6px rgba(5, 150, 105, 0.12), 0 4px 12px -2px rgba(5, 150, 105, 0.05);
  --shadow-lux: 0 22px 45px -8px rgba(5, 150, 105, 0.15);
}

/* 3. 🌸 浪漫樱花主题 (柔和粉晶治愈美学) */
[data-theme="sakura"] {
  --bg-primary: #fff7f9;
  --bg-secondary: #fdebf1;
  --bg-card: #ffffff;
  --bg-card-hover: #fffafc;
  --border-color: rgba(244, 114, 182, 0.25);
  --border-color-glow: rgba(236, 72, 153, 0.7);
  --card-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  
  --accent-primary: #e11d48;
  --accent-text: #ffffff;
  --accent-secondary: #ec4899;
  --theme-accent: #ec4899;
  --theme-accent-subtle: rgba(236, 72, 153, 0.08);
  --theme-glow: rgba(236, 72, 153, 0.28);
  --accent-gold: #f472b6;
  
  --text-main: #33131e;
  --text-muted: #6b3e50;
  --text-dim: #a8798e;
  
  --shadow-sm: 0 1px 2px rgba(225, 29, 72, 0.04);
  --shadow-card: 0 2px 8px -2px rgba(225, 29, 72, 0.06), 0 1px 2px rgba(225, 29, 72, 0.03);
  --shadow-card-hover: 0 14px 30px -6px rgba(225, 29, 72, 0.12), 0 4px 12px -2px rgba(225, 29, 72, 0.05);
  --shadow-lux: 0 22px 45px -8px rgba(225, 29, 72, 0.15);
}

/* 4. 🍊 琥珀暖棕主题 (古典纸感与暖色调) */
[data-theme="amber"] {
  --bg-primary: #fdfaf5;
  --bg-secondary: #f5ebe0;
  --bg-card: #ffffff;
  --bg-card-hover: #fffdfa;
  --border-color: rgba(217, 119, 6, 0.22);
  --border-color-glow: rgba(217, 119, 6, 0.65);
  --card-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  
  --accent-primary: #d97706;
  --accent-text: #ffffff;
  --accent-secondary: #b45309;
  --theme-accent: #d97706;
  --theme-accent-subtle: rgba(217, 119, 6, 0.08);
  --theme-glow: rgba(217, 119, 6, 0.28);
  --accent-gold: #f59e0b;
  
  --text-main: #241609;
  --text-muted: #5e432d;
  --text-dim: #9e826b;
  
  --shadow-sm: 0 1px 2px rgba(217, 119, 6, 0.04);
  --shadow-card: 0 2px 8px -2px rgba(217, 119, 6, 0.06), 0 1px 2px rgba(217, 119, 6, 0.03);
  --shadow-card-hover: 0 14px 30px -6px rgba(217, 119, 6, 0.12), 0 4px 12px -2px rgba(217, 119, 6, 0.05);
  --shadow-lux: 0 22px 45px -8px rgba(217, 119, 6, 0.15);
}

/* 充值流套餐档位卡片样式 */
.recharge-plan-card {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.recharge-plan-card:hover, .recharge-plan-card.active {
  border-color: var(--accent-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.recharge-pay-option {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: var(--transition);
  flex: 1;
}

.recharge-pay-option:hover, .recharge-pay-option.active {
  border-color: var(--accent-primary);
  background: var(--bg-card);
}

/* 超级管理员与置顶勋章样式 */
.badge-admin {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.28));
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.5);
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

.badge-pinned {
  background: rgba(168, 85, 247, 0.15);
  color: #9333ea;
  border: 1px solid rgba(168, 85, 247, 0.35);
  font-weight: 700;
}

.badge-resolved {
  background: rgba(21, 128, 61, 0.15);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 700;
}

.badge-moderator {
  background: rgba(37, 99, 235, 0.15);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.35);
  font-weight: 700;
}

.forum-post-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.forum-post-card:hover {
  border-color: var(--border-color-glow);
}

.forum-reply-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  margin-top: 0.75rem;
}

.forum-reply-item {
  border-bottom: 1px dashed var(--border-color);
  padding: 0.65rem 0;
  font-size: 0.88rem;
}

.forum-reply-item:last-child {
  border-bottom: none;
}

.forum-author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

/* 论坛紧凑极简模式列表项样式 */
.forum-compact-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.15s ease-out;
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.forum-compact-item:hover {
  border-color: var(--accent-primary);
  background: var(--bg-secondary);
  transform: translateX(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.forum-compact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  gap: 0.75rem;
  user-select: none;
  min-height: 40px;
}

.forum-compact-row:hover .forum-compact-title {
  color: var(--accent-primary) !important;
}

/* 高奢自定义品牌主题下拉菜单 */
.custom-dropdown {
  position: relative;
  display: inline-block;
  z-index: 150;
}

.dropdown-trigger {
  background: var(--bg-secondary);
  color: var(--text-main) !important;
  border: 1px solid var(--border-color);
  padding: 0.55rem 1.1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 150;
}

.dropdown-trigger:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dropdown-arrow {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.custom-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lux);
  list-style: none;
  padding: 0.4rem 0;
  display: none;
  flex-direction: column;
  z-index: 200;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.custom-dropdown.open .dropdown-menu {
  display: flex;
}

.dropdown-item {
  padding: 0.6rem 1.1rem;
  color: var(--text-main) !important;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-item:hover, .dropdown-item.active {
  background: var(--bg-secondary);
  color: var(--accent-primary) !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
}

body, h1, h2, h3, h4, h5, h6, .hero-title, .glass-card h3, .nav-link, .nav-brand, .btn-primary, .btn-secondary, .tab-btn, .form-label, .form-input, .theme-select {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif !important;
  font-stretch: normal !important;
}

body {
  background-color: #fafbfc;
  background-image: 
    radial-gradient(ellipse 90% 55% at 50% -12%, rgba(14, 165, 233, 0.055) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 60% 45% at 15% -5%, rgba(99, 102, 241, 0.035) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse 60% 45% at 85% -5%, rgba(244, 114, 182, 0.025) 0%, rgba(255, 255, 255, 0) 60%);
  background-size: 100% 100%;
  background-position: center 0;
  background-attachment: fixed;
  color: var(--text-main);
  min-height: 100vh;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  cursor: default;
}

.cursor-dot, .cursor-ring {
  pointer-events: none !important;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-primary);
  border-radius: 50%;
  position: fixed;
  top: -4px;
  left: -4px;
  z-index: 9999;
  transition: transform 0.05s ease-out;
}

.cursor-ring {
  width: 42px;
  height: 42px;
  border: 1px solid var(--accent-primary);
  border-radius: 50%;
  position: fixed;
  top: -21px;
  left: -21px;
  z-index: 9998;
  transition: opacity 0.3s ease, border-color 0.3s ease;
  mix-blend-mode: difference;
}

.cursor-ring.hovering {
  background: var(--accent-primary);
  border-color: transparent;
  opacity: 0.85;
}

.bg-glow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  opacity: 0.12;
  animation: glowFloat 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.glow-1 {
  top: -15%;
  left: 20%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.6;
}

.glow-2 {
  bottom: 0%;
  right: 10%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.4;
  animation-duration: 26s;
  animation-delay: -6s;
}

@keyframes glowFloat {
  0% { transform: translate(0, 0) scale(0.96); }
  50% { transform: translate(25px, 18px) scale(1.04); }
  100% { transform: translate(-18px, -12px) scale(1); }
}

/* ==========================================================================
   现代左侧伸缩侧边栏导航系统 (Arc / Miku.Tools 极简高级美学)
   ========================================================================== */

/* 1. 顶层主应用双列布局 */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

/* 2. 左上角常驻浮动展开按钮 (侧边栏收起或移动端时出现) */
.sidebar-floating-btn {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 9999;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  color: var(--text-main);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), var(--shadow-sm);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sidebar-floating-btn:hover {
  transform: scale(1.08);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.sidebar-floating-btn:active {
  transform: scale(0.92);
}

/* 当侧边栏收起时展示左上角悬浮展开按钮 (支持 html/body/app-layout 任意容器挂载类名) */
.sidebar-collapsed .sidebar-floating-btn,
html.sidebar-collapsed .sidebar-floating-btn,
body.sidebar-collapsed .sidebar-floating-btn {
  display: flex !important;
  animation: fadeInPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInPop {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* 3. 左侧边栏核心容器 (PC端全屏悬浮固定常驻，撑满视口高度) */
.app-sidebar {
  width: 200px;
  flex-shrink: 0;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 110;
  background: rgba(250, 251, 252, 0.86);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  overflow: visible;
}

/* 侧边栏收起状态 (Arc 风格彻底平滑移出左侧，内容区全宽展开) */
.sidebar-collapsed .app-sidebar,
html.sidebar-collapsed .app-sidebar,
body.sidebar-collapsed .app-sidebar {
  transform: translateX(-100%);
  pointer-events: none;
}

/* 4. 侧边栏顶部品牌区 */
.sidebar-header {
  padding: 1.1rem 0.85rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text-main);
  transition: opacity 0.2s ease;
}

.sidebar-brand:hover {
  opacity: 0.88;
}

.sidebar-brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.25);
  display: block;
}

.sidebar-brand-info {
  display: flex;
  flex-direction: column;
}

.sidebar-brand-text {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sidebar-brand-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 600;
}

.sidebar-collapse-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.sidebar-collapse-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-main);
}

/* 5. 侧边栏中间导航滚动体 */
.sidebar-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.85rem 0.65rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar-body::-webkit-scrollbar {
  width: 4px;
}
.sidebar-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

/* 侧边栏全局搜索触发按钮 (Command Palette Entry) */
.sidebar-search-wrapper {
  width: 100%;
}

.sidebar-search-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-dim);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sidebar-search-btn:hover {
  background: var(--bg-card);
  border-color: var(--accent-primary);
  color: var(--text-main);
  box-shadow: var(--shadow-sm), var(--card-inner-highlight);
  transform: translateY(-1px);
}

.sidebar-search-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-search-icon {
  font-size: 0.88rem;
  line-height: 1;
}

.sidebar-search-placeholder {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sidebar-search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-dim);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   全屏/全站悬浮搜索命令面板 (Global Spotlight Search Command Palette)
   ========================================================================== */
/* ==========================================================================
   全站悬浮搜索命令面板 (Raycast & Linear 风格：无界极简大输入框 + 柔光沉浸列表)
   ========================================================================== */
.global-search-modal-box {
  max-width: 680px !important;
  width: 92% !important;
  padding: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 24px 70px -12px rgba(15, 23, 42, 0.25), 0 4px 16px -4px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  margin-top: -6vh;
  animation: spotlightPop 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes spotlightPop {
  0% { opacity: 0; transform: scale(0.96) translateY(-10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 顶部搜索大输入区 (无边框、无嵌套、开阔大气) */
.global-search-header {
  display: flex;
  align-items: center;
  padding: 1.15rem 1.45rem;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  gap: 0.9rem;
  position: relative;
}

.global-search-lens {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-dim);
  opacity: 0.75;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.global-search-field {
  flex: 1;
  border: none !important;
  outline: none !important;
  outline-style: none !important;
  background: transparent !important;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-main);
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.global-search-field:focus,
.global-search-field:focus-visible {
  outline: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.global-search-field::placeholder {
  color: var(--text-dim);
  opacity: 0.7;
  font-weight: 400;
}

.global-search-clear {
  background: transparent;
  border: none;
  font-size: 0.95rem;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  line-height: 1;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.global-search-clear:hover {
  background: var(--bg-secondary);
  color: var(--text-main);
}

.global-search-esc-badge {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
  user-select: none;
}

.global-search-esc-badge:hover {
  border-color: var(--accent-primary);
  color: var(--text-main);
}

/* 结果列表容器 */
.global-search-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.global-search-results::-webkit-scrollbar {
  width: 4px;
}
.global-search-results::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

/* 列表单项 (呼吸感空间、微透悬浮、柔和圆角) */
.global-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.95rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  text-decoration: none;
  color: var(--text-main);
  box-sizing: border-box;
  position: relative;
}

.global-search-item:hover {
  background: var(--bg-secondary);
  border-color: rgba(15, 23, 42, 0.04);
  transform: translateX(2px);
}

/* 键盘激活/高亮选中态 (去除粗暴大蓝框，升级为柔光微底色与品牌色微印记) */
.global-search-item.selected {
  background: var(--bg-secondary) !important;
  border-color: rgba(14, 165, 233, 0.18) !important;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05), inset 2.5px 0 0 var(--accent-primary) !important;
  transform: translateX(4px);
}

.global-search-item.selected .global-search-action-hint {
  opacity: 1;
  color: var(--accent-primary) !important;
}

.global-search-item-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  overflow: hidden;
  flex: 1;
}

/* 水晶质感立体图标底座 */
.global-search-item-icon {
  font-size: 1.25rem;
  line-height: 1;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 11px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  transition: transform 0.2s ease;
}

.global-search-item:hover .global-search-item-icon,
.global-search-item.selected .global-search-item-icon {
  transform: scale(1.05);
}

.global-search-item-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0.22rem;
}

.global-search-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.global-search-item-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-search-item-badge {
  font-size: 0.68rem;
  padding: 0.12rem 0.48rem;
  border-radius: 9999px;
  font-weight: 600;
  flex-shrink: 0;
}

.global-search-action-hint {
  font-size: 0.74rem;
  color: var(--text-dim);
  flex-shrink: 0;
  margin-left: 0.65rem;
  opacity: 0.55;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

/* 底部操作提示栏 (轻透、精炼、无生硬灰底分割) */
.global-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.45rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  font-size: 0.74rem;
  color: var(--text-dim);
}

.global-search-hints {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.global-search-hints kbd {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar-nav-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 0.65rem 0.35rem;
}

.sidebar-nav-list, .sidebar-category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* 侧边栏主导航按钮 */
.sidebar-nav-list .nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.54rem 0.65rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.sidebar-nav-list .nav-link:hover {
  background: var(--bg-secondary);
  color: var(--text-main);
  transform: translateX(2px);
}

.sidebar-nav-list .nav-link.active {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--accent-primary);
  font-weight: 700;
  box-shadow: var(--shadow-sm), var(--card-inner-highlight);
}

.nav-icon {
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  width: 18px;
  text-align: center;
}

.nav-text {
  flex: 1;
}

/* 侧边栏分类筛选按钮 */
.sidebar-cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.44rem 0.65rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}

.sidebar-cat-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-muted);
  transform: translateX(2px);
}

.sidebar-cat-btn.active {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.22);
  color: var(--accent-primary);
  font-weight: 700;
}

/* 6. 侧边栏左下角底部区域 (工具栏 + 登录态) */
.sidebar-footer {
  padding: 0;
  border-top: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.055));
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  box-sizing: border-box;
}

.sidebar-footer-tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  justify-content: space-between;
  padding: 0 0.65rem;
}

.sidebar-footer-tools .custom-dropdown {
  flex: 1;
}

.sidebar-footer-tools .dropdown-trigger {
  width: 100%;
  padding: 0.42rem 0.75rem;
  font-size: 0.78rem;
  justify-content: space-between;
  border-radius: 10px;
}

.sidebar-footer-tools .dropdown-menu {
  bottom: calc(100% + 8px);
  top: auto;
  left: 0;
  right: auto;
}

.sidebar-icon-badge-btn {
  padding: 0.42rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
}

.sidebar-icon-badge-btn:hover {
  border-color: var(--accent-primary);
  background: var(--bg-card);
  transform: translateY(-1px);
}

/* 底部左下角用户登录态卡片按钮 */
.sidebar-user-card {
  width: 100%;
  height: 100%;
  display: flex;
}

.sidebar-auth-btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 0.85rem;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  box-sizing: border-box;
}

.sidebar-auth-btn:hover {
  background: var(--bg-secondary);
}

.sidebar-auth-btn:active {
  background: var(--border-subtle, rgba(15, 23, 42, 0.055));
}

.sidebar-auth-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
}

.sidebar-auth-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.sidebar-auth-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.05em;
  width: 100%;
}

.sidebar-auth-desc {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  text-align: center;
  width: 100%;
}

/* 7. 右侧主内容视口 (移动端默认全宽且无任何左缩进) */
.app-main-viewport {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  margin-left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.32s cubic-bezier(0.16, 1, 0.3, 1), width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 仅在 PC 桌面端 (宽度 > 900px) 时开启侧边栏固定悬浮，主内容区向右缩进 200px */
@media (min-width: 901px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 100vh;
    height: 100dvh;
    z-index: 110;
  }

  .app-main-viewport {
    margin-left: 200px !important;
    width: calc(100% - 200px) !important;
  }

  .sidebar-collapsed .app-main-viewport,
  html.sidebar-collapsed .app-main-viewport,
  body.sidebar-collapsed .app-main-viewport {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* 移动端遮罩 */
.sidebar-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 120;
    width: min(280px, 82vw);
    margin-left: 0 !important;
    transform: translateX(-100%);
    box-shadow: 0 0 30px rgba(0,0,0,0.25);
  }
  
  .app-main-viewport {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh;
    flex: 1;
  }

  .deck-viewport {
    min-height: auto;
    padding: 0.5rem 0 2rem;
  }
  
  .app-layout.sidebar-mobile-open .app-sidebar {
    transform: translateX(0);
  }
  
  .sidebar-floating-btn {
    display: flex;
  }

  .app-layout.sidebar-mobile-open .sidebar-floating-btn,
  body.sidebar-mobile-open .sidebar-floating-btn,
  html.sidebar-mobile-open .sidebar-floating-btn {
    display: none !important;
  }
  
  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 115;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  .app-layout.sidebar-mobile-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  
  .container {
    padding: 0 1rem;
  }
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--accent-text) !important;
  border: 1px solid transparent;
  padding: 0.62rem 1.45rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  cursor: pointer !important;
  transition: var(--transition-spring);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  position: relative;
  z-index: 500 !important;
  pointer-events: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  user-select: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  opacity: 0.95;
}

.btn-primary:active {
  transform: scale(0.97) translateY(0);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 0.62rem 1.35rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer !important;
  transition: var(--transition-spring);
  position: relative;
  z-index: 500 !important;
  pointer-events: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  user-select: none;
}

.btn-secondary:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.btn-secondary:active {
  transform: scale(0.97) translateY(0);
}

.btn-disabled-signed {
  background: var(--bg-secondary) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border-color) !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.deck-viewport {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding: 1.25rem 0 0;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2.25rem;
  position: relative;
  z-index: 10;
  transition: max-width 0.3s ease, padding 0.3s ease;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

/* 独立工具大屏工作台模式：宽度最大化适配 */
body.workbench-active .container {
  max-width: 1560px;
  padding: 0 1.5rem;
}

@media (max-width: 900px) {
  .container {
    padding: 0 1rem;
  }
  body.workbench-active .container {
    padding: 0 0.75rem;
  }
}

.page-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  display: none;
  pointer-events: none;
}

.page-section.active {
  position: relative;
  display: block;
  opacity: 1;
  pointer-events: auto;
}

#section-tools.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 100%;
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-30px);
    opacity: 0;
  }
}

.page-section.slide-in-right {
  display: block !important;
  animation: slideInFromRight 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.page-section.slide-out-left {
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  animation: slideOutToLeft 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* --------------------------------------------------------------------------
   高级视觉设计规范 (High-End Visual Design): 杂志级排版与双层机械质感
   -------------------------------------------------------------------------- */

/* 1. 首屏环境微光与紧凑高级杂志感 (Compact Editorial) */
.hero-editorial-container {
  position: relative;
  text-align: center;
  padding: 1.6rem 1rem 1rem;
  max-width: 860px;
  margin: 0 auto;
}

.hero-ambient-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 90vw);
  height: 240px;
  background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.12) 0%, rgba(99, 102, 241, 0.06) 42%, rgba(255, 255, 255, 0) 72%);
  opacity: 1;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

/* 2. 精雕细琢的微型胶囊眉标 (紧凑版) */
.hero-eyebrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 0.65rem;
  position: relative;
  z-index: 1;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.22rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 6px -2px rgba(0, 0, 0, 0.03), var(--card-inner-highlight);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s var(--ease-luxury);
}

.eyebrow-pill:hover {
  border-color: var(--border-color-glow);
  color: var(--text-main);
  transform: translateY(-1px);
}

.eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: eyebrowPulse 2.4s infinite ease-in-out;
}

@keyframes eyebrowPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* 3. 紧凑高质感标题与极简副标 */
.hero-editorial-title {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 0.45rem;
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.hero-editorial-accent {
  display: inline;
  background: linear-gradient(135deg, var(--text-main) 30%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-editorial-sub {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

/* 4. Miku.Tools 纯净白瓷微立体卡片架构 (Porcelain Tactile Card) */
.glass-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02), 0 6px 18px -4px rgba(15, 23, 42, 0.035), inset 0 1px 0 #ffffff;
  border-radius: 20px;
  padding: 1.65rem 1.25rem 1.4rem;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
}

#tools-grid .glass-card {
  min-height: 212px;
}

.manuals-container > .glass-card {
  min-height: auto !important;
  padding: 1.15rem 1.6rem !important;
  transition: padding 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.manuals-container > .glass-card.expanded {
  padding: 1.6rem 1.75rem !important;
}

.glass-card:hover {
  border-color: rgba(14, 165, 233, 0.22);
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.08), 0 4px 14px -2px rgba(14, 165, 233, 0.08), inset 0 1px 0 #ffffff;
  transform: translateY(-3px);
}

.glass-card:active {
  transform: translateY(-1px) scale(0.994);
  transition-duration: 0.1s;
}

/* 右上角精致磨砂收藏微按钮 (默认极简隐藏，悬停温和淡入，已收藏常驻) */
.miku-card-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #94a3b8;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.2s ease, color 0.2s ease;
  z-index: 5;
}

.glass-card:hover .miku-card-fav-btn {
  opacity: 0.65;
  transform: scale(1);
}

.miku-card-fav-btn:hover {
  opacity: 1 !important;
  transform: scale(1.15) !important;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
}

.miku-card-fav-btn.active {
  opacity: 1 !important;
  transform: scale(1) !important;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.35);
}

/* Miku 风格居中大号质感立体图标 (马卡龙微立体水晶底座) */
.miku-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--bg-secondary);
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  transition: transform 0.28s var(--ease-luxury), box-shadow 0.28s var(--ease-luxury);
  position: relative;
  overflow: hidden;
}

/* 马卡龙生活微立体色彩主题 */
.miku-icon-pink {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border-color: rgba(244, 63, 94, 0.16);
  box-shadow: 0 4px 12px -2px rgba(244, 63, 94, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.miku-icon-purple {
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  border-color: rgba(168, 85, 247, 0.16);
  box-shadow: 0 4px 12px -2px rgba(168, 85, 247, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.miku-icon-orange {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-color: rgba(249, 115, 22, 0.16);
  box-shadow: 0 4px 12px -2px rgba(249, 115, 22, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.miku-icon-emerald {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: rgba(16, 185, 129, 0.16);
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.miku-icon-blue {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: rgba(14, 165, 233, 0.16);
  box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.miku-icon-indigo {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: rgba(99, 102, 241, 0.16);
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}

.glass-card:hover .miku-card-icon {
  transform: translateY(-2px) scale(1.04);
}

.miku-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
  width: 100%;
}

.glass-card:hover .miku-card-title {
  color: var(--accent-secondary, #0284c7);
}

.miku-card-desc {
  font-size: 0.81rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  min-height: 2.5rem;
}

/* 5. 细腻的滚动进入交错视差动效 (Scroll Reveal Physics) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  filter: blur(2px);
  transition: opacity 0.65s var(--ease-luxury), transform 0.65s var(--ease-luxury), filter 0.65s var(--ease-luxury);
  will-change: transform, opacity, filter;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.tool-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding-right: 2.2rem;
}

.tool-card-title {
  font-size: 1.08rem;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-main);
  margin-bottom: 0.45rem;
  min-height: 2.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.2s ease;
}

.tool-card-title:hover {
  color: var(--accent-primary);
}

.tool-card-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.62;
  margin-bottom: 1rem;
  flex-grow: 1;
  min-height: 4.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tool-card-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
  min-height: 24px;
  align-items: center;
}

.tool-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 0.95rem;
  border-top: 1px solid var(--border-color);
  gap: 0.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.35rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1.6rem;
}

.tab-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.85rem;
  position: relative;
  z-index: 60;
  align-items: center;
}

.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: var(--transition);
  position: relative;
  z-index: 70;
  pointer-events: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.tab-btn * {
  pointer-events: none !important;
}

.tab-btn:hover {
  color: var(--text-main);
  background: var(--bg-secondary);
}

.tab-btn.active {
  color: var(--accent-primary);
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 99999 !important;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

.modal-backdrop.active {
  display: flex !important;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  max-width: 580px;
  width: 100%;
  padding: 2.25rem;
  box-shadow: var(--shadow-lux);
  position: relative;
  animation: modalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 100000 !important;
  transition: var(--transition);
}

/* 全屏展开视图样式 */
.modal-box.modal-fullscreen,
.modal-backdrop > div.modal-fullscreen {
  max-width: 96vw !important;
  width: 96vw !important;
  height: 94vh !important;
  max-height: 94vh !important;
  border-radius: var(--radius-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.5rem 2rem !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-box.modal-fullscreen > div[style*="overflow-y"],
.modal-box.modal-fullscreen .modal-body,
.modal-box.modal-fullscreen #anime-search-results-wrapper,
.modal-box.modal-fullscreen #movie-search-results-wrapper,
.modal-box.modal-fullscreen #food-decision-container {
  flex: 1 1 auto !important;
  max-height: none !important;
}

/* ==================== 独立工作台大屏与全屏沉浸展开样式 ==================== */
.workbench-card-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), var(--card-inner-highlight);
  box-sizing: border-box;
}

/* 桌面端常驻侧边栏时隐藏主内容区重复的横排分类 Tab，仅在移动端展示 */
@media (min-width: 901px) {
  .tools-main-tabs-bar {
    display: none !important;
  }
}

#section-tool-workbench {
  width: 100% !important;
}

body.workbench-active .container {
  max-width: 1680px !important;
  width: 96% !important;
  padding: 0 1rem !important;
  transition: max-width 0.3s ease;
}

body.workbench-active #standalone-tool-mount {
  min-height: calc(100vh - 120px) !important;
  min-height: calc(100dvh - 120px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 网页全屏 / 最大化展开状态 */
body.workbench-fullscreen-active .container {
  max-width: 100vw !important;
  width: 100vw !important;
  padding: 0 1rem !important;
}

body.workbench-fullscreen-active #standalone-tool-mount {
  min-height: calc(100dvh - 100px) !important;
  padding: 1.25rem 1.5rem !important;
}

body.workbench-fullscreen-active .workbench-code-editor {
  height: calc(100dvh - 270px) !important;
  min-height: 560px !important;
}

/* 全屏与独立展开按钮标准样式 */
.modal-expand-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition-spring);
  white-space: nowrap;
}

.modal-expand-btn:hover {
  background: var(--bg-card);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.modal-expand-btn.active {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

/* 优雅关闭按钮绝对定位 */
.modal-close {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-spring);
  z-index: 100010 !important;
}

.modal-close:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: var(--bg-card);
  transform: rotate(90deg) scale(1.1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: none; }
}

select,
select.form-input,
.movie-player-topbar-select,
.movie-route-dropdown {
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.45rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1.15rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-main);
  outline: none;
  font-size: 0.92rem;
  transition: var(--transition);
}

.form-input:focus {
  border-color: var(--accent-primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.code-area {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 160px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-main);
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.88rem;
  resize: vertical;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.code-area:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.badge-gold { background: rgba(245, 158, 11, 0.08); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.2); }
.badge-green { background: rgba(16, 185, 129, 0.08); color: #059669; border: 1px solid rgba(16, 185, 129, 0.2); }
.badge-muted { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-color); opacity: 0.92; }

/* 关于作者页面专属微立体排版体系 */
.about-sub-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  margin-bottom: 0.95rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02), inset 0 1px 0 #ffffff;
  transition: transform 0.25s var(--ease-luxury), box-shadow 0.25s var(--ease-luxury), border-color 0.25s ease;
}
.about-sub-card:last-child {
  margin-bottom: 0;
}
.about-sub-card:hover {
  transform: translateY(-2px);
  border-color: rgba(203, 213, 225, 0.95);
  box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.05), inset 0 1px 0 #ffffff;
}

/* 技能标签矩阵：马卡龙微立体晶彩胶囊 */
.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}
.skill-badge:hover {
  transform: translateY(-2px);
}

.skill-badge-blue {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid rgba(14, 165, 233, 0.2);
  color: #0369a1;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.08), inset 0 1px 0 #ffffff;
}
.skill-badge-emerald {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #047857;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08), inset 0 1px 0 #ffffff;
}
.skill-badge-purple {
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #6d28d9;
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.08), inset 0 1px 0 #ffffff;
}

.footer {
  margin-top: auto;
  border-top: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.055));
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  padding: 0 1rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.78rem;
  position: relative;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .navbar {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }

  .nav-links {
    order: 3;
    width: 100%;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    white-space: nowrap;
  }

  .container {
    padding: 0 1.25rem;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 移动端主题选择器精简：隐藏文字只留 emoji */
  #theme-dropdown .dropdown-trigger #dropdown-selected-label {
    display: none;
  }

  #theme-dropdown .dropdown-trigger {
    padding: 0.45rem 0.65rem;
  }

  .nav-actions {
    gap: 0.5rem;
  }
}

@media (max-width: 640px) {
  .nav-brand-text {
    display: none;
  }

  .nav-actions {
    gap: 0.5rem;
  }

  .dropdown-trigger,
  .btn-primary,
  .btn-secondary {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .deck-viewport {
    padding-top: 1.25rem;
  }

  .container {
    padding: 0 0.85rem;
  }

  .glass-card,
  .modal-box {
    padding: 1.25rem;
  }

  .modal-box {
    width: calc(100% - 1rem);
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
  }

  .tool-filter-panel {
    padding: 0.85rem !important;
  }

  .tool-filter-row,
  .section-header {
    align-items: stretch !important;
    flex-direction: column;
  }

  .tab-buttons {
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tab-buttons::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    flex: 0 0 auto;
    padding: 0.55rem 1rem;
  }

  .forum-post-card {
    padding: 1rem;
  }

  .contact-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  .contact-grid img {
    max-width: 100px !important;
  }

  table {
    min-width: 720px;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 导航栏积分气泡按钮 (仿参考图) */
.nav-points-badge {
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 0.45rem 0.95rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition);
}

.nav-points-badge:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.exchange-card-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15) !important;
}

.btn-purchase-points:hover {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  transform: translateY(-1px);
}

.btn-ad-reward:hover {
  background: #fae8ff !important;
  border-color: #f0abfc !important;
  transform: translateY(-1px);
}

/* 优雅骨架屏占位与呼吸动画 */
.skeleton-card {
  height: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skeleton-line {
  background: var(--bg-secondary);
  border-radius: 4px;
}

.skeleton-pulse {
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.35; }
}

/* 使用手册顶部概览与快速定位卡片 (自然文档流，彻底移除吸顶遮挡) */
.manuals-header-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.manuals-pills-bar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.manual-nav-pill {
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 0.38rem 0.95rem;
  border-radius: 20px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
}

.manual-nav-pill:hover {
  background: var(--accent-primary);
  color: var(--accent-text) !important;
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}

@media (max-width: 900px) {
  .manuals-header-card {
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
  }
}

/* 热门精选置顶专区样式 */
.featured-section-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-card);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.featured-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.featured-card:hover {
  border-color: var(--accent-secondary);
  background: var(--bg-card);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* 工具卡片星标收藏按钮 */
.tool-fav-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.35;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0.25rem;
  z-index: 5;
}

.tool-fav-btn:hover {
  opacity: 0.9;
  transform: scale(1.2);
}

.tool-fav-btn.active {
  opacity: 1;
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  transform: scale(1.1);
}

/* 纯前端小工具内部交互控件样式 */
.tool-workbench {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tool-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 2rem 1rem;
  text-align: center;
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition);
}

.tool-dropzone:hover,
.tool-dropzone.dragover {
  border-color: var(--accent-secondary);
  background: var(--bg-secondary);
}

/* 工具呈现模式切换器样式 */
.tool-view-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 3px 5px;
  box-shadow: var(--shadow-sm);
  gap: 2px;
}

.btn-mode-pill {
  background: transparent;
  border: none;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.28rem 0.75rem;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-mode-pill:hover {
  color: var(--text-main);
}

.btn-mode-pill.active {
  background: var(--accent-primary);
  color: var(--accent-text) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
}

/* ==========================================
   🛡️ Cloudflare 风格智能人机验证盾与九宫格选图样式
   ========================================== */
.cf-turnstile-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.cf-turnstile-card:hover {
  border-color: #07c160;
  box-shadow: 0 2px 10px rgba(7, 193, 96, 0.15);
}

.cf-turnstile-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cf-turnstile-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.cf-turnstile-checkbox.cf-loading {
  border-color: #07c160;
}

.cf-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid #07c160;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cf-spin 0.6s linear infinite;
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

.cf-turnstile-checkbox.cf-success {
  background: #07c160;
  border-color: #07c160;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 900;
}

.cf-turnstile-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.cf-turnstile-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 0.88;
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ==========================================
   🎬 影视聚合搜索桌面端与全平台专属设计系统 (Design-Taste-Frontend)
   ========================================== */
.movie-result-card {
  text-align: left !important;
  align-items: stretch !important;
  cursor: default !important;
  transition: transform 0.25s var(--ease-luxury), box-shadow 0.25s var(--ease-luxury), border-color 0.25s ease;
}

.movie-result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08), var(--card-inner-highlight);
}

.movie-card-main-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  width: 100%;
}

.movie-card-poster {
  width: 120px;
  height: 168px;
  border-radius: 8px;
  overflow: hidden;
  background: #1e293b;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.movie-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.movie-card-route-section {
  width: 100% !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

.movie-route-tab-pill {
  font-family: inherit;
  outline: none;
  user-select: none;
}

.movie-route-tab-pill:hover:not(.active) {
  background: var(--bg-secondary) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color-glow) !important;
}

.movie-route-tab-pill.active {
  background: var(--accent-primary) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* PC端影视与视频播放器影院标准 16:9 比例规范 (移动端在下方 @media 保持紧凑排版) */
.movie-player-container-box,
#movie-player-container,
#standalone-movie-player-container {
  width: 100%;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.movie-player-media-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(580px, 65vh);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

#movie-video-element,
#standalone-movie-video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.show-mobile {
  display: none !important;
}

.episode-progress-tag {
  font-size: 0.68rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  margin-left: 0.35rem;
  font-weight: 500;
  display: inline-block;
}

/* ==========================================
   📱 移动端高级质感 UI 排版与自适应系统 (Design-Taste-Frontend)
   ========================================== */
@media (max-width: 768px) {
  /* 移动端统一隐藏桌面端专用元素与工具 */
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  /* 移动端主视口与工作台容器强制 100% 宽度，防横向撑爆与截断 */
  body.workbench-active .container,
  body.workbench-fullscreen-active .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0.5rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #section-tool-workbench {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 1. 移动端侧边栏宽度与抽屉阴影质感 */
  .app-sidebar {
    width: min(300px, 84vw);
    background: var(--bg-primary);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  }

  /* 2. 移动端首屏紧凑排版与往上提 */
  .hero-editorial-container {
    padding: 0.85rem 0.5rem 0.65rem !important;
  }

  .hero-editorial-title {
    font-size: 1.38rem !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.2rem !important;
  }

  .hero-editorial-desc {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    padding: 0 !important;
    margin-top: 0.15rem !important;
  }

  /* 3. 工具过滤栏与分类标签横向平滑滑动 */
  .tool-filter-panel {
    padding: 0.5rem !important;
    border-radius: 14px !important;
  }

  .tab-buttons {
    display: flex !important;
    gap: 0.35rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }

  .tab-buttons::-webkit-scrollbar {
    display: none !important;
  }

  .tab-btn {
    flex-shrink: 0 !important;
    font-size: 0.78rem !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 9px !important;
  }

  /* 4. 移动端卡片布局：紧凑一行两块 (双列网格) */
  .grid-3,
  .tools-grid,
  #tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
  }

  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  #tools-grid .glass-card,
  .tools-grid .glass-card {
    padding: 0.75rem 0.5rem 0.65rem !important;
    border-radius: 13px !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 个人中心登录与未登录面板显隐绝对隔离，防任何媒体查询样式污染 */
  #user-guest-panel.is-hidden,
  #user-logged-in-panel.is-hidden {
    display: none !important;
  }

  /* 移动端卡片内隐藏副标题，极大节省垂直高度 */
  .miku-card-desc {
    display: none !important;
  }

  /* 移动端卡片图标精致小巧 */
  .miku-card-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 1.4rem !important;
    margin-bottom: 0.4rem !important;
  }

  /* 移动端卡片大标题居中展示，限制 2 行 */
  .miku-card-title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    -webkit-line-clamp: 2 !important;
    max-height: 2.5em !important;
  }

  /* 移动端卡片微型收藏星星 */
  .miku-card-fav-btn {
    top: 4px !important;
    right: 4px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 0.76rem !important;
  }

  /* 5. 热门精选专区移动端自适应 */
  .featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
  }

  /* 6. 移动端浮动按钮安全距离与触感 */
  .sidebar-floating-btn {
    top: max(12px, env(safe-area-inset-top));
    left: 12px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }
}

@media (max-width: 640px) {
  /* 移动端沉浸式底部抽屉弹窗 (Bottom Sheet / Modal Drawer) */
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-box,
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 90vh !important;
    padding: 1.25rem 1.15rem max(1.5rem, env(safe-area-inset-bottom)) 1.15rem !important;
    margin: 0 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25) !important;
    animation: drawerSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  @keyframes drawerSlideUp {
    from {
      transform: translateY(100%);
      opacity: 0.7;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* ----------------------------------------------------
     📱 移动端子窗口/浮层与工作台全面高级自适应系统 (Design-Taste-Frontend)
     ---------------------------------------------------- */
  
  /* 1. 浮层弹窗顶部标题栏自适应重排与安全距离 */
  .modal-box > div[style*="justify-content: space-between"],
  .modal-box .modal-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
    position: relative !important;
    padding-right: 2.25rem !important;
  }

  /* 右上角关闭按钮在手机端绝对定位并加大触控热区 */
  .modal-box .modal-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    color: var(--text-muted) !important;
    z-index: 10 !important;
  }

  /* 弹窗标题与徽章行 */
  .modal-box h3 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
  }

  /* 弹窗副标题在手机端限制单行截断并缩小字号 */
  .modal-box p[style*="font-size"] {
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-top: 0.15rem !important;
  }

  /* 弹窗辅助操作按钮栏 (独立大屏、下载包等) 在手机端单行横向排布 */
  .modal-box > div[style*="justify-content: space-between"] > div:last-child {
    display: flex !important;
    gap: 0.4rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding-top: 0.2rem !important;
    width: 100% !important;
  }

  .modal-box > div[style*="justify-content: space-between"] > div:last-child::-webkit-scrollbar {
    display: none !important;
  }

  .modal-box > div[style*="justify-content: space-between"] > div:last-child .btn-secondary,
  .modal-box > div[style*="justify-content: space-between"] > div:last-child a.btn-secondary {
    flex-shrink: 0 !important;
    font-size: 0.74rem !important;
    padding: 0.3rem 0.65rem !important;
    border-radius: 8px !important;
  }

  /* 2. 搜索控制栏单行一体化紧凑排版 (影视/以图识番/网盘等) */
  #movie-search-modal div[style*="background: var(--bg-secondary)"] > div,
  #anime-search-modal div[style*="background: var(--bg-secondary)"] > div,
  #cloud-disk-search-modal div[style*="background: var(--bg-secondary)"] > div,
  .modal-box .search-control-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  #movie-search-modal div[style*="min-width: 260px"],
  #anime-search-modal div[style*="min-width: 260px"],
  #cloud-disk-search-modal div[style*="min-width: 260px"] {
    min-width: 0 !important;
    flex: 1 !important;
    padding: 0.25rem 0.7rem !important;
  }

  #movie-search-modal #movie-search-input,
  #anime-search-modal #anime-search-input,
  #cloud-disk-search-modal input {
    font-size: 0.84rem !important;
    padding: 0.3rem 0 !important;
  }

  #movie-search-modal #btn-execute-movie-search,
  #anime-search-modal #btn-execute-anime-search,
  #cloud-disk-search-modal button[type="button"] {
    padding: 0.45rem 0.95rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
  }

  /* 3. 影视与视频播放器手机端自适应 (紧凑标准 16:9，杜绝占满全屏) */
  #movie-player-container,
  #standalone-movie-player-container,
  .movie-player-container-box {
    border-radius: 12px !important;
    margin-bottom: 0.6rem !important;
    overflow: hidden !important;
  }

  #movie-player-container > div:first-child,
  #standalone-movie-player-container > div:first-child,
  .movie-player-topbar {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.74rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.35rem !important;
    height: 32px !important;
    box-sizing: border-box !important;
  }

  #movie-player-container > div:last-child,
  #standalone-movie-player-container > div:last-child,
  .movie-player-media-box {
    width: 100% !important;
    height: 195px !important;
    max-height: 200px !important;
    aspect-ratio: 16 / 9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  #movie-video-element,
  #standalone-movie-video-element {
    width: 100% !important;
    height: 100% !important;
    max-height: 195px !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  /* 影视选集与线路按钮网格 */
  #movie-search-results-list .episodes-grid,
  #standalone-movie-search-results-list .episodes-grid,
  .movie-episodes-grid,
  div[id*="movie-episodes-container"] {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
    gap: 0.35rem !important;
  }

  /* 4. 文件拖拽区 (Dropzone) 手机端紧凑化 */
  .tool-dropzone {
    padding: 1.25rem 0.85rem !important;
    border-radius: 14px !important;
  }

  .tool-dropzone span[style*="font-size: 2rem"],
  .tool-dropzone span[style*="font-size: 2.5rem"] {
    font-size: 1.6rem !important;
  }

  .tool-dropzone div[style*="font-weight: 700"] {
    font-size: 0.88rem !important;
    margin-top: 0.25rem !important;
  }

  .tool-dropzone div[style*="font-size: 0.78rem"] {
    font-size: 0.72rem !important;
  }

  /* 5. 独立工作台 (Standalone Workbench) 手机端单行极简排版与去盒化 */
  body.workbench-active .sidebar-floating-btn {
    display: none !important;
  }

  .workbench-top-nav,
  #section-tool-workbench > div:first-child {
    padding: 0.45rem 0.75rem !important;
    border-radius: 12px !important;
    margin-bottom: 0.65rem !important;
  }

  .workbench-navbar-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.4rem !important;
  }

  .workbench-back-btn {
    padding: 0.28rem 0.65rem !important;
    font-size: 0.78rem !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .workbench-title-pill {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    overflow: hidden !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .workbench-title-pill #standalone-tool-title,
  #section-tool-workbench h2#standalone-tool-title {
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .workbench-title-pill #standalone-tool-icon {
    font-size: 1.15rem !important;
    line-height: 1 !important;
  }

  /* 手机端彻底取消工作台顶栏的计费徽标与浮层切换按钮，释放视口空间让工具标题完全展开 */
  #standalone-tool-badge,
  #btn-standalone-to-modal,
  .workbench-nav-right {
    display: none !important;
  }

  /* 手机端彻底去除外层嵌套大白卡片，避免“盒中盒”与巨额空白 */
  #standalone-tool-mount {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: auto !important;
  }

  .movie-search-control-card {
    padding: 0.6rem 0.75rem !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .movie-search-input-group {
    margin-bottom: 0 !important;
    display: flex !important;
    gap: 0.35rem !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .movie-search-input-wrap {
    padding: 0.25rem 0.65rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #standalone-movie-search-input {
    font-size: 0.84rem !important;
    padding: 0.2rem 0 !important;
    min-width: 0 !important;
  }

  #btn-standalone-execute-movie-search {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* 影视搜索卡片手机端自适应，零溢出 */
  .movie-result-card {
    padding: 0.85rem !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .movie-card-main-row {
    gap: 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .movie-card-poster {
    width: 84px !important;
    height: 118px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .movie-card-info {
    min-width: 0 !important;
    flex: 1 !important;
    box-sizing: border-box !important;
  }

  .movie-card-info h4 {
    font-size: 0.98rem !important;
    line-height: 1.25 !important;
  }

  /* 6. 弹窗底部版权/下载提示在手机端折叠 */
  .modal-box > div:last-child[style*="border-top"] {
    font-size: 0.7rem !important;
    line-height: 1.45 !important;
    padding-top: 0.5rem !important;
    margin-top: 0.6rem !important;
  }

  /* 消除手机端横向溢出，容器左右边距收敛 */
  .container {
    padding: 0 0.85rem !important;
  }

  /* 移动端表单控件与按钮触控优化 */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important; /* 避免 iOS Safari 自动放大页面 */
    padding: 0.65rem 0.85rem !important;
    border-radius: 10px !important;
  }

  .btn-primary,
  .btn-secondary {
    padding: 0.65rem 1.2rem !important;
    font-size: 0.86rem !important;
  }

  /* 移动端快捷名片与联系方式网格 */
  .contact-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  .contact-grid img {
    max-width: 90px !important;
    border-radius: 8px !important;
  }

  /* 复杂表格手机端支持弹性滚动 */
  .table-responsive,
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.78rem !important;
  }

  /* ==================== 在线实用小工具移动端自适应重构 (Design-Taste-Frontend) ==================== */
  /* 1. 消除盒中盒与强制100%全宽，严防横向溢出 */
  #standalone-tool-mount,
  #standalone-tool-mount > div,
  #standalone-tool-mount .tool-workbench {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. 独立工作台顶栏标题与操作按钮自适应：标题在上、按钮自动换行平铺 */
  #standalone-tool-mount div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }
  #standalone-tool-mount div[style*="justify-content: space-between"] > div {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #standalone-tool-mount div[style*="justify-content: space-between"] > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    align-items: center !important;
  }
  #standalone-tool-mount div[style*="justify-content: space-between"] h3 {
    font-size: 1.12rem !important;
    line-height: 1.35 !important;
  }
  #standalone-tool-mount div[style*="justify-content: space-between"] p {
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
  }

  /* 3. 通用拖拽区与上传框在手机端更紧凑、不占过多纵向高度 */
  .tool-dropzone,
  #standalone-anime-dropzone,
  #standalone-invoice-panel-extract div[style*="dashed var(--border-color)"] {
    padding: 1.25rem 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. 通用双栏与多栏布局在手机端强制折叠为单列 (JSON格式化、文本去重、中英文排版、Base64、SVG、差异比对、水印等) */
  .workbench-grid-layout,
  #standalone-anime-inputs-grid,
  #standalone-watermark-grid,
  #standalone-b64-text-grid,
  #standalone-timestamp-grid,
  #standalone-svg-grid,
  #standalone-color-palette-grid,
  #standalone-diff-grid,
  #standalone-voice-clone-grid,
  #standalone-tool-mount div[style*="grid-template-columns: 1fr 1fr"],
  #standalone-tool-mount div[style*="grid-template-columns: 340px 1fr"],
  #standalone-tool-mount div[style*="grid-template-columns: 180px 1fr"],
  #standalone-tool-mount div[style*="grid-template-columns: repeat(2, 1fr)"],
  #standalone-tool-mount div[style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr)"],
  #standalone-tool-mount div[style*="grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5. 自适应卡片网格在手机端统一为单列，消除 minmax(300px/320px) 撑爆 360px 屏幕的问题 */
  #panel-sf-skincare,
  #panel-sf-fabric,
  #standalone-tool-mount div[style*="repeat(auto-fit, minmax("],
  #standalone-tool-mount div[style*="repeat(auto-fill, minmax("] {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 6. 手机端代码区域与双文本框适度缩小固定高度，杜绝滑动疲劳 */
  .workbench-code-editor,
  textarea.workbench-code-editor,
  #standalone-json-in,
  #standalone-json-out,
  #standalone-dedupe-in,
  #standalone-dedupe-out,
  #b64-raw-text,
  #b64-encoded-text,
  #svg-code-input,
  #diff-text-old,
  #diff-text-new {
    height: 220px !important;
    min-height: 160px !important;
    max-height: 38vh !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
  }

  /* 7. 图片转格式 3 列下拉框折叠为单列 */
  #standalone-img-settings-area div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }
  #img-settings-area > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  /* 8. 证件水印图片预览与各类海报画布手机端自适应缩放 */
  #wm-canvas,
  #cover-canvas,
  #love-canvas,
  #avatar-canvas {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 9. 调色盘手机端预览块全宽居中，输入框单列铺开 */
  #color-preview-block {
    height: 80px !important;
    width: 100% !important;
  }

  /* 10. 九宫格切图预览容器与按钮自适应 */
  #nine-grid-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 11. 聚餐AA账单行在手机端自适应多行折叠，输入框不挤出屏幕 */
  .bill-item-row {
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
  }
  .bill-item-row .bill-item-name {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .bill-item-row .bill-item-price {
    flex: 1 1 80px !important;
  }
  .bill-item-row .bill-item-eaters {
    flex: 2 1 130px !important;
  }

  /* 12. 本地视频播放器面板在手机端 100% 展开 */
  #panel-lv-player {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  #lv-video-container video {
    width: 100% !important;
  }

  /* 13. 以图搜番输入网格在弹窗与独立页面均单列排布 */
  #anime-search-inputs-grid,
  #standalone-anime-inputs-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
  #standalone-anime-url-input,
  #anime-url-input {
    font-size: 0.84rem !important;
    padding: 0.55rem 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #btn-standalone-execute-anime-search,
  #btn-execute-anime-search {
    width: 100% !important;
    padding: 0.65rem 1.2rem !important;
  }

  /* 14. 密码生成器输出栏与滑块在手机端优化 */
  #standalone-pwd-out {
    font-size: 1.05rem !important;
    padding: 0.6rem 0.75rem !important;
    letter-spacing: 0.5px !important;
  }

  /* 15. 表格容器水平滚动与触摸手势 */
  #standalone-invoice-ocr-result-area div[style*="overflow-y: auto"],
  #invoice-ocr-result-area div[style*="overflow-y: auto"],
  #url-params-panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==================== 梦女小手机在线 · 拟真 iPhone 外壳与防溢出专属样式 ==================== */
.yume-phone-grid-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  transition: all 0.3s ease;
}

.yume-phone-sticky-col {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yume-phone-quick-topbar {
  display: none !important;
}

/* ==================== 苹果官方 iPhone 15 Pro / 16 Pro 钛金属精工机身 ==================== */
.yume-iphone-chassis {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 苹果官方天线断条 (Antenna Bands) 微注塑细节 */
.yume-iphone-chassis::after {
  content: '';
  position: absolute;
  top: 75px;
  bottom: 75px;
  left: -2px;
  right: -2px;
  pointer-events: none;
  z-index: 8;
  background: 
    radial-gradient(ellipse at 0% 0%, rgba(0, 0, 0, 0.35) 0%, transparent 60%) 0 0 / 4px 3px no-repeat,
    radial-gradient(ellipse at 100% 0%, rgba(0, 0, 0, 0.35) 0%, transparent 60%) 100% 0 / 4px 3px no-repeat,
    radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 60%) 0 100% / 4px 3px no-repeat,
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 60%) 100% 100% / 4px 3px no-repeat;
}

/* 左侧物理按键：Action Button (操作按钮) + Volume Up + Volume Down (音量键) */
.yume-iphone-chassis::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 96px;
  width: 5px;
  height: 26px;
  background: linear-gradient(90deg, #b0b7be 0%, #f1f4f8 50%, #838a93 100%);
  border-radius: 3px 0 0 3px;
  box-shadow: 
    0 48px 0 0 #c2c9d2,
    0 108px 0 0 #c2c9d2,
    -1px 0 2px rgba(0, 0, 0, 0.25);
  z-index: 5;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 手机机身主体：钛合金 CNC 航空拉丝流光倒角与微弧屏幕胶圈 */
#yume-iphone-frame {
  width: 352px;
  max-width: 100%;
  height: min(712px, calc(100dvh - 150px));
  min-height: 520px;
  border-radius: 48px;
  border: 11px solid transparent;
  position: relative;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  user-select: none;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  contain: paint;
  isolation: isolate;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. 白色钛金属 (White Titanium - 银白冷锻合金流动高光) */
.yume-iphone-chassis.phone-case-white::before {
  background: linear-gradient(90deg, #b8c0c9 0%, #ffffff 50%, #9ba3ac 100%);
  box-shadow: 0 48px 0 0 #cad1d9, 0 108px 0 0 #cad1d9, -1px 0 3px rgba(0, 0, 0, 0.2);
}
#yume-iphone-frame.phone-case-white {
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(from 45deg, #ffffff 0deg, #b8c0c8 45deg, #f8fafc 110deg, #8a939d 195deg, #ffffff 270deg, #abb4be 330deg, #ffffff 360deg) border-box !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 0 2px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 0 0 3px #050505,
    inset 0 0 0 4px rgba(255, 255, 255, 0.12),
    0 28px 70px -12px rgba(15, 23, 42, 0.3),
    0 10px 25px -6px rgba(15, 23, 42, 0.15) !important;
}

/* 2. 黑色钛金属 (Black Titanium - 深空哑光钛金 PVD 镀膜) */
.yume-iphone-chassis.phone-case-black::before {
  background: linear-gradient(90deg, #383a3f 0%, #565961 50%, #1a1b1d 100%);
  box-shadow: 0 48px 0 0 #313337, 0 108px 0 0 #313337, -1px 0 3px rgba(0, 0, 0, 0.6);
}
#yume-iphone-frame.phone-case-black {
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(from 45deg, #52545a 0deg, #1c1d1f 45deg, #404247 110deg, #0d0e0f 195deg, #484a50 270deg, #161718 330deg, #52545a 360deg) border-box !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 2px #0a0a0c,
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 0 0 3px #000000,
    inset 0 0 0 4px rgba(255, 255, 255, 0.06),
    0 28px 75px -10px rgba(0, 0, 0, 0.7),
    0 10px 30px -5px rgba(0, 0, 0, 0.48) !important;
}

/* 3. 原色钛金属 (Natural Titanium - iPhone 经典温润微磨砂暖灰合金) */
.yume-iphone-chassis.phone-case-natural::before {
  background: linear-gradient(90deg, #999388 0%, #eae5dc 50%, #767066 100%);
  box-shadow: 0 48px 0 0 #a29c91, 0 108px 0 0 #a29c91, -1px 0 3px rgba(0, 0, 0, 0.3);
}
#yume-iphone-frame.phone-case-natural {
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(from 45deg, #ede9e1 0deg, #948e84 45deg, #ddd8cd 110deg, #6c665d 195deg, #e6e2da 270deg, #878177 330deg, #ede9e1 360deg) border-box !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 0 0 2px rgba(55, 48, 40, 0.25),
    inset 0 0 0 1px rgba(255, 245, 235, 0.7),
    inset 0 0 0 3px #070707,
    inset 0 0 0 4px rgba(255, 255, 255, 0.1),
    0 28px 70px -12px rgba(85, 75, 65, 0.38),
    0 10px 25px -6px rgba(85, 75, 65, 0.2) !important;
}

/* 4. 沙漠色钛金属 (Desert Titanium - iPhone 16 Pro 暖沙流金香槟微光) */
.yume-iphone-chassis.phone-case-desert::before {
  background: linear-gradient(90deg, #c7b6a2 0%, #fbf1e3 50%, #998672 100%);
  box-shadow: 0 48px 0 0 #d4c3b0, 0 108px 0 0 #d4c3b0, -1px 0 3px rgba(0, 0, 0, 0.25);
}
#yume-iphone-frame.phone-case-desert {
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(from 45deg, #f7eee1 0deg, #bfaa95 45deg, #f5ebd9 110deg, #8a7762 195deg, #faeedd 270deg, #a8947f 330deg, #f7eee1 360deg) border-box !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.88),
    0 0 0 2px rgba(100, 75, 50, 0.22),
    inset 0 0 0 1px rgba(255, 248, 240, 0.78),
    inset 0 0 0 3px #070605,
    inset 0 0 0 4px rgba(255, 255, 255, 0.1),
    0 28px 70px -12px rgba(140, 105, 70, 0.36),
    0 10px 25px -6px rgba(140, 105, 70, 0.18) !important;
}

/* 5. 深蓝色钛金属 (Blue Titanium - 冷锻深海幽蓝微反光) */
.yume-iphone-chassis.phone-case-blue::before {
  background: linear-gradient(90deg, #3a4c5e 0%, #728ea9 50%, #202b36 100%);
  box-shadow: 0 48px 0 0 #43596e, 0 108px 0 0 #43596e, -1px 0 3px rgba(0, 0, 0, 0.35);
}
#yume-iphone-frame.phone-case-blue {
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(from 45deg, #6c87a1 0deg, #243444 45deg, #53697e 110deg, #141e28 195deg, #5f7a93 270deg, #23313f 330deg, #6c87a1 360deg) border-box !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 0 2px rgba(15, 25, 35, 0.35),
    inset 0 0 0 1px rgba(200, 225, 255, 0.45),
    inset 0 0 0 3px #040608,
    inset 0 0 0 4px rgba(255, 255, 255, 0.08),
    0 28px 70px -12px rgba(20, 35, 55, 0.45),
    0 10px 25px -6px rgba(20, 35, 55, 0.22) !important;
}

/* 6. 清新浅粉 (Pink Edition - 雾面柔粉微珠光金铝合金) */
.yume-iphone-chassis.phone-case-pink::before {
  background: linear-gradient(90deg, #d3a4ad 0%, #fbe6ea 50%, #ab757f 100%);
  box-shadow: 0 48px 0 0 #dfb5bd, 0 108px 0 0 #dfb5bd, -1px 0 3px rgba(0, 0, 0, 0.2);
}
#yume-iphone-frame.phone-case-pink {
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(from 45deg, #fbe6e9 0deg, #d49da5 45deg, #fae2e6 110deg, #aa7079 195deg, #fde4e8 270deg, #c48c95 330deg, #fbe6e9 360deg) border-box !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.88),
    0 0 0 2px rgba(180, 80, 100, 0.2),
    inset 0 0 0 1px rgba(255, 240, 245, 0.75),
    inset 0 0 0 3px #080506,
    inset 0 0 0 4px rgba(255, 255, 255, 0.12),
    0 28px 70px -12px rgba(220, 90, 120, 0.28),
    0 10px 25px -6px rgba(220, 90, 120, 0.14) !important;
}

#yume-iphone-frame * {
  box-sizing: border-box;
}

/* 预设人设心动微立体 Bento 卡片 */
.yume-role-preset-card {
  padding: 0.75rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  user-select: none;
}

.yume-role-preset-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.4);
}

.yume-role-preset-card.active {
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
  border-color: #f43f5e;
  box-shadow: 0 4px 16px -2px rgba(244, 63, 94, 0.22), inset 0 0 0 1.5px #f43f5e;
}

.yume-role-preset-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s ease;
}

.yume-role-preset-card:hover .yume-role-preset-avatar {
  transform: scale(1.08);
}

.yume-role-preset-name {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.yume-role-preset-tag {
  font-size: 0.66rem;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.3;
}

/* 控制台 Segmented Tabs */
.yume-tab-nav {
  display: flex;
  gap: 0.35rem;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
}

.yume-tab-nav .tab-btn {
  border-radius: 10px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.yume-tab-nav .tab-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.6);
}

.yume-tab-nav .tab-btn.active {
  background: #ffffff;
  color: #f43f5e;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.15);
}

/* 自定义人设卡片与上传组件 */
.yume-config-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.3rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.yume-avatar-uploader-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  transition: all 0.2s ease;
}

.yume-avatar-uploader-card:hover {
  background: #ffffff;
  border-color: rgba(244, 63, 94, 0.3);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.06);
}

/* ==================== 苹果 iOS 微信高保真拟真聊天界面 ==================== */
.wechat-shell {
  background-color: #ededed;
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 微信顶部导航栏 */
.wechat-top-nav {
  height: 44px;
  background-color: #ededed;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  user-select: none;
}

.wechat-nav-back {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  color: #181818;
  font-size: 1.15rem;
  font-weight: 500;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}

.wechat-nav-back:active {
  background: rgba(0, 0, 0, 0.06);
}

.wechat-nav-title-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60%;
  pointer-events: none;
}

.wechat-nav-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #181818;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.wechat-nav-subtitle {
  font-size: 0.62rem;
  color: #888888;
  margin-top: -1px;
}

.wechat-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wechat-nav-dotbtn {
  background: none;
  border: none;
  font-size: 1.15rem;
  color: #181818;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
}

/* 微信消息气泡系统 (含精准小三角 Tail 与真实圆角) */
.wechat-msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 0.25rem;
  position: relative;
}

.wechat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.wechat-bubble {
  position: relative;
  max-width: 230px;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.45;
  word-break: break-word;
  user-select: text;
}

/* 对方发送的气泡：纯白底色，左侧指向头像小三角 */
.wechat-bubble-char {
  background-color: #ffffff;
  color: #000000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.wechat-bubble-char::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid #ffffff;
}

/* 我发送的气泡：微信经典护眼绿，右侧指向头像小三角 */
.wechat-bubble-me {
  background-color: #95ec69;
  color: #000000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.wechat-bubble-me::after {
  content: "";
  position: absolute;
  top: 14px;
  right: -6px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #95ec69;
}

/* 微信居中时间戳 */
.wechat-time-divider {
  text-align: center;
  margin: 10px 0 6px;
}

.wechat-time-text {
  font-size: 0.72rem;
  color: #999999;
  letter-spacing: 0.2px;
}

/* 微信红包卡片高保真拟真 */
.wechat-redpacket-box {
  width: 215px;
  background: #fa9d3b;
  border-radius: 6px;
  overflow: hidden;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(250, 157, 59, 0.25);
  position: relative;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.wechat-redpacket-box:hover {
  filter: brightness(1.03);
}

.wechat-redpacket-box:active {
  transform: scale(0.98);
}

.wechat-redpacket-top {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wechat-redpacket-gold {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ea7a1f;
  border: 1.5px solid #fbd294;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.wechat-redpacket-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wechat-redpacket-subtitle {
  font-size: 0.7rem;
  opacity: 0.88;
  margin-top: 3px;
}

.wechat-redpacket-bottom {
  background: #ffffff;
  padding: 5px 14px;
  font-size: 0.68rem;
  color: #8c8c8c;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 微信群聊成员名字小字与气泡包装 */
.wechat-msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 240px;
}
.wechat-group-sender-name {
  font-size: 0.72rem;
  color: #737373;
  margin-bottom: 3px;
  line-height: 1.2;
  font-weight: 500;
}
/* 微信朋友圈原生顶部导航栏 */
.wechat-moments-nav {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 60;
  flex-shrink: 0;
  user-select: none;
}
.wechat-moments-back-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  color: #181818;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.wechat-moments-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #181818;
}
/* 手机快捷胶囊按钮 */
.yume-switch-pill-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
}
.yume-switch-pill-btn:hover {
  border-color: #07c160;
  color: #07c160;
}
.yume-switch-pill-btn.active {
  background: #07c160;
  color: #ffffff;
  border-color: #07c160;
}

/* 微信底部拟真操作栏 (iOS 原生规范) */
.wechat-bottom-bar {
  background-color: #f7f7f7;
  border-top: 0.5px solid rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  user-select: none;
}

.wechat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 4px;
}

.wechat-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #181818;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: opacity 0.15s;
}

.wechat-icon-btn:active {
  opacity: 0.6;
}

.wechat-input-field {
  flex: 1;
  height: 36px;
  background: #ffffff;
  border-radius: 4px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  padding: 0 10px;
  font-size: 0.88rem;
  color: #000000;
  outline: none;
  caret-color: #07c160;
  transition: border-color 0.2s;
}

.wechat-input-field:focus {
  border-color: #07c160;
}

/* 微信专属优雅绿发送按钮 (高度 32px，圆角 4px，自然对齐) */
.wechat-send-btn {
  height: 32px;
  padding: 0 12px;
  background-color: #07c160;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s, transform 0.15s;
  box-shadow: 0 1px 3px rgba(7, 193, 96, 0.3);
}

.wechat-send-btn:hover {
  filter: brightness(1.05);
}

.wechat-send-btn:active {
  transform: scale(0.96);
  filter: brightness(0.95);
}

/* 点击加号展开的微信 4 格扩展功能区 */
.wechat-more-panel {
  display: none;
  padding: 12px 16px 8px;
  background-color: #f7f7f7;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  animation: wechatSlideUp 0.2s ease-out forwards;
}

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

.wechat-tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}

.wechat-tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: transform 0.15s;
}

.wechat-tool-card:active .wechat-tool-icon {
  transform: scale(0.92);
}

.wechat-tool-label {
  font-size: 0.7rem;
  color: #666666;
  font-weight: 500;
}

/* 底部 iPhone Home Indicator 安全指示条 */
.wechat-home-indicator-safe-area {
  padding: 6px 0 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wechat-home-pill {
  width: 134px;
  height: 5px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  transition: background-color 0.2s;
}

/* 微信原生四大底部导航栏 (高度 50px + 安全区) */
.wechat-main-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
  background-color: #f7f7f7;
  border-top: 0.5px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  user-select: none;
  z-index: 30;
}
.wechat-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #7a7a7a;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  position: relative;
  transition: color 0.15s;
}
.wechat-tab-item.active {
  color: #07c160;
}
.wechat-tab-icon {
  font-size: 1.15rem;
  line-height: 1;
  position: relative;
}
.wechat-tab-label {
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1;
}
.wechat-tab-badge {
  position: absolute;
  top: -2px;
  right: -8px;
  background: #fa5151;
  color: #ffffff;
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.wechat-tab-dot {
  position: absolute;
  top: -1px;
  right: -5px;
  background: #fa5151;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

/* 微信会话列表 (消息页面) */
.wechat-conversations-list {
  flex: 1;
  overflow-y: auto;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
.wechat-conversation-item {
  display: flex;
  align-items: center;
  padding: 11px 16px;
  position: relative;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.1s;
  user-select: none;
  text-align: left !important;
}
.wechat-conversation-item:active {
  background: #ececec !important;
}
.wechat-conversation-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 68px;
  right: 0;
  height: 0.5px;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.wechat-conversation-item.active {
  background: rgba(7, 193, 96, 0.08);
}
.wechat-conv-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.wechat-conv-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 12px;
  text-align: left !important;
}
.wechat-conv-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  text-align: left !important;
}
.wechat-conv-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: #181818;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left !important;
}
.wechat-conv-time {
  font-size: 0.7rem;
  color: #b2b2b2;
  flex-shrink: 0;
  margin-left: 6px;
}
.wechat-conv-preview {
  font-size: 0.8rem;
  color: #888888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  text-align: left !important;
}
/* 微信通用通栏列表组 (发现、通讯录、我) 原生高精度还原 */
.wechat-cell-group {
  margin-top: 10px;
  background: #ffffff;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  position: relative;
}
.wechat-cell-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  position: relative;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.1s ease;
  user-select: none;
  text-align: left !important;
}
.wechat-cell-item:active {
  background: #ececec !important;
}
/* 微信官方原生缩进分割线：避开左侧图标，仅在文字下方延伸 */
.wechat-cell-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 54px;
  right: 0;
  height: 0.5px;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.wechat-cell-item.wechat-contact-item:not(:last-child)::after {
  left: 64px;
}
.wechat-cell-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-right: 14px;
}
.wechat-cell-title {
  flex: 1;
  min-width: 0;
  text-align: left !important;
  font-size: 0.95rem;
  font-weight: 400;
  color: #181818;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 0 !important;
}
.wechat-cell-arrow {
  color: #c7c7cc;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  margin-left: 6px;
  flex-shrink: 0;
}

/* 朋友圈封面轻触更换遮罩提示 */
.wechat-moments-cover-edit-hint {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: opacity 0.2s;
}
.wechat-moments-cover-edit-hint:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* 机身颜色与壁纸选择器胶囊按钮 */
.yume-color-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.yume-color-pill-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #07c160;
}

.yume-color-pill-btn.active {
  border-color: #07c160;
  background: rgba(7, 193, 96, 0.1);
  color: #07c160;
  box-shadow: 0 0 0 1px #07c160;
}

.yume-color-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

/* 原生自定义拾色器胶囊标签 */
.yume-color-picker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.yume-color-picker-label:hover {
  border-color: #07c160;
  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.15);
}

.yume-color-native-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: none;
}

.yume-color-native-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.yume-color-native-input::-webkit-color-swatch {
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

/* 手机正上方快捷外观操作微顶栏 */
.yume-phone-quick-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 350px;
  max-width: 100%;
  margin-bottom: 0.65rem;
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  font-size: 0.74rem;
}

@media (max-width: 860px) {
  .yume-phone-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .yume-phone-sticky-col {
    position: static !important;
  }

  #yume-iphone-frame {
    width: 100% !important;
    max-width: 360px !important;
    height: calc(100dvh - 140px) !important;
    min-height: 520px !important;
    border-radius: 36px !important;
    border: 6px solid #1e293b !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  }
}

/* 全屏真机沉浸模式：彻底隐藏网站全局导航与外部工作台顶栏，脱离包含块限制 */
body.yume-fullscreen-mode {
  overflow: hidden !important;
}

body.yume-fullscreen-mode .navbar,
body.yume-fullscreen-mode #section-tool-workbench > div:first-child,
body.yume-fullscreen-mode .bg-glow-container,
body.yume-fullscreen-mode .yume-phone-quick-topbar,
body.yume-fullscreen-mode .yume-phone-controls-wrapper {
  display: none !important;
}

body.yume-fullscreen-mode .deck-viewport,
body.yume-fullscreen-mode .container,
body.yume-fullscreen-mode #section-tool-workbench,
body.yume-fullscreen-mode #standalone-tool-mount {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  filter: none !important;
}

body.yume-fullscreen-mode #yume-iphone-frame {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 99998 !important;
  -webkit-mask-image: none !important;
  contain: none !important;
  pointer-events: auto !important;
}

body.yume-fullscreen-mode #yume-screen-body {
  border-radius: 0 !important;
}

body.yume-fullscreen-mode #yume-mobile-floating-btn {
  display: none !important;
  position: fixed !important;
  right: 16px !important;
  bottom: 68px !important;
  z-index: 100000 !important;
  pointer-events: none !important;
}

/* 微信主界面各可交互元素移动端触控优化 */
.wechat-main-tabbar,
.wechat-tab-item,
.wechat-conversation-item,
.wechat-cell-item,
.wechat-nav-back,
.wechat-moments-back-btn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 微信原生二级设置与资料卡片样式 */
.wechat-wallpaper-card {
  transition: all 0.2s ease;
  user-select: none;
}
.wechat-wallpaper-card:active {
  transform: scale(0.96);
  opacity: 0.85;
}
.wechat-case-select-card {
  transition: all 0.2s ease;
  user-select: none;
}
.wechat-case-select-card:active {
  background-color: #f1f5f9 !important;
  transform: scale(0.98);
}

/* 移动端/全屏抽屉动画 */
#yume-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 100001;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

#yume-drawer-overlay.active {
  display: flex;
}

#yume-drawer-sheet {
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  background: var(--bg-card);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 1.25rem 1.25rem 2rem;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
  animation: yumeSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes yumeSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* 微信右上角气泡菜单与拟真扫一扫动画 */
.wechat-plus-bubble-item {
  transition: background 0.15s ease;
  user-select: none;
}
.wechat-plus-bubble-item:active {
  background: rgba(255, 255, 255, 0.12) !important;
}

@keyframes wechatLaserScan {
  0% {
    top: 5%;
    opacity: 0.8;
  }
  50% {
    top: 85%;
    opacity: 1;
  }
  100% {
    top: 5%;
    opacity: 0.8;
  }
}

.wechat-scan-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(7, 193, 96, 0) 0%, #07c160 50%, rgba(7, 193, 96, 0) 100%);
  box-shadow: 0 0 8px #07c160;
  animation: wechatLaserScan 2s infinite ease-in-out;
}

/* ==========================================================================
   Arc / macOS 风格侧边栏左下角浮动设置与用户态弹出菜单
   ========================================================================== */
.sidebar-user-card {
  position: relative;
  width: 100%;
}

.sidebar-user-popmenu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 245px;
  max-width: calc(100vw - 20px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 16px;
  box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.14), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  padding: 0.85rem;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.97);
  transform-origin: bottom left;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
}

.sidebar-user-popmenu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.user-popmenu-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.user-popmenu-header:hover {
  background: var(--bg-secondary);
}

.user-popmenu-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.user-popmenu-info {
  flex: 1;
  min-width: 0;
}

.user-popmenu-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.user-popmenu-role {
  font-size: 0.75rem;
  color: #10b981;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1px;
}

.user-popmenu-arrow {
  font-size: 1.1rem;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.user-popmenu-header:hover .user-popmenu-arrow {
  transform: translateX(2px);
  color: var(--accent-primary);
}

.user-popmenu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0.55rem 0;
  opacity: 0.75;
}

.user-popmenu-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dim);
  padding: 0.2rem 0.4rem 0.45rem;
  letter-spacing: 0.02em;
}

.user-popmenu-themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}

.theme-chip-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.theme-chip-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
}

.theme-chip-btn.active {
  background: rgba(14, 165, 233, 0.08);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: 700;
}

[data-theme="leaf"] .theme-chip-btn.active {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
  color: #059669;
}

[data-theme="sakura"] .theme-chip-btn.active {
  background: rgba(244, 114, 182, 0.1);
  border-color: #f472b6;
  color: #db2777;
}

[data-theme="amber"] .theme-chip-btn.active {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
  color: #d97706;
}

.theme-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.user-popmenu-action-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.user-popmenu-action-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}

.user-popmenu-action-item:hover {
  background: var(--bg-secondary);
}

#popmenu-logout-container {
  border-top: 1px solid var(--border-color);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

.user-popmenu-action-logout {
  color: #ef4444;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.user-popmenu-action-logout:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

.popmenu-state-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.popmenu-state-badge.active {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

/* 侧边栏底部触发按钮及更多操作图标 */
.sidebar-auth-extra {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.sidebar-auth-more-dots {
  font-size: 1.15rem;
  color: var(--text-dim);
  padding: 0 4px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-auth-btn:hover .sidebar-auth-more-dots {
  color: var(--text-main);
  background: var(--bg-secondary);
}

/* ==========================================================================
   微信公众号排版助手：三模自由视口系统与一体化高奢控制中枢
   ========================================================================== */
.wechat-workbench-root {
  width: 100%;
}

.show-mobile-only {
  display: none !important;
}

.wechat-hub-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* 一体化控制中枢 (Unified Action Bar) */
.wechat-control-hub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.55rem 0.95rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 4px 12px -2px rgba(15, 23, 42, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  gap: 0.75rem;
  flex-wrap: wrap;
  transition: all 0.25s ease;
}

.wechat-hub-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.wechat-hub-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wechat-hub-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.wechat-hub-divider {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  margin: 0 0.2rem;
  flex-shrink: 0;
}

/* 三模自由视口切换器 (纯净编辑 / 双栏对照 / 手机预览) */
.wechat-view-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  padding: 3px;
  gap: 3px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.wechat-view-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  user-select: none;
}

.wechat-view-btn:hover {
  color: var(--text-main);
}

.wechat-view-btn.active {
  background: var(--bg-card);
  color: var(--accent-primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* 主题选择与字号步进器 */
.wechat-theme-picker {
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  border-radius: 12px;
  width: auto;
  font-weight: 600;
  cursor: pointer;
}

.wechat-font-stepper {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.wechat-font-stepper button {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  color: var(--text-main);
}

.wechat-font-stepper button:hover {
  background: var(--bg-card);
  color: var(--accent-primary);
}

.wechat-font-stepper span {
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem;
  color: var(--text-main);
  font-weight: 700;
  display: flex;
  align-items: center;
}

.wechat-btn-sub {
  font-size: 0.76rem;
  padding: 0.32rem 0.75rem;
  border-radius: 12px;
  cursor: pointer;
}

.wechat-btn-quick-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  height: 30px;
  line-height: 30px;
  padding: 0 0.95rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #07c160, #10b981);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(7, 193, 96, 0.28);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  flex-shrink: 0;
}

.wechat-btn-quick-copy:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(7, 193, 96, 0.38);
}

.wechat-btn-quick-copy:active {
  transform: translateY(0);
}

/* 三模自由视口网格布局系统 */
.wechat-formatter-layout {
  display: grid;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: calc(100vh - 220px);
  width: 100%;
}

/* 三模自由视口网格布局系统 (仅在桌面大屏 >= 769px 生效，手机端由专属滑块接管) */
@media (min-width: 769px) {
  /* 1. 默认与双栏实时对照模式 */
  .wechat-formatter-layout.view-split {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 420px);
    gap: 1.5rem;
  }

  .wechat-formatter-layout.view-split .wechat-editor-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .wechat-formatter-layout.view-split .wechat-preview-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }

  /* 2. 纯净沉浸编辑模式 (隐藏预览，编辑框居中舒展) */
  .wechat-formatter-layout.view-editor {
    grid-template-columns: 1fr;
    max-width: 980px;
    margin: 0 auto;
  }

  .wechat-formatter-layout.view-editor .wechat-editor-pane {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .wechat-formatter-layout.view-editor .wechat-preview-pane {
    display: none !important;
  }

  /* 3. 手机真机预览模式 (隐藏编辑框，手机居中陈列) */
  .wechat-formatter-layout.view-preview {
    grid-template-columns: 1fr;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0.5rem;
  }

  .wechat-formatter-layout.view-preview .wechat-editor-pane {
    display: none !important;
  }

  .wechat-formatter-layout.view-preview .wechat-preview-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
}

/* 编辑器源码区 */
.wechat-editor-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.wechat-editor-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wechat-real-textarea {
  flex: 1;
  height: 100% !important;
  min-height: calc(100vh - 270px) !important;
  resize: none !important;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.92rem;
  line-height: 1.7;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  color: var(--text-main);
}

.wechat-real-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
  outline: none;
}

/* 快捷格式工具栏 (轻量扁平悬浮质感) */
.wechat-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.55rem;
  margin-bottom: 0.55rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.wechat-editor-toolbar::-webkit-scrollbar {
  height: 3px;
}
.wechat-editor-toolbar::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.wechat-tb-group {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  flex-shrink: 0;
}

.wechat-tb-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.22rem 0.46rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
  line-height: 1.2;
}

.wechat-tb-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-main);
  border-color: var(--border-color);
  transform: translateY(-1px);
}

.wechat-tb-btn:active {
  transform: translateY(0);
}

.wechat-tb-divider {
  width: 1px;
  height: 14px;
  background: var(--border-color);
  margin: 0 0.15rem;
  flex-shrink: 0;
}

/* 微信公众号高保真手机机身模拟器 (iPhone 17 Pro 真实 19.5:9 黄金视口) */
.wechat-phone-mockup {
  width: 380px;
  max-width: 100%;
  height: 720px;
  max-height: min(740px, calc(100vh - 180px));
  background: #ffffff;
  border: 7px solid #1c1917;
  border-radius: 44px;
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.2), 0 4px 16px -4px rgba(15, 23, 42, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: all 0.25s ease;
  margin: 0 auto;
  flex-shrink: 0;
}

.wechat-phone-statusbar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.65rem 1rem 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  height: 42px;
  box-sizing: border-box;
}

/* iPhone 17 Pro 真实拟态灵动岛 (Dynamic Island) */
.wechat-phone-notch {
  width: 80px;
  height: 16px;
  background: #000000;
  border-radius: 14px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.wechat-phone-status-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #475569;
  padding-top: 6px;
}

.wechat-preview-tag {
  background: rgba(7, 193, 96, 0.12);
  color: #07c160;
  padding: 0.12rem 0.45rem;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-top: 6px;
}

.wechat-phone-screen {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.05rem;
  background: #ffffff;
  color: #334155;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  line-height: 1.75;
}

.wechat-phone-screen::-webkit-scrollbar {
  width: 4px;
}
.wechat-phone-screen::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

@media (max-width: 900px) and (min-width: 769px) {
  .wechat-formatter-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    min-height: auto !important;
  }

  .wechat-formatter-layout .wechat-editor-pane,
  .wechat-formatter-layout .wechat-preview-pane {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .wechat-formatter-layout textarea.code-area,
  #standalone-wechat-markdown-input,
  #wechat-markdown-input {
    min-height: 280px !important;
    height: 320px !important;
    font-size: 0.85rem !important;
  }

  .wechat-formatter-layout #standalone-wechat-preview-container,
  .wechat-formatter-layout #wechat-preview-container {
    min-height: 460px !important;
    padding: 1.25rem 1rem !important;
  }
}

/* ==========================================================================
   中英文排版助手现代一体化工具栏体系 (Spacing Workbench Architecture)
   ========================================================================== */
.spacing-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.85rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.spacing-header-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.spacing-header-desc {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 0.25rem 0 0;
}

.spacing-desktop-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
}

.spacing-control-hub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.85rem;
  gap: 0.75rem;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.spacing-hub-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.spacing-hub-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.spacing-options-dropdown {
  position: relative;
  display: inline-block;
}

.spacing-options-toggle-btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.spacing-options-toggle-btn::-webkit-details-marker {
  display: none;
}

.spacing-options-toggle-btn:hover {
  background: var(--bg-card);
  border-color: var(--accent-primary);
}

.spacing-options-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 175px;
  font-size: 0.78rem;
}

.spacing-options-popover label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: var(--text-main);
  white-space: nowrap;
}

.spacing-icon-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-main);
  transition: all 0.2s ease;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spacing-icon-btn:hover {
  background: var(--bg-card);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.spacing-icon-btn-danger:hover {
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

.spacing-action-run {
  height: 32px;
  padding: 0.25rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
}

.spacing-action-copy {
  height: 32px;
  padding: 0.25rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

/* 手机端专属 (<= 768px)：左右滑动切换编辑区与实时预览区 + 自动换行与宽度绝对锁死 */
@media (max-width: 768px) {
  /* 根外层容器：强制 100% 宽度，严禁横向溢出 */
  .wechat-workbench-root,
  #wechat-formatter-modal .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* 顶部排版引擎与工具栏：限制在 100% 宽度内，不撑大整页 */
  .wechat-workbench-root > div,
  #wechat-formatter-modal .modal-box > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .show-mobile-only {
    display: flex !important;
  }

  /* 紧凑控制岛容器：支持折叠展开 (Design-Taste-Frontend) */
  .wechat-sub-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    padding: 0.35rem 0.6rem !important;
    margin-bottom: 0.4rem !important;
    border-radius: 12px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wechat-sub-toolbar.collapsed {
    padding: 0.22rem 0.55rem !important;
    margin-bottom: 0.35rem !important;
  }
  .wechat-sub-toolbar.collapsed .wechat-hub-body {
    display: none !important;
  }
  .wechat-hub-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }
  .wechat-sub-toolbar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 24px !important;
    padding-bottom: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .wechat-sub-toolbar.collapsed .wechat-sub-toolbar-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 22px !important;
  }
  .wechat-sub-toolbar-title {
    font-size: 0.74rem !important;
    gap: 0.25rem !important;
  }
  .wechat-btn-quick-copy {
    height: 20px !important;
    line-height: 20px !important;
    font-size: 0.66rem !important;
    padding: 0 0.45rem !important;
  }
  .wechat-toolbar-toggle-btn {
    height: 20px !important;
    line-height: 18px !important;
    font-size: 0.64rem !important;
    padding: 0 0.38rem !important;
  }

  /* 行 1：三大排版引擎独占 100% 满宽，绝无挤压、绝无重叠 */
  .wechat-toolbar-row-top {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #wechat-engine-tabs,
  #standalone-wechat-engine-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bg-secondary) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    gap: 4px !important;
    border: 1px solid var(--border-color) !important;
  }

  #wechat-engine-tabs .btn-mode-pill,
  #standalone-wechat-engine-tabs .btn-mode-pill {
    flex: 1 1 33.33% !important;
    width: 33.33% !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 0.38rem 0.25rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #wechat-engine-tabs .btn-mode-pill.active,
  #standalone-wechat-engine-tabs .btn-mode-pill.active {
    background: var(--bg-card) !important;
    color: var(--accent-primary) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
    border: 1px solid var(--border-color) !important;
  }

  /* 行 2：主题字号 (左翼) + 范文清空复制 (右翼)，两端对齐自然流式布局 */
  .wechat-toolbar-row-bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.25rem !important;
    width: 100% !important;
    border-top: 1px dashed var(--border-color) !important;
    padding-top: 0.4rem !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }

  .wechat-tool-group-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
  }

  .wechat-tool-group-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .wechat-theme-picker {
    height: 29px !important;
    padding: 0.12rem 0.25rem !important;
    font-size: 0.72rem !important;
    max-width: 92px !important;
    border-radius: 8px !important;
    background: var(--bg-secondary) !important;
    font-weight: 700 !important;
  }

  .wechat-font-stepper {
    height: 29px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .wechat-font-stepper button {
    padding: 0.12rem 0.35rem !important;
    font-size: 0.72rem !important;
  }

  .wechat-font-stepper span {
    padding: 0 0.3rem !important;
    font-size: 0.72rem !important;
  }

  .wechat-btn-sub {
    height: 29px !important;
    padding: 0.18rem 0.42rem !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .wechat-btn-copy-main {
    height: 29px !important;
    padding: 0.2rem 0.65rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    box-shadow: 0 2px 6px rgba(7, 193, 96, 0.25) !important;
    flex-shrink: 0 !important;
  }

  /* 分段切换栏：两端对齐平分 100% 宽度 */
  .wechat-mobile-switch-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 9999px !important;
    padding: 3px !important;
    margin-bottom: 0.65rem !important;
    gap: 4px !important;
    box-shadow: var(--shadow-sm) !important;
  }

  .wechat-mobile-tab-btn {
    flex: 1 1 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.42rem 0.5rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
  }

  .wechat-mobile-tab-btn.active {
    background: var(--accent-primary) !important;
    color: var(--accent-text) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28) !important;
  }

  /* 滑块布局容器：100% 宽度，单行横滑，各屏严格 100% 宽度 */
  .wechat-formatter-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
  }

  .wechat-formatter-layout::-webkit-scrollbar {
    display: none !important;
  }

  /* 两个面板：宽度 100%，min-width 为 0 防止 Flex 撑破 */
  .wechat-formatter-layout .wechat-editor-pane,
  .wechat-formatter-layout .wechat-preview-pane {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 290px) !important;
    min-height: 420px !important;
    max-height: 620px !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* 源码文本框：宽度严格 100%，内边距包含在内，强制全自动多行软折行 */
  .wechat-formatter-layout textarea.code-area,
  #standalone-wechat-markdown-input,
  #wechat-markdown-input {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    resize: none !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0.85rem !important;
  }

  /* 实时预览容器：宽度严格 100%，强制段落与文字全自动换行，绝不横向撑爆 */
  .wechat-formatter-layout #standalone-wechat-preview-container,
  .wechat-formatter-layout #wechat-preview-container {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem 0.85rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* 预览内容所有子元素：严格限宽并自动折行 */
  .wechat-formatter-layout .wechat-preview-pane * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .wechat-formatter-layout .wechat-preview-pane p,
  .wechat-formatter-layout .wechat-preview-pane li,
  .wechat-formatter-layout .wechat-preview-pane blockquote,
  .wechat-formatter-layout .wechat-preview-pane h1,
  .wechat-formatter-layout .wechat-preview-pane h2,
  .wechat-formatter-layout .wechat-preview-pane h3,
  .wechat-formatter-layout .wechat-preview-pane h4 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* 代码块与表格：自身不撑大父容器，支持内部横向滚动 */
  .wechat-formatter-layout .wechat-preview-pane pre,
  .wechat-formatter-layout .wechat-preview-pane table,
  .wechat-formatter-layout .wechat-preview-pane section {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .wechat-phone-mockup {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    min-height: 100% !important;
    height: 100% !important;
  }

  .wechat-phone-notch {
    display: none !important;
  }

  /* 移动端中英文排版助手大幅精简：对齐公众号排版助手极简紧凑风格 */
  .spacing-header-desc {
    display: none !important;
  }

  .spacing-header-bar {
    padding-bottom: 0.35rem !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    gap: 0.35rem !important;
  }

  .spacing-header-title {
    font-size: 1rem !important;
  }

  .spacing-desktop-actions {
    display: none !important;
  }

  .spacing-control-hub {
    padding: 0.35rem 0.65rem !important;
    gap: 0.35rem !important;
    border-radius: 12px !important;
    margin-bottom: 0.35rem !important;
  }

  .spacing-hub-left {
    gap: 0.3rem !important;
  }

  .spacing-options-toggle-btn {
    padding: 0.2rem 0.45rem !important;
    font-size: 0.72rem !important;
    height: 28px !important;
  }

  .spacing-icon-btn {
    padding: 0.2rem 0.45rem !important;
    font-size: 0.78rem !important;
    height: 28px !important;
  }

  .spacing-action-run {
    display: none !important;
  }

  .spacing-action-copy {
    height: 28px !important;
    padding: 0.15rem 0.75rem !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
  }

  /* 移动端弹窗优化 */
  #text-spacing-modal .modal-box p {
    display: none !important;
  }
  #text-spacing-modal .modal-box {
    padding: 1.25rem 1rem !important;
  }
  #text-spacing-modal textarea#text-spacing-input {
    height: min(240px, 45vh) !important;
  }

  /* 中英文排版移动端专属左右选项卡与滑块切换布局 */
  .spacing-workbench-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
  }

  .spacing-workbench-layout::-webkit-scrollbar {
    display: none !important;
  }

  .spacing-workbench-layout .spacing-editor-pane,
  .spacing-workbench-layout .spacing-preview-pane {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 175px) !important;
    min-height: 420px !important;
    max-height: 650px !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .spacing-workbench-layout textarea.code-area,
  #standalone-spacing-in,
  #standalone-spacing-out {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    resize: none !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0.85rem !important;
  }
}

/* 赞助伙伴颜色按钮默认状态 (PC) */
.sponsor-btn-circle {
  display: none;
}
.sponsor-btn-emoji {
  display: inline;
}

/* 移动端专属：隐藏 Emoji，展示彩色预览指示圈与预览色边框，文字单行不折行 */
@media (max-width: 768px) {
  #sponsor-color-picker-grid {
    gap: 0.35rem !important;
  }
  #sponsor-color-picker-grid .sponsor-color-btn {
    padding: 0.48rem 0.15rem !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    line-height: 1 !important;
  }
  #sponsor-color-picker-grid .sponsor-btn-emoji {
    display: none !important;
  }
  #sponsor-color-picker-grid .sponsor-btn-circle {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
  }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="gold"] .sponsor-btn-circle { background: #f59e0b !important; box-shadow: 0 0 5px rgba(245, 158, 11, 0.7) !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="gold"] { border-color: rgba(245, 158, 11, 0.45) !important; color: #b45309 !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="gold"].active { border-color: #f59e0b !important; background: rgba(245, 158, 11, 0.12) !important; }

  #sponsor-color-picker-grid .sponsor-color-btn[data-color="purple"] .sponsor-btn-circle { background: #a855f7 !important; box-shadow: 0 0 5px rgba(168, 85, 247, 0.7) !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="purple"] { border-color: rgba(168, 85, 247, 0.45) !important; color: #7e22ce !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="purple"].active { border-color: #a855f7 !important; background: rgba(168, 85, 247, 0.12) !important; }

  #sponsor-color-picker-grid .sponsor-color-btn[data-color="cyan"] .sponsor-btn-circle { background: #06b6d4 !important; box-shadow: 0 0 5px rgba(6, 182, 212, 0.7) !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="cyan"] { border-color: rgba(6, 182, 212, 0.45) !important; color: #0e7490 !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="cyan"].active { border-color: #06b6d4 !important; background: rgba(6, 182, 212, 0.12) !important; }

  #sponsor-color-picker-grid .sponsor-color-btn[data-color="rose"] .sponsor-btn-circle { background: #ec4899 !important; box-shadow: 0 0 5px rgba(236, 72, 153, 0.7) !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="rose"] { border-color: rgba(236, 72, 153, 0.45) !important; color: #be185d !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="rose"].active { border-color: #ec4899 !important; background: rgba(236, 72, 153, 0.12) !important; }

  #sponsor-color-picker-grid .sponsor-color-btn[data-color="flame"] .sponsor-btn-circle { background: #f97316 !important; box-shadow: 0 0 5px rgba(249, 115, 22, 0.7) !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="flame"] { border-color: rgba(249, 115, 22, 0.45) !important; color: #c2410c !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="flame"].active { border-color: #f97316 !important; background: rgba(249, 115, 22, 0.12) !important; }

  #sponsor-color-picker-grid .sponsor-color-btn[data-color="silver"] .sponsor-btn-circle { background: #94a3b8 !important; box-shadow: 0 0 5px rgba(148, 163, 184, 0.7) !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="silver"] { border-color: rgba(148, 163, 184, 0.45) !important; color: #475569 !important; }
  #sponsor-color-picker-grid .sponsor-color-btn[data-color="silver"].active { border-color: #94a3b8 !important; background: rgba(148, 163, 184, 0.12) !important; }

}

/* ==========================================================================
   个人中心与用户大盘高级对齐与设计系统 (design-taste-frontend)
   ========================================================================== */
#user-logged-in-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  gap: 1.6rem !important;
  align-items: start !important;
  width: 100% !important;
}

#user-logged-in-panel > .glass-card,
.user-dashboard-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  cursor: default !important;
  transform: none !important;
  padding: 1.75rem !important;
  box-shadow: var(--shadow-card), var(--card-inner-highlight) !important;
  border-radius: 20px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  min-height: auto !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

#user-logged-in-panel > .glass-card:hover,
.user-dashboard-card:hover {
  transform: none !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card), var(--card-inner-highlight) !important;
}

/* 统一左右两列的 Header 对齐与视觉基线 */
.user-panel-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  width: 100% !important;
  min-height: 52px !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 1rem !important;
}

.user-panel-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.user-panel-header-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  font-size: 1.3rem !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

.user-panel-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
  min-width: 0 !important;
  text-align: left !important;
}

.user-panel-title-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
}

.user-panel-info {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.65rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.user-panel-title {
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  letter-spacing: -0.015em !important;
}

.user-panel-subtitle {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* 核心数值指示卡片网格 (能量 & 签到天数) */
.user-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.1rem !important;
  width: 100% !important;
  margin-bottom: 1.5rem !important;
}

.user-stat-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md, 14px) !important;
  padding: 1.15rem 1.25rem !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 0.4rem !important;
  transition: border-color 0.25s ease, background 0.25s ease !important;
}

.user-stat-card:hover {
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.user-stat-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  text-align: left !important;
}

.user-stat-value {
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  color: var(--text-main) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
  font-variant-numeric: tabular-nums !important;
  margin: 0.25rem 0 !important;
  text-align: left !important;
}

#user-points-count.user-stat-value {
  color: var(--accent-primary) !important;
}

.user-stat-sub {
  font-size: 0.73rem !important;
  color: var(--text-dim) !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* 子模块区域标题 */
.user-sub-section-title {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  margin: 1.5rem 0 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  width: 100% !important;
}

/* 子卡片通用规范 */
.user-sub-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md, 14px) !important;
  padding: 1.15rem 1.25rem !important;
  margin-bottom: 1.15rem !important;
  text-align: left !important;
  width: 100% !important;
}

.user-sub-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0.5rem !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

.user-sub-card-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.user-sub-card-desc {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 0 0.85rem !important;
  text-align: left !important;
}

/* 右侧能量点收支明细列表 */
.points-log-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

.points-log-scroll {
  max-height: 680px !important;
  overflow-y: auto !important;
  padding-right: 0.35rem !important;
  width: 100% !important;
}

.points-log-scroll::-webkit-scrollbar {
  width: 5px;
}
.points-log-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.points-log-scroll::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 9999px;
}
.points-log-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

.points-log-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.85rem 0.65rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  transition: background 0.15s ease !important;
  gap: 1rem !important;
}

.points-log-item:hover {
  background: var(--bg-secondary) !important;
}

.points-log-item:last-child {
  border-bottom: none !important;
}

.points-log-title {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.points-log-date {
  font-size: 0.74rem !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono, monospace) !important;
  margin-top: 0.2rem !important;
  text-align: left !important;
}

.points-log-change {
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 6px !important;
  line-height: 1 !important;
}

.points-log-change.positive {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
}

.points-log-change.negative {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

@media (max-width: 900px) {
  #user-logged-in-panel {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .user-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

.user-panel-badge-wrap {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
}

.user-panel-logout-container {
  flex-shrink: 0;
  margin-left: auto;
  align-self: flex-start;
  margin-top: 0;
}

.user-header-logout-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 0.9rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.32) !important;
  background: rgba(239, 68, 68, 0.04) !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.05) !important;
}

.user-header-logout-btn:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.15) !important;
}

.user-header-logout-btn:active {
  transform: translateY(0);
}

/* 移动端专属适配 (<= 768px)：固定位置锁死，首行视觉居中绝对齐平 */
@media (max-width: 768px) {
  .user-panel-card-header {
    align-items: center !important;
    gap: 0.6rem !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.85rem !important;
  }
  .user-panel-info {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .user-panel-title {
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
  }
  .user-panel-logout-container {
    margin-top: 1px !important;
  }
  .user-header-logout-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 0.75rem !important;
    font-size: 0.78rem !important;
  }
}

/* ==========================================================================
   全网影视多源聚合检索卡片与选集线路 UI (精细化自适应与同排展示)
   ========================================================================== */

.movie-result-card {
  padding: 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  position: relative;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  align-items: stretch;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.movie-card-main-row {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.movie-card-poster {
  width: 114px;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  background: #1e293b;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.movie-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  justify-content: space-between;
}

.movie-card-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
  word-break: break-all;
  line-height: 1.3;
}

.movie-card-route-section {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--border-color);
  width: 100%;
  box-sizing: border-box;
}

.movie-route-single-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  width: 100%;
}

.movie-route-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.movie-route-controls-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.movie-route-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.movie-route-dropdown {
  font-size: 0.78rem;
  padding: 0.24rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-weight: 600;
  cursor: pointer;
  max-width: 320px;
  min-width: 160px;
  height: auto;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s ease;
}

.movie-route-dropdown:focus {
  border-color: var(--accent-primary);
}

.movie-single-ep-wrapper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.movie-ep-btn {
  font-size: 0.78rem;
  padding: 0.28rem 0.85rem;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1.35;
}

.movie-episodes-scroll-container {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  max-height: 160px;
  overflow-y: auto;
  padding-right: 2px;
}

.movie-route-count-badge {
  font-size: 0.74rem;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 移动端 (<= 768px) 精简紧凑排版优化 (彻底消灭截断与多余空白) */
@media (max-width: 768px) {
  .movie-result-card {
    padding: 0.8rem 0.85rem !important;
    gap: 0.65rem !important;
  }

  .movie-card-main-row {
    gap: 0.75rem !important;
  }

  .movie-card-poster {
    width: 86px !important;
    height: 120px !important;
    border-radius: 6px !important;
  }

  .movie-card-title {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }

  .movie-card-info {
    gap: 0.35rem !important;
  }

  .movie-card-info .badge {
    font-size: 0.66rem !important;
    padding: 0.1rem 0.35rem !important;
  }

  .movie-card-route-section {
    padding: 0.5rem 0.65rem !important;
    border-radius: 8px !important;
  }

  .movie-route-controls-group {
    width: 100% !important;
    gap: 0.4rem !important;
  }

  .movie-route-dropdown {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 0.75rem !important;
    padding: 0.22rem 0.45rem !important;
  }

  .movie-route-single-flex {
    gap: 0.45rem !important;
  }

  .movie-route-count-badge {
    font-size: 0.7rem !important;
  }

  .movie-ep-btn {
    font-size: 0.74rem !important;
    padding: 0.24rem 0.65rem !important;
  }

  /* 底部声明居中紧凑 */
  #standalone-movie-download-guide-section,
  #movie-download-guide-section {
    padding: 0.75rem 0.35rem 0.35rem !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.4rem !important;
  }

  #standalone-movie-download-guide-section .show-mobile,
  #movie-download-guide-section .show-mobile {
    text-align: center !important;
    font-size: 0.74rem !important;
    color: var(--text-dim) !important;
    line-height: 1.45 !important;
  }

  #standalone-movie-download-guide-section #movie-search-results-count-tip,
  #movie-download-guide-section #movie-search-results-count-tip {
    text-align: center !important;
  }
}

/* 播放器顶栏线路快捷下拉切换框 */
.movie-player-topbar-select {
  transition: all 0.2s ease;
  appearance: auto;
  -webkit-appearance: auto;
}

.movie-player-topbar-select:hover {
  border-color: #60a5fa !important;
  background: rgba(59, 130, 246, 0.3) !important;
  color: #bfdbfe !important;
}

.movie-player-topbar-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

@media (max-width: 768px) {
  .movie-player-topbar-select {
    max-width: 110px !important;
    font-size: 0.68rem !important;
    padding: 0.08rem 0.35rem !important;
  }
}

/* 播放器顶栏快捷下载工具包按钮 */
.movie-topbar-tool-btn {
  padding: 0.16rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  line-height: 1.35;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.movie-topbar-tool-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.movie-topbar-tool-btn:active {
  transform: translateY(0);
}

/* 视频快进快退 OSD 浮层指示器 */
.video-seek-osd {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  pointer-events: none;
  z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select: none;
  opacity: 0;
}

/* ==========================================================================
   影院模式 · 网页级最大化沉浸式播放
   ========================================================================== */

/* 影院遮罩层：暗色半透明全屏背景 */
.movie-theater-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  box-sizing: border-box;
  animation: theaterFadeIn 0.28s ease-out forwards;
}

.movie-theater-overlay.active {
  display: flex;
}

/* 影院模式下的播放器容器 */
.movie-theater-active {
  width: 100% !important;
  max-width: 1600px !important;
  max-height: 96vh !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: theaterScaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.movie-theater-active .movie-player-media-box {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: calc(96vh - 45px) !important;
}

.movie-theater-active .movie-player-media-box video {
  width: 100% !important;
  height: 100% !important;
  max-height: calc(96vh - 45px) !important;
  object-fit: contain !important;
}

/* 锁定 body 滚动 */
.movie-theater-body-lock {
  overflow: hidden !important;
}

/* 影院模式切换按钮 */
.movie-theater-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.92rem;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.movie-theater-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.5);
  transform: scale(1.08);
}

.movie-theater-btn:active {
  transform: scale(0.95);
}

/* 影院模式启用时按钮高亮 */
.movie-theater-active .movie-theater-btn {
  background: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.6);
}

/* 进入动画 */
@keyframes theaterFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes theaterScaleIn {
  from {
    opacity: 0.5;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}