/* ═══════════════════════════════════════════════════════════
   DK Share UX — 分享体验优化样式（冻结方案 v1.0）
   加载顺序：design-editor-header priority 21，晚于 dk-shell.css /
   dk-account.css，对既有选择器拥有覆盖权。
   DOM/状态驱动方：dk-share-ux.js（根级 class 挂 #dkShell）；
   flag（DK_SHARE_UX_ENABLED）关闭时本文件不注入，零副作用。

   Phase 1（已实施）：
     - .dk-sux-edu 教育区（Designs 抽屉底部常驻，纯静态文案）
     - #dkShell.dk-sux-designs-fresh .dk-designs-share-btn::after 文字态
       —— 全部规则 scoped 在 fresh class 之下：class 摘除后按钮回落
       dk-shell.css 原始像素，本文件零残留影响。
   Phase 2（已实施）：
     - Canvas FAB 显隐 + 首次胶囊，全部规则 scoped 在挂载标记
       #dkShell.dk-sux-on 之下（adapter 成功启动后才添加）——
       adapter 未启动时零规则生效，FAB 回落原生常驻行为（准则 6）。
     - 隐藏用协议 §4 标准三件套 opacity + pointer-events，严禁 display:none。
   Phase 3（已实施）：
     - #dkShareSheet.dk-sux-quick 隐藏 label/input + 显示说明文案。
       class 仅由 dk-share-ux.js 在预填成功后动态添加，本文件严禁
       改为静态隐藏 —— adapter 失效必须回落原生输入界面，否则原生
       空 label 校验会把用户卡死在不可见的输入框上（准则 6）。
   Visual Phase A（已实施，Share UX Visual Polish v1.0）：
     - Busy / Result 两个 phase 的纯 CSS 视觉升级（0 JS、0 DOM 改动、
       0 新状态），全部规则挂既有 #dkShareSheet[data-phase="busy|result"]
       状态选择器（data-phase 由 dk-share-aff.js shareSheetPhase() 维护，
       本文件只做映射，协议"状态驱动 UI"）。
     - 视觉基准：4.7/ui/share ui/ 四张 After 图（*-link-wait / *-link）。
     - Deviation 记录：After 图中 Canvas 与 Designs 入口的 Result 文案
       有差异，但两入口共用同一 Sheet DOM，且入口来源（_share.mode）是
       dk-share-aff.js 闭包私有——区分需加 JS+状态耦合，违反本次约束。
       定稿：统一采用 Canvas 版视觉语言（副标题 + OR SHARE VIA 分隔）。
     - 图标全部 data-URI 内联 SVG，零外部请求；社交按钮使用第三方品牌
       标准色（Facebook/Twitter/Pinterest），DK 自有元素仅用 --dk-* 变量。
   Visual Phase B（已实施，Share UX Visual Polish v1.0）：
     - Create 页纯 CSS 视觉升级，全部规则挂双条件
       #dkShareSheet[data-phase="create"].dk-sux-quick ——
       data-phase 由 dk-share-aff.js 维护，dk-sux-quick 由 adapter 预填
       成功后添加；两者任一缺失即整体回落（原生 Name your design 界面
       或 Phase 3 quick 态），准则 6 安全回退不变。
     - 视觉基准：4.7/ui/share ui/share-canvas-first.png（After 集中
       Create Sheet 仅此一张，Canvas/Designs 入口天然统一视觉）。
     - 槽位复用说明：pane 伪元素位不足，故（a）hero 图标挂
       .dk-share-body::before、隐私条挂 ::after（body 为普通块级，
       仅 create 相位命中）；（b）Phase 3 隐藏的 .dk-share-lbl 在本
       scope 内重新入流复用为大标题（font-size:0 + ::before 换文案，
       pointer-events:none 防止 label-for 聚焦隐藏 input 唤起键盘）。
     - 主按钮 DOM 文字为全大写（CREATE SHARE LINK），CSS 无法转
       Title Case，故 font-size:0 消隐 + ::after 呈现 'Create Share
       Link'（同 Phase A busy 文案替换技法，原文案保留在无障碍树）。
   Visual Phase C（已实施，Share UX Visual Polish v1.0）：
     - Designs 卡片分享按钮 + 教育区视觉升级，基准图：
       4.7/ui/share ui/share-designs-frist.png。
     - 按钮换色原理：dk-share-aff.js 注入的 SVG 硬编码 stroke="#FFFFFF"
       （表现属性），CSS stroke 属性在层叠中优先于表现属性，纯 CSS 覆盖，
       不动 dk-share-aff.js。fresh 胶囊态与收缩 icon 态统一为
       白底 + 品牌紫（设计语言统一），全部规则挂 #dkShell.dk-sux-on
       （adapter 启动标记），未启动回落 dk-shell.css 灰底基态。
     - 教育区升级为浅紫圆角卡（星标圆徽 ::before + 礼盒插画 ::after，
       均为内联 SVG）；文案（标题/首行）按 After 图在 dk-share-ux.js
       injectDesignsEdu() 中同步更新 —— 该 DOM 为 adapter 自有静态
       注入物，直接改字符串比 CSS 文字替换更干净（唯一 JS 改动）。
     - FAB 无 After 参照（canvas-first 图中被 Sheet 遮挡），Phase 2
       验收形态保留不动。
   ═══════════════════════════════════════════════════════════ */

