/* =============================================================
   DK Shell — 移动端 Lumise 设计器覆盖样式
   只在 max-width: 768px 生效，桌面端完全不受影响
   ============================================================= */

@media (max-width: 768px) {

  /* ── 设计 Tokens ── */
  :root {
    --dk-primary:      #5C56F5;
    --dk-primary-soft: rgba(92, 86, 245, 0.12);
    --dk-bg:           #E5E6FC;
    --dk-surface:      #FFFFFF;
    --dk-text-1:       #1A1A2C;
    --dk-text-2:       #8888AA;
    --dk-border:       #D8D9F0;
    /* --dk-safe-b：iOS Home Indicator 底部安全区高度。
       需要 viewport-fit=cover 才能返回非零值（已由 injector 注入）。
       非 iOS 设备 / 无 Home Indicator 时 fallback 为 0px。 */
    --dk-safe-b:       env(safe-area-inset-bottom, 0px);
    /* --dk-nav-h：导航栏视觉高度 70px + 底部安全区，
       确保 iOS 底部小横条区域内不出现可点击热区漂移。 */
    --dk-nav-h:        calc(70px + env(safe-area-inset-bottom, 0px));
    --dk-header-h:     56px;
    --dk-nav-top-h:    48px;
    --dk-peek-h:       234px;
    --dk-sheet-r:      22px;
    --dk-trans:        0.3s ease-in-out;
    --dk-glass-hdr:    rgba(229, 230, 252, 0.20);
    --dk-glass-nav:    rgba(229, 230, 252, 0.72);
    --dk-glass-border: rgba(255, 255, 255, 0.55);
  }

  /* ── Lumise 页面基础重置 ── */
  body {
    background: var(--dk-bg) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .wrapper { margin: 0 !important; padding: 0 !important; }

  /* ── Lumise 画布全屏（保留，不隐藏） ── */
  #LumiseDesign {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: var(--dk-bg) !important;
  }
  #lumise-workspace {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  #lumise-main {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: var(--dk-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Lumise 的 Fabric canvas 居中 */
  #lumise-main canvas {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  /* ── 隐藏 Lumise 原生 UI 元素 ──
     原始名单（Phase 1）+ Phase 3 补全：
     z-index 审计发现以下元素未被覆盖，最高达 10,000,002，
     会在特定状态下浮出并覆盖 #dkShell，必须一并隐藏。 ── */
  #lumise-navigations,
  #lumise-top-tools,
  #lumise-zoom-wrp,
  #lumise-zoom-thumbn,
  #lumise-stage-nav,
  #nav-bottom-left,
  #lumise-no-product,
  #lumise-left,
  #lumise-left-nav-wrp,
  #lumise-file-nav,
  #lumise-tabs-nav,
  #lumise-shares-wrp,
  #lumise-cart-items,
  #lumise-print-nav {
    display: none !important;
  }

  /* ── Shell 覆盖层容器 ──
     外壳不拦截指针，画布可编辑；仅各交互子层开启 events ── */
  #dkShell {
    display: none; /* JS 激活后改为 block */
    position: fixed;
    inset: 0;
    /* Lumise 最高功能层 z-index 为 10,000,002；此值压过所有 Lumise UI 面板，
       低于 lumise-notices（2,147,483,647）的系统通知层，保持通知可见。 */
    z-index: 10000010;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  #dkShell.dk-active { display: block; }

  /* ── Header ── */
  .dk-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--dk-header-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px 0 8px;
    z-index: 100;
    pointer-events: auto;
    background: var(--dk-glass-hdr);
    backdrop-filter: blur(15px) saturate(1.5);
    -webkit-backdrop-filter: blur(15px) saturate(1.5);
    border-bottom: 1px solid var(--dk-glass-border);
    box-shadow: 0 4px 24px rgba(92, 86, 245, 0.06);
  }
  .dk-header-left {
    display: flex; align-items: center;
    min-width: 0; flex: 1;
  }
  .dk-btn-back {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    border: none; background: none; cursor: pointer;
    color: var(--dk-primary);
    transition: transform 0.15s;
  }
  .dk-btn-back:active { transform: scale(0.88); }
  .dk-header-title {
    font-size: 14px; font-weight: 700;
    color: var(--dk-text-1); margin-left: 4px;
    letter-spacing: -0.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dk-header-actions {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0; margin-left: 8px;
  }
  .dk-hdr-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: none; background: none; cursor: pointer;
    color: var(--dk-text-1); border-radius: 50%;
    pointer-events: auto;
    transition: background 0.15s, transform 0.15s, color 0.15s;
  }
  .dk-hdr-btn:active {
    background: var(--dk-primary-soft);
    color: var(--dk-primary);
    transform: scale(0.88);
  }

  /* ── 画布区域：必须穿透，否则 Fabric 无法拖拽/编辑 ── */
  #dkCanvasClick {
    position: absolute;
    top: calc(var(--dk-header-h) + var(--dk-nav-top-h));
    left: 0; right: 0;
    bottom: var(--dk-nav-h);
    pointer-events: none !important;
    background: transparent;
    z-index: 1;
  }

  /* ── 右侧颜色色板 ── */
  .dk-float-right {
    position: absolute;
    right: 14px;
    top: calc(50% - var(--dk-nav-h) / 2 + var(--dk-nav-top-h) / 2) !important;
    transform: translateY(-50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
    pointer-events: auto;
    z-index: 50;
  }
  .dk-swatch {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  }
  .dk-swatch:active   { transform: scale(0.88); }
  .dk-swatch.dk-selected { border-color: var(--dk-primary) !important; }
  .dk-color-swatches {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* ── Toast ── */
  .dk-toast {
    position: absolute;
    top: calc(var(--dk-header-h) + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(20, 18, 40, 0.93);
    color: #fff;
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
    padding: 10px 18px; border-radius: 22px;
    text-align: center; max-width: 78%;
    white-space: normal;
    opacity: 0; pointer-events: none;
    z-index: 200;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  }
  .dk-toast.dk-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ── 遮罩 ── */
  .dk-overlay {
    position: absolute; inset: 0;
    background: rgba(10, 10, 30, 0.40);
    z-index: 85;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .dk-overlay.dk-show { opacity: 1; pointer-events: auto; }

  /* ── 底部抽屉 ── */
  .dk-sheet {
    position: absolute;
    bottom: var(--dk-nav-h);
    left: 0; right: 0;
    background: var(--dk-surface);
    border-radius: var(--dk-sheet-r) var(--dk-sheet-r) 0 0;
    z-index: 90;
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.07);
    display: flex; flex-direction: column;
    transition: transform var(--dk-trans);
    overflow: hidden;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .dk-sheet-handle-row {
    display: flex; justify-content: center;
    padding: 12px 0 6px; cursor: pointer; flex-shrink: 0;
  }
  .dk-sheet-pill {
    width: 38px; height: 4px;
    background: #DDDDE8; border-radius: 2px;
  }
  .dk-sheet-title-row {
    display: flex; align-items: center;
    padding: 4px 20px 14px; flex-shrink: 0;
  }
  .dk-sheet-title {
    font-size: 11px; font-weight: 900; letter-spacing: 1.8px;
    color: var(--dk-text-1); white-space: nowrap;
  }
  .dk-sheet-title-line {
    flex: 1; height: 1.5px;
    background: #EAEAF4; margin-left: 14px; border-radius: 1px;
  }
  .dk-card-row {
    display: flex; gap: 12px;
    padding: 2px 20px 28px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; flex-shrink: 0;
  }
  .dk-card-row::-webkit-scrollbar { display: none; }
  .dk-card {
    flex: 0 0 auto;
    width: 116px; height: 138px;
    border-radius: 18px; overflow: hidden;
    position: relative; cursor: pointer;
    outline: 2.5px solid transparent; outline-offset: -2px;
    transition: outline-color 0.15s;
  }
  .dk-card.dk-selected { outline-color: var(--dk-primary); }
  .dk-card-add {
    background: #F2F2FA; border: 2px dashed #C4C4DC;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
  }
  .dk-add-circle {
    width: 38px; height: 38px; border-radius: 50%;
    background: #E8E8F6;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #9090B8; font-weight: 300;
  }
  .dk-add-text { font-size: 11px; font-weight: 600; color: #9090B8; }
  .dk-card-add.dk-add-loading {
    pointer-events: none;
    opacity: 0.72;
    border-style: solid;
    border-color: var(--dk-primary-soft);
  }
  .dk-card-add.dk-add-loading .dk-add-circle {
    animation: dkSpin 0.9s linear infinite;
  }
  @keyframes dkSpin {
    to { transform: rotate(360deg); }
  }
  .dk-hidden-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  }
  .dk-card-fill {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
  }
  .dk-skeleton-card {
    background: #ececf4;
    outline-color: transparent !important;
    pointer-events: none;
  }
  .dk-skeleton-fill {
    background: linear-gradient(
      110deg,
      #e8e8f1 8%,
      #f5f5fb 18%,
      #e8e8f1 33%
    );
    background-size: 220% 100%;
    animation: dkSkeletonShimmer 1.2s linear infinite, dkSkeletonPulse 1.8s ease-in-out infinite;
  }
  .dk-skeleton-text {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #66668a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    z-index: 2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  @keyframes dkSkeletonShimmer {
    to { background-position-x: -220%; }
  }
  @keyframes dkSkeletonPulse {
    0%, 100% { opacity: 0.92; }
    50%      { opacity: 1; }
  }
  .dk-card-check {
    position: absolute; top: 8px; right: 8px;
    width: 24px; height: 24px;
    background: var(--dk-primary); border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(92, 86, 245, 0.4);
  }
  .dk-card.dk-selected .dk-card-check { display: flex; }
  .dk-card-del {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.52);
    border: none; outline: none;
    color: #fff; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    pointer-events: auto;
    opacity: 0.78;
    transition: opacity 0.15s, background 0.15s;
    z-index: 3;
  }
  .dk-card-del:active { opacity: 1; background: rgba(220, 40, 40, 0.85); }
  .dk-card.dk-selected .dk-card-del { display: none; }
  /* 旧版独立悬浮切换钮（不含新版底栏 BG 按钮） */
  .dk-card-raw-toggle:not(.dk-card-btn-bg) {
    position: absolute;
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(20, 18, 40, 0.66);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    padding: 5px 8px;
    z-index: 3;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-card-raw-toggle:not(.dk-card-btn-bg):active {
    transform: scale(0.96);
    background: rgba(35, 30, 70, 0.8);
  }
  .dk-card-lbl {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 24px 8px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, transparent 100%);
    font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #fff;
  }

  /* ── Gallery Card 底部双按钮行 ── */
  .dk-card-btn-row {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    height: 24px;
    z-index: 4;
    overflow: hidden;
    border-radius: 0 0 18px 18px;
  }
  .dk-card-btn-bg,
  .dk-card-btn-remix,
  .dk-card-btn-purple {
    flex: 1 1 50%;
    min-width: 0;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 0;
    padding: 0;
    margin: 0;
    position: static;
    left: auto;
    bottom: auto;
    color: #fff;
    transition: filter 0.15s, background 0.15s;
  }
  /* 新版底栏 BG：彻底覆盖 legacy raw-toggle 的定位/药丸样式 */
  .dk-card-btn-row .dk-card-btn-bg.dk-card-raw-toggle {
    position: static;
    left: auto;
    bottom: auto;
    max-width: none;
    border: none;
    border-radius: 0;
    padding: 0;
    z-index: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    transform: none;
  }
  .dk-card-btn-bg {
    background: rgba(17, 17, 34, 0.88);
  }
  .dk-card-btn-remix,
  .dk-card-btn-purple {
    background: linear-gradient(
      135deg,
      rgba(118, 108, 255, 0.92) 0%,
      rgba(92, 86, 245, 0.95) 45%,
      rgba(72, 62, 210, 0.90) 100%
    );
  }
  /* 图标 + 文案成组居中，固定图标槽保证 BG/AI 对称 */
  .dk-card-btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
    pointer-events: none;
  }
  .dk-card-btn-icon {
    flex: 0 0 14px;
    width: 14px;
    text-align: center;
    font-size: 10px;
    line-height: 1;
  }
  .dk-card-btn-label {
    flex: 0 0 auto;
    min-width: 1.25em;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  /* 极淡中缝，主要靠左右色差分界 */
  .dk-card-btn-row::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 22%;
    bottom: 22%;
    width: 0.5px;
    margin-left: -0.25px;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none;
  }
  .dk-card-btn-row .dk-card-btn-bg.dk-card-raw-toggle:active,
  .dk-card-btn-remix:active,
  .dk-card-btn-purple:active {
    filter: brightness(0.88);
    transform: none;
  }
  /* 无原图：左半背景保持深灰，仅淡化图标/文字 */
  .dk-card-btn-bg[data-has-raw="0"],
  .dk-card-btn-bg:not([data-has-raw]) {
    pointer-events: none;
  }
  .dk-card-btn-bg[data-has-raw="0"] .dk-card-btn-inner,
  .dk-card-btn-bg:not([data-has-raw]) .dk-card-btn-inner {
    opacity: 0.38;
  }
  .dk-card-btn-bg[data-has-raw="1"] .dk-card-btn-inner {
    opacity: 1;
  }

  /* ── Tab 1/2 切换容器：flex 占位 + 相对定位锚点 ── */
  .dk-sheet-tab-host {
    flex: 1 1 0;          /* 撑满 sheet 内 handle-row + title-row 以下的剩余空间 */
    min-height: 0;
    position: relative;   /* absolute 子元素的定位锚点 */
    overflow: hidden;
  }

  /* ── Tab 1/2 切换（opacity + transform，GPU 加速，无 display:none 闪烁） ── */
  .dk-gallery-tab,
  .dk-ai-lab-tab {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
    will-change: opacity, transform;
    overflow: hidden;
  }
  /* 默认：gallery 可见，ai-lab 隐藏（translateX 推到右侧外） */
  .dk-gallery-tab {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .dk-ai-lab-tab {
    opacity: 0;
    transform: translateX(32px);
    pointer-events: none;
    display: flex; flex-direction: column; gap: 14px;
    padding: 10px 20px 20px;
    overflow-y: auto;
  }
  /* AI Lab 激活态 */
  #dkSheet[data-ai-lab="open"] .dk-gallery-tab {
    opacity: 0;
    transform: translateX(-32px);
    pointer-events: none;
  }
  #dkSheet[data-ai-lab="open"] .dk-ai-lab-tab {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  /* ── 最大化（open）网格布局：双重条件锁定，只在 gallery tab 激活时生效 ── */
  #dkSheet[data-layout="grid"][data-active-tab="gallery"] #dkCardRow-gallery,
  #dkSheet[data-layout="grid"][data-active-tab="gallery"] #dkCardRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px 16px 32px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
  }
  /* 网格模式下 Add Photo 卡片放大，独占第一行 */
  #dkSheet[data-layout="grid"][data-active-tab="gallery"] #dkCardAddNew {
    grid-column: 1 / -1;
    height: 72px;
    width: 100%;
    flex-direction: row;
    gap: 12px;
    border-radius: 14px;
  }
  /* 网格模式下普通卡片高度适配 */
  #dkSheet[data-layout="grid"][data-active-tab="gallery"] .dk-gallery-card {
    width: 100%;
    height: 108px;
  }

  /* ── AI Lab 标题行返回键 ── */
  .dk-ai-back-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    border: none; outline: none; background: transparent;
    color: var(--dk-text-1); cursor: pointer;
    margin-right: 6px; padding: 0;
    border-radius: 8px;
    transition: background 0.15s;
  }
  .dk-ai-back-btn:active { background: var(--dk-primary-soft); }

  /* ── AI Lab 内容区 ── */
  .dk-ai-source-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0 4px;
  }
  .dk-ai-source-thumb {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 10px;
    background: #EAEAF4 center/cover no-repeat;
    border: 1.5px solid var(--dk-border);
  }
  .dk-ai-source-info { flex: 1; min-width: 0; }
  .dk-ai-source-name {
    font-size: 12px; font-weight: 700; color: var(--dk-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dk-ai-source-hint {
    font-size: 10px; color: var(--dk-text-2); margin-top: 2px;
  }
  .dk-ai-option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .dk-ai-option-chip {
    border-radius: 14px; overflow: hidden;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.15s;
    background: #EAEAF4;
    aspect-ratio: 1;
    position: relative;
  }
  .dk-ai-option-chip.dk-selected {
    border-color: var(--dk-primary);
    box-shadow: 0 0 0 3px rgba(92, 86, 245, 0.18);
  }
  .dk-ai-option-chip:active { transform: scale(0.97); }
  .dk-ai-option-img {
    position: absolute; inset: 0;
    background: center/cover no-repeat;
  }
  /* 骨架占位动画（生成中） */
  .dk-ai-option-chip.dk-skeleton .dk-ai-option-img {
    background: linear-gradient(110deg, #e8e8f1 8%, #f5f5fb 18%, #e8e8f1 33%);
    background-size: 220% 100%;
    animation: dkSkeletonShimmer 1.2s linear infinite;
  }
  .dk-ai-option-label {
    position: absolute; bottom: 6px; right: 8px;
    font-size: 11px; font-weight: 800; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
  }
  .dk-ai-loading-ring {
    display: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 3px solid var(--dk-primary-soft);
    border-top-color: var(--dk-primary);
    animation: dkSpin 0.9s linear infinite;
    margin: 8px auto;
  }
  .dk-ai-loading-ring.dk-show { display: block; }
  .dk-ai-apply-btn {
    width: 100%; padding: 14px 0;
    border: none; outline: none; cursor: pointer;
    background: var(--dk-primary);
    color: #fff; font-size: 14px; font-weight: 800; letter-spacing: 0.5px;
    border-radius: 14px;
    transition: opacity 0.2s, transform 0.15s;
    margin-top: auto;
  }
  .dk-ai-apply-btn:active { transform: scale(0.98); opacity: 0.88; }
  .dk-ai-apply-btn:disabled {
    opacity: 0.38; pointer-events: none;
  }
  .dk-ai-apply-btn.dk-loading {
    pointer-events: none;
    opacity: 0.7;
  }

  /* ── 底部导航 ── */
  .dk-nav {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: var(--dk-nav-h);
    /* safe-area padding：高度已含 env(safe-area-inset-bottom)，
       padding-bottom 把 flex 内容推回上方 70px 视觉区，
       背景色/blur 自然延伸覆盖 Home Indicator 区域。 */
    padding-bottom: var(--dk-safe-b);
    background: var(--dk-glass-nav);
    backdrop-filter: blur(10px) saturate(1.8);
    -webkit-backdrop-filter: blur(10px) saturate(1.8);
    border-top: 1px solid var(--dk-glass-border);
    box-shadow: 0 -6px 28px rgba(92,86,245,0.10);
    display: flex; z-index: 100;
    pointer-events: auto;
  }
  .dk-nav-tab {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    border: none; background: none; cursor: pointer;
    padding: 6px 4px; transition: transform 0.1s;
  }
  .dk-nav-tab:active { transform: scale(0.92); }
  .dk-nav-tab svg { display: block; transition: stroke 0.2s; }
  .dk-nav-tab-lbl {
    font-size: 9px; font-weight: 800; letter-spacing: 0.8px;
    color: #AAAACC; transition: color 0.2s;
  }
  .dk-nav-tab.dk-active svg         { stroke: var(--dk-primary); }
  .dk-nav-tab.dk-active .dk-nav-tab-lbl { color: var(--dk-primary); }

  /* ── 顶部导航栏 ── */
  .dk-nav-top {
    position: absolute;
    top: var(--dk-header-h);
    left: 0; right: 0;
    height: var(--dk-nav-top-h);
    background: var(--dk-glass-nav);
    backdrop-filter: blur(10px) saturate(1.8);
    -webkit-backdrop-filter: blur(10px) saturate(1.8);
    border-bottom: 1px solid var(--dk-glass-border);
    box-shadow: 0 6px 28px rgba(92, 86, 245, 0.10);
    display: flex;
    z-index: 100;
    pointer-events: auto;
  }
  .dk-nav-top-btn {
    flex: 1;
    display: flex; flex-direction: row;
    align-items: center; justify-content: center;
    gap: 5px;
    border: none; background: none; cursor: pointer;
    padding: 4px;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dk-nav-top-btn:active { transform: scale(0.92); }
  .dk-nav-top-btn svg {
    display: block;
    transition: stroke 0.2s;
    flex-shrink: 0;
  }
  .dk-nav-top-lbl {
    font-size: 9px; font-weight: 800; letter-spacing: 0.8px;
    color: #AAAACC;
    transition: color 0.2s;
    white-space: nowrap;
  }
  .dk-nav-top-btn.dk-top-active svg            { stroke: var(--dk-primary); }
  .dk-nav-top-btn.dk-top-active .dk-nav-top-lbl { color: var(--dk-primary); }

  /* ── 顶部抽屉共用遮罩 ── */
  #dkTopSheetOverlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 102;
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
    touch-action: none;
  }
  #dkTopSheetOverlay.dk-top-overlay-show {
    opacity: 1; pointer-events: auto;
  }

  /* ── 顶部三抽屉本体 ── */
  .dk-top-sheet {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    transform: translate3d(0, 100%, 0);
    z-index: 110;
    background: #FFFFFF;
    border-radius: 24px 24px 0 0;
    max-height: calc(100dvh - var(--dk-header-h) - var(--dk-nav-top-h));
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
    display: flex; flex-direction: column;
    pointer-events: auto;
  }
  .dk-top-sheet.dk-top-sheet-open {
    transform: translate3d(0, 0, 0);
    /* 高度对齐 Gallery expandedH = (100dvh - header - nav-top - nav-bottom) * 0.75 */
    height: calc((100dvh - var(--dk-header-h) - var(--dk-nav-top-h) - var(--dk-nav-h)) * 0.75);
  }
  .dk-top-sheet-handle-row {
    display: flex; justify-content: center;
    padding: 14px 0 6px; flex-shrink: 0;
  }
  .dk-top-sheet-pill {
    width: 36px; height: 4px;
    background: #DDDDDD; border-radius: 2px;
  }
  .dk-top-sheet-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 4px 20px 16px; flex-shrink: 0;
  }
  .dk-top-sheet-title {
    font-size: 11px; font-weight: 900;
    letter-spacing: 2px; color: #111111;
    text-transform: uppercase;
  }
  .dk-top-sheet-close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1.5px solid #E8E8E8; background: transparent;
    border-radius: 50%; cursor: pointer; color: #111111;
    transition: transform 0.12s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
  }
  .dk-top-sheet-close:active {
    transform: scale(0.88); background: #F7F7F7;
  }
  .dk-top-sheet-body {
    padding: 0 20px 32px;
    font-size: 13px; color: #888888;
    font-weight: 500; letter-spacing: 0.3px;
    flex: 1;
  }

  /* ══════════════════════════════════════════════════════════
     Order Drawer（超级抽屉）— 独立黑白极简视觉体系
     协议 §7：独立 Token，不污染已有 --dk-primary 紫色体系
     ══════════════════════════════════════════════════════════ */

  /* ── Order Tokens ── */
  #dkOrderSheet,
  .dk-order-overlay {
    --dk-o-bg:             #FFFFFF;
    --dk-o-surface:        #F7F7F7;
    --dk-o-text:           #111111;
    --dk-o-text-2:         #888888;
    --dk-o-border:         #E8E8E8;
    --dk-o-pill:           #DDDDDD;
    --dk-o-btn-primary:    #111111;
    --dk-o-btn-primary-fg: #FFFFFF;
    --dk-o-btn-outline-bd: #111111;
    --dk-o-btn-outline-fg: #111111;
    --dk-o-size-active:    #111111;
    --dk-o-size-active-fg: #FFFFFF;
    --dk-o-size-idle-bg:   #F2F2F2;
    --dk-o-size-idle-fg:   #444444;
    --dk-o-step-btn:       #111111;
    --dk-o-radius:         24px;
    /* cubic-bezier: iOS-style spring feel */
    --dk-o-trans:          0.3s ease-in-out;
  }

  /* ── 遮罩层 ── z-index 85，与画廊抽屉遮罩层级一致，不覆盖导航栏 */
  .dk-order-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    touch-action: none;
  }
  .dk-order-overlay.dk-order-show {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 抽屉本体 ── z-index 90，bottom: var(--dk-nav-h)，从导航栏上方升起 */
  .dk-order-sheet {
    position: absolute;
    bottom: var(--dk-nav-h);
    left: 0;
    right: 0;
    /* GPU 加速位移：协议 §7 强制使用 translate3d */
    transform: translate3d(0, 100%, 0);
    z-index: 90;
    background: var(--dk-o-bg);
    border-radius: var(--dk-o-radius) var(--dk-o-radius) 0 0;
    /* 内容高度自适应，最高不超过画布可用区域 */
    max-height: calc(100dvh - var(--dk-header-h) - var(--dk-nav-h) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* 内部允许纵向滑动，不穿透到背景 */
    touch-action: pan-y;
    /* 过渡动画：协议 §7 不允许改 height，只用 transform */
    transition: transform var(--dk-o-trans);
    /* 底部内边距：包含 iOS Home Indicator 安全区 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
    /* will-change 由 JS 动态管理，静态不声明（协议 §7） */
    pointer-events: auto;
  }
  /* 开启态：滑入到位 */
  .dk-order-sheet.dk-order-open {
    transform: translate3d(0, 0, 0);
  }

  /* ── 顶部拖拽手柄 ── */
  .dk-order-handle-row {
    display: flex;
    justify-content: center;
    padding: 14px 0 6px;
    flex-shrink: 0;
    cursor: grab;
  }
  .dk-order-handle-row:active { cursor: grabbing; }
  .dk-order-pill {
    width: 36px;
    height: 4px;
    background: var(--dk-o-pill);
    border-radius: 2px;
  }

  /* ── 标题行 + 关闭按钮 ── */
  .dk-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px 16px;
    flex-shrink: 0;
  }
  .dk-order-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .dk-order-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--dk-o-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .dk-order-title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--dk-o-text);
    text-transform: uppercase;
  }
  .dk-order-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--dk-o-border);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--dk-o-text);
    /* active 态用 scale，协议 §7 */
    transition: transform 0.12s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
  }
  .dk-order-close:active {
    transform: scale(0.88);
    background: var(--dk-o-surface);
  }

  /* ── 设计预览区 ── */
  .dk-order-preview-wrap {
    padding: 0 20px 20px;
    flex-shrink: 0;
  }
  .dk-order-preview {
    position: relative;
    width: 100%;
    /* 16:9 宽幅比例，视觉聚焦 */
    aspect-ratio: 16 / 9;
    background: var(--dk-o-surface);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 外框投影，增强"产品实感" */
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10), inset 0 0 0 1px var(--dk-o-border);
  }
  .dk-order-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .dk-order-preview-placeholder {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--dk-o-text-2);
  }
  .dk-order-preview:has(img.dk-order-preview-img) {
    cursor: zoom-in;
  }

  /* Lightbox：全屏放大预览，z-index 高于 #dkShell (10000010) */
  .dk-order-preview-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000020;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    touch-action: manipulation;
  }
  .dk-order-preview-lightbox.dk-order-lightbox-show {
    opacity: 1;
    pointer-events: auto;
  }
  .dk-order-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  }
  .dk-order-lightbox-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* ── AI TRY-ON 按钮区 ── */
  .dk-order-tryon-wrap {
    padding: 0 20px 20px;
    flex-shrink: 0;
  }
  .dk-order-tryon-btn {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--dk-o-surface);
    border: 1.5px solid var(--dk-o-border);
    border-radius: 14px;
    cursor: pointer;
    color: var(--dk-o-text);
    /* active 态：scale 反馈，协议 §7 */
    transition: transform 0.12s ease, background 0.12s ease,
                border-color 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dk-order-tryon-btn:active {
    transform: scale(0.96);
    background: var(--dk-o-border);
  }
  .dk-order-tryon-icon {
    flex-shrink: 0;
    stroke: var(--dk-o-text);
    transition: stroke 0.15s;
  }
  .dk-order-tryon-lbl {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dk-o-text);
    transition: color 0.15s;
  }

  /* Busy 态：图标旋转 + 文字变灰 + 整体禁用 */
  .dk-order-tryon-btn.dk-o-tryon-busy {
    opacity: 0.65;
    pointer-events: none;
    border-color: var(--dk-o-border);
  }
  .dk-order-tryon-btn.dk-o-tryon-busy .dk-order-tryon-icon {
    animation: dkTryonSpin 1s linear infinite;
    stroke: var(--dk-o-text-2);
  }
  .dk-order-tryon-btn.dk-o-tryon-busy .dk-order-tryon-lbl {
    color: var(--dk-o-text-2);
  }
  @keyframes dkTryonSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* ══════════════════════════════════════════════════
     AI TRY-ON 状态机 CSS（data-tryon-status 单点驱动）
     idle | processing | preview_ready | restored
     ══════════════════════════════════════════════════ */

  /* ── Try-on 结果图区域（preview_ready 时显示，替换设计稿） ── */
  .dk-order-tryon-result {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--dk-o-surface);
    border-radius: 14px;
    overflow: hidden;
    display: none; /* 默认隐藏，preview_ready 时改为 flex */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10), inset 0 0 0 1px var(--dk-o-border);
    cursor: zoom-in; /* 点击进入全屏对比 Lightbox */
    position: relative;
  }
  .dk-order-tryon-result-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
  }

  /* ── Shimmer 骨架屏（processing 时绝对定位覆盖预览区） ── */
  .dk-order-tryon-shimmer {
    display: none; /* 默认隐藏 */
    position: absolute;
    /* 补偿 preview-wrap 的 0 20px padding，对齐 dk-order-preview 的实际边界 */
    top: 0;
    left: 20px;
    right: 20px;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: var(--dk-o-surface);
    z-index: 3;
  }
  /* 闪光波：前 3s JS 设 --dk-shimmer-dur: 0.8s，3s 后换 1.6s */
  .dk-order-tryon-shimmer-wave {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.55) 38%,
      rgba(255,255,255,0.88) 50%,
      rgba(255,255,255,0.55) 62%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: dkTryonShimmer var(--dk-shimmer-dur, 0.8s) ease-in-out infinite;
  }
  @keyframes dkTryonShimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -20% 0; }
  }

  /* ── 处理中提示文字 ── */
  .dk-order-tryon-hint {
    display: none; /* 默认隐藏 */
    margin: 8px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--dk-o-text-2);
    text-align: center;
  }

  /* ── Cancel 按钮（processing 5s 后 JS 淡入） ── */
  .dk-order-tryon-cancel {
    display: none; /* 非 processing 态完全不存在 */
    margin-top: 10px;
    width: 100%;
    height: 36px;
    background: none;
    border: 1px solid var(--dk-o-border);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dk-o-text-2);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  /* JS 加 dk-tryon-cancel-show 后淡入 */
  .dk-order-tryon-cancel.dk-tryon-cancel-show {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 4 种状态文字默认全隐藏 ── */
  .dk-tryon-text { display: none; }

  /* ══ IDLE ══ */
  .dk-order-sheet[data-tryon-status="idle"] .dk-tryon-text--idle {
    display: inline;
  }

  /* ══ PROCESSING ══ */
  .dk-order-sheet[data-tryon-status="processing"] .dk-tryon-text--processing {
    display: inline;
  }
  /* 骨架屏 + 提示文字出现 */
  .dk-order-sheet[data-tryon-status="processing"] .dk-order-tryon-shimmer {
    display: block;
  }
  .dk-order-sheet[data-tryon-status="processing"] .dk-order-tryon-hint {
    display: block;
  }
  /* Cancel 占位出现（opacity 由 JS class 控制） */
  .dk-order-sheet[data-tryon-status="processing"] .dk-order-tryon-cancel {
    display: block;
  }
  /* 按钮禁用，图标持续旋转 */
  .dk-order-sheet[data-tryon-status="processing"] .dk-order-tryon-btn {
    opacity: 0.65;
    pointer-events: none;
    border-color: var(--dk-o-border);
  }
  .dk-order-sheet[data-tryon-status="processing"] .dk-order-tryon-icon {
    animation: dkTryonSpin 1s linear infinite;
    stroke: var(--dk-o-text-2);
  }
  /* processing 期间：尺码/步进器仍可点（只锁按钮区），override locked 规则 */
  .dk-order-sheet[data-tryon-status="processing"].dk-order-sheet-locked .dk-order-section,
  .dk-order-sheet[data-tryon-status="processing"].dk-order-sheet-locked .dk-order-stepper {
    pointer-events: auto;
  }
  /* Cancel 按钮特赦：显形后 100% 可点击，不受 locked 影响（补丁2） */
  .dk-order-sheet[data-tryon-status="processing"] .dk-order-tryon-cancel.dk-tryon-cancel-show {
    pointer-events: auto !important;
  }

  /* ══ PREVIEW_READY ══ */
  .dk-order-sheet[data-tryon-status="preview_ready"] .dk-tryon-text--preview {
    display: inline;
  }
  /* 切换预览区：隐藏设计稿，显示真人图 */
  .dk-order-sheet[data-tryon-status="preview_ready"] .dk-order-preview {
    display: none;
  }
  .dk-order-sheet[data-tryon-status="preview_ready"] .dk-order-tryon-result {
    display: flex;
  }
  /* 按钮变为"查看原图"样式（克制浅色） */
  .dk-order-sheet[data-tryon-status="preview_ready"] .dk-order-tryon-btn {
    background: transparent;
    border-color: var(--dk-o-text);
    color: var(--dk-o-text);
  }
  /* 图标切换为"还原"箭头方向提示（通过旋转 180° 实现） */
  .dk-order-sheet[data-tryon-status="preview_ready"] .dk-order-tryon-icon {
    transform: scaleX(-1);
    transition: transform 0.2s ease;
  }

  /* ══ RESTORED ══ */
  .dk-order-sheet[data-tryon-status="restored"] .dk-tryon-text--restored {
    display: inline;
  }
  /* 设计稿重新显示，真人图隐藏 */
  .dk-order-sheet[data-tryon-status="restored"] .dk-order-tryon-result {
    display: none;
  }
  /* 按钮高冷克制：透明底 + 主色描边 */
  .dk-order-sheet[data-tryon-status="restored"] .dk-order-tryon-btn {
    background: transparent;
    border-color: var(--dk-primary, #5C56F5);
    color: var(--dk-primary, #5C56F5);
  }

  /* ── PREVIEW_READY 入场动画：白光闪 + 微回弹 ── */
  @keyframes dkTryonResultAppear {
    0%   { opacity: 0; transform: scale(0.97); }
    55%  { opacity: 1; transform: scale(1.01); filter: brightness(1.12); }
    80%  { filter: brightness(1); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
  }
  .dk-order-tryon-result.dk-tryon-result-appear {
    animation: dkTryonResultAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* ── Add to Cart Soft Pulse（进入 preview_ready 时触发一次） ── */
  @keyframes dkCartPulse {
    0%   { box-shadow: 0 0 0 0 rgba(92,86,245,0.45); }
    50%  { box-shadow: 0 0 0 9px rgba(92,86,245,0.15); }
    100% { box-shadow: 0 0 0 16px rgba(92,86,245,0); }
  }
  .dk-order-btn-cart.dk-o-cart-pulse {
    animation: dkCartPulse 0.5s ease-out 1 forwards;
  }

  /* ── preview-wrap 需要 relative 以支持 shimmer 绝对定位 ── */
  .dk-order-preview-wrap {
    position: relative;
  }

  /* ══════════════════════════════════════════════════
     Try-on 全屏对比 Lightbox (State 4)
     #dkTryonLightbox：由 JS 懒创建后 append 到 #dkShell
     ══════════════════════════════════════════════════ */
  .dk-tryon-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000030; /* 高于 design preview lightbox (10000020) */
    background: #121212;
    display: none;
    flex-direction: column;
    touch-action: none; /* 防止底层 Woo 页面滚动穿透 */
    -webkit-overflow-scrolling: touch;
  }
  .dk-tryon-lightbox.dk-tryon-lb-show {
    display: flex;
  }

  /* 顶部操作栏 */
  .dk-tryon-lb-topbar {
    position: absolute;
    top: max(16px, env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none; /* 子元素各自开启 */
  }
  .dk-tryon-lb-hint-lbl {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.5px;
    pointer-events: none;
  }
  .dk-tryon-lb-close {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* 对比区主体 */
  .dk-tryon-lb-compare {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* 中央 85% 可拖拽，两侧 7.5% 保留给 iOS 返回手势 */
  }

  /* Before（左）/ After（右）图层 */
  .dk-tryon-lb-before,
  .dk-tryon-lb-after {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .dk-tryon-lb-before img,
  .dk-tryon-lb-after img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }
  /* Before 用 clip-path 做窗帘遮盖（JS 动态更新） */
  .dk-tryon-lb-before {
    clip-path: inset(0 50% 0 0); /* 默认 50:50，JS 拖动更新 */
  }

  /* 窗帘分割线 */
  .dk-tryon-lb-curtain-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%; /* JS 动态更新 */
    width: 2px;
    margin-left: -1px;
    background: rgba(255,255,255,0.85);
    z-index: 5;
    pointer-events: none;
  }
  /* 拖拽圆钮 */
  .dk-tryon-lb-curtain-handle {
    position: absolute;
    top: 50%;
    left: 50%; /* JS 动态更新 */
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    z-index: 6;
    cursor: ew-resize;
    touch-action: none;
  }
  .dk-tryon-lb-curtain-handle svg {
    stroke: #333;
    flex-shrink: 0;
  }

  /* 拖拽热区（中央 85%） */
  .dk-tryon-lb-drag-zone {
    position: absolute;
    top: 0; bottom: 0;
    left: 7.5%;
    right: 7.5%;
    z-index: 4;
    cursor: ew-resize;
    touch-action: none;
  }

  /* iOS 返回手势死区（左右各 7.5%，pointer-events: none） */
  .dk-tryon-lb-edge-l,
  .dk-tryon-lb-edge-r {
    position: absolute;
    top: 0; bottom: 0;
    width: 7.5%;
    z-index: 8;
    pointer-events: none;
  }
  .dk-tryon-lb-edge-l { left: 0; }
  .dk-tryon-lb-edge-r { right: 0; }

  /* ── 通用 Section ── */
  .dk-order-section {
    padding: 0 20px 20px;
    flex-shrink: 0;
  }
  .dk-order-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .dk-order-section-lbl {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.8px;
    color: var(--dk-o-text-2);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
  }
  /* qty section：inline layout，lbl 与 stepper 同行 */
  .dk-order-section-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
  }
  .dk-order-section-qty .dk-order-section-lbl {
    margin-bottom: 0;
  }

  /* ── 尺码 Guide 按钮 ── */
  .dk-order-size-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--dk-o-text-2);
    cursor: pointer;
    transition: color 0.12s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dk-order-size-guide-btn:active { color: var(--dk-o-text); }

  /* ── 尺码 Chip ── */
  .dk-order-sizes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .dk-order-size-chip {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--dk-o-border);
    border-radius: 10px;
    background: var(--dk-o-size-idle-bg);
    color: var(--dk-o-size-idle-fg);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease,
                border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dk-order-size-chip:active { transform: scale(0.92); }
  .dk-order-size-chip.dk-o-selected {
    background: var(--dk-o-size-active);
    border-color: var(--dk-o-size-active);
    color: var(--dk-o-size-active-fg);
  }

  /* ── 数量步进器 ── */
  .dk-order-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--dk-o-surface);
    border: 1.5px solid var(--dk-o-border);
    border-radius: 12px;
    overflow: hidden;
  }
  .dk-order-step-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--dk-o-step-btn);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
  }
  .dk-order-step-btn:active {
    transform: scale(0.88);
    background: var(--dk-o-border);
  }
  .dk-order-qty-val {
    min-width: 44px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--dk-o-text);
    /* 分隔线效果 */
    border-left: 1.5px solid var(--dk-o-border);
    border-right: 1.5px solid var(--dk-o-border);
    padding: 10px 4px;
    line-height: 1;
    /* 防止数字宽度跳动 */
    font-variant-numeric: tabular-nums;
  }

  /* ── 双按钮行 ── */
  .dk-order-actions {
    display: flex;
    gap: 10px;
    padding: 4px 20px 16px;
    flex-shrink: 0;
  }
  .dk-order-btn {
    flex: 1;
    height: 52px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: transform 0.12s ease, background 0.12s ease, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dk-order-btn:active { transform: scale(0.96); }
  /* ADD TO CART：描边风格 */
  .dk-order-btn-cart {
    background: transparent;
    border: 1.8px solid var(--dk-o-btn-outline-bd);
    color: var(--dk-o-btn-outline-fg);
  }
  .dk-order-btn-cart:active { background: var(--dk-o-surface); }
  /* CHECKOUT NOW：实色主按钮 */
  .dk-order-btn-checkout {
    background: var(--dk-o-btn-primary);
    color: var(--dk-o-btn-primary-fg);
  }
  .dk-order-btn-checkout:active { background: #333333; }
  /* 忙碌态（isBusy，STEP 2 使用） */
  .dk-order-btn.dk-o-busy {
    opacity: 0.55;
    pointer-events: none;
  }

  /* 动画中 / 收回中：整张 sheet 禁止交互（协议 §2） */
  .dk-order-sheet.dk-order-sheet-locked .dk-order-section,
  .dk-order-sheet.dk-order-sheet-locked .dk-order-actions,
  .dk-order-sheet.dk-order-sheet-locked .dk-order-tryon-wrap,
  .dk-order-sheet.dk-order-sheet-locked .dk-order-preview-wrap {
    pointer-events: none;
  }

  /* Step 3：交易全屏 Loading（8s 熔断前阻断连击） */
  .dk-order-busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    border-radius: inherit;
  }
  .dk-order-busy-overlay.dk-order-busy-show {
    opacity: 1;
    pointer-events: auto;
  }
  .dk-order-busy-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--dk-o-border);
    border-top-color: var(--dk-o-text);
    border-radius: 50%;
    animation: dk-order-spin 0.75s linear infinite;
  }
  @keyframes dk-order-spin {
    to { transform: rotate(360deg); }
  }

} /* end @media (max-width: 768px) */

