/* =============================================================
   DK Account Center — 样式（Phase 6.1 Account Shell Recovery）
   规格：html/4.7/ui/phase6.0 V2.1.txt §5.1 / §5.4（FROZEN）
   约束：全部类名 dk-ac- 前缀，不覆盖既有类（phase6.0 §3）；
        仅移动端生效（与 dk-shell.css 同一 768px 门控）；
        设计 tokens 对齐 dk-shell.css（--dk-primary 等）。
   Phase 6.3B：仅新增 dk-ac-orders-* 规则（卡①原位展开完整订单列表），
   不修改/删除以上任何既有选择器。
   Phase 6.4：仅新增 dk-ac-detail-* 规则（orderDetail 视图）+
   dk-ac-orders-row-clickable（订单行可点态）+ dk-ac-credit-*
   （Store Credit / Affiliate 只读区块），同样不修改/删除既有选择器。
   UX 修正（后 6.5A）：仅新增 dk-ac-home-orders-*（Account Home 卡①
   摘要行，verified 用户消费 dk_ac_orders 数据），内部复用既有
   dk-ac-order-no / dk-ac-order-meta / dk-ac-status-dot / dk-ac-thumb-ph /
   dk-ac-orders-row-clickable，同样不修改/删除既有选择器。
   Phase 6.6 Step 4：新增 dk-ac-credit-bar-card / dk-ac-share-desc /
   dk-ac-ref-*（Earnings / Referral / Share & Promote 卡片）；
   删除随 VIDEO 卡一并下线的 dk-ac-card-disabled / dk-ac-badge /
   dk-ac-video-hint（JS 已无引用）。其余选择器不动。
   UI Polish（2026-08-07，纯视觉，零数据绑定）：
   - 卡片壳整体加大留白/圆角、卡间距加大（.dk-ac-root/.dk-ac-card/
     .dk-ac-card-hd 数值调整，不改结构选择器）
   - .dk-ac-hook 分隔线由虚线改浅色实线（Orders "View all orders" /
     Share&Earn "Verify email" 两处复用，联动变化，符合设计图）
   - 新增 dk-ac-card-title-lg（叠加修饰类，仅新三卡 + Orders 标题使用，
     不改 .dk-ac-card-title 基础定义，SIGN IN/MY ORDERS/ORDER 详情标题
     不受影响）、dk-ac-card-sub、dk-ac-card-footnote、
     dk-ac-avatar/-dot、dk-ac-icon-badge、dk-ac-card-body-row、
     dk-ac-feature-row/-title/-desc
   ============================================================= */