/* 与 dk-shell.css Share & Earn 段同款移动端作用域（元素仅存在于移动 Shell） */
@media (max-width: 768px) {

  /* ── Phase 1a：Designs 抽屉底部教育区 ──
     宿主：#dkTopSheet-designs .dk-top-sheet-body（column flex 容器，
     网格自身滚动）；flex-shrink:0 保证不被网格挤压，常驻可见。 */
  .dk-sux-edu {
    flex-shrink: 0;
    margin: 0 16px;
    padding: 12px 2px 14px;
    border-top: 1px solid var(--dk-border, #E2E2EE);
  }
  .dk-sux-edu-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--dk-text-1, #111111);
    margin-bottom: 5px;
  }
  .dk-sux-edu-desc {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: var(--dk-text-2, #77778C);
  }
  .dk-sux-edu-desc + .dk-sux-edu-desc {
    margin-top: 2px;
  }

  /* ── Phase 1b：卡片分享按钮 "Share" 文字态（fresh 期） ──
     基态（dk-shell.css L2475：26×26 圆形 icon）一个字节不改；
     以下全部规则仅在 #dkShell.dk-sux-designs-fresh 下生效，
     class 摘除（用户点过任意分享按钮）即整体回落基态。
     按钮锚定 right:5px，展宽方向向左，与右上删除按钮（top:5px）无重叠。 */
  #dkShell.dk-sux-designs-fresh .dk-designs-share-btn {
    width: auto;
    padding: 0 9px 0 7px;
    gap: 4px;
    border-radius: 13px;
  }
  #dkShell.dk-sux-designs-fresh .dk-designs-share-btn::after {
    content: 'Share';
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    color: #FFFFFF;
  }

  /* ── Phase 2：Canvas FAB 纯画布显隐 + 首次胶囊 ──
     所有规则挂 #dkShell.dk-sux-on（adapter 启动标记）：
     adapter 未启动 → 无标记 → 以下零生效，FAB 原生常驻（准则 6 安全回退）。
     状态 class（dk-sux-canvas / dk-sux-fab-intro）由 dk-share-ux.js
     依 DK.state 冻结公式驱动，本文件只做映射。 */

  /* 过渡：在原生 transform 0.12s 基础上并入 opacity（原值保留，仅加通道） */
  #dkShell.dk-sux-on .dk-share-fab {
    transition: opacity 0.2s ease, transform 0.12s ease;
  }

  /* 非纯 Canvas 态：协议 §4 标准隐藏（opacity + pointer-events，禁 display:none） */
  #dkShell.dk-sux-on:not(.dk-sux-canvas) .dk-share-fab {
    opacity: 0;
    pointer-events: none;
  }

  /* 首次教育胶囊展开态：[icon] Share（锚定 left:12px，向右展宽，
     不与任何 Lumise 工具重叠 —— 位置/层级沿用 dk-shell.css 基态） */
  #dkShell.dk-sux-on.dk-sux-fab-intro .dk-share-fab {
    width: auto;
    padding: 0 16px 0 13px;
    gap: 7px;
    border-radius: 22px;
  }
  #dkShell.dk-sux-on.dk-sux-fab-intro .dk-share-fab::after {
    content: 'Share';
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1;
    color: var(--dk-primary, #5C56F5);
  }

  /* ── Phase 3：Share Sheet quick 模式 ──
     dk-sux-quick 由 JS 在预填成功后动态添加（见文件头红线说明）。
     隐藏用协议 §4 标准三件套（opacity + pointer-events + absolute，
     禁 display:none）：input 脱离文档流不占位，value 仍可被原生
     SHARE_SHEET_SUBMIT 正常读取。 */
  #dkShareSheet.dk-sux-quick .dk-share-lbl,
  #dkShareSheet.dk-sux-quick .dk-share-input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  /* 说明文案替代输入区（纯 CSS 文本，冻结文案，\A = 换行） */
  #dkShareSheet.dk-sux-quick .dk-share-pane-create::before {
    content: 'Share your creation with friends.\A Get feedback and inspire others.';
    white-space: pre-line;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.2px;
    color: var(--dk-text-2, #77778C);
    padding: 2px 0 4px;
  }

  /* ═════════════════════════════════════════════════════════
     Visual Phase A-1：Busy（Generating）
     基准图：share ui/share-canvas-link-wait.png / share-designs-link-wait.png
     结构（dk-share-aff.js 模板，不改 DOM）：
       .dk-share-pane-busy > .dk-share-spinner + .dk-share-busy-txt
     Sheet 高度不设固定值，靠内容 spacing 自然落在 ≈40% 屏高。
     ═════════════════════════════════════════════════════════ */

  /* 布局：加大呼吸感（基态 padding 18px 0 / gap 12px → 升级） */
  #dkShareSheet[data-phase="busy"] .dk-share-pane-busy {
    padding: 26px 0 6px;
    gap: 16px;
  }

  /* spinner 加大 + 品牌色环 + 极淡单层光晕；
     环内 share icon 挂 ::before 并做等速反向旋转（counter-rotation）——
     父元素本体在转（dk-shell.css dkShareSpin 作用于边框圆弧），
     子伪元素 reverse 同速抵消，icon 视觉静止。 */
  #dkShareSheet[data-phase="busy"] .dk-share-spinner {
    position: relative;
    width: 60px;
    height: 60px;
    border-width: 3.5px;
    border-color: var(--dk-primary-soft, rgba(92, 86, 245, 0.12));
    border-top-color: var(--dk-primary, #5C56F5);
    box-shadow: 0 0 0 14px rgba(92, 86, 245, 0.05);
  }
  #dkShareSheet[data-phase="busy"] .dk-share-spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C56F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    animation: dkShareSpin 0.9s linear infinite reverse;
  }

  /* 文案双层级：原单行灰字消隐（font-size:0），
     ::before 主标题 / ::after 副文案（伪元素在无障碍树中可被读出，
     spinner 自带 role=status aria-label 兜底） */
  #dkShareSheet[data-phase="busy"] .dk-share-busy-txt {
    font-size: 0;
    line-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }
  #dkShareSheet[data-phase="busy"] .dk-share-busy-txt::before {
    content: 'Generating your share link';
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.3;
    color: var(--dk-text-1, #111111);
  }
  #dkShareSheet[data-phase="busy"] .dk-share-busy-txt::after {
    content: 'Please wait a moment while we prepare it.';
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.4;
    color: var(--dk-text-2, #77778C);
  }

  /* 底部安全提示条（shield 图标 + 文案，--dk-primary-soft 底） */
  #dkShareSheet[data-phase="busy"] .dk-share-pane-busy::after {
    content: 'Your design is safe and only people with the link can view it.';
    box-sizing: border-box;
    width: 100%;
    margin-top: 6px;
    padding: 11px 14px 11px 38px;
    border-radius: 12px;
    background-color: var(--dk-primary-soft, rgba(92, 86, 245, 0.12));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C56F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 16px 16px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.2px;
    color: var(--dk-primary, #5C56F5);
    text-align: left;
  }

  /* ═════════════════════════════════════════════════════════
     Visual Phase A-2：Result
     基准图：share ui/share-canvas-link.png（统一视觉，见文件头 Deviation）
     结构（不改 DOM）：
       .dk-share-pane-result > #dkShareLink + primary-btn + .dk-share-networks
     ═════════════════════════════════════════════════════════ */

  /* 副标题（pane 首个 flex item，位于 header 之下） */
  #dkShareSheet[data-phase="result"] .dk-share-pane-result::before {
    content: 'Anyone with this link can view your design.';
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.4;
    color: var(--dk-text-2, #77778C);
    margin-top: -2px;
  }

  /* URL 区：虚线草稿感 → App 输入框感（实线 + 左侧 share icon） */
  #dkShareSheet[data-phase="result"] .dk-share-link {
    border: 1.5px solid var(--dk-border, #E2E2EE);
    border-radius: 12px;
    padding: 12px 14px 12px 40px;
    background-color: #FAFAFE;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C56F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 17px 17px;
    font-size: 12px;
    line-height: 1.5;
  }

  /* COPY LINK 主按钮：统一高度 + 左侧 copy 图标（仅 result pane，
     create 页的同 class 按钮不受影响） */
  #dkShareSheet[data-phase="result"] .dk-share-pane-result .dk-share-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0;
  }
  #dkShareSheet[data-phase="result"] .dk-share-pane-result .dk-share-primary-btn::before {
    content: '';
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 社交行：OR SHARE VIA 分隔（::before 占满首行，两侧细线用
     双 linear-gradient 背景）+ 三按钮等高等距 + 品牌色小标 */
  #dkShareSheet[data-phase="result"] .dk-share-networks {
    flex-wrap: wrap;
    gap: 10px 8px;
    margin-top: 2px;
  }
  #dkShareSheet[data-phase="result"] .dk-share-networks::before {
    content: 'OR SHARE VIA';
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    color: var(--dk-text-2, #77778C);
    background:
      linear-gradient(var(--dk-border, #E2E2EE), var(--dk-border, #E2E2EE)) left center / calc(50% - 56px) 1px no-repeat,
      linear-gradient(var(--dk-border, #E2E2EE), var(--dk-border, #E2E2EE)) right center / calc(50% - 56px) 1px no-repeat;
  }
  #dkShareSheet[data-phase="result"] .dk-share-nw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0;
    border-radius: 12px;
  }
  #dkShareSheet[data-phase="result"] .dk-share-nw-btn::before {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  /* 第三方品牌标准色（非 DK 色板扩展；DK 自有元素仅用 --dk-* 变量） */
  #dkShareSheet[data-phase="result"] .dk-share-nw-btn[data-dk-share-nw="facebook"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877F2'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z'/%3E%3C/svg%3E");
  }
  #dkShareSheet[data-phase="result"] .dk-share-nw-btn[data-dk-share-nw="twitter"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231DA1F2'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E");
  }
  #dkShareSheet[data-phase="result"] .dk-share-nw-btn[data-dk-share-nw="pinterest"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E60023'%3E%3Cpath d='M12 2a10 10 0 0 0-3.64 19.3c-.1-.79-.18-2 .04-2.86l1.15-4.94s-.3-.59-.3-1.46c0-1.37.8-2.4 1.79-2.4.84 0 1.25.63 1.25 1.39 0 .85-.54 2.12-.82 3.3-.23.98.5 1.78 1.47 1.78 1.77 0 3.13-1.87 3.13-4.57 0-2.39-1.72-4.06-4.17-4.06-2.84 0-4.51 2.13-4.51 4.33 0 .86.33 1.78.74 2.28a.3.3 0 0 1 .07.29l-.28 1.13c-.04.18-.14.22-.33.13-1.25-.58-2.03-2.4-2.03-3.87 0-3.15 2.29-6.04 6.6-6.04 3.47 0 6.16 2.47 6.16 5.77 0 3.45-2.17 6.22-5.18 6.22-1.01 0-1.97-.53-2.29-1.15l-.63 2.38c-.22.87-.83 1.96-1.24 2.62A10 10 0 1 0 12 2z'/%3E%3C/svg%3E");
  }

  /* ═════════════════════════════════════════════════════════
     Visual Phase B：Create（Share your creation）
     基准图：share ui/share-canvas-first.png
     双条件 scope：[data-phase="create"] × .dk-sux-quick，
     任一缺失整段失效，回落原生/Phase 3 形态（准则 6）。
     结构（不改 DOM）：
       header(.dk-share-title + close)
       body ::before(hero) + pane[ lbl(标题) + input(隐藏) + btn ] + ::after(隐私条)
     ═════════════════════════════════════════════════════════ */

  /* 小号 "SHARE DESIGN" 头标视觉退场（opacity 隐藏，占位保留，
     close 按钮位置不动；大标题由下方 hero 区承担语义） */
  #dkShareSheet[data-phase="create"].dk-sux-quick .dk-share-title {
    opacity: 0;
  }

  /* hero 图标：白圆 + 品牌色 share 图标 + 轻量 sparkle，单张内联 SVG。
     body 为普通块级（padding 4px 16px 8px），::before 仅在 create
     相位命中，busy/result 不受影响。 */
  #dkShareSheet[data-phase="create"].dk-sux-quick .dk-share-body::before {
    content: '';
    display: block;
    width: 118px;
    height: 112px;
    margin: 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 116'%3E%3Ccircle cx='60' cy='58' r='39' fill='%23FFFFFF' stroke='%23EFEEFB' stroke-width='7'/%3E%3Cg transform='translate(43.2 41.2) scale(1.4)' fill='none' stroke='%235C56F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/g%3E%3Cpath d='M104 40l1.6 3.9 3.9 1.6-3.9 1.6-1.6 3.9-1.6-3.9-3.9-1.6 3.9-1.6z' fill='%23C7C3F9'/%3E%3Cpath d='M12 68l1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2z' fill='%23C7C3F9'/%3E%3Cg stroke='%23C7C3F9' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='24' y1='21' x2='29' y2='26'/%3E%3Cline x1='35' y1='13' x2='37' y2='19'/%3E%3C/g%3E%3Ccircle cx='106' cy='72' r='2' fill='%23DDDAFC'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 大标题：复用 Phase 3 隐藏的 label（本 scope 权重更高，重新入流）。
     font-size:0 消隐原 "Name your design"，::before 呈现新标题；
     pointer-events:none —— label for=dkShareLabel 会聚焦隐藏 input
     并唤起移动端键盘，必须掐掉。order:-1 排到说明框之前。 */
  #dkShareSheet[data-phase="create"].dk-sux-quick .dk-share-lbl {
    position: static;
    opacity: 1;
    pointer-events: none;
    order: -1;
    font-size: 0;
    line-height: 0;
    text-align: center;
  }
  #dkShareSheet[data-phase="create"].dk-sux-quick .dk-share-lbl::before {
    content: 'Share your creation';
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.3;
    color: var(--dk-text-1, #111111);
  }

  /* 说明区：Phase 3 素文案 → 描边说明框（After 图文案，居中） */
  #dkShareSheet[data-phase="create"].dk-sux-quick .dk-share-pane-create::before {
    content: 'Create a share link so your friends can view your design, give feedback, and get inspired!';
    white-space: normal;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1.5px solid var(--dk-border, #E2E2EE);
    border-radius: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.2px;
    color: var(--dk-text-2, #77778C);
  }

  /* 主按钮：统一 50px 高，::before 链条图标 + ::after 'Create Share
     Link'（DOM 全大写文字 font-size:0 消隐，见文件头说明） */
  #dkShareSheet[data-phase="create"].dk-sux-quick .dk-share-pane-create .dk-share-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0;
    font-size: 0;
  }
  #dkShareSheet[data-phase="create"].dk-sux-quick .dk-share-pane-create .dk-share-primary-btn::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  #dkShareSheet[data-phase="create"].dk-sux-quick .dk-share-pane-create .dk-share-primary-btn::after {
    content: 'Create Share Link';
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    color: #FFFFFF;
  }

  /* 底部隐私提示条（lock 图标 + After 图文案；与 busy 安全条同构，
     此处用中性浅底区分"提示"而非"品牌强调"） */
  #dkShareSheet[data-phase="create"].dk-sux-quick .dk-share-body::after {
    content: 'Your design is private. Only people with the link can view it.';
    display: block;
    box-sizing: border-box;
    margin: 12px 0 2px;
    padding: 11px 14px 11px 38px;
    border: 1px solid var(--dk-border, #E2E2EE);
    border-radius: 12px;
    background-color: #F7F7FC;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377778C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 15px 15px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.2px;
    color: var(--dk-text-2, #77778C);
    text-align: left;
  }

  /* ═════════════════════════════════════════════════════════
     Visual Phase C：Designs 卡片按钮 + 教育区
     基准图：share ui/share-designs-frist.png
     按钮规则挂 #dkShell.dk-sux-on（adapter 启动标记）：未启动回落
     dk-shell.css 灰底基态；教育区 .dk-sux-edu 本身即 adapter 注入物，
     元素不存在则规则天然不命中。
     ═════════════════════════════════════════════════════════ */

  /* 收缩 icon 态：灰底半透明 → 白底 + 品牌紫图标 + 投影。
     CSS stroke 覆盖 SVG 表现属性 stroke="#FFFFFF"（层叠优先）。 */
  #dkShell.dk-sux-on .dk-designs-share-btn {
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.18);
  }
  #dkShell.dk-sux-on .dk-designs-share-btn svg {
    stroke: var(--dk-primary, #5C56F5);
  }
  /* 基态 :active 是品牌紫实底（白图标语境）——紫图标下会融底，改浅紫 */
  #dkShell.dk-sux-on .dk-designs-share-btn:active {
    background: #EEEDFC;
  }

  /* fresh 胶囊态：在 Phase 1b 几何基础上按 After 图换装
     （白底、紫字、加高至 30px；.dk-sux-on 提权 + 后置覆盖 1b 同名属性） */
  #dkShell.dk-sux-on.dk-sux-designs-fresh .dk-designs-share-btn {
    height: 30px;
    padding: 0 11px 0 9px;
    gap: 5px;
    border-radius: 15px;
  }
  #dkShell.dk-sux-on.dk-sux-designs-fresh .dk-designs-share-btn::after {
    content: 'Share';
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    color: var(--dk-primary, #5C56F5);
  }

  /* 教育区：素文字段 → 浅紫圆角卡（覆盖 Phase 1a 的 border-top 形态；
     左侧星标圆徽 ::before，右侧礼盒插画 ::after，均绝对定位内联 SVG） */
  .dk-sux-edu {
    position: relative;
    margin: 10px 16px 14px;
    padding: 15px 76px 15px 62px;
    border-top: none;
    border-radius: 18px;
    background: #F4F3FE;
  }
  .dk-sux-edu::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    border: 1.5px solid #D6D3F8;
    border-radius: 50%;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C56F5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
  }
  .dk-sux-edu::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 62px;
    height: 62px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='14' cy='52' r='9' fill='%23F6C64A'/%3E%3Cpath d='M14 47.5l1.3 2.6 2.9.4-2.1 2 .5 2.9-2.6-1.4-2.6 1.4.5-2.9-2.1-2 2.9-.4z' fill='%23FFFFFF'/%3E%3Ccircle cx='27' cy='57' r='6.5' fill='%23F2B93B'/%3E%3Ccircle cx='27' cy='57' r='3.4' fill='none' stroke='%23FFFFFF' stroke-width='1.4'/%3E%3Ccircle cx='34' cy='16' r='4' fill='none' stroke='%23B7B3FB' stroke-width='2.4'/%3E%3Ccircle cx='46' cy='16' r='4' fill='none' stroke='%23B7B3FB' stroke-width='2.4'/%3E%3Crect x='22' y='19' width='36' height='11' rx='3' fill='%239E99FA'/%3E%3Crect x='25' y='30' width='30' height='26' rx='4' fill='%23837DF8'/%3E%3Crect x='37' y='19' width='6' height='37' fill='%23FFFFFF' opacity='0.85'/%3E%3Cpath d='M18 8l1.4 3.4 3.4 1.4-3.4 1.4-1.4 3.4-1.4-3.4-3.4-1.4 3.4-1.4z' fill='%23C7C3F9'/%3E%3Ccircle cx='60' cy='34' r='2' fill='%23C7C3F9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .dk-sux-edu-title {
    font-size: 13px;
    letter-spacing: 0.2px;
  }
  .dk-sux-edu-desc {
    color: #6E6C8A;
  }

} /* end @media */

/* Visual Phase A：动效可及性 —— 减弱动效偏好下停用旋转（icon 反向
   旋转同时停用，两者互相抵消的前提是同时运行或同时停止） */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #dkShareSheet[data-phase="busy"] .dk-share-spinner,
  #dkShareSheet[data-phase="busy"] .dk-share-spinner::before {
    animation: none;
  }
}