/* ==================== Page Builder Design System v2 ==================== */
    /* 设计理念：深邃暗色 + 温暖珊瑚橙主色 + 玻璃拟态质感 */
    :root {
      /* ---- 色彩：深空暗色系 ---- */
      --bg-base: #08080b;
      --bg: #0d0d12;
      --panel-bg: #151822;        /* 面板背景 */
      --bg-raised: #13131a;
      --bg-elevated: #191922;
      --bg-overlay: #20202c;
      --border-color: #2A2F3A;    /* 柔和的边框色 */
      --bg-glass: rgba(25, 25, 34, 0.72);
      --border: rgba(255, 255, 255, 0.06);
      --border-hover: rgba(255, 255, 255, 0.12);
      --border-accent: rgba(255, 107, 107, 0.4);
      --brand-gradient: linear-gradient(90deg, #FF7A00 0%, #FF0066 100%); /* 品牌渐变色 */
      --brand-glow: rgba(255, 0, 102, 0.4); /* 发光颜色 */

      /* ---- 主色：珊瑚橙 ---- */
      --primary: #ff6b6b;
      --primary-dark: #e85555;
      --primary-soft: rgba(255, 107, 107, 0.12);
      --primary-glow: rgba(255, 107, 107, 0.25);
      --primary-2: rgba(255, 107, 107, 0.55);

      /* ---- 辅助：冷调紫蓝 ---- */
      --accent: #818cf8;
      --accent-2: #6366f1;
      --accent-soft: rgba(129, 140, 248, 0.12);
      --accent-glow: rgba(129, 140, 248, 0.2);

      /* ---- 语义色 ---- */
      --danger: #f43f5e;
      --danger-soft: rgba(244, 63, 94, 0.12);
      --success: #34d399;
      --success-soft: rgba(52, 211, 153, 0.12);
      --info: #60a5fa;
      --warning: #fbbf24;

      /* ---- 文字 ---- */
      --text: #f1f5f9;
      --text-2: #94a3b8;
      --text-3: #475569;

      /* ---- 浅色工作台（Dashboard 用）---- */
      --dash-bg: #0d0d14;
      --dash-panel: #12121c;
      --dash-white: #161622;
      --dash-card: #1c1c2a;
      --dash-border: rgba(255, 255, 255, 0.06);
      --dash-border-2: rgba(255, 255, 255, 0.1);
      --dash-coral: #ff6b6b;
      --dash-coral-soft: rgba(255, 107, 107, 0.12);
      --dash-indigo: #818cf8;
      --dash-indigo-soft: rgba(129, 140, 248, 0.1);
      --dash-text: #f1f5f9;
      --dash-muted: #64748b;
      --dash-hint: #3d4557;

      /* ---- 圆角 ---- */
      --radius-xs: 4px;
      --radius-sm: 8px;
      --radius: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --radius-2xl: 32px;
      --radius-full: 9999px;

      /* ---- 阴影 ---- */
      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
      --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
      --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.7);
      --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      --glow-coral: 0 0 0 1px rgba(255, 107, 107, 0.3), 0 0 24px rgba(255, 107, 107, 0.15);
      --glow-indigo: 0 0 0 1px rgba(129, 140, 248, 0.3), 0 0 24px rgba(129, 140, 248, 0.15);

      /* ---- 过渡 ---- */
      --t: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      --t-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
      --t-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

      /* ---- 字体 ---- */
      --font: 'Sora', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-sans: 'Sora', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

      /* ---- 兼容旧变量名 ---- */
      --color-bg: var(--bg);
      --color-surface: var(--bg-raised);
      --color-surface2: var(--bg-elevated);
      --color-surface3: var(--bg-overlay);
      --color-border: var(--border);
      --color-border2: var(--border-hover);
      --color-primary: var(--primary);
      --color-primary2: var(--primary-dark);
      --color-accent: var(--accent);
      --color-text: var(--text);
      --color-text2: var(--text-2);
      --color-text3: var(--text-3);
      --color-danger: var(--danger);
      --color-success: var(--success);
      --color-info: var(--info);
      --pb-frame-height: 1500px;
      --radius-sm: var(--radius-sm);
      --radius-md: var(--radius);
      --radius-lg: var(--radius-lg);
      --shadow-sm: var(--shadow-sm);
      --shadow-md: var(--shadow);
      --shadow-lg: var(--shadow-lg);
      --transition: var(--t);
    }

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

    body {
      font-family: var(--font-sans);
      background: var(--bg-base);
      color: var(--color-text);
      height: 100vh;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      scroll-behavior: smooth;
    }

    ::selection {
      background: var(--primary-soft);
      color: var(--primary);
    }

    ::-moz-selection {
      background: var(--primary-soft);
      color: var(--primary);
    }

    input::selection,
    textarea::selection {
      background: var(--primary-soft);
      color: var(--primary);
    }

    /* ==================== 整体布局 ==================== */
    .app-shell {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    /* 顶部导航（深色玻璃质感） */
    /* 顶部导航（已隐藏，Logo 移至左上角固定） */
    .topbar {
      height: 54px;
      display: flex;
      align-items: center;
      padding: 0 18px;
      gap: 12px;
      z-index: 500;
      width: auto;
      cursor: pointer;
    }

    .topbar-logo {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 10px;
    }

    .topbar-logo span{
      font-size: 24px;
    }

    .topbar-title {
      margin-left: 8px;
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background 0.2s;
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topbar-title:hover {
      background: var(--bg-elevated);
    }

    .topbar-title-edit {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 8px;
    }

    .topbar-title-input {
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      padding: 6px 10px;
      border: 1px solid rgba(148, 163, 184, 0.3);
      border-radius: 6px;
      outline: none;
      width: 180px;
      background: var(--bg-base);
      transition: all 0.2s;
    }

    .topbar-title-input:hover {
      border-color: rgba(148, 163, 184, 0.5);
    }

    .topbar-title-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .topbar-title-save {
      font-size: 13px;
      font-weight: 600;
      color: white;
      padding: 6px 14px;
      border: none;
      border-radius: 6px;
      background: var(--primary);
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .topbar-title-save:hover {
      background: #2563eb;
      transform: translateY(-1px);
    }

    .topbar-title-save:active {
      transform: translateY(0);
    }

    .topbar-spacer {
      flex: 1;
    }

    .topbar-tabs {
      display: flex;
      gap: 4px;
    }

    .topbar-tab {
      padding: 5px 14px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      color: var(--text-2);
      cursor: pointer;
      border: 1px solid transparent;
      background: transparent;
      transition: var(--t-fast);
      font-family: var(--font-sans);
    }

    .topbar-tab:hover {
      background: var(--bg-elevated);
      color: var(--text);
    }

    .topbar-tab.active {
      background: var(--bg-elevated);
      color: var(--primary);
      border-color: var(--border-accent);
      font-weight: 600;
    }

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

    /* 视图容器 */
    .view-container {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      /* 避开顶部固定 Logo 栏 */
    }

    /* ==================== Dashboard 三栏（深色玻璃风格） ==================== */
    .dashboard.dash-light {
      --dash-bg: #0d0d14;
      --dash-panel: #111120;
      --dash-white: #181828;
      --dash-card: #1e1e30;
      --dash-border: rgba(255, 255, 255, 0.06);
      --dash-border-2: rgba(255, 255, 255, 0.1);
      --dash-coral: #ff6b6b;
      --dash-coral-soft: rgba(255, 107, 107, 0.1);
      --dash-indigo: #818cf8;
      --dash-indigo-soft: rgba(129, 140, 248, 0.1);
      --dash-text: #f1f5f9;
      --dash-muted: #64748b;
      --dash-hint: #334155;
    }

    .dashboard {
      display: flex;
      flex: 1;
      overflow: hidden;
      height: 100%;
    }

    .dashboard.dash-light {
      background: var(--dash-bg);
      color: var(--dash-text);
    }

    /* ---- 左栏：品牌 + 排版/我的 + 底部登录 ---- */
    .panel-left.dash-nav {
      width: 230px;
      flex-shrink: 0;
      background: var(--dash-panel, var(--color-surface));
      border-right: 1px solid var(--dash-border, var(--color-border));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    .panel-left.dash-nav>* {
      position: relative;
      z-index: 1;
    }

    .dashboard.dash-light .panel-left.dash-nav {
      background: var(--dash-panel);
      border-right-color: var(--dash-border);
    }

    .dash-nav-menu {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0 12px;
      margin: 25px 0 0;
    }

    .dash-nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 14px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: var(--dash-muted, var(--color-text2));
      font-size: 13.5px;
      font-weight: 500;
      font-family: var(--font-sans);
      cursor: pointer;
      text-align: left;
      transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
    }

    .dash-nav-item:hover {
      background: rgba(255, 107, 107, 0.08);
      color: var(--dash-text, var(--color-text));
    }

    .dash-nav-item .nav-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--dash-coral, var(--primary));
      box-shadow: 0 0 6px var(--dash-coral, var(--primary));
      flex-shrink: 0;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .dash-nav-item.active .nav-dot {
      opacity: 1;
      animation: pulse-dot 2.5s ease-in-out infinite;
    }

    .dash-nav-item.active {
      background: rgba(255, 107, 107, 0.18);
      box-shadow: inset 0 0 0 1.5px rgba(255, 107, 107, 0.6);
      color: #fff;
    }

    @keyframes pulse-dot {

      0%,
      100% {
        opacity: 0.4;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.3);
      }
    }

    .dash-nav-item .nav-ico {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      opacity: 0.8;
      transition: opacity var(--t-fast);
    }

    .dash-nav-item:hover .nav-ico,
    .dash-nav-item.active .nav-ico {
      opacity: 1;
    }

    .dash-nav-spacer {
      flex: 1;
      min-height: 16px;
    }

    .panel-section {
      padding: 16px;
      border-bottom: 1px solid var(--color-border);
    }

    .panel-section:last-child {
      border-bottom: none;
    }

    .panel-section-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--color-text3);
      margin-bottom: 12px;
    }

    /* 输入框 / 文本域 */
    .field-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px;
    }

    .field-label {
      font-size: 12px;
      color: var(--color-text2);
      font-weight: 500;
    }

    .field-input {
      width: 100%;
      padding: 9px 12px;
      background: var(--color-surface2);
      border: 1px solid var(--color-border2);
      border-radius: var(--radius-sm);
      color: var(--color-text);
      font-size: 13px;
      font-family: var(--font-sans);
      transition: var(--transition);
    }

    .field-input:focus {
      outline: none;
      border-color: var(--color-primary);
      background: var(--color-surface3);
    }

    .field-input::placeholder {
      color: var(--color-text3);
    }

    textarea.field-input {
      resize: vertical;
      min-height: 88px;
      line-height: 1.5;
    }

    /* 上传区域 */
    .upload-zone {
      border: 1.5px dashed var(--color-border2);
      border-radius: var(--radius-md);
      padding: 20px 12px;
      text-align: center;
      cursor: pointer;
      transition: var(--transition);
      background: var(--color-surface2);
    }

    .upload-zone:hover,
    .upload-zone.drag-over {
      border-color: var(--color-primary);
      background: rgba(232, 164, 69, 0.06);
    }

    .upload-zone-icon {
      font-size: 28px;
      margin-bottom: 8px;
      line-height: 1;
    }

    .upload-zone-text {
      font-size: 12px;
      color: var(--color-text2);
    }

    .upload-zone-text strong {
      color: var(--color-primary);
      cursor: pointer;
    }

    .upload-zone-sub {
      font-size: 11px;
      color: var(--color-text3);
      margin-top: 4px;
    }

    /* 文件列表 */
    .file-list {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 120px;
      overflow-y: auto;
    }

    .file-list-inline {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 0;
      max-height: none;
    }

    .panel-center.dash-drop-active {
      outline: 2px dashed var(--dash-coral);
      outline-offset: -4px;
      background: rgba(255, 107, 107, 0.04);
    }

    .file-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      background: var(--color-surface2);
      border-radius: var(--radius-sm);
      font-size: 12px;
      color: var(--color-text2);
    }

    .file-item-icon {
      font-size: 14px;
    }

    .file-item-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-item-remove {
      background: none;
      border: none;
      color: var(--color-text3);
      cursor: pointer;
      font-size: 14px;
      padding: 0 2px;
      transition: var(--transition);
    }

    .file-item-remove:hover {
      color: var(--color-danger);
    }

    /* 登录卡片 */
    .login-card {
      margin-top: auto;
      padding: 16px;
      border-top: 1px solid var(--dash-border, var(--color-border));
    }

    .login-card-title {
      font-size: 11px;
      color: var(--dash-hint, var(--color-text3));
      margin-bottom: 8px;
      font-weight: 600;
      letter-spacing: 0.05em;
    }

    .login-btn {
      width: 100%;
      padding: 11px 16px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid var(--dash-border);
      background: var(--dash-card, var(--color-surface2));
      color: var(--dash-text, var(--color-text));
      font-family: var(--font-sans);
      transition: all 0.22s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .login-btn:hover {
      border-color: var(--dash-coral, var(--color-primary));
      color: var(--dash-coral, var(--color-primary));
      background: var(--dash-coral-soft, var(--primary-soft));
    }

    /* --- 加入群聊 --- */
    .group-chat-wrapper {
      padding: 16px 16px 8px;
      box-sizing: border-box;
    }
    .group-chat-wrapper .join-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px dashed rgba(255,255,255,0.12);
      cursor: pointer;
      transition: all 0.22s ease;
      font-size: 13px;
      color: var(--dash-text, var(--color-text));
      box-sizing: border-box;
    }
    .group-chat-wrapper .join-item:hover {
      background: var(--item-hover-bg, rgba(255,255,255,0.05));
      border-color: var(--dash-coral, var(--color-primary));
      color: var(--dash-text, var(--color-text));
    }
    /* 弹层改为 fixed 定位，跟随入口位置 */
    .qr-popover {
      position: fixed;
      background: #1e1c2e;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      display: none;
      flex-direction: column;
      align-items: center;
      z-index: 9999;
      animation: qrSlideIn 0.25s ease;
    }
    .qr-popover::after {
      content: "";
      position: absolute;
      left: -7px;
      bottom: 18px;
      width: 14px;
      height: 14px;
      background: #1e1c2e;
      transform: rotate(45deg);
      border-left: 1px solid rgba(255,255,255,0.1);
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .qr-popover img {
      width: 140px;
      height: 140px;
      background: #fff;
      border-radius: 8px;
    }
    .qr-popover span {
      margin-top: 10px;
      font-size: 12px;
      color: #ccc;
      white-space: nowrap;
    }
    @keyframes qrSlideIn {
      from { opacity: 0; transform: translateX(8px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .login-user {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: var(--dash-card, var(--color-surface2));
      border-radius: 14px;
      border: 1px solid var(--dash-border);
    }

    .login-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
    }

    .login-username {
      font-size: 13px;
      color: var(--dash-text, var(--color-text));
      flex: 1;
    }

    .login-logout {
      background: none;
      border: none;
      color: var(--dash-hint, var(--color-text3));
      cursor: pointer;
      font-size: 13px;
      transition: var(--t-fast);
    }

    .login-logout:hover {
      color: var(--danger);
    }

    .dashboard.dash-light .login-card {
      border-top-color: var(--dash-border);
      padding: 16px 14px 20px;
    }

    .dashboard.dash-light .login-btn {
      background: var(--dash-card);
      border: 1px solid var(--dash-border-2);
      color: var(--dash-text);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
    }

    .dashboard.dash-light .login-btn:hover {
      border-color: var(--dash-coral);
      color: var(--dash-coral);
      background: var(--dash-coral-soft);
    }

    /* ---- 中栏：文案 + 上传（主工作区） ---- */
    .panel-center.dash-center-main {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: visible;
      position: relative;
    }

    .dash-center-inner {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 40px 60px;
      overflow-x: hidden;
      overflow-y: auto;
      min-height: 0;
      position: relative;
      background-color: #0B0E14;
      color: #F8FAFC;
      background-image: linear-gradient(var(--border-color) 1px, transparent 1px), linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
      background-size: 40px 40px;
      background-position: center center;
    }

    .bg-glow {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      width: 600px;
      height: 400px;
      background: radial-gradient(circle, rgba(255, 0, 102, 0.15) 0%, rgba(11, 14, 20, 0) 70%);
      z-index: 0;
      pointer-events: none;
    }

    .hero-section {
      text-align: center;
      margin-bottom: 40px;
      position: relative;
      z-index: 1;
    }

    .hero-badge {
      display: inline-block;
      padding: 6px 16px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      font-size: 13px;
      color: #FF7A00;
      margin-bottom: 20px;
      backdrop-filter: blur(4px);
    }

    .hero-title {
      font-size: 48px;
      font-weight: 900;
      letter-spacing: 2px;
      margin-bottom: 16px;
      /* 渐变发光字体核心代码 */
      background: var(--brand-gradient);
      -webkit-background-clip: text;
      color: transparent;
      text-shadow: 0 0 30px var(--brand-glow);
    }

    .hero-subtitle {
      font-size: 16px;
      color: var(--dash-muted, #94A3B8);
      font-weight: 400;
    }

    .editor-wrapper {
      background-color: #151822;
      border: 1px solid #2A2F3A;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      position: relative;
      z-index: 1;
      overflow: hidden;
      max-width: 700px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      transition: all 0.3s ease;
      width: 100%;
      margin: 0 auto;
    }

    .editor-wrapper:focus-within {
      border-color: #FF0066;
      box-shadow: 0 0 0 1px #FF0066, 0 0 20px rgba(255, 0, 102, 0.2);
    }

    .editor-toolbar {
      padding: 12px 20px;
      border-bottom: 1px solid #2A2F3A;
      display: flex;
      gap: 12px;
      background-color: rgba(255, 255, 255, 0.02);
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }

    .tool-btn {
      background: transparent;
      border: 1px solid #2A2F3A;
      color: #F8FAFC;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s;
      font-family: var(--font-sans);
    }

    .tool-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .tool-clear-btn{
      border:none;color:#94A3B8;
    }

    .tool-btn-wrapper {
      position: relative;
    }

    .tool-tooltip {
      position: fixed;
      padding: 6px 12px;
      background: rgba(97, 97, 97, 1);
      color: #F8FAFC;
      font-size: 12px;
      border-radius: 6px;
      white-space: normal;
      max-width: 250px;
      word-wrap: break-word;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s, visibility 0.2s;
      z-index: 9999;
    }

    .tool-btn-wrapper:hover .tool-tooltip {
      opacity: 1;
      visibility: visible;
    }

    .editor-textarea {
      flex: 1;
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 300px;
      padding: 24px;
      border: none;
      background: transparent;
      font-size: 15px;
      line-height: 1.6;
      color: var(--dash-text, #F8FAFC);
      font-family: var(--font-sans);
      overflow-wrap: break-word;
      word-break: break-word;
      -webkit-user-select: text;
      user-select: text;
      outline: none;
      overflow-y: auto;
      overflow-x: hidden;
      resize: none;
      caret-color: var(--primary);
      white-space: pre-wrap;
    }

    .editor-textarea::-webkit-scrollbar {
      width: 6px;
    }

    .editor-textarea::-webkit-scrollbar-track {
      background: transparent;
    }

    .editor-textarea::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 3px;
    }

    .editor-textarea::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    .editor-textarea:empty::before {
      content: attr(data-placeholder);
      color: #475569;
      pointer-events: none;
    }

    .editor-textarea::selection,
    .editor-textarea *::selection {
      background: rgba(255, 0, 102, 0.3);
    }

    .editor-textarea img {
      max-width: 480px;
      height: auto;
      border-radius: 8px;
      margin: 8px 0;
      display: block;
    }

    .editor-footer {
      padding: 12px 24px;
      text-align: right;
      font-size: 12px;
      color: var(--dash-muted, #94A3B8);
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dash-textarea-hint {
      position: relative;
      z-index: 1;
      font-size: 11px;
      color: var(--dash-muted);
      padding: 6px 4px 2px;
      line-height: 1.5;
      pointer-events: none;
      user-select: none;
      opacity: 0.6;
    }

    .dash-files-compact {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 4px;
      position: relative;
      z-index: 1;
    }

    .dashboard.dash-light .file-item {
      background: var(--dash-card);
      border: 1px solid var(--dash-border-2);
      color: var(--dash-muted);
    }

    .dash-textarea-hint {
      font-size: 11px;
      color: var(--dash-hint, var(--color-text3));
      padding: 4px 4px 2px;
      line-height: 1.5;
      pointer-events: none;
      user-select: none;
    }

    .dash-files-compact {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 4px;
    }

    .dashboard.dash-light .file-item {
      background: var(--dash-panel);
      border: 1px solid var(--dash-border);
      color: var(--dash-muted);
    }

    /* 工作台主区 / 我的 切换 */
    .dash-workbench {
      display: flex;
      flex: 1;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .dash-workbench.hidden {
      display: none !important;
    }

    /* ==================== 我的页面 ==================== */
    .dash-mine-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
    }

    .dash-mine-panel.hidden {
      display: none !important;
    }

    /* 视图容器 */
    .mine-view {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
    }

    .mine-view.hidden {
      display: none !important;
    }

    /* 顶部栏 */
    .mine-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 24px 12px;
      flex-shrink: 0;
    }

    .mine-header-title {
      font-size: 18px;
      font-weight: 600;
      font-family: 'Sora', var(--font-sans);
      color: var(--text);
      letter-spacing: -0.01em;
    }

    .mine-back {
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 8px;
      background: var(--bg-raised);
      color: var(--text-2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }

    .mine-back:hover {
      background: var(--bg-overlay);
      color: var(--text);
    }

    .mine-back.hidden {
      display: none;
    }

    /* Tab 栏 */
    .mine-tabs {
      display: flex;
      gap: 8px;
      padding: 0 24px 16px;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border);
    }

    /* 搜索栏 */
    .mine-search-bar {
      flex-shrink: 0;
      padding: 12px 24px;
      background: var(--bg-base);
      border-bottom: 1px solid var(--border);
    }
    .mine-search-row {
      display: flex;
      align-items: flex-end;
      gap: 12px;
      flex-wrap: wrap;
    }
    .mine-search-field {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .mine-search-input {
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-family: var(--font-sans);
      padding: 6px 10px;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      width: 140px;
      box-sizing: border-box;
    }
    .mine-search-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12);
    }
    .mine-search-input::placeholder {
      color: var(--text-3);
    }
    #mineSearchName { width: 160px; }
    #mineSearchStart, #mineSearchEnd { width: 140px; cursor: pointer; }
    .flatpickr-date.flatpickr-input { background: var(--bg-raised) !important; }
    .flatpickr-dark .flatpickr-calendar { filter: none; z-index: 100000; }
    .flatpickr-dark .flatpickr-calendar,
    .flatpickr-dark .flatpickr-calendar.hasTime {
      background: #1a1a2e;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .flatpickr-dark .flatpickr-header {
      background: transparent;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .flatpickr-dark .flatpickr-month,
    .flatpickr-dark .flatpickr-current-month {
      background: transparent;
      color: rgba(255,255,255,0.95);
    }
    .flatpickr-dark .flatpickr-monthDropdown-months {
      color: rgba(255,255,255,0.95);
    }
    .flatpickr-dark .flatpickr-weekday {
      background: transparent;
      color: rgba(255,255,255,0.4);
      font-weight: 500;
    }
    .flatpickr-dark .flatpickr-day {
      color: rgba(255,255,255,0.8);
      border-radius: 8px;
    }
    .flatpickr-dark .flatpickr-day:hover {
      background: rgba(255,107,107,0.15);
      border-color: transparent;
      color: rgba(255,255,255,0.95);
    }
    .flatpickr-dark .flatpickr-day.today {
      border-color: #ff6b6b;
      color: #ff6b6b;
    }
    .flatpickr-dark .flatpickr-day.today:hover {
      background: rgba(255,107,107,0.2);
    }
    .flatpickr-dark .flatpickr-day.selected {
      background: #ff6b6b;
      border-color: #ff6b6b;
      color: #fff;
    }
    .flatpickr-dark .flatpickr-day.selected:hover {
      background: #ff5252;
    }
    .flatpickr-dark .flatpickr-day.inRange,
    .flatpickr-dark .flatpickr-day.startRange,
    .flatpickr-dark .flatpickr-day.endRange {
      background: rgba(255,107,107,0.2);
      border-color: rgba(255,107,107,0.4);
      color: rgba(255,255,255,0.9);
    }
    .flatpickr-dark .flatpickr-day.disabled,
    .flatpickr-dark .flatpickr-day.outside {
      color: rgba(255,255,255,0.2);
    }
    .flatpickr-dark .numInputWrapper span {
      border-color: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.5);
    }
    .flatpickr-dark .numInputWrapper span:hover {
      background: rgba(255,107,107,0.15);
      color: rgba(255,255,255,0.9);
    }
    .flatpickr-dark .flatpickr-time {
      background: #1a1a2e;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-radius: 0 0 12px 12px;
    }
    .flatpickr-dark .flatpickr-time input {
      color: rgba(255,255,255,0.9);
    }
    .flatpickr-dark .flatpickr-time input:hover {
      background: rgba(255,107,107,0.1);
    }
    .flatpickr-dark .flatpickr-time .flatpickr-am-pm {
      color: rgba(255,255,255,0.5);
    }
    .flatpickr-dark .flatpickr-time .flatpickr-am-pm:hover {
      background: rgba(255,107,107,0.15);
    }
    .flatpickr-dark .arrowUp,
    .flatpickr-dark .arrowDown {
      border-bottom-color: rgba(255,255,255,0.4);
    }
    .flatpickr-dark .arrowUp:hover,
    .flatpickr-dark .arrowDown:hover {
      border-bottom-color: #ff6b6b;
    }
    .flatpickr-dark .flatpickr-prev-month svg,
    .flatpickr-dark .flatpickr-next-month svg {
      fill: rgba(255,255,255,0.5);
    }
    .flatpickr-dark .flatpickr-prev-month:hover svg,
    .flatpickr-dark .flatpickr-next-month:hover svg {
      fill: #ff6b6b;
      stroke: #ff6b6b;
    }
    .flatpickr-dark .flatpickr-innerContainer {
      background: #1a1a2e;
    }
    .flatpickr-dark .flatpickr-days {
      background: #1a1a2e;
    }
    .flatpickr-dark .dayContainer {
      background: #1a1a2e;
    }
    .flatpickr-dark .flatpickr-day.prevMonthDay,
    .flatpickr-dark .flatpickr-day.nextMonthDay {
      color: rgba(255,255,255,0.25);
    }
    .flatpickr-dark .flatpickr-day.prevMonthDay:hover,
    .flatpickr-dark .flatpickr-day.nextMonthDay:hover {
      background: rgba(255,107,107,0.15);
      color: rgba(255,255,255,0.9);
    }
    .flatpickr-dark .numInput,
    .flatpickr-dark .flatpickr-current-month .cur-month {
      background: transparent;
      color: rgba(255,255,255,0.9);
    }
    .flatpickr-dark .flatpickr-monthDropdown-months {
      background: transparent;
    }
    .flatpickr-dark .flatpickr-time .numInputWrapper {
      background: transparent;
    }
    .flatpickr-dark .flatpickr-secondInput {
      background: transparent;
    }
    .mine-search-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 1px;
    }
    .mine-search-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-raised);
      color: var(--text-2);
      font-size: 13px;
      font-family: var(--font-sans);
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .mine-search-btn:hover {
      border-color: var(--primary);
      color: var(--text);
    }
    .mine-search-btn.primary {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }
    .mine-search-btn.primary:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      box-shadow: 0 2px 8px rgba(255, 107, 107, 0.35);
    }

    .mine-tab {
      padding: 7px 18px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: transparent;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: 'Sora', var(--font-sans);
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .mine-tab:hover {
      border-color: var(--primary);
      color: var(--text);
    }

    .mine-tab.active {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
    }

    /* 滚动区域 */
    .mine-scroll {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
      padding: 20px 24px;
    }

    .mine-scroll::-webkit-scrollbar {
      width: 4px;
    }

    .mine-scroll::-webkit-scrollbar-track {
      background: transparent;
    }

    .mine-scroll::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px;
    }

    /* 项目卡片网格 */
    .mine-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
      padding-bottom: 16px;
    }

    /* 项目卡片 */
    .mine-card {
      position: relative;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--bg-raised);
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    }

    .mine-card:hover {
      border-color: rgba(255, 107, 107, 0.4);
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 107, 107, 0.15);
    }

    /* 删除按钮 */
    .mine-card-delete {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 5;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 8px;
      background: rgba(15, 15, 20, 0.75);
      color: var(--text-2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s, background 0.15s, color 0.15s;
      backdrop-filter: blur(8px);
    }

    .mine-card:hover .mine-card-delete {
      opacity: 1;
      pointer-events: auto;
    }

    .mine-card-delete:hover {
      background: var(--danger-soft);
      color: var(--danger);
    }

    /* 封面图区域 */
    .mine-card-thumb-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 4;
      background: linear-gradient(145deg, #0d0d14, #15152a);
      overflow: hidden;
    }

    .mine-card-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1);
      transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .mine-card:hover .mine-card-thumb {
      transform: scale(1.08);
    }

    /* 平台标签 */
    .mine-card-badges {
      position: absolute;
      top: 10px;
      left: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      z-index: 10;
    }

    .mine-badge {
      padding: 3px 9px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600;
      font-family: 'Sora', var(--font-sans);
      letter-spacing: 0.3px;
    }

    .mine-badge-wechat {
      background: linear-gradient(135deg, #34d399, #10b981);
      color: #fff;
      box-shadow: 0 2px 8px rgba(52, 211, 153, 0.4);
    }

    .mine-badge-long {
      background: linear-gradient(135deg, #818cf8, #6366f1);
      color: #fff;
      box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4);
    }

    .mine-badge-xhs {
      background: linear-gradient(135deg, #f43f5e, #e11d48);
      color: #fff;
      box-shadow: 0 2px 8px rgba(244, 63, 94, 0.4);
    }

    /* 卡片底部 */
    .mine-card-footer {
      padding: 12px 14px 14px;
    }

    .mine-card-title {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--text);
      margin-bottom: 6px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-family: 'Sora', var(--font-sans);
    }

    .mine-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .mine-card-time {
      font-size: 12px;
      color: var(--text-2);
      font-family: 'Sora', var(--font-sans);
    }

    .mine-card-versions {
      font-size: 11px;
      color: var(--text-2);
      background: var(--bg-overlay);
      padding: 2px 8px;
      border-radius: 10px;
      font-family: 'Sora', var(--font-sans);
    }

    /* 加载/空/底部状态 */
    .mine-loading,
    .mine-empty,
    .mine-end {
      text-align: center;
      padding: 40px 12px;
      color: var(--text-2);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-family: 'Sora', var(--font-sans);
    }

    .mine-loading.hidden,
    .mine-empty.hidden,
    .mine-end.hidden {
      display: none !important;
    }

    .mine-spinner {
      width: 24px;
      height: 24px;
      border: 2px solid var(--border);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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

    /* 分页 */
    .mine-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }

    .mine-pagination.hidden {
      display: none;
    }

    .mine-page-btn {
      padding: 7px 18px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: transparent;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: 'Sora', var(--font-sans);
      transition: all 0.18s;
    }

    .mine-page-btn:hover:not(:disabled) {
      border-color: var(--primary);
      color: var(--text);
    }

    .mine-page-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .mine-page-info {
      font-size: 13px;
      color: var(--text-2);
      font-family: 'Sora', var(--font-sans);
    }

    /* 详情视图：版本网格 */
    .mine-version-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
      padding-bottom: 16px;
    }

    .mine-version-card {
      position: relative;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--bg-raised);
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    }

    .mine-version-card:hover {
      border-color: rgba(255, 107, 107, 0.4);
      transform: translateY(-4px);
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
    }

    .mine-version-card .mine-card-thumb-wrap {
      aspect-ratio: 3 / 4;
    }

    .mine-version-card .mine-card-thumb {
      transform: scale(1);
      transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .mine-version-card:hover .mine-card-thumb {
      transform: scale(1.08);
    }

    .mine-version-card .mine-card-delete {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .mine-version-card:hover .mine-card-delete {
      opacity: 1;
      pointer-events: auto;
    }

    .mine-version-type-badge {
      position: absolute;
      top: 10px;
      left: 10px;
    }

    .dashboard.dash-light .login-username {
      color: var(--dash-text);
    }

    .btn-ai-layout {
      width: 100%;
      padding: 14px 20px;
      border: none;
      border-radius: 16px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      background: linear-gradient(90deg, #FF7A00 0%, #FF0066 100%);
      color: #fff;
      font-family: var(--font-sans);
      transition: transform 0.2s, box-shadow 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 20px rgba(255, 0, 102, 0.4);
      letter-spacing: 0.02em;
      position: relative;
      overflow: hidden;
    }

    .btn-ai-layout::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
    }

    .btn-ai-layout:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(255, 107, 107, 0.5);
    }

    .btn-ai-layout:active {
      transform: translateY(0);
    }

    .btn-ai-layout:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-ai-layout .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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

    /* 自动配图开关 */
    .dash-auto-img {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
    }

    .dash-auto-img-text {
      font-size: 13px;
      color: var(--dash-text);
      font-family: 'Sora', var(--font-sans);
    }

    .dash-auto-img-text-hint {
      font-size: 11px;
      color: var(--dash-muted);
      margin-top: 2px;
    }

    /* 自定义开关样式 */
    .toggle-switch {
      position: relative;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--dash-border-2);
      border-radius: 24px;
      transition: all 0.3s ease;
    }

    .toggle-slider::before {
      position: absolute;
      content: '';
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: #fff;
      border-radius: 50%;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .toggle-switch input:checked+.toggle-slider {
      background-color: var(--dash-coral);
    }

    .toggle-switch input:checked+.toggle-slider::before {
      transform: translateX(20px);
    }

    /* ---- 右栏：固定宽度，深色玻璃卡片 ---- */
    .panel-right.dash-right {
      width: 380px;
      flex: 0 1 380px;
      min-width: 320px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--dash-panel, var(--color-surface));
      border-left: 1px solid var(--dash-border, var(--color-border));
    }

    .dashboard.dash-light .panel-right.dash-right {
      background: var(--dash-panel);
      border-left-color: var(--dash-border);
    }

    .dash-right-inner {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 14px 18px 16px;
      gap: 12px;
      overflow-y: auto;
      min-height: 0;
    }

    .dash-right-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--dash-text, var(--color-text));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      letter-spacing: 0.01em;
      padding-bottom: 4px;
    }

    .dash-right-title-text {
      text-align: left;
    }

    .dash-right-title.with-expand {
      margin-bottom: 2px;
    }

    .dash-expand-styles {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border: 1px solid var(--dash-border);
      border-radius: 10px;
      background: var(--dash-card, var(--color-surface2));
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dash-muted);
      transition: all 0.22s ease;
    }

    .dash-expand-styles:hover {
      border-color: var(--dash-coral, var(--color-primary));
      color: var(--dash-coral, var(--color-primary));
      background: var(--dash-coral-soft);
    }

    /* 排版类型：大圆角卡片，带 SVG 图标 */
    .type-cards {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .type-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      border: 1.5px solid var(--dash-border);
      border-radius: 16px;
      background: var(--dash-card);
      cursor: pointer;
      font-family: var(--font-sans);
      transition: all 0.25s ease;
      text-align: left;
      position: relative;
      overflow: hidden;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    }

    .type-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--dash-coral-soft), transparent 60%);
      opacity: 0;
      transition: opacity var(--t-fast);
    }

    .type-card:hover {
      border-color: rgba(255, 107, 107, 0.4);
      transform: translateX(3px);
      box-shadow: 0 2px 10px rgba(255, 107, 107, 0.15);
    }

    .type-card:hover::before {
      opacity: 1;
    }

    .type-card.selected {
      border-color: var(--dash-coral);
      background: var(--dash-card);
      box-shadow: 0 0 0 3px var(--dash-coral-soft), 0 2px 10px rgba(255, 107, 107, 0.2);
    }

    .type-card.selected::before {
      opacity: 1;
    }

    .type-card-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border-radius: 10px;
      background: var(--dash-panel);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      position: relative;
      z-index: 1;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    .type-card.selected .type-card-icon {
      background: linear-gradient(145deg, var(--primary), var(--primary-dark));
      box-shadow: 0 2px 8px rgba(255, 107, 107, 0.45);
    }

    .type-card-icon svg {
      width: 18px;
      height: 18px;
      display: block;
      color: var(--dash-text);
      transition: color 0.25s ease;
    }

    .type-card.selected .type-card-icon svg {
      color: #fff;
    }

    .type-card-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--dash-text);
      position: relative;
      z-index: 1;
    }

    .type-card.selected .type-card-label {
      color: var(--dash-coral);
    }

    .type-card-desc {
      font-size: 11px;
      color: var(--dash-muted);
      position: relative;
      z-index: 1;
      margin-top: 2px;
    }

    .type-card.selected .type-card-desc {
      color: var(--dash-coral);
      opacity: 0.7;
    }

    /* 自动配图 + 底部按钮 */
    .dash-right-footer {
      flex-shrink: 0;
      padding: 12px 18px 20px;
      border-top: 1px solid var(--dash-border, var(--color-border));
      display: flex;
      flex-direction: column;
      gap: 14px;
      background: var(--dash-panel, var(--color-surface));
    }

    .dashboard.dash-light .dash-right-footer {
      background: var(--dash-panel);
      border-top-color: var(--dash-border);
    }

    .dash-auto-img {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--dash-muted, var(--color-text2));
      cursor: pointer;
    }

    .dash-auto-img input {
      margin-top: 3px;
      width: 16px;
      height: 16px;
      accent-color: var(--dash-purple, var(--color-accent));
      flex-shrink: 0;
    }

    /* 风格网格 */
    .style-grid-wrap {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .style-grid-wrap::-webkit-scrollbar {
      width: 4px;
    }

    .style-grid-wrap::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
    }

    .style-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .style-section-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--dash-muted);
    }

    .style-more-btn {
      font-size: 11px;
      color: var(--dash-muted);
      background: var(--dash-card);
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      padding: 4px 10px;
      cursor: pointer;
      font-family: var(--font-sans);
      transition: var(--t-fast);
    }

    .style-more-btn:hover {
      border-color: var(--dash-coral);
      color: var(--dash-coral);
    }

    /* 风格网格 - 内部滚动（每页固定高度，可滚动切换"页"） */
    .style-grid-scroll {
      /* 不再是滚动容器，snap 也去掉 */
    }

    .style-grid-page {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding: 0 0 14px;
      align-content: start;
    }

    .style-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      padding: 4px 0 16px;
    }

    /* 仪表盘右侧风格网格 - 只展示 2 列 */
    .style-grid-dashboard {
      grid-template-columns: repeat(2, 1fr);
    }

    /* 仪表盘风格卡片预览区 - 更大更清晰 */
    .style-grid-dashboard .style-preview-html-container {
      height: 320px;
    }

    .style-card {
      border: 2px solid var(--dash-border);
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.25s ease;
      background: #fafafa;
      display: flex;
      flex-direction: column;
      height: 320px;
      position: relative;
    }

    .style-card:hover {
      border-color: #c4b8f5;
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    }

    .style-card.selected {
      border-color: var(--dash-coral);
      box-shadow: 0 0 0 3px var(--dash-coral-soft), 0 8px 20px rgba(255, 107, 107, 0.25);
    }

    /* 卡片内双层结构：底层预览图 + hover 时显示的 HTML 滚动层 */
    .style-card .style-preview-html-container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    .style-card-img-bg {
      position: absolute;
      inset: 0;
      z-index: 1;
      transition: opacity 0.3s;
      overflow-y: hidden;
    }

    .style-card-img-bg > img {
      transform: translateY(0);
      transition: transform 0.5s ease;
    }

    .style-card-html-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      border-radius: 0;
      opacity: 0;
      transition: opacity 0.3s;
      /* 保持 flex 居中，供 initStyleCardScrollPreviews 计算用 */
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }

    /* 底部风格名/适用场景文字，始终显示 */
    .style-card-labels {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 6px 10px;
      background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
      z-index: 3;
      pointer-events: none;
    }

    .style-card-name {
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }

    .style-card-scene {
      font-size: 10px;
      color: rgba(255,255,255,0.85);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
      line-height: 1.3;
    }

    .style-card-preview {
      height: 320px;
      display: flex;
      align-items: stretch;
      justify-content: center;
      font-size: 38px;
      font-weight: 600;
      background: linear-gradient(145deg, #1a1a28 0%, #22223a 50%, #1e1e2e 100%);
      position: relative;
      color: var(--dash-text);
      font-family: 'Sora', var(--font-sans);
      letter-spacing: -0.01em;
      margin: 0;
    }

    .style-card-preview-overflow {
      position: relative;
      overflow: hidden;
    }

    .style-card-preview-inner {
      width: 100%;
      will-change: transform;
    }

    .style-card-preview-overflow .style-card-preview-inner {
      transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .style-card-preview.empty {
      background: linear-gradient(145deg, #1a1a28 0%, #1e1e30 100%);
    }

    .style-card-check {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--dash-coral);
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #fff;
      z-index: 10;
    }

    .style-card.selected .style-card-check {
      display: flex;
    }

    .style-card-name {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 10px 8px;
      font-size: 12px;
      font-weight: 500;
      color: #374151;
      text-align: center;
      font-family: 'Sora', var(--font-sans);
      background: linear-gradient(transparent, rgba(255, 255, 255, 0.95) 50%);
    }

    .style-label-wrap {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-left: 6px;
      vertical-align: middle;
    }

    .style-label-prefix {
      font-size: 11px;
      font-weight: 500;
      color: var(--dash-muted);
    }

    .style-selected-label {
      display: inline-block;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 500;
      color: var(--dash-coral);
      background: var(--dash-coral-soft);
      border-radius: 20px;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .style-label-clear {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--dash-muted);
      cursor: pointer;
      border-radius: 50%;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }

    .style-label-clear:hover {
      background: rgba(255, 255, 255, 0.12);
      color: var(--dash-text);
    }

    /* 更多风格弹窗 */
    .style-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 8, 11, 0.8);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 24px 24px 0;
    }

    .style-modal-overlay.active {
      display: flex;
      align-items: flex-start;
    }

    .style-modal {
      background: var(--dash-panel);
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-xl);
      width: min(1440px, 100%);
      max-width: 100%;
      max-height: min(85vh, 1392px);
      display: flex;
      flex-direction: column;
      min-height: 0;
      box-shadow: var(--shadow-xl);
    }

    .style-modal-header {
      padding: 31px 38px;
      border-bottom: 1px solid var(--dash-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .style-modal-title {
      font-size: 26px;
      font-weight: 600;
      color: var(--dash-text);
      letter-spacing: -0.01em;
    }

    /* 使用引导弹框 */
    .guide-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .guide-modal {
      background: var(--dash-card);
      border: 1px solid var(--dash-border-2);
      border-radius: 20px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
      width: 580px;
      max-width: 94vw;
      overflow: hidden;
      position: relative;
    }

    .guide-modal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg, #ff6b6b, #ff9a56, #ff9a56, #ff6b6b);
      background-size: 300% 100%;
      animation: guide-gradient-shift 4s ease infinite;
    }

    @keyframes guide-gradient-shift {

      0%,
      100% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }
    }

    .guide-modal-header {
      padding: 40px 44px 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
    }

    .guide-modal-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(255, 107, 107, 0.25), rgba(255, 154, 86, 0.25));
      border: 1px solid rgba(255, 107, 107, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .guide-modal-icon svg {
      width: 28px;
      height: 28px;
    }

    .guide-modal-title {
      font-size: 24px;
      font-weight: 800;
      color: var(--dash-text);
      letter-spacing: -0.02em;
      margin-bottom: 4px;
    }

    .guide-modal-subtitle {
      font-size: 14px;
      color: var(--dash-muted);
    }

    .guide-modal-close {
      background: transparent;
      border: none;
      color: var(--dash-muted);
      cursor: pointer;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--t-fast);
      flex-shrink: 0;
    }

    .guide-modal-close:hover {
      background: var(--dash-hover);
      color: var(--dash-text);
      border-color: var(--dash-border-2);
    }

    .guide-modal-body {
      padding: 24px 44px 36px;
    }

    .guide-section {
      margin-bottom: 22px;
    }

    .guide-section:last-child {
      margin-bottom: 0;
    }

    .guide-section-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--dash-accent);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .guide-section-title::before {
      content: '';
      width: 14px;
      height: 2px;
      background: var(--dash-accent);
      border-radius: 1px;
    }

    .guide-section p {
      font-size: 14px;
      color: var(--dash-text);
      line-height: 1.75;
      margin: 0 0 8px;
      opacity: 0.88;
    }

    .guide-section ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .guide-section ul li {
      font-size: 13.5px;
      color: var(--dash-text);
      line-height: 1.7;
      padding: 6px 0 6px 26px;
      position: relative;
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .guide-section ul li:last-child {
      border-bottom: none;
    }

    .guide-section ul li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 6px;
      color: #ff9a56;
      font-size: 12px;
      font-weight: 700;
    }

    .guide-section ul li strong {
      color: var(--dash-text);
      font-weight: 600;
    }

    .guide-steps {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .guide-steps li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 13.5px;
      color: var(--dash-text);
      line-height: 1.7;
      margin-bottom: 8px;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 10px;
    }

    .guide-step-num {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ff6b6b, #ff9a56);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      box-shadow: 0 2px 8px rgba(255, 107, 107, 0.35);
    }

    .style-modal-close {
      background: none;
      border: none;
      color: var(--dash-muted);
      cursor: pointer;
      font-size: 32px;
      padding: 6px 9px;
      border-radius: var(--radius-sm);
      transition: var(--t-fast);
    }

    .style-modal-close:hover {
      background: var(--dash-card);
      color: var(--dash-text);
    }

    .style-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
    }

    .style-modal-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 26px 31px 16px;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    .style-modal-scroll::-webkit-scrollbar {
      width: 8px;
    }

    .style-modal-scroll::-webkit-scrollbar-track {
      background: transparent;
    }

    .style-modal-scroll::-webkit-scrollbar-thumb {
      background: #d8d6d3;
      border-radius: 100px;
    }

    .style-modal-scroll::-webkit-scrollbar-thumb:hover {
      background: #c4c0bb;
    }

    .style-modal-snap-page {
      /* previously: scroll-snap-align: start; removed - no longer using scroll-snap */
    }

    .style-modal-snap-page:last-of-type {
      margin-bottom: 14px;
    }

    .style-modal-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    @media (max-width: 560px) {
      .style-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .style-modal-scroll-hint {
      flex-shrink: 0;
      text-align: center;
      font-size: 11px;
      color: var(--dash-muted);
      padding: 13px 31px 24px;
      border-top: 1px solid var(--dash-border);
      background: linear-gradient(180deg, rgba(249, 249, 248, 0) 0%, #fafaf9 35%);
    }

    .style-modal-card {
      border: 2px solid var(--dash-border);
      border-radius: 22px;
      overflow: hidden;
      cursor: pointer;
      transition: var(--transition);
      background: #fafafa;
      display: flex;
      flex-direction: column;
      height: 480px;
      position: relative;
    }

    .style-modal-card:hover {
      border-color: #c4b8f5;
      transform: translateY(-5px);
      box-shadow: 0 15px 33px rgba(0, 0, 0, 0.28);
    }

    .style-modal-card:hover .style-modal-img-bg {
      filter: brightness(1.08);
    }

    .style-modal-card.selected {
      border-color: var(--dash-coral);
      box-shadow: 0 0 0 3px var(--dash-coral-soft), 0 12px 28px rgba(255, 107, 107, 0.35);
    }

    .style-modal-card-placeholder {
      border-style: dashed;
      opacity: 0.95;
    }

    .style-modal-card-placeholder:hover {
      border-color: #c4b8f5;
      opacity: 1;
    }

    .style-modal-preview {
      height: 460px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      background: var(--dash-card);
    }

    .style-modal-preview-area {
      flex: 1;
      min-height: 0;
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
    }

    .style-modal-img-bg {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: #1a1a2e;
      transition: transform 0.4s ease;
    }

    .style-modal-card:hover .style-modal-img-bg {
      transform: scale(1.06);
    }

    .style-modal-labels {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 6px 10px;
      background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
      z-index: 3;
      pointer-events: none;
    }

    .style-modal-name {
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }

    .style-modal-scene {
      font-size: 10px;
      color: rgba(255,255,255,0.85);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
      line-height: 1.3;
    }

    /* 风格预览 HTML 容器 */
    .style-preview-html-container {
      width: 100%;
      flex: 1;
      min-height: 0;
      position: relative;
      background: #ffffff;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
    }

    /* 首页卡片：内容从顶部开始（不再居中），通过 transform-origin: top center 控制缩放基准 */
    .style-card .style-preview-html-container {
      align-items: flex-start;
      justify-content: center;
    }

    .style-preview-html-inner {
      width: 400px;
      flex-shrink: 0;
      pointer-events: none;
      word-break: break-word;
      background: #ffffff;
      transform-origin: top center;
    }

    .style-preview-html-inner>* {
      max-width: 100% !important;
    }

    .style-preview-html-inner img {
      max-width: 100% !important;
      height: auto !important;
    }

    .style-card-scene {
      padding: 0 10px 6px;
      font-size: 11px;
      color: #9ca3af;
      text-align: center;
      line-height: 1.4;
    }

    /* ==================== 编辑器视图（深色玻璃风格） ==================== */
    .editor-workspace {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: visible;
      position: relative;
    }

    .editor-workspace .editor-center-main{

    }
    
    .editor-workspace .editor-center-all{
      position: relative;
    }

    /* 拖动面板：overflow:visible 让把手能超出边框显示 */
    .editor-side-panel {
      position: relative;
      flex-shrink: 0;
      background: var(--dash-panel);
      overflow: visible;
      z-index: 2;
      transition: background 0.2s, width 0.22s ease;
    }

    .editor-side-panel.right {
      border-left: 1px solid var(--dash-border);
      position: relative;
    }

    /* 左侧悬浮图标按钮 */
    .editor-workspace .left_toolbar{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      background-color: var(--gjs-primary-color);
    }

    
    .editor-left-floating-icons {
      background: var(--dash-panel);
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.06);
    }

    .floating-icon-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.15s, filter 0.15s;
    }

    .floating-icon-btn+.floating-icon-btn{
      margin: 8px 0 0;
    }

    .floating-icon-btn:hover {
      transform: translateX(4px);
      filter: brightness(1.1);
    }

    .floating-icon-btn:active {
      transform: translateX(4px) scale(0.95);
    }

    .floating-icon-btn svg {
      width: 24px;
      height: 24px;
      color: var(--dash-coral, #ff6b6b);
      filter: drop-shadow(0 2px 6px rgba(255, 107, 107, 0.3));
    }

    .floating-icon-label {
      font-size: 11px;
      color: var(--dash-muted, #6e6e6e);
      font-family: var(--font-sans);
      white-space: nowrap;
    }

    .floating-icon-btn.dragging {
      opacity: 0.5;
      transform: translateX(4px) scale(0.9);
    }

    /* 面板内部内容区独立滚动，不影响把手布局 */
    .editor-side-panel-inner {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: width 0.22s ease, padding 0.22s ease;
    }

    .editor-side-panel-inner::-webkit-scrollbar {
      width: 4px;
    }

    .editor-side-panel-inner::-webkit-scrollbar-thumb {
      background: var(--dash-border-2);
      border-radius: 2px;
    }

    .editor-side-panel-inner h2 {
      font-size: 16px;
      font-weight: 600;
      color: var(--dash-text);
      margin-bottom: 4px;
    }

    .editor-side-panel-inner .desc {
      font-size: 12px;
      color: var(--dash-muted);
      line-height: 1.5;
    }

    .editor-side-panel-inner textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      background: var(--dash-card);
      color: var(--dash-text);
      font-size: 13px;
      resize: vertical;
      min-height: 80px;
      font-family: var(--font-sans);
    }

    .editor-side-panel-inner textarea:focus {
      outline: none;
      border-color: var(--primary);
    }

    /* 拖动把手 */
    .editor-resize-handle {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: var(--dash-panel);
      z-index: 100;
      cursor: pointer;
      width: 13px;
      height: 55px;
      border-radius: 0 6px 6px 0;
      border: 1px solid var(--dash-border);
      border-left: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    .editor-resize-handle::before {
      content: '';
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 6px solid var(--dash-muted);
      transition: border-color 0.15s;
    }

    .editor-resize-handle:hover::before {
      border-right-color: var(--primary);
    }

    .editor-resize-handle.right {
      border-radius: 6px 0 0 6px;
      border-right: none;
      border-left: 1px solid var(--dash-border);
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
    }

    .editor-resize-handle.right::before {
      border-left: 6px solid var(--dash-muted);
      border-right: none;
    }

    .editor-resize-handle.right:hover::before {
      border-left-color: var(--primary);
    }

    .editor-side-panel.right.collapsed .editor-resize-handle.right::before {
      border-left: none;
      border-right: 6px solid var(--dash-muted);
    }

    .editor-side-panel.right.collapsed .editor-resize-handle.right:hover::before {
      border-right-color: var(--primary);
    }

    /* 中间画布区 */
    .editor-center-area {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* 收起时：宽度动画在面板本身，内容区隐藏 */
    .editor-side-panel.collapsed {
      width: 0 !important;
      min-width: 0;
      overflow: visible;
    }

    .editor-side-panel.collapsed .editor-side-panel-inner {
      display: none;
    }

    /* 折叠时把手显示在最右侧 */
    .editor-side-panel.right.collapsed .editor-resize-handle.right {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }



    /* 收起按钮：隐藏，改用双击把手折叠/展开 */
    .editor-side-toggle {
      display: none;
    }

    .editor-view {
      display: none;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      height: auto;
      position: absolute;
      top: 0;
      /* 紧贴 topbar 下方 */
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--dash-bg);
      color: var(--dash-text);
    }

    .editor-view.active {
      display: flex;
      flex-direction: column;
    }

    /* 隐藏但保留 id，供生成/保存/导出等脚本使用 */
    .editor-phantom-controls {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
      opacity: 0;
      z-index: -1;
    }


    /* ---- 旧 .editor-layout 已废弃，内容迁移至 .editor-workspace ---- */

    /* ---- 旧 .editor-right-panel 已废弃，内容迁移至 .editor-side-panel.right ---- */

    /* 编辑器布局（兼容旧引用，仅用于 flex 布局占位） */
    .editor-layout {
      display: contents;
    }

    .editor-left-panel {
      display: none;
      /* 废弃 */
    }

    .editor-btn-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    .editor-btn {
      padding: 10px 16px;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: var(--t-fast);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: var(--font-sans);
    }

    .editor-btn-primary {
      background: var(--primary);
      color: #fff;
    }

    .editor-btn-primary:hover {
      background: var(--primary-dark);
    }

    .editor-btn-success {
      background: var(--success);
      color: #fff;
    }

    .editor-btn-success:hover {
      background: #2aad4e;
    }

    .editor-btn-outline {
      background: transparent;
      color: var(--dash-muted);
      border: 1px solid var(--dash-border-2);
    }

    .editor-btn-outline:hover {
      background: var(--dash-card);
      color: var(--dash-text);
    }

    .editor-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .editor-status-bar {
      margin-top: auto;
      padding: 10px;
      background: var(--dash-card);
      border-radius: var(--radius-sm);
      font-size: 11px;
      color: var(--dash-muted);
    }

    .editor-status-bar .status-msg {
      color: var(--primary);
    }

    .editor-status-bar .error-msg {
      color: var(--danger);
    }

    .editor-right-panel {
      width: 260px;
      background: var(--dash-panel);
      border-left: 1px solid var(--dash-border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow: hidden;
    }

    .editor-right-header {
      padding: 5px 12px;
      font-size: 11px;
      font-weight: 600;
      color: var(--dash-text);
      border-bottom: 1px solid var(--dash-border);
      flex-shrink: 0;
    }

    /* ==================== 编辑页浅色布局 ==================== */
    .editor-layout {
      flex: 1;
      height: 100%;
      min-height: 0;
    }

    .editor-sidebar-left {
      position: relative;
      flex-shrink: 0;
      display: flex;
      align-items: stretch;
      transition: width 0.22s ease;
    }

    .editor-sidebar-left.collapsed {
      width: 40px !important;
      min-width: 40px;
    }

    .editor-sidebar-left.collapsed .editor-left-panel {
      opacity: 0;
      pointer-events: none;
      width: 0;
      min-width: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
      border: none;
    }

    .editor-left-toggle {
      width: 40px;
      flex-shrink: 0;
      border: none;
      border-right: 1px solid var(--dash-border, #e8e6e3);
      background: var(--dash-panel, #f9f9f8);
      color: var(--dash-muted, #6e6e6e);
      font-size: 18px;
      cursor: pointer;
      font-family: var(--font-sans);
      transition: var(--transition);
      align-self: stretch;
    }

    .editor-left-toggle:hover {
      background: var(--dash-coral-soft);
      color: var(--dash-coral);
    }

    .editor-left-panel {
      width: 280px;
      background: var(--dash-panel);
      color: var(--dash-text);
      border-right: 1px solid var(--dash-border);
      transition: opacity 0.18s ease, width 0.22s ease;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .editor-left-panel h1 {
      color: var(--dash-text);
      font-size: 17px;
    }

    .editor-left-panel .desc {
      color: var(--dash-hint);
    }

    .editor-left-panel .editor-input-group label {
      color: var(--dash-muted);
    }

    .editor-left-panel .editor-input-group textarea,
    .editor-left-panel .editor-input-group input[type="text"],
    .editor-left-panel .editor-input-group input[type="number"] {
      background: var(--dash-card);
      border: 1px solid var(--dash-border-2);
      color: var(--dash-text);
    }

    .editor-left-panel .editor-input-group textarea:focus,
    .editor-left-panel .editor-input-group input:focus {
      border-color: var(--primary);
    }

    .editor-left-panel .editor-btn-outline {
      border-color: var(--dash-border-2);
      color: var(--dash-muted);
    }

    .editor-left-panel .editor-btn-outline:hover {
      background: var(--dash-coral-soft);
      color: var(--dash-text);
    }

    .editor-left-panel .editor-status-bar {
      background: var(--dash-card);
      color: var(--dash-muted);
    }

    .editor-left-panel .editor-status-bar .status-msg {
      color: var(--primary);
    }

    .editor-left-panel .editor-status-bar .error-msg {
      color: var(--danger);
    }

    .editor-center-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
    }

    .editor-top-toolbar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      background: var(--dash-panel);
      border-bottom: 1px solid var(--dash-border);
      flex-wrap: wrap;
    }

    .editor-top-toolbar .editor-top-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 140px;
    }

    .editor-top-logo {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, #ff6b6b, #e85555);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(255, 107, 107, 0.35);
    }

    .editor-doc-title {
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      min-width: 160px;
      max-width: 220px;
      background: var(--dash-card);
      color: var(--dash-text);
      font-family: var(--font-sans);
    }

    .editor-doc-title:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--dash-coral-soft);
    }

    .editor-top-tools {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      flex-wrap: wrap;
      justify-content: center;
    }

    .editor-top-tools-minimal {
      justify-content: center;
      flex: 1;
    }

    .editor-fmt-select,
    .editor-fmt-size,
    .editor-fmt-lh {
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      padding: 6px 8px;
      font-size: 12px;
      background: var(--dash-card);
      color: var(--dash-text);
      font-family: var(--font-sans);
    }

    .editor-fmt-size {
      width: 48px;
    }

    .editor-fmt-lh {
      max-width: 88px;
    }

    .editor-fmt-btn {
      min-width: 30px;
      height: 30px;
      padding: 0 8px;
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      background: var(--dash-card);
      color: var(--dash-text);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-sans);
      transition: var(--t-fast);
    }

    .editor-fmt-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .editor-top-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .editor-top-hint {
      font-size: 11px;
      color: var(--dash-hint);
      max-width: 200px;
      line-height: 1.35;
    }

    .editor-btn-purple {
      padding: 7px 14px;
      border: 1px solid var(--dash-coral, #ff6b6b);
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-sans);
      background: transparent;
      color: var(--dash-coral, #ff6b6b);
      transition: var(--t-fast);
    }

    .editor-btn-purple:hover {
      background: var(--dash-coral, #ff6b6b);
      color: #fff;
      box-shadow: 0 0 12px rgba(255, 107, 107, 0.35);
    }

    .editor-btn-purple:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .editor-btn-purple-outline {
      background: transparent;
      color: var(--dash-muted, #64748b);
      border-color: var(--dash-border-2);
    }

    .editor-btn-purple-outline:hover {
      border-color: var(--dash-coral, #ff6b6b);
      color: var(--dash-coral, #ff6b6b);
      background: var(--dash-coral-soft);
    }

    .editor-right-top-actions {
      display: flex;
      flex-direction: row;
      gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--dash-border);
      background: var(--dash-panel);
      flex-shrink: 0;
    }

    .editor-right-top-actions .editor-btn-purple,
    .editor-right-top-actions .editor-btn-purple-outline {
      flex: 1;
      justify-content: center;
    }

    .editor-right-top-actions.editor-copy-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }

    .editor-top-icon-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--dash-muted);
      font-size: 16px;
      font-family: var(--font-sans);
      font-weight: 500;
      cursor: pointer;
      transition: var(--t-fast);
      text-align: left;
    }

    .editor-top-icon-btn svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .editor-top-icon-divider {
      height: 1px;
      background: var(--dash-border-2);
      margin: 4px 0;
    }

    .editor-undo-row {
      display: flex;
      gap: 6px;
    }

    .editor-undo-row .editor-undo-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 8px 12px;
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--dash-muted);
      font-size: 12px;
      font-family: var(--font-sans);
      font-weight: 500;
      cursor: pointer;
      transition: var(--t-fast);
    }

    .editor-undo-row .editor-undo-btn svg {
      flex-shrink: 0;
    }

    .editor-undo-row .editor-undo-btn:hover {
      border-color: var(--dash-coral);
      color: var(--dash-coral);
      background: var(--dash-coral-soft);
    }

    .editor-undo-row .editor-undo-btn:active {
      transform: scale(0.97);
    }

    .editor-undo-stack {
      position: absolute;
      left: 10px;
      bottom: 14px;
      z-index: 8;
      display: flex;
      flex-direction: column;
      gap: 6px;
      pointer-events: auto;
    }

    .editor-undo-btn {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--dash-border-2);
      background: var(--dash-card);
      color: var(--dash-text);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: var(--t-fast);
      font-family: var(--font-sans);
    }

    .editor-undo-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .editor-main {
      flex: 1;
      position: relative;
      background: #0d0d14;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .editor-canvas-shell {
      position: relative;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0 auto;
    }

    .editor-canvas-zoom-badge {
      position: absolute;
      top: 10px;
      right: 12px;
      z-index: 5;
      font-size: 11px;
      font-weight: 600;
      color: var(--primary);
      letter-spacing: 0.04em;
      pointer-events: none;
    }

    /* 右下角缩放（参考常见设计工具 − / +） */
    .editor-zoom-fab {
      position: absolute;
      right: 12px;
      bottom: 68px;
      z-index: 12;
      display: flex;
      gap: 10px;
      pointer-events: auto;
    }

    .editor-zoom-fab-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background: rgba(32, 32, 36, 0.92);
      color: rgba(255, 255, 255, 0.9);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
      transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
      padding: 0;
      font-family: var(--font-sans);
    }

    .editor-zoom-fab-btn:hover {
      background: rgba(48, 48, 54, 0.96);
      border-color: rgba(255, 255, 255, 0.55);
      transform: scale(1.05);
    }

    .editor-zoom-fab-btn:active {
      transform: scale(0.97);
    }

    .editor-zoom-fab-icon {
      width: 22px;
      height: 22px;
      display: block;
    }

    /* 编辑器类型切换标签栏（公众号/长图单栏切换） */
    .editor-type-tabs {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      padding: 0 16px 0 16px;
      flex-shrink: 0;
    }

    .editor-type-tab {
      padding: 5px 16px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      color: var(--text-2);
      cursor: pointer;
      border: 1px solid transparent;
      background: transparent;
      transition: var(--t-fast);
      font-family: var(--font-sans);
      position: relative;
    }

    .editor-type-tab.active {
      background: var(--bg-elevated);
      color: var(--primary);
      border-color: var(--border-accent);
      font-weight: 600;
    }

    .editor-type-tab .tab-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--primary);
      margin-right: 6px;
      vertical-align: middle;
      opacity: 0;
      transition: opacity 0.18s;
    }

    .editor-type-tab.active .tab-dot {
      opacity: 1;
    }

    /* 版本说明问号图标 */
    .editor-type-help {
      position: relative;
      flex-shrink: 0;
      color: #5a5a5e;
      cursor: pointer;
      transition: color 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .editor-type-help:hover {
      color: var(--text, #ccc);
    }

    .editor-type-help-tooltip {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      min-width: 280px;
      max-width: 360px;
      padding: 12px 16px;
      background: var(--bg-elevated, #2a2a2a);
      border: 1px solid var(--border-color, #444);
      border-radius: var(--radius-md, 8px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
      z-index: 9999;
      pointer-events: none;
    }

    .editor-type-help-tooltip p {
      margin: 0;
      padding: 6px 0;
      font-size: 13px;
      line-height: 1.6;
      color: var(--text, #ddd);
      white-space: normal;
    }

    .editor-type-help-tooltip p + p {
      border-top: 1px solid var(--border-color, #333);
    }

    .editor-type-help:hover .editor-type-help-tooltip {
      display: block;
    }

    .editor-canvas-single,
    .editor-canvas-dual {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .editor-canvas-dual.hidden,
    .editor-canvas-single.hidden {
      display: none !important;
    }

    /* 单栏切换模式下的长图画布容器 */
    .editor-canvas-single .editor-single-gjs {
      flex: 1;
      min-height: 0;
      position: relative;
    }

    .editor-canvas-single .editor-single-gjs .gjs-frame-wrapper {
      min-height: 100% !important;
      height: auto !important;
    }

    .editor-dual-inner {
      display: flex;
      flex: 1;
      min-height: 0;
      gap: 0;
      padding: 0 0 4px;
      background: #0d0d14;
      border-radius: var(--radius-lg);
      border: 1px solid var(--dash-border);
    }

    .editor-dual-col {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      background: transparent;
    }

    .editor-dual-head {
      flex-shrink: 0;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--dash-text);
      background: transparent;
      border-bottom: 1px solid var(--dash-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .editor-dual-zoom-badge {
      flex-shrink: 0;
    }

    .editor-dual-w,
    .editor-dual-zoom-badge {
      font-size: 11px;
      font-weight: 600;
      color: var(--dash-purple, #7c6aed);
      letter-spacing: 0.04em;
    }

    .editor-dual-gjs {
      flex: 1;
      min-height: 0;
      position: relative;
    }

    .editor-copy-actions {
      flex-wrap: wrap;
      gap: 8px;
    }

    .hidden {
      display: none !important;
    }

    .editor-view #gjs,
    .editor-view #gjs-wechat,
    .editor-view #gjs-long {
      flex: 1;
      min-height: 0;
      background: #0d0d14 !important;
      --gjs-canvas-top: 0px;
    }

    .editor-view #gjs .gjs-cv-canvas {
      top: 0 !important;
      width: 100% !important;
    }

    .editor-view #gjs-wechat .gjs-cv-canvas {
      top: 0 !important;
      width: 100% !important;
    }

    .editor-view #gjs-long .gjs-cv-canvas {
      top: 0 !important;
      width: 100% !important;
    }

    .editor-view .gjs-cv-canvas {
      background: #0d0d14 !important;
      overflow: hidden;
    }

    /* GrapesJS CDN CSS 有 .gjs-cv-canvas-bg{background-color:rgba(0,0,0,.15)}
       子元素渲染层级可能高于 iframe，制造半透明黑遮罩。强制透明化。 */
    .editor-view .gjs-cv-canvas-bg {
      background-color: transparent !important;
    }

    .editor-view .gjs-frame-wrapper {
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
      border-radius: var(--radius-lg);
      overflow: visible;
    }

    /* 公众号+长图双栏：画布高度固定在列内，用缩放看清全貌 */
    .editor-view.pb-dual-preview-expand {
      overflow: hidden;
    }

    /* 固定 frame-wrapper 视觉高度，缩小/放大时高度始终不变，只有宽度随缩放变化 */
    .editor-view.pb-dual-preview-expand .editor-dual-gjs .gjs-frame-wrapper {
      min-height: var(--pb-frame-height, 1500px) !important;
      height: auto !important;
    }

    .editor-view.pb-dual-preview-expand .editor-workspace {
      overflow: hidden;
      align-items: stretch;
      flex: 1;
      min-height: 0;
    }

    .editor-view.pb-dual-preview-expand .editor-center-col {
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .editor-view.pb-dual-preview-expand .editor-main {
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .editor-view.pb-dual-preview-expand .editor-canvas-shell {
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .editor-view.pb-dual-preview-expand .editor-canvas-dual {
      flex: 1;
      min-height: 0;
    }

    .editor-view.pb-dual-preview-expand .editor-dual-inner {
      flex: 1;
      min-height: 0;
      align-items: stretch;
    }

    .editor-view.pb-dual-preview-expand .editor-dual-col {
      align-self: stretch;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .editor-view.pb-dual-preview-expand .editor-dual-gjs {
      flex: 1;
      min-height: 0;
      overflow-y: auto !important;
      overflow-x: auto !important;
      position: relative;
    }

    .editor-view.pb-dual-preview-expand #gjs-wechat,
    .editor-view.pb-dual-preview-expand #gjs-long {
      flex: 1 1 0 !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
      --gjs-canvas-top: 0px;
    }

    .editor-view.pb-dual-preview-expand #gjs-wechat .gjs-editor,
    .editor-view.pb-dual-preview-expand #gjs-long .gjs-editor {
      height: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;
    }

    .editor-view.pb-dual-preview-expand #gjs-wechat .gjs-cv-canvas,
    .editor-view.pb-dual-preview-expand #gjs-long .gjs-cv-canvas {
      top: 0 !important;
      overflow-y: auto !important;
      overflow-x: auto !important;
    }

    .editor-view.pb-dual-preview-expand #gjs-wechat .gjs-canvas__frames,
    .editor-view.pb-dual-preview-expand #gjs-long .gjs-canvas__frames,
    .editor-view.pb-dual-preview-expand #gjs-wechat .gjs-frames,
    .editor-view.pb-dual-preview-expand #gjs-long .gjs-frames {
      overflow: visible !important;
    }

    /* .editor-right-panel 样式已废弃，内容迁移至 .editor-side-panel.right */

    .editor-ai-section {
      flex-shrink: 0;
    }

    .editor-ai-section-title {
      font-size: 10px;
      font-weight: 600;
      color: var(--dash-text);
      padding: 6px 12px;
    }

    .editor-cover-placeholder {
      position: relative;
      overflow: hidden;
      height: 160px;
      border-radius: var(--radius-sm);
      border: 2px dashed var(--dash-coral, #ff6b6b);
      background: var(--dash-coral-soft);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .editor-cover-placeholder.has-image {
      border-style: solid;
    }

    .editor-cover-placeholder img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .editor-cover-placeholder>*:not(.cover-inline-loading) {
      position: relative;
      z-index: 1;
    }

    /* 封面图内嵌加载状态 */
    .editor-cover-placeholder.loading {
      overflow: hidden;
    }

    .editor-cover-placeholder .cover-inline-loading {
      position: absolute;
      inset: 0;
      background: rgba(250, 250, 249, 0.85);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      gap: 10px;
      z-index: 2;
    }

    .editor-cover-placeholder .cover-inline-spinner {
      width: 28px;
      height: 28px;
      border: 3px solid rgba(232, 164, 69, 0.25);
      border-top-color: var(--color-primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .editor-cover-placeholder .cover-inline-text {
      font-size: 12px;
      color: var(--color-text2);
    }

    /* 封面图有图片时显示重新生成按钮 */
    .editor-cover-placeholder.has-image {
      position: relative;
      cursor: zoom-in;
    }

    /* 封面图操作按钮组 */
    .editor-cover-placeholder .cover-action-btns {
      position: absolute;
      bottom: 8px;
      right: 8px;
      display: flex;
      gap: 6px;
      opacity: 0;
      transition: opacity 0.2s;
      z-index: 3;
    }

    .editor-cover-placeholder:hover .cover-action-btns {
      opacity: 1;
    }

    .editor-cover-placeholder .cover-download-btn {
      background: rgba(15, 15, 17, 0.75);
      color: #fff;
      border: none;
      border-radius: 6px;
      width: 28px;
      height: 28px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .editor-cover-placeholder .cover-download-btn:hover {
      background: rgba(15, 15, 17, 0.9);
    }

    .editor-cover-placeholder .cover-regen-btn {
      background: rgba(15, 15, 17, 0.75);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .editor-cover-placeholder .cover-regen-btn:hover {
      background: rgba(15, 15, 17, 0.9);
    }

    .editor-cover-placeholder .cover-regen-spinner {
      width: 12px;
      height: 12px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .editor-cover-placeholder .cover-regen-btn.regen-loading {
      pointer-events: none;
    }

    .editor-cover-placeholder .cover-regen-btn.regen-loading .cover-regen-label {
      display: none;
    }

    .editor-cover-placeholder .cover-regen-btn.regen-loading .cover-regen-spinner {
      display: block;
    }

    .editor-cover-placeholder .cover-regen-spinner {
      display: none;
    }

    .editor-gen-cover-btn {
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      border: none;
      background: transparent;
      color: var(--dash-coral, #ff6b6b);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-sans);
      transition: var(--t-fast);
      width: 100%;
      text-align: center;
    }

    .editor-gen-cover-btn:hover:not(:disabled) {
      background: rgba(255, 107, 107, 0.15);
      color: var(--dash-coral, #ff6b6b);
      box-shadow: none;
    }

    .editor-gen-cover-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .editor-title-list {
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1 1 auto;
    }

    .editor-title-panel {
      flex: 1 1 0;
      border-bottom: 1px solid var(--dash-border);
      background: var(--dash-panel);
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .editor-title-panel .editor-right-header {
      color: var(--dash-text);
      margin: -4px -12px 4px;
      padding: 3px 12px;
      font-size: 11px;
      font-weight: 600;
    }

    .editor-title-list::-webkit-scrollbar {
      width: 4px;
    }

    .editor-title-list::-webkit-scrollbar-thumb {
      background: var(--dash-border, #e8e6e3);
      border-radius: 2px;
    }

    /* 小红书标题+正文区域 */
    .xhs-text-panel {
      display: flex;
      flex-direction: column;
      padding: 15px 0;
      background: transparent;
      border-bottom: none;
    }

    .xhs-text-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .xhs-text-header .label {
      font-size: 14px;
      font-weight: 400;
      color: #94a3b8;
      letter-spacing: 1px;
      text-transform: none;
    }

    .xhs-gen-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 14px;
      background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
    }

    .xhs-gen-btn .xhs-gen-label::before {
      content: "✨ ";
    }

    .xhs-gen-btn:hover:not(:disabled) {
      opacity: 0.92;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35);
    }

    .xhs-gen-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .xhs-gen-spinner {
      width: 12px;
      height: 12px;
      border: 1.5px solid rgba(255, 255, 255, 0.4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

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

    .xhs-text-card {
      background: var(--dash-card, #1c1e26);
      border: 1px solid var(--dash-border, rgba(255, 255, 255, 0.08));
      border-radius: 16px;
      overflow: hidden;
    }

    .xhs-text-card > .xhs-text-item {
      padding: 20px;
      position: relative;
    }

    .xhs-text-card > .xhs-text-item:not(:last-child) {
      border-bottom: 1px solid var(--dash-border, rgba(255, 255, 255, 0.08));
    }

    .xhs-text-item-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .xhs-text-item-label {
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 4px;
      white-space: nowrap;
    }

    #xhsTitleWrap .xhs-text-item-label {
      color: #ff5f40;
      background: rgba(255, 95, 64, 0.15);
    }

    #xhsBodyWrap .xhs-text-item-label {
      color: #a855f7;
      background: rgba(168, 85, 247, 0.15);
    }

    .xhs-copy-btn {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      font-size: 12px;
      color: var(--dash-muted, #94a3b8);
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .xhs-copy-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.18);
    }

    .xhs-text-item-content {
      font-size: 15px;
      color: #e2e8f0;
      line-height: 1.6;
      word-break: break-all;
      margin: 0;
      white-space: pre-wrap;
      min-height: 20px;
    }

    /* 标题加载中状态 */
    .editor-title-loading {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 18px;
      padding: 10px 14px;
      margin: 6px 0;
      color: var(--dash-text, #2c2a28);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.02em;
      background: linear-gradient(135deg, rgba(255, 107, 107, 0.08), rgba(255, 107, 107, 0.02));
      border: 1px solid rgba(255, 107, 107, 0.18);
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(255, 107, 107, 0.06);
      position: relative;
      overflow: hidden;
    }

    .editor-title-loading::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.12), transparent);
      transform: translateX(-100%);
      animation: editor-title-loading-shimmer 1.6s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes editor-title-loading-shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .editor-title-loading-text {
      position: relative;
      z-index: 1;
      color: var(--dash-coral, #ff6b6b);
    }

    .editor-title-loading-dots {
      display: inline-block;
      position: relative;
      width: 6px;
      height: 6px;
      margin-left: 12px;
      border-radius: 50%;
      background: var(--dash-coral, #ff6b6b);
      box-shadow: 0 0 6px rgba(255, 107, 107, 0.5);
      animation: editor-title-loading-pulse 1.2s ease-in-out infinite;
    }

    .editor-title-loading-dots::before,
    .editor-title-loading-dots::after {
      content: '';
      position: absolute;
      top: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--dash-coral, #ff6b6b);
      box-shadow: 0 0 6px rgba(255, 107, 107, 0.5);
      animation: editor-title-loading-pulse 1.2s ease-in-out infinite;
    }

    .editor-title-loading-dots::before {
      left: -10px;
      animation-delay: 0.2s;
    }

    .editor-title-loading-dots::after {
      left: 10px;
      animation-delay: 0.4s;
    }

    @keyframes editor-title-loading-pulse {
      0%, 100% {
        opacity: 0.3;
        transform: scale(0.7);
      }
      50% {
        opacity: 1;
        transform: scale(1.1);
      }
    }

    .editor-title-item {
      padding: 6px 8px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      display: flex;
      gap: 6px;
      align-items: flex-start;
    }

    .editor-title-item-num {
      font-size: 11px;
      font-weight: 700;
      color: var(--dash-coral, #ff6b6b);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .editor-title-item-body {
      flex: 1;
      min-width: 0;
    }

    .editor-title-item-text {
      font-size: 12px;
      font-weight: 600;
      color: #ffffff;
      line-height: 1.4;
      word-break: break-word;
    }

    .editor-title-item-desc {
      font-size: 10px;
      color: #a0a0a0;
      margin-top: 3px;
      line-height: 1.3;
    }

    .editor-title-copy {
      flex-shrink: 0;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 600;
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--dash-muted, #64748b);
      cursor: pointer;
      font-family: var(--font-sans);
      transition: var(--t-fast);
    }

    .editor-title-copy:hover {
      border-color: var(--dash-coral, #ff6b6b);
      color: var(--dash-coral, #ff6b6b);
      background: var(--dash-coral-soft);
    }

    .editor-right-panel .editor-right-header {
      color: var(--dash-text);
      border-bottom-color: var(--dash-border);
    }

    /* ==================== 加载遮罩（深色珊瑚主题） ==================== */
    .loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 8, 11, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      color: var(--color-text);
      font-size: 15px;
      font-family: var(--font-sans);
    }

    .loading-overlay.active {
      display: flex;
    }

    /* 加载卡片 */
    .loading-card {
      background: var(--dash-card, #1c1c2a);
      border: 1px solid var(--dash-border-2, rgba(255, 255, 255, 0.1));
      border-radius: 18px;
      padding: 36px 40px 32px;
      text-align: center;
      box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) padding,
        0 0 0 1px var(--dash-coral-soft, rgba(255, 107, 107, 0.15)) padding,
        linear-gradient(135deg, rgba(255, 107, 107, 0.08), rgba(129, 140, 248, 0.08)) border-box;
      min-width: 380px;
      max-width: 440px;
      position: relative;
      overflow: hidden;
    }

    /* 卡片顶部彩色光条 */
    .loading-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--primary) 30%, var(--accent) 70%, transparent);
      opacity: 0.9;
    }

    /* 加载动画：双环旋转 */
    .loading-rings {
      width: 60px;
      height: 60px;
      margin: 0 auto 20px;
      position: relative;
      flex-shrink: 0;
    }

    .loading-rings .ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid transparent;
    }

    .loading-rings .ring-outer {
      border-top-color: var(--primary);
      border-right-color: var(--primary);
      animation: spin 1.2s linear infinite;
    }

    .loading-rings .ring-inner {
      inset: 10px;
      border-bottom-color: var(--accent);
      border-left-color: var(--accent);
      animation: spin 0.8s linear infinite reverse;
    }

    /* 中间 logo 圆点 */
    .loading-rings .ring-dot {
      position: absolute;
      inset: 18px;
      background: var(--primary);
      border-radius: 50%;
      box-shadow: 0 0 12px var(--primary-glow);
      animation: ringPulse 1.4s ease-in-out infinite;
    }

    @keyframes ringPulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 1
      }

      50% {
        transform: scale(0.7);
        opacity: 0.6
      }
    }

    .loading-inner {
      text-align: center;
    }

    .loading-spinner {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(255, 107, 107, 0.2);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 14px;
    }

    .loading-text {
      font-size: 15px;
      color: var(--text);
      margin-bottom: 20px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    /* 分步进度 */
    .loading-progress-wrap {
      width: 320px;
      margin-top: 20px;
    }

    .loading-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      text-align: left;
    }

    .loading-step {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 4px;
      opacity: 0.38;
      transition: opacity 0.25s, color 0.25s;
    }

    .loading-step.active {
      opacity: 1;
      color: #fff;
    }

    .loading-step.done {
      opacity: 0.75;
      color: var(--success);
    }

    .loading-step.failed {
      opacity: 1;
      color: var(--danger);
    }

    .loading-step-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid currentColor;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      flex-shrink: 0;
      line-height: 1;
    }

    .loading-step.done .loading-step-icon {
      background: var(--success);
      border-color: var(--success);
      color: #0d0d12;
    }

    .loading-step.done .loading-step-icon::after {
      content: '✓';
      font-size: 10px;
      font-weight: 700;
    }

    .loading-step.failed .loading-step-icon {
      background: var(--danger);
      border-color: var(--danger);
      color: #fff;
    }

    .loading-step.failed .loading-step-icon::after {
      content: '✕';
      font-size: 10px;
      font-weight: 700;
    }

    .loading-step.active .loading-step-icon {
      animation: stepPulse 1.2s ease infinite;
    }

    @keyframes stepPulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: 0.5
      }
    }

    .loading-step-icon:not(.done):not(.failed) {
      opacity: 0.6;
    }

    .loading-step-label {
      font-size: 13px;
    }

    /* 进度条轨道 */
    .loading-bar-track {
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      margin-top: 14px;
      overflow: hidden;
    }

    .loading-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      border-radius: 2px;
      width: 0%;
      transition: width 0.4s ease;
    }

    /* 取消按钮 */
    .loading-cancel-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 24px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      font-family: var(--font-sans);
      transition: all 0.2s ease;
    }

    .loading-cancel-btn:hover {
      background: rgba(255, 107, 107, 0.15);
      border-color: rgba(255, 107, 107, 0.4);
      color: #fff;
    }

    /* 错误重试 */
    .loading-retry-wrap {
      margin-top: 16px;
      text-align: center;
    }

    .loading-retry-wrap.hidden {
      display: none;
    }

    .loading-error-msg {
      font-size: 13.5px;
      color: #ff6b6b;
      margin-bottom: 14px;
      max-width: 340px;
      line-height: 1.5;
      background: rgba(255, 107, 107, 0.08);
      border: 1px solid rgba(255, 107, 107, 0.2);
      border-radius: 8px;
      padding: 10px 14px;
    }

    .loading-retry-btn {
      padding: 9px 28px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-sans);
      transition: filter 0.15s;
      box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
    }

    .loading-retry-btn:hover {
      filter: brightness(1.1);
    }

    /* ==================== 设备切换（深色玻璃风格） ==================== */
    .device-switcher-host {
      display: none !important;
    }

    .device-switcher-host.visible {
      display: flex;
    }

    .device-switcher-fab {
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-full);
      background: var(--bg-glass);
      backdrop-filter: blur(16px);
      color: var(--text);
      box-shadow: var(--shadow-glass);
      cursor: pointer;
      font-family: var(--font-sans);
      transition: var(--t-fast);
    }

    .device-switcher-fab:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .device-switcher-host.expanded .device-switcher-fab {
      display: none;
    }

    .device-switcher {
      display: none;
      flex-direction: column;
      gap: 8px;
      background: var(--bg-glass);
      backdrop-filter: blur(20px);
      padding: 10px 12px;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-glass);
      border: 1px solid var(--dash-border-2);
      width: 100%;
    }

    .device-switcher-host.expanded .device-switcher {
      display: flex;
    }

    .device-switcher-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .device-switcher-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-2);
    }

    .device-switcher-collapse {
      padding: 3px 10px;
      font-size: 11px;
      border: none;
      border-radius: var(--radius-sm);
      background: var(--dash-card);
      color: var(--dash-muted);
      cursor: pointer;
      font-family: var(--font-sans);
      transition: var(--transition);
    }

    .device-switcher-collapse:hover {
      background: var(--color-border2);
      color: var(--color-text);
    }

    .device-switcher-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
    }

    .device-btn {
      padding: 4px 10px;
      border: none;
      background: transparent;
      color: var(--color-text2);
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 12px;
      transition: var(--transition);
      font-family: var(--font-sans);
    }

    .device-btn.active {
      background: var(--primary);
      color: #fff;
    }

    .device-width-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-3);
    }

    .device-width-row label {
      flex-shrink: 0;
      color: var(--text-2);
    }

    .device-width-input {
      width: 64px;
      padding: 4px 6px;
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      background: var(--dash-card);
      color: var(--text);
      font-size: 12px;
      font-family: var(--font-sans);
    }

    .device-width-input:focus {
      outline: none;
      border-color: var(--primary);
    }

    .device-width-hint {
      font-size: 10px;
      color: var(--text-3);
      line-height: 1.35;
    }

    /* 画布宽度拖动把手：外挂式胶囊手柄 */
    .canvas-resize-handle {
      position: absolute;
      top: 50% !important;
      width: 30px;
      height: 100% !important;
      cursor: col-resize;
      z-index: 98;
      background: transparent;
      display: flex;
      align-items: center;
      padding-left: 8px;
      transform: translateY(-50%);
    }

    /* 视觉手柄：胶囊 */
    .resizer-pill {
      width: 6px;
      height: 60px;
      background-color: #555;
      border-radius: 10px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* 鼠标移入变色并增粗 */
    .canvas-resize-handle:hover .resizer-pill {
      background-color: var(--primary);
      width: 8px;
      height: 100px;
      box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
    }

    /* 拖动时的状态 */
    .canvas-resize-handle.dragging .resizer-pill {
      background-color: var(--primary);
      height: 100vh;
      width: 2px;
      margin-left: 2px;
      border-radius: 0;
      box-shadow: none;
    }

    /* 宽度提示标签 */
    .width-label {
      position: absolute;
      left: 25px;
      background: var(--primary);
      color: white;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: bold;
      white-space: nowrap;
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .canvas-resize-handle:hover .width-label,
    .canvas-resize-handle.dragging .width-label {
      opacity: 1;
      transform: translateX(0);
    }

    .canvas-resize-handle:hover,
    .canvas-resize-handle.dragging {
      cursor: col-resize;
    }

    /* ==================== 选中图片浮动工具栏 ==================== */
    #selection-toolbar {
      position: fixed;
      left: 0;
      top: 0;
      display: none;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 2px;
      max-width: min(96vw, 420px);
      z-index: 999999;
      white-space: normal;
      background: var(--bg-glass);
      backdrop-filter: blur(20px);
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-md);
      padding: 3px 4px;
      box-shadow: var(--shadow-lg);
      pointer-events: auto;
    }

    #selection-toolbar.visible {
      display: flex;
    }

    .tb-btn {
      padding: 5px 8px;
      background: transparent;
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: var(--t-fast);
      font-family: var(--font-sans);
    }

    .tb-btn svg {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      color: currentColor;
      stroke: currentColor;
    }

    .tb-btn:hover {
      background: var(--color-surface2);
    }

    #tb-crop:hover {
      background: var(--color-surface2);
    }

    #tb-delete {
      color: var(--color-danger);
    }

    #tb-delete:hover {
      background: rgba(255, 87, 87, 0.12);
    }

    /* ==================== 图片裁剪模态框（深色主题） ==================== */
    .crop-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 8, 11, 0.8);
      backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000020;
      font-family: var(--font-sans);
    }

    .crop-modal-overlay.active {
      display: flex;
    }

    .crop-modal {
      background: var(--dash-panel);
      border-radius: var(--radius-lg);
      padding: 20px;
      max-width: 90vw;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--color-border2);
    }

    .crop-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .crop-modal-header h3 {
      color: var(--color-text);
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .crop-modal-close {
      background: none;
      border: none;
      color: var(--color-text3);
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      transition: var(--transition);
    }

    .crop-modal-close:hover {
      background: var(--color-surface2);
      color: var(--color-text);
    }

    .crop-canvas-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-bg);
      border-radius: var(--radius-md);
      overflow: hidden;
      max-height: 60vh;
    }

    #cropCanvas {
      display: block;
      max-width: 100%;
      max-height: 60vh;
      cursor: crosshair;
    }

    .crop-hint {
      text-align: center;
      font-size: 12px;
      color: var(--color-text3);
      margin-top: 4px;
    }

    .crop-ratio-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .crop-ratio-bar label {
      color: var(--color-text2);
      font-size: 13px;
    }

    .ratio-btns {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .ratio-btn {
      padding: 5px 12px;
      border: 1px solid var(--color-border2);
      background: var(--color-surface2);
      color: var(--color-text2);
      border-radius: var(--radius-sm);
      font-size: 12px;
      cursor: pointer;
      transition: var(--transition);
      font-family: var(--font-sans);
    }

    .ratio-btn:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

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

    .crop-modal-footer {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .crop-btn {
      padding: 8px 20px;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: var(--transition);
      font-family: var(--font-sans);
    }

    .crop-btn-cancel {
      background: var(--color-surface2);
      color: var(--color-text2);
    }

    .crop-btn-cancel:hover {
      background: var(--color-surface3);
      color: var(--color-text);
    }

    .crop-btn-confirm {
      background: var(--color-primary);
      color: #fff;
    }

    .crop-btn-confirm:hover {
      background: var(--color-primary2);
    }

    .crop-btn-confirm:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .crop-btn-reset {
      background: var(--color-surface2);
      color: var(--color-text2);
      border: 1px solid var(--color-border2);
      padding: 8px 14px;
    }

    .crop-btn-reset:hover {
      background: var(--color-surface3);
    }

    /* GrapesJS 覆盖 */
    .gjs-block-label {
      font-size: 11px !important;
      text-align: center !important;
      line-height: 1.2 !important;
      margin-top: 4px !important;
    }

    .gjs-blocks-c {
      padding: 4px !important;
    }

    .gjs-block {
      padding: 8px 10px !important;
      min-height: auto !important;
      background: var(--dash-card) !important;
      border-color: var(--dash-border-2) !important;
    }

    /* 选中/悬停边框颜色、工具栏、badge——与 dash-coral 主题一致 */
    .gjs-selected {
      outline: 2px solid #ff6b6b !important;
      outline-offset: 1px !important;
    }

    .gjs-hover {
      outline: 1px solid rgba(255, 107, 107, 0.5) !important;
    }

    .gjs-element-tooltip {
      background: var(--dash-panel) !important;
      border: 1px solid var(--dash-border-2) !important;
      color: var(--dash-text) !important;
      font-family: var(--font-sans) !important;
      font-size: 11px !important;
    }

    .gjs-badge {
      display: none !important;
    }

    .gjs-toolbar {
      background: var(--dash-panel) !important;
      border: 1px solid var(--dash-border-2) !important;
    }

    .gjs-toolbar .gjs-toolbar-item {
      color: var(--dash-text) !important;
    }

    .gjs-toolbar .gjs-toolbar-item:hover {
      background: rgba(255, 107, 107, 0.15) !important;
    }

    .gjs-placeholder {
      border: 2px dashed rgba(255, 107, 107, 0.6) !important;
      background: rgba(255, 107, 107, 0.06) !important;
    }

    /* 图层面板选中项：去掉蓝色左边框，改为珊瑚橙 */
    .gjs-layers-c .gjs-layer.gjs-selected>* {
      border-left: 3px solid var(--dash-coral) !important;
    }

    .gjs-layers-c .gjs-layer.gjs-selected {
      background: var(--dash-coral-soft) !important;
    }

    /* 区块面板选中态 */
    .gjs-block.gjs-bld-selected {
      background: var(--dash-coral-soft) !important;
      border-color: var(--dash-coral) !important;
      box-shadow: var(--glow-coral) !important;
    }

    /* 样式管理器/属性面板选中项 */
    .gjs-sm-sector.gjs-sm-sector-active {
      background: var(--dash-card) !important;
    }

    .gjs-trt-trait.gjs-trt-trait-selected {
      background: var(--dash-coral-soft) !important;
      border-left: 3px solid var(--dash-coral) !important;
    }

    .gjs-sm-property.gjs-sm-property-active .gjs-sm-label {
      color: var(--dash-coral) !important;
    }

    /* 隐藏 GrapesJS 元素工具栏中的上移按钮（SVG path=d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"） */
    .gjs-toolbar .gjs-toolbar-item svg path[d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"],
    .gjs-toolbar .gjs-toolbar-item svg path[d^="M13,20H11V8L5.5"] {
      display: none !important;
    }

    /* 同时隐藏其父级按钮容器，避免空白占位 */
    .gjs-toolbar .gjs-toolbar-item:has(> svg path[d^="M13,20H11V8L5.5"]) {
      display: none !important;
    }

    .gjs-rte-toolbar .gjs-action[title="元素上移"],
    .gjs-rte-toolbar .gjs-action[title="Move component up"],
    .gjs-rte-toolbar .gjs-action[title="元素下移"],
    .gjs-rte-toolbar .gjs-action[title="Move component down"],
    .gjs-rte-toolbar .gjs-rte-action[title="元素上移"],
    .gjs-rte-toolbar .gjs-rte-action[title="Move component up"],
    .gjs-rte-toolbar .gjs-rte-action[title="元素下移"],
    .gjs-rte-toolbar .gjs-rte-action[title="Move component down"] {
      display: none !important;
    }

    /* 通过 SVG 路径特征隐藏上下移动按钮 */
    .gjs-rte-toolbar svg[data-icon="chevron-up"],
    .gjs-rte-toolbar svg[data-icon="chevron-down"],
    .gjs-rte-toolbar .gjs-rte-action svg[viewBox*="chevron"],
    .gjs-rte-toolbar .gjs-action svg[viewBox*="chevron"] {
      display: none !important;
    }

    /* 隐藏 move 按钮的容器元素 */
    .gjs-rte-toolbar .gjs-rte-action[title*="up"],
    .gjs-rte-toolbar .gjs-rte-action[title*="down"],
    .gjs-rte-toolbar .gjs-rte-action[title*="上移"],
    .gjs-rte-toolbar .gjs-rte-action[title*="下移"],
    .gjs-rte-toolbar .gjs-action[title*="up"],
    .gjs-rte-toolbar .gjs-action[title*="down"],
    .gjs-rte-toolbar .gjs-action[title*="上移"],
    .gjs-rte-toolbar .gjs-action[title*="下移"] {
      display: none !important;
    }

    /* GrapesJS 富文本工具栏 — 固定在画布左侧 */
    .gjs-rte-toolbar {
      position: fixed !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      padding: 10px !important;
      max-height: 80vh;
      overflow-y: auto;
      color-scheme: dark;
      background: rgba(28, 28, 32, 0.97) !important;
      border: 1px solid var(--color-border2) !important;
      border-radius: var(--radius-md) !important;
      box-shadow: var(--shadow-lg) !important;
      z-index: 20 !important;
    }

    .gjs-rte-toolbar .gjs-rte-actionbar {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center;
      gap: 3px 4px !important;
      max-width: 176px;
    }

    .gjs-rte-toolbar .gjs-action,
    .gjs-rte-toolbar .gjs-rte-action {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      height: 26px !important;
      min-width: 26px;
      padding: 0 4px !important;
      background: rgba(255, 255, 255, 0.07) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: var(--radius-sm) !important;
      box-sizing: border-box;
    }

    /* 仅对包含下拉/颜色选择器的 action 放开宽度 */
    .gjs-rte-toolbar .gjs-rte-action:has(select),
    .gjs-rte-toolbar .gjs-rte-action:has(input[type="color"]) {
      width: auto !important;
      flex-shrink: 0;
      border: none !important;
      background: transparent !important;
      padding: 0 !important;
    }

    .gjs-rte-toolbar .gjs-action:hover,
    .gjs-rte-toolbar .gjs-rte-action:hover {
      background: rgba(255, 255, 255, 0.14) !important;
      border-color: rgba(255, 255, 255, 0.18) !important;
    }

    .gjs-rte-toolbar select.gjs-rte-fmt,
    .gjs-rte-toolbar input.gjs-rte-colorinp {
      height: 26px;
      font-size: 11px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius-sm);
      background: rgba(0, 0, 0, 0.4);
      color: var(--color-text);
      vertical-align: middle;
      cursor: pointer;
      box-sizing: border-box;
    }

    .gjs-rte-toolbar select.gjs-rte-fmt {
      max-width: 108px;
      padding: 0 6px;
      appearance: auto;
    }

    .gjs-rte-toolbar select.gjs-rte-fmt:hover {
      border-color: rgba(232, 164, 69, 0.45);
      background: rgba(0, 0, 0, 0.5);
    }

    .gjs-rte-toolbar select.gjs-rte-fmt:focus {
      outline: none;
      border-color: var(--color-primary);
    }

    .gjs-rte-toolbar select.gjs-rte-fmt option {
      background: var(--color-surface2);
      color: var(--color-text);
    }

    .gjs-rte-toolbar input.gjs-rte-colorinp {
      width: 28px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .gjs-rte-toolbar input.gjs-rte-colorinp:hover {
      border-color: rgba(255, 107, 107, 0.55);
    }

    .gjs-rte-toolbar .gjs-rte-fmt-lbl {
      font-size: 10px;
      color: var(--color-text3);
      padding: 0 2px;
      user-select: none;
    }

    /* ===== 选中元素上下插入按钮 ===== */
    .pb-insert-btn {
      position: fixed;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--color-primary, #ff6b6b);
      border: 2px solid rgba(255, 255, 255, 0.85);
      color: #fff;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
      transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    }

    .pb-insert-btn.visible {
      display: flex;
    }

    .pb-insert-btn:hover {
      transform: scale(1.12);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
      background: var(--color-primary2, #e8645a);
    }

    .pb-insert-btn:active {
      transform: scale(0.96);
    }

    /* ===== 插入菜单 ===== */
    .pb-insert-menu {
      position: fixed;
      display: none;
      flex-direction: column;
      gap: 4px;
      background: rgba(22, 22, 28, 0.97);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-md);
      padding: 6px;
      z-index: 100000;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      min-width: 140px;
      backdrop-filter: blur(8px);
    }

    .pb-insert-menu.visible {
      display: flex;
    }

    .pb-insert-menu-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: none;
      border: none;
      border-radius: var(--radius-sm);
      color: var(--color-text, #e0e0e0);
      font-size: 13px;
      font-family: var(--font-sans);
      cursor: pointer;
      text-align: left;
      transition: background 0.12s;
      white-space: nowrap;
    }

    .pb-insert-menu-item:hover {
      background: rgba(255, 107, 107, 0.15);
      color: #fff;
    }

    .pb-insert-menu-item svg {
      color: var(--color-primary, #ff6b6b);
      flex-shrink: 0;
    }

    /* 登录弹窗 */
    .login-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 8, 11, 0.75);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 5000;
      font-family: var(--font-sans);
    }

    .login-modal-overlay.active {
      display: flex;
    }

    /* 封面图全屏预览 */
    .cover-preview-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 8, 11, 0.92);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100000;
      cursor: zoom-out;
    }

    .cover-preview-overlay.active {
      display: flex;
    }

    .cover-preview-overlay img {
      max-width: 95vw;
      max-height: 95vh;
      border-radius: 8px;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
      object-fit: contain;
    }

    .cover-preview-close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .cover-preview-close:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    .cover-preview-download {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--color-primary);
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: 8px 20px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      z-index: 2;
    }

    .cover-preview-download:hover {
      background: var(--primary-dark);
    }

    .login-modal {
      background: var(--dash-panel);
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-lg);
      padding: 24px;
      width: 340px;
      max-width: 100%;
      box-shadow: var(--shadow-xl);
    }

    .login-modal-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--dash-text);
      margin-bottom: 16px;
      text-align: center;
    }

    .login-modal-close {
      position: absolute;
      top: 12px;
      right: 14px;
      background: none;
      border: none;
      color: var(--dash-muted);
      cursor: pointer;
      font-size: 18px;
    }

    .login-modal-field {
      margin-bottom: 12px;
    }

    .login-modal-label {
      font-size: 12px;
      color: var(--dash-muted);
      margin-bottom: 4px;
      display: block;
    }

    .login-modal-input {
      width: 100%;
      padding: 9px 12px;
      background: var(--dash-card);
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      color: var(--dash-text);
      font-size: 13px;
      font-family: var(--font-sans);
    }

    .login-modal-input:focus {
      outline: none;
      border-color: var(--primary);
    }

    .login-modal-submit {
      width: 100%;
      padding: 10px;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: #fff;
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-sans);
      margin-top: 16px;
      transition: var(--transition);
    }

    .login-modal-submit:hover {
      background: var(--color-primary2);
    }

    .login-modal-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ============================================================
       邮箱登录/注册弹窗样式（重构版）
       ============================================================ */
    /* 弹窗容器 */
    .auth-modal {
      background: var(--color-surface);
      border: 1px solid var(--color-border2);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      width: 380px;
      max-width: 100%;
      box-shadow: var(--shadow-lg);
      position: relative;
    }

    .auth-modal-close {
      position: absolute;
      top: 14px;
      right: 16px;
      background: none;
      border: none;
      color: var(--color-text3);
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
      padding: 2px 4px;
      border-radius: 4px;
    }

    .auth-modal-close:hover {
      color: var(--color-text);
      background: var(--color-surface2);
    }

    /* 弹窗头部 */
    .auth-modal-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .auth-modal-logo {
      font-size: 13px;
      font-weight: 700;
      color: var(--color-primary);
      letter-spacing: 1px;
      margin-bottom: 4px;
    }

    .auth-modal-subtitle {
      font-size: 12px;
      color: var(--color-text3);
    }

    /* Toast 通知 */
    .toast-container {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99999;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }

    .toast {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      color: #fff;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
      pointer-events: auto;
      animation: toastIn 0.25s ease;
      white-space: nowrap;
    }

    .toast-success {
      background: rgba(16, 185, 129, 0.95);
    }

    .toast-error {
      background: rgba(239, 68, 68, 0.95);
    }

    .toast-info {
      background: rgba(59, 130, 246, 0.95);
    }

    .toast-warning {
      background: rgba(245, 158, 11, 0.95);
    }

    .toast svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Tab 切换 */
    .auth-tabs {
      display: flex;
      border-bottom: 1px solid var(--color-border2);
      margin-bottom: 18px;
    }

    .auth-tab {
      flex: 1;
      padding: 10px 4px;
      text-align: center;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-text3);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color 0.18s, border-color 0.18s;
      font-family: var(--font-sans);
      background: none;
      border-top: none;
      border-left: none;
      border-right: none;
    }

    .auth-tab:hover {
      color: var(--color-text);
    }

    .auth-tab.active {
      color: var(--color-primary);
      border-bottom-color: var(--color-primary);
      font-weight: 600;
    }

    /* 表单 */
    .auth-form {
      display: none;
    }

    .auth-form.active {
      display: block;
    }

    .auth-field {
      margin-bottom: 12px;
    }

    .auth-label {
      font-size: 12px;
      color: var(--color-text2);
      margin-bottom: 4px;
      display: block;
      font-weight: 500;
    }

    .auth-input {
      width: 100%;
      padding: 9px 12px;
      background: var(--color-surface2);
      border: 1px solid var(--color-border2);
      border-radius: var(--radius-sm);
      color: var(--color-text);
      font-size: 13px;
      font-family: var(--font-sans);
      box-sizing: border-box;
      transition: border-color 0.18s;
    }

    .auth-input:focus {
      outline: none;
      border-color: var(--color-primary);
    }

    .auth-input.error {
      border-color: #ef4444;
    }

    .auth-input:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* 验证码行 */
    .auth-code-row {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .auth-code-row .auth-field {
      flex: 1;
      margin-bottom: 0;
    }

    .auth-code-btn {
      flex-shrink: 0;
      padding: 9px 12px;
      background: var(--color-surface2);
      border: 1px solid var(--color-border2);
      border-radius: var(--radius-sm);
      font-size: 12px;
      color: var(--color-primary);
      cursor: pointer;
      font-family: var(--font-sans);
      font-weight: 600;
      white-space: nowrap;
      transition: background 0.18s;
      min-width: 90px;
      text-align: center;
    }

    .auth-code-btn:hover:not(:disabled) {
      background: #f0eeff;
    }

    .auth-code-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* 密码提示 */
    .auth-hint {
      font-size: 11px;
      color: var(--color-text3);
      margin-top: 3px;
      line-height: 1.4;
    }

    /* 提交按钮 */
    .auth-submit {
      width: 100%;
      padding: 11px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary2));
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-sans);
      margin-top: 16px;
      transition: opacity 0.18s, transform 0.18s;
    }

    .auth-submit:hover:not(:disabled) {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    .auth-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    /* 底部切换 */
    .auth-footer {
      margin-top: 14px;
      text-align: center;
      font-size: 12px;
      color: var(--text-3);
    }

    .auth-footer-link {
      color: var(--primary);
      cursor: pointer;
      font-weight: 600;
      background: none;
      border: none;
      padding: 0;
      font-size: 12px;
      font-family: var(--font-sans);
    }

    .auth-footer-link:hover {
      text-decoration: underline;
    }

    /* 错误/成功提示 */
    .auth-msg {
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      margin-bottom: 12px;
      display: none;
    }

    .auth-msg.show {
      display: block;
    }

    .auth-msg.error {
      background: var(--danger-soft);
      color: var(--danger);
      border: 1px solid rgba(244, 63, 94, 0.2);
    }

    .auth-msg.success {
      background: var(--success-soft);
      color: var(--success);
      border: 1px solid rgba(52, 211, 153, 0.2);
    }

    /* ==================== 统一模态框（深色玻璃风格） ==================== */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 8, 11, 0.75);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      animation: modalFadeIn 0.18s ease;
    }

    @keyframes modalFadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .modal-box {
      background: var(--dash-panel);
      border: 1px solid var(--dash-border-2);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      width: 420px;
      max-width: calc(100vw - 40px);
      overflow: hidden;
      animation: modalSlideIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .modal-box-input {
      width: 460px;
    }

    @keyframes modalSlideIn {
      from {
        transform: translateY(-24px) scale(0.92);
        opacity: 0;
      }

      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px 0;
    }

    .modal-title-area {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .modal-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .modal-icon-info {
      background: var(--accent-soft);
      color: var(--accent);
    }

    .modal-icon-danger {
      background: var(--danger-soft);
      color: var(--danger);
    }

    .modal-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--dash-text);
    }

    .modal-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--dash-muted);
      font-size: 16px;
      width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--t-fast), color var(--t-fast);
      padding: 0;
    }

    .modal-close:hover {
      background: var(--dash-card);
      color: var(--dash-text);
    }

    .modal-body {
      padding: 16px 24px;
    }

    .modal-message {
      font-size: 14px;
      color: var(--dash-muted);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .modal-input {
      width: 100%;
      padding: 10px 14px;
      border: 1.5px solid var(--dash-border-2);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color var(--t-fast);
      background: var(--dash-card);
      color: var(--dash-text);
    }

    .modal-input:focus {
      border-color: var(--primary);
      background: var(--dash-card);
      box-shadow: 0 0 0 3px var(--dash-coral-soft);
    }

    .modal-error {
      font-size: 12px;
      color: var(--danger);
      margin-top: 8px;
      min-height: 16px;
    }

    .modal-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 0 24px 20px;
    }

    .btn-confirm-primary {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: #fff;
      border: none;
    }

    .btn-confirm-primary:hover {
      filter: brightness(1.1);
    }

    .btn-confirm-danger {
      background: var(--danger);
      color: #fff;
      border: none;
    }

    .btn-confirm-danger:hover {
      background: #e11d48;
    }

    /* ===== 右侧面板优化版样式 ===== */
    .button-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .btn-primary {
      background: linear-gradient(135deg, #ff4d4f 0%, #d4380d 100%);
            color: white;
            border: none;
            padding: 14px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 15px rgba(212, 56, 13, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(212, 56, 13, 0.4);
            filter: brightness(1.1);
    }

    .secondary-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      border: 1px solid var(--border);
      padding: 10px;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s;
      font-family: var(--font-sans);
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .label {
      color: var(--text-2);
      font-size: 13px;
      margin-bottom: 12px;
      display: block;
      font-weight: 600;
    }

    .cover-box {
      width: 100%;
      height: 130px;
      border-radius: 12px;
      border: 2px dashed rgba(255, 107, 107, 0.3);
      background: rgba(255, 107, 107, 0.02);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
    }

    .cover-box:hover {
      border-color: var(--primary);
      background: rgba(255, 107, 107, 0.08);
    }

    .title-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .title-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      transition: 0.2s ease;
    }

    .title-card:hover {
      border-color: rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.05);
    }

    .tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 4px;
      margin-bottom: 10px;
      display: inline-block;
      font-weight: 600;
    }

    .tag-red {
      background: rgba(255, 107, 107, 0.15);
      color: #ff7875;
    }

    .tag-green {
      background: rgba(82, 196, 26, 0.15);
      color: #95de64;
    }

    .tag-blue {
      background: rgba(24, 144, 255, 0.15);
      color: #69c0ff;
    }

    .tag-purple {
      background: rgba(114, 46, 209, 0.15);
      color: #b37feb;
    }

    .tag-orange {
      background: rgba(250, 158, 11, 0.15);
      color: #ffbb96;
    }

    .title-content {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text);
      margin-bottom: 14px;
    }

    .btn-copy-title {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--text-2);
      font-size: 11px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      float: right;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.25s ease;
    }

    .btn-copy-title:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(255, 107, 107, 0.05);
    }

    .icon {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }

    .clear {
      clear: both;
    }

    /* 调整 editor-gen-cover-btn 样式以适配新的 HTML 结构 */
    .editor-gen-cover-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 0;
      height: 100%;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--primary);
      font-family: var(--font-sans);
    }

    .editor-gen-cover-btn:hover {
      background: transparent;
      box-shadow: none;
    }

    /* ===== 左侧面板优化版样式 ===== */
    .editor-left-floating-icons.sidebar {
      --sidebar-bg: #1a1a1c;
      --card-bg: #2d2d31;
      --card-hover-bg: #3b3b40;
      --brand-color: #ff6464;
      --text-main: #ffffff;
      --spacing: 12px;
      
      width: calc(60px + (var(--spacing) * 2));
      background: var(--sidebar-bg);
      border-radius: 20px;
      padding: var(--spacing);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--spacing);
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* 统一按钮样式 */
    .toolbar-btn {
      width: 60px;
      height: 72px;
      background: var(--card-bg);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid transparent;
      user-select: none;
      padding: 0;
      color: var(--brand-color);
    }

    .drag-item {
      cursor: grab;
    }

    .drag-item:active {
      cursor: grabbing;
    }

    /* 悬浮反馈 */
    .toolbar-btn:hover {
      background: var(--card-hover-bg);
      transform: translateY(-2px);
      border-color: rgba(255, 100, 100, 0.4);
      box-shadow: 0 4px 12px rgba(255, 100, 100, 0.15);
      color: #ff8e8e;
    }

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

    /* 图标样式 */
    .toolbar-btn svg {
      width: 24px;
      height: 24px;
      margin-bottom: 6px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
    }

    /* 文案样式 */
    .toolbar-btn span {
      font-size: 11px;
      color: var(--text-main);
      font-weight: 500;
    }

    /* 特殊的分割线也要符合间距逻辑 */
    .divider {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.08);
      margin: 2px 0;
    }

    /* 兼容旧的 floating-icon-btn 样式，保留功能 */
    .floating-icon-btn.toolbar-btn {
      /* 新样式覆盖旧样式 */
      transform: none;
      filter: none;
    }

    .floating-icon-btn.toolbar-btn:hover {
      transform: translateY(-2px);
      filter: none;
    }

    .floating-icon-btn.toolbar-btn:active {
      transform: scale(0.95);
    }

    .floating-icon-btn.toolbar-btn svg {
      width: 24px;
      height: 24px;
      color: var(--brand-color);
      filter: none;
      margin-bottom: 6px;
      opacity: 1;
    }

    .floating-icon-btn.toolbar-btn .floating-icon-label {
      font-size: 11px;
      color: var(--text-main);
      font-weight: 500;
    }

    /* 保持可拖拽属性 */
    .floating-icon-btn.toolbar-btn.dragging {
      opacity: 0.5;
      transform: scale(0.9);
    }

    /* ===== 顶部按钮优化版样式 ===== */
    .editor-type-tabs {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }

    /* 分段选择器容器 */
    .segmented-control {
      display: flex;
      background-color: #252529;
      border-radius: 10px;
      padding: 4px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      user-select: none;
    }

    /* 单个选项样式 */
    .control-item {
      padding: 6px 20px;
      font-size: 14px;
      color: #a0a0a0;
      cursor: pointer;
      border-radius: 7px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      gap: 6px;
      border: none;
      background: transparent;
    }

    /* 悬停效果 */
    .control-item:hover {
      color: #ffffff;
    }

    /* 选中活跃状态 */
    .control-item.active {
      background-color: #38383d;
      color: #ff5c5c;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* 小红点指示器 - 伪元素实现 */
    .control-item.active::before {
      content: '';
      width: 8px;
      height: 8px;
      background-color: #ff5c5c;
      border-radius: 50%;
      display: inline-block;
      box-shadow: 0 0 8px rgba(255, 92, 92, 0.4);
      flex-shrink: 0;
    }