/* ═══════════════════════════════════════════════════════════
   MY DESIGNS 抽屉 — 网格布局与卡片样式
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* DESIGNS 抽屉 body 去掉外层 padding，由 grid 自管 */
  #dkTopSheet-designs .dk-top-sheet-body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* 网格容器 — 3列，对齐 Gallery 间距 */
  .dk-designs-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 14px 10px;
    padding: 12px 16px 32px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
  }

  /* 单张卡片 — 对齐 Gallery .dk-card 规格 */
  .dk-designs-item {
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #1a1a2e;
    transition: transform 0.12s;
    outline: 2.5px solid transparent;
    outline-offset: -2px;
  }
  .dk-designs-item:active { transform: scale(0.97); }

  /* 底部标签栏（仅显示名称，3列下空间有限） */
  .dk-designs-meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 4px 6px 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
  }
  .dk-designs-name {
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-designs-date { display: none; }

  /* 右上角删除按钮（毛玻璃悬浮） */
  .dk-designs-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
    z-index: 1;
  }
  .dk-designs-delete-btn:active { background: rgba(220, 50, 50, 0.85); }

  /* 空状态 */
  .dk-designs-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #9999AA;
    font-size: 11px;
    padding: 40px 0;
    letter-spacing: 0.5px;
  }

  /* 骨架屏占位（加载中） */
  .dk-designs-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #e8e8f1 8%, #f5f5fb 18%, #e8e8f1 33%);
    background-size: 220% 100%;
    animation: dk-designs-shimmer 1.4s linear infinite;
  }
  @keyframes dk-designs-shimmer {
    to { background-position: -220% 0; }
  }

} /* end MY DESIGNS styles */