@media (max-width: 768px) {

  /* ── 回落占位（flag off / JS 未接管时可见；接管后隐藏） ── */
  .dk-ac-fallback {
    padding: 28px 8px;
    color: #8888AA;
    font-size: 14px;
    text-align: center;
  }
  .dk-ac-fallback.dk-ac-hidden { display: none; }

  /* ── 三卡骨架容器（内容由 dk-account.js 按 DK.state.account 渲染） ── */
  .dk-ac-root[aria-hidden="true"] { display: none; }
  .dk-ac-root {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 8px;
  }

  /* ── 卡片壳（UI Polish：留白/圆角加大，营造更"C端"的卡片感） ── */
  .dk-ac-card {
    background: var(--dk-surface, #FFFFFF);
    border: 1px solid var(--dk-border, #D8D9F0);
    border-radius: 18px;
    padding: 16px;
  }
  .dk-ac-card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
  }
  .dk-ac-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--dk-text-1, #1A1A2C);
  }
  /* UI Polish：叠加修饰类，仅用于新三卡 + Orders 标题；不改基础类，
     SIGN IN / MY ORDERS / ORDER 详情标题维持原字号/字距不变。 */
  .dk-ac-card-title-lg {
    font-size: 14.5px;
    letter-spacing: 0.01em;
    text-transform: none;
  }
  .dk-ac-card-note {
    font-size: 10.5px;
    color: var(--dk-text-2, #8888AA);
    text-align: right;
  }
  /* UI Polish：卡片副标题（如 Earnings Overview 下的 "Store Credit
     Rewards"）与卡底注释（说明文字），纯展示，无数据绑定。 */
  .dk-ac-card-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--dk-text-2, #8888AA);
    margin: -6px 0 10px;
  }
  .dk-ac-card-footnote {
    font-size: 11px;
    line-height: 1.5;
    color: var(--dk-text-2, #8888AA);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--dk-border, #D8D9F0);
  }

  /* ── 卡① 最近订单快照 ── */
  .dk-ac-order {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .dk-ac-order-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: var(--dk-bg, #E5E6FC);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .dk-ac-order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dk-ac-thumb-ph {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--dk-text-2, #8888AA);
    text-align: center;
    line-height: 1.3;
  }
  .dk-ac-order-info { min-width: 0; }
  .dk-ac-order-no {
    font-size: 14px;
    font-weight: 700;
    color: var(--dk-text-1, #1A1A2C);
  }
  .dk-ac-order-desc {
    font-size: 12px;
    color: var(--dk-text-2, #8888AA);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-ac-order-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--dk-text-1, #1A1A2C);
    margin-top: 2px;
  }
  .dk-ac-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dk-primary, #5C56F5);
    flex: 0 0 auto;
  }

  /* ── 空态 ── */
  .dk-ac-empty {
    padding: 18px 4px;
    font-size: 13px;
    color: var(--dk-text-2, #8888AA);
    text-align: center;
  }

  /* ── 升级钩子（次级链接样式按钮）
       UI Polish：分隔线由虚线改浅色实线（去表格感），Orders 卡
       "View all orders →" 与 Share&Earn 卡 "Verify email →" 两处
       复用，联动变化符合设计图观感。 ── */
  .dk-ac-hook {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 4px 2px;
    border: none;
    border-top: 1px solid var(--dk-border, #D8D9F0);
    background: none;
    font-size: 12px;
    color: var(--dk-primary, #5C56F5);
    text-align: left;
    cursor: pointer;
  }
  .dk-ac-hook:active { opacity: 0.6; }

  /* ── 卡② 分享按钮 ── */
  .dk-ac-share-btn {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 10px;
    background: var(--dk-primary, #5C56F5);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
  }
  .dk-ac-share-btn:active { transform: scale(0.98); opacity: 0.9; }

  /* ── 6.2：Verified 头部（UI Polish：留白/圆角加大，配合头像圆） ── */
  .dk-ac-verified-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--dk-surface, #FFFFFF);
    border: 1px solid var(--dk-border, #D8D9F0);
    border-radius: 16px;
  }
  /* dk-ac-verified-dot：历史类名保留（无其他文件引用，样式留作
     兼容占位），JS 端已改为 dk-ac-avatar-dot 角标方案。 */
  .dk-ac-verified-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34B36F;
    flex: 0 0 auto;
  }
  /* UI Polish：邮箱首字母头像 + 右下角绿点角标，取代平铺小圆点。 */
  .dk-ac-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dk-primary, #5C56F5);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dk-ac-avatar-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #34B36F;
    border: 2px solid var(--dk-surface, #FFFFFF);
  }
  .dk-ac-verified-email {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dk-text-1, #1A1A2C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-ac-signout { flex: 0 0 auto; }

  /* ── 6.2：session 过期提示条（修订 2） ── */
  .dk-ac-session-bar {
    padding: 10px 12px;
    border: 1px solid #F0C8C8;
    background: #FDF3F3;
    border-radius: 12px;
    font-size: 12.5px;
    color: #A94442;
  }

  /* ── 6.2：卡①原位验证表单 ── */
  .dk-ac-form-title {
    font-size: 13px;
    line-height: 1.5;
    color: var(--dk-text-1, #1A1A2C);
    margin-bottom: 10px;
  }
  .dk-ac-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--dk-border, #D8D9F0);
    border-radius: 10px;
    background: var(--dk-surface, #FFFFFF);
    font-size: 14px;
    color: var(--dk-text-1, #1A1A2C);
    outline: none;
  }
  .dk-ac-input:focus { border-color: var(--dk-primary, #5C56F5); }
  .dk-ac-input-code {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.35em;
  }
  .dk-ac-form-links {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
  }
  .dk-ac-link {
    border: none;
    background: none;
    padding: 6px 2px;
    font-size: 12px;
    color: var(--dk-primary, #5C56F5);
    cursor: pointer;
  }
  .dk-ac-link:active { opacity: 0.6; }
  .dk-ac-link[disabled] { opacity: 0.4; }
  .dk-ac-notice {
    margin-top: 8px;
    font-size: 12px;
    color: #34710F;
  }
  .dk-ac-error {
    margin-top: 8px;
    font-size: 12px;
    color: #C0392B;
  }
  .dk-ac-share-btn[disabled] { opacity: 0.55; }

  /* （Phase 6.6 Step 4：原「卡③ Coming soon 占位」dk-ac-card-disabled /
      dk-ac-badge / dk-ac-video-hint 已随 VIDEO 卡删除，无其他引用。） */

  /* ── 6.3B：卡①原位展开完整订单列表（ordersList） ── */
  .dk-ac-orders-hd { margin-bottom: 12px; }
  .dk-ac-orders-back {
    padding: 6px 2px;
    margin: -6px -2px 0 -2px;
  }
  .dk-ac-orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .dk-ac-orders-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dk-border, #D8D9F0);
  }
  .dk-ac-orders-row:last-child { border-bottom: none; padding-bottom: 0; }
  .dk-ac-orders-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 9px;
    background: var(--dk-bg, #E5E6FC);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .dk-ac-orders-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dk-ac-orders-info { min-width: 0; flex: 1 1 auto; }
  .dk-ac-orders-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .dk-ac-orders-skeleton span {
    display: block;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--dk-bg, #E5E6FC) 25%, #EFEFFA 37%, var(--dk-bg, #E5E6FC) 63%);
    background-size: 400% 100%;
    animation: dkAcOrdersSkeleton 1.4s ease infinite;
  }
  @keyframes dkAcOrdersSkeleton {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
  }

  /* ── 6.4：订单行可点态（ordersList → orderDetail） ── */
  .dk-ac-orders-row-clickable {
    cursor: pointer;
  }
  .dk-ac-orders-row-clickable:active { opacity: 0.7; }

  /* ── 6.4：orderDetail 字段行（null 字段整行隐藏，由 JS 不渲染实现，
       这里只负责已渲染行的排版） ── */
  .dk-ac-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
  }
  .dk-ac-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dk-border, #D8D9F0);
    font-size: 12.5px;
  }
  .dk-ac-detail-row:last-child { border-bottom: none; padding-bottom: 0; }
  .dk-ac-detail-label {
    color: var(--dk-text-2, #8888AA);
    flex: 0 0 auto;
  }
  .dk-ac-detail-value {
    color: var(--dk-text-1, #1A1A2C);
    font-weight: 600;
    text-align: right;
  }
  .dk-ac-detail-link { color: var(--dk-primary, #5C56F5); text-decoration: none; }
  .dk-ac-detail-link:active { opacity: 0.6; }

  /* ── 6.4：orderDetail 行项目（Lumise 缩略图 + 名称 + 数量） ── */
  .dk-ac-detail-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  .dk-ac-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .dk-ac-detail-item-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 9px;
    background: var(--dk-bg, #E5E6FC);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .dk-ac-detail-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dk-ac-detail-item-info { min-width: 0; flex: 1 1 auto; }
  .dk-ac-detail-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dk-text-1, #1A1A2C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-ac-detail-item-qty {
    font-size: 11.5px;
    color: var(--dk-text-2, #8888AA);
    margin-top: 2px;
  }

  /* ── 6.4：底部预留位（Reorder / View design，恒 disabled，§9.3） ── */
  .dk-ac-detail-actions {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--dk-border, #D8D9F0);
  }
  .dk-ac-detail-actions .dk-ac-share-btn { flex: 1 1 auto; margin: 0; }
  .dk-ac-detail-actions .dk-ac-link { flex: 0 0 auto; }

  /* ── 6.4 M2：Store Credit / Affiliate 只读区块（verifiedHome 头部条下方，
       零按钮零写操作；无数据时整段不渲染，由 JS 控制，此处只管排版） ── */
  .dk-ac-credit-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--dk-surface, #FFFFFF);
    border: 1px solid var(--dk-border, #D8D9F0);
    border-radius: 12px;
  }
  .dk-ac-credit-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
  }
  .dk-ac-credit-label { color: var(--dk-text-2, #8888AA); }
  .dk-ac-credit-value {
    color: var(--dk-text-1, #1A1A2C);
    font-weight: 700;
  }

  /* ── UX 修正：Account Home 卡①订单摘要（verified，最多 1–2 行）。
       行内布局与 .dk-ac-orders-row 一致，独立类名避免影响 ordersList。 ── */
  .dk-ac-home-orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .dk-ac-home-orders-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dk-border, #D8D9F0);
  }
  .dk-ac-home-orders-row:last-child { border-bottom: none; padding-bottom: 0; }
  .dk-ac-home-orders-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 9px;
    background: var(--dk-bg, #E5E6FC);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .dk-ac-home-orders-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dk-ac-home-orders-info { min-width: 0; flex: 1 1 auto; }
  .dk-ac-home-orders-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .dk-ac-home-orders-skeleton span {
    display: block;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--dk-bg, #E5E6FC) 25%, #EFEFFA 37%, var(--dk-bg, #E5E6FC) 63%);
    background-size: 400% 100%;
    animation: dkAcOrdersSkeleton 1.4s ease infinite;
  }

  /* ── Phase 6.6 Step 4：Earnings / Referral / Share & Promote 卡片。
       复用 dk-ac-card 框架 + dk-ac-credit-row 行排版；credit-bar 移入
       卡内后去掉自带的边框底色（卡片已有），只保留行距。 ── */
  .dk-ac-credit-bar-card {
    margin-top: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    gap: 8px;
  }
  .dk-ac-share-desc {
    font-size: 12px;
    line-height: 1.55;
    color: var(--dk-text-2, #8888AA);
  }
  .dk-ac-share-desc + .dk-ac-share-desc { margin-top: 8px; }
  .dk-ac-share-desc strong { color: var(--dk-text-1, #1A1A2C); }
  .dk-ac-ref-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--dk-bg, #E5E6FC);
    border-radius: 10px;
  }
  .dk-ac-ref-url {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--dk-text-1, #1A1A2C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-ac-ref-copy {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: var(--dk-surface, #FFFFFF);
    color: var(--dk-primary, #5C56F5);
    cursor: pointer;
  }
  .dk-ac-ref-copy:active { transform: scale(0.94); opacity: 0.85; }

  /* ── UI Polish（2026-08-07）：图标徽章 + 图标行组 + Local Share&Earn
       feature row。纯展示层新增，不影响既有 dk-ac-credit-row /
       dk-ac-ref-* / dk-ac-hook 的既有渲染逻辑。 ── */
  .dk-ac-icon-badge {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dk-primary-soft, rgba(92, 86, 245, 0.12));
    color: var(--dk-primary, #5C56F5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dk-ac-card-body-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .dk-ac-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
  }
  .dk-ac-feature-row + .dk-ac-feature-row {
    border-top: 1px solid var(--dk-border, #D8D9F0);
  }
  .dk-ac-feature-row:first-child { padding-top: 0; }
  .dk-ac-feature-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--dk-text-1, #1A1A2C);
  }
  .dk-ac-feature-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--dk-text-2, #8888AA);
    margin-top: 2px;
  }

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