/* ═══════════════════════════════════════════════════════════
   MY CART 抽屉 — 商品列表 + Sticky Footer
   视觉：复用 Order Drawer 黑白极简 Token（--dk-o-*），零新色值
   布局：body 内部滚动（对齐 DESIGNS flex 方案），footer 常驻底部
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Cart Token 挂载：抽屉自身不在 #dkOrderSheet 作用域内，需重新声明 */
  #dkTopSheet-cart {
    --dk-o-bg:             #FFFFFF;
    --dk-o-surface:        #F7F7F7;
    --dk-o-text:           #111111;
    --dk-o-text-2:         #888888;
    --dk-o-border:         #E8E8E8;
    --dk-o-btn-primary:    #111111;
    --dk-o-btn-primary-fg: #FFFFFF;
    --dk-o-step-btn:       #111111;
  }

  /* body 去 padding + 内部滚动（sheet 本体永不溢出，footer 才能常驻） */
  #dkTopSheet-cart .dk-top-sheet-body.dk-cart-body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* ── 商品列表（唯一滚动区） ── */
  .dk-cart-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ── 商品卡片 ── */
  .dk-cart-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--dk-o-surface);
    border: 1px solid var(--dk-o-border);
    border-radius: 16px;
    flex-shrink: 0;
  }

  /* 缩略图：背景色 = 服装色（对齐原生 cart 面板渲染），点击放大查看 */
  .dk-cart-item-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #FEFDFE;
    border: 1px solid var(--dk-o-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
  }
  .dk-cart-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* 信息区 */
  .dk-cart-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  /* 名称行：标题（弹性收缩）+ REMOVE 按钮（右上角） */
  .dk-cart-item-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dk-cart-item-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--dk-o-text);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* SKU 行：色块 + 属性文字 */
  .dk-cart-item-attrs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--dk-o-text-2);
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-cart-item-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
  }

  /* 底排：价格 ← → 尺码 chip + 数量步进器 */
  .dk-cart-item-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .dk-cart-item-price {
    font-size: 13px;
    font-weight: 900;
    color: var(--dk-o-text);
    letter-spacing: 0.3px;
    flex-shrink: 0;
  }
  /* JSON 多规格数量只读回退态 */
  .dk-cart-item-qty {
    font-size: 11px;
    font-weight: 700;
    color: var(--dk-o-text-2);
  }
  /* 尺码 + 步进器编组（右对齐） */
  .dk-cart-item-buy {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  /* 尺码只读 chip：来源 = CHECKOUT 抽屉的选择，此处不可改 */
  .dk-cart-item-size {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--dk-o-text);
    background: var(--dk-o-bg);
    border: 1.5px solid var(--dk-o-border);
    border-radius: 8px;
    padding: 5px 9px;
    line-height: 1;
    flex-shrink: 0;
  }
  /* 紧凑数量步进器（Order Drawer 步进器同构缩小版） */
  .dk-cart-item-stepper {
    display: flex;
    align-items: center;
    background: var(--dk-o-surface);
    border: 1.5px solid var(--dk-o-border);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .dk-cart-step-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--dk-o-step-btn);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
  }
  .dk-cart-step-btn:active {
    transform: scale(0.88);
    background: var(--dk-o-border);
  }
  .dk-cart-step-btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
  }
  .dk-cart-qty-val {
    min-width: 26px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--dk-o-text);
    border-left: 1.5px solid var(--dk-o-border);
    border-right: 1.5px solid var(--dk-o-border);
    padding: 7px 2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .dk-cart-item-remove {
    border: 1.5px solid var(--dk-o-border);
    background: var(--dk-o-bg);
    color: var(--dk-o-text);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease, background 0.12s ease,
                color 0.12s ease, border-color 0.12s ease;
  }
  .dk-cart-item-remove:active { transform: scale(0.92); }
  /* Remove 内联二次确认态（Step 2 由 JS 切换 class） */
  .dk-cart-item-remove.dk-cart-remove-confirm {
    background: #DC3232;
    border-color: #DC3232;
    color: #FFFFFF;
  }

  /* ── 空态 ── */
  .dk-cart-empty {
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px 40px;
  }
  .dk-cart-empty.dk-cart-empty-show { display: flex; }
  .dk-cart-empty-text {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--dk-o-text-2);
    letter-spacing: 0.5px;
  }
  .dk-cart-empty-cta {
    border: 1.5px solid var(--dk-o-text);
    background: transparent;
    color: var(--dk-o-text);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    padding: 12px 26px;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
  }
  .dk-cart-empty-cta:active {
    transform: scale(0.95);
    background: var(--dk-o-text);
    color: var(--dk-o-btn-primary-fg);
  }

  /* ── Sticky Footer ── */
  .dk-cart-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--dk-o-border);
    background: var(--dk-o-bg);
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
    display: none;
    flex-direction: column;
    gap: 12px;
  }
  .dk-cart-footer.dk-cart-footer-show { display: flex; }
  .dk-cart-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .dk-cart-total-lbl {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--dk-o-text-2);
  }
  .dk-cart-total-val {
    font-size: 18px;
    font-weight: 900;
    color: var(--dk-o-text);
    letter-spacing: 0.3px;
  }
  .dk-cart-checkout-btn {
    width: 100%;
    border: none;
    background: var(--dk-o-btn-primary);
    color: var(--dk-o-btn-primary-fg);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.8px;
    padding: 16px 0;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease, opacity 0.12s ease;
  }
  .dk-cart-checkout-btn:active { transform: scale(0.97); }
  .dk-cart-checkout-btn[disabled] {
    opacity: 0.45;
    pointer-events: none;
  }

  /* ══════════════════════════════════════════════════════════
     Templates V2（DK-Shell 增强层）— 独立抽屉 + 2 列网格 + 标签胶囊 + 高清预览
     协议 §4 状态驱动：显隐由 class / [data-status] / opacity / transform / pointer-events / aria-hidden 控制。
     风格对齐现有 Order / Top-Sheet（白面、圆角顶、pill 手柄），强调色复用 --dk-primary。
     ══════════════════════════════════════════════════════════ */

  /* ── 遮罩 ── 停在底部导航上方，保持四大导航按钮可见可点（不遮挡 nav） */
  .dk-tpl-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--dk-nav-h);
    background: rgba(0, 0, 0, 0.40);
    z-index: 118;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    touch-action: none;
  }
  .dk-tpl-overlay.dk-tpl-overlay-show {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 抽屉本体 ── 底部主导航功能区（非全屏 Modal）：停靠在底部四大导航上方，70dvh，内部滚动。
     bottom 复用 --dk-nav-h（= 70px + safe-area），让出底部 PRODUCT/GALLERY/TEMPLATES/CHECKOUT。 */
  .dk-tpl-sheet {
    position: absolute;
    bottom: var(--dk-nav-h);
    left: 0;
    right: 0;
    /* 关闭态：bottom 已抬到 nav 上方，单纯 translateY(100%) 会残留 nav-h 那一截。
       需额外多移出 nav-h（已含 safe-area）+ 24px 缓冲，确保完整移出视口、不遮挡底部导航。 */
    transform: translate3d(0, calc(100% + var(--dk-nav-h) + 24px), 0);
    opacity: 0;
    z-index: 120;
    background: var(--dk-surface);
    border-radius: 24px 24px 0 0;
    box-sizing: border-box;
    height: 70dvh;
    max-height: 70dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: none;
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.10);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  .dk-tpl-sheet.dk-tpl-open {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 手柄 ── */
  .dk-tpl-handle-row {
    display: flex; justify-content: center;
    padding: 12px 0 6px; flex-shrink: 0;
  }
  .dk-tpl-pill {
    width: 38px; height: 4px;
    background: #DDDDE8; border-radius: 2px;
  }

  /* ── 标题行 ── */
  .dk-tpl-header {
    display: flex; align-items: flex-start;
    justify-content: space-between;
    padding: 4px 20px 12px; flex-shrink: 0;
  }
  .dk-tpl-header-text {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
  }
  .dk-tpl-title {
    font-size: 13px; font-weight: 900; letter-spacing: 1.6px;
    color: var(--dk-text-1); text-transform: uppercase;
  }
  .dk-tpl-sub {
    font-size: 12px; font-weight: 500; color: var(--dk-text-2);
    letter-spacing: 0.2px;
  }
  .dk-tpl-close {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1.5px solid var(--dk-border); background: transparent;
    border-radius: 50%; cursor: pointer; color: var(--dk-text-1);
    transition: transform 0.12s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .dk-tpl-close:active { transform: scale(0.88); background: #F4F4FB; }

  /* ── 标签胶囊行（横向滚动，All 固定第一位） ── */
  .dk-tpl-tags {
    display: flex; gap: 8px;
    padding: 2px 20px 14px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; flex-shrink: 0;
  }
  .dk-tpl-tags::-webkit-scrollbar { display: none; }
  .dk-tpl-tag {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--dk-border);
    background: var(--dk-surface);
    color: var(--dk-text-2);
    font-size: 11px; font-weight: 800; letter-spacing: 0.8px;
    white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  .dk-tpl-tag:active { transform: scale(0.94); }
  .dk-tpl-tag.dk-tpl-tag-active {
    background: var(--dk-primary);
    border-color: var(--dk-primary);
    color: #FFFFFF;
  }

  /* ── 列表区（唯一滚动区） ── */
  .dk-tpl-body {
    flex: 1 1 0; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 2px 20px 28px;
  }

  /* 默认隐藏四种状态视图，由 [data-status] 决定展示哪一个 */
  .dk-tpl-skeleton,
  .dk-tpl-grid,
  .dk-tpl-empty,
  .dk-tpl-error { display: none; }
  .dk-tpl-sheet[data-status="loading"] .dk-tpl-skeleton { display: grid; }
  .dk-tpl-sheet[data-status="ready"]   .dk-tpl-grid     { display: grid; }
  .dk-tpl-sheet[data-status="empty"]   .dk-tpl-empty    { display: flex; }
  .dk-tpl-sheet[data-status="error"]   .dk-tpl-error    { display: flex; }

  /* ── 2 列网格（严格等宽；minmax(0,1fr) 防止 nowrap 长名撑破轨道导致横向溢出） ── */
  .dk-tpl-grid,
  .dk-tpl-skeleton {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ── 卡片 ── min-width:0 让网格轨道可收缩，避免内容撑宽某一列 */
  .dk-tpl-card {
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .dk-tpl-card:active .dk-tpl-thumb { transform: scale(0.98); }

  /* 1:1 容器 + contain，不裁剪衣服全貌，浅灰底 */
  .dk-tpl-thumb {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    background: #F7F7FB;
    border: 1px solid var(--dk-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.12s ease;
  }
  .dk-tpl-img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }
  /* 图片加载失败 fallback */
  .dk-tpl-img-fallback {
    display: none;
    position: absolute; inset: 0;
    align-items: center; justify-content: center;
    flex-direction: column;
    color: #9090B8; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    background: #F4F4FB;
  }
  .dk-tpl-thumb.dk-tpl-img-failed .dk-tpl-img { visibility: hidden; }
  .dk-tpl-thumb.dk-tpl-img-failed .dk-tpl-img-fallback { display: flex; }

  /* 卡片底部：名称（单行省略） + 🔎 独立点击区 */
  .dk-tpl-meta {
    display: flex; align-items: center; gap: 8px;
  }
  .dk-tpl-name {
    flex: 1; min-width: 0;
    font-size: 12px; font-weight: 700; color: var(--dk-text-1);
    letter-spacing: 0.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dk-tpl-zoom {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: 1.5px solid var(--dk-border); background: var(--dk-surface);
    border-radius: 50%; cursor: pointer; color: var(--dk-text-1);
    transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .dk-tpl-zoom:active {
    transform: scale(0.86);
    background: var(--dk-primary-soft);
    border-color: var(--dk-primary);
    color: var(--dk-primary);
  }

  /* ── 骨架屏 ── */
  .dk-tpl-skel-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; box-sizing: border-box; }
  .dk-tpl-skel-thumb {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 16px;
    background: linear-gradient(110deg, #e8e8f1 8%, #f5f5fb 18%, #e8e8f1 33%);
    background-size: 220% 100%;
    animation: dkSkeletonShimmer 1.2s linear infinite;
  }
  .dk-tpl-skel-line {
    height: 12px; width: 70%; border-radius: 6px;
    background: linear-gradient(110deg, #e8e8f1 8%, #f5f5fb 18%, #e8e8f1 33%);
    background-size: 220% 100%;
    animation: dkSkeletonShimmer 1.2s linear infinite;
  }

  /* ── 空状态 / 错误状态 ── */
  .dk-tpl-empty,
  .dk-tpl-error {
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px;
    padding: 48px 20px;
  }
  .dk-tpl-empty-title,
  .dk-tpl-error-title {
    font-size: 14px; font-weight: 800; color: var(--dk-text-1);
  }
  .dk-tpl-empty-sub {
    font-size: 12px; font-weight: 500; color: var(--dk-text-2);
  }
  .dk-tpl-retry {
    margin-top: 8px;
    padding: 10px 22px; border-radius: 999px;
    border: none; background: var(--dk-primary); color: #FFFFFF;
    font-size: 12px; font-weight: 800; letter-spacing: 0.6px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform 0.12s ease;
  }
  .dk-tpl-retry:active { transform: scale(0.95); }

  /* ══ 高清预览浮层 ══ */
  .dk-tpl-preview {
    position: absolute; inset: 0;
    z-index: 130;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
    touch-action: none;
  }
  .dk-tpl-preview.dk-tpl-preview-open {
    opacity: 1; pointer-events: auto;
  }
  .dk-tpl-preview-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.74);
  }
  .dk-tpl-preview-card {
    position: relative; z-index: 1;
    width: 90%; max-width: 520px;
    max-height: 86dvh;
    background: var(--dk-surface);
    border-radius: 18px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  }
  .dk-tpl-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dk-border);
    flex-shrink: 0;
  }
  .dk-tpl-preview-title {
    font-size: 13px; font-weight: 800; letter-spacing: 0.4px;
    color: var(--dk-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-right: 12px;
  }
  .dk-tpl-preview-close {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1.5px solid var(--dk-border); background: transparent;
    border-radius: 50%; cursor: pointer; color: var(--dk-text-1);
    transition: transform 0.12s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .dk-tpl-preview-close:active { transform: scale(0.88); background: #F4F4FB; }
  .dk-tpl-preview-imgwrap {
    position: relative;
    flex: 1; min-height: 240px;
    display: flex; align-items: center; justify-content: center;
    background: #F4F4FB;
  }
  .dk-tpl-preview-img {
    max-width: 100%; max-height: 70dvh;
    object-fit: contain;
    display: none;
  }
  .dk-tpl-preview-spinner {
    display: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(92, 86, 245, 0.18);
    border-top-color: var(--dk-primary);
    animation: dkSpin 0.9s linear infinite;
  }
  .dk-tpl-preview-failed {
    display: none;
    align-items: center; justify-content: center;
    color: var(--dk-text-2); font-size: 12px; font-weight: 600;
    padding: 24px;
  }
  .dk-tpl-preview[data-status="loading"] .dk-tpl-preview-spinner { display: block; }
  .dk-tpl-preview[data-status="loaded"]  .dk-tpl-preview-img     { display: block; }
  .dk-tpl-preview[data-status="error"]   .dk-tpl-preview-failed  { display: flex; }

} /* end MY CART styles */