/* =============================================================
   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，同样不修改/删除既有选择器。
   ============================================================= */

@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: 12px;
    padding: 4px 0 8px;
  }

  /* ── 卡片壳 ── */
  .dk-ac-card {
    background: var(--dk-surface, #FFFFFF);
    border: 1px solid var(--dk-border, #D8D9F0);
    border-radius: 14px;
    padding: 14px;
  }
  .dk-ac-card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }
  .dk-ac-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--dk-text-1, #1A1A2C);
  }
  .dk-ac-card-note {
    font-size: 10.5px;
    color: var(--dk-text-2, #8888AA);
    text-align: right;
  }

  /* ── 卡① 最近订单快照 ── */
  .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;
  }

  /* ── 升级钩子（次级链接样式按钮） ── */
  .dk-ac-hook {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 4px 2px;
    border: none;
    border-top: 1px dashed 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 头部 ── */
  .dk-ac-verified-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--dk-surface, #FFFFFF);
    border: 1px solid var(--dk-border, #D8D9F0);
    border-radius: 12px;
  }
  .dk-ac-verified-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34B36F;
    flex: 0 0 auto;
  }
  .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; }

  /* ── 卡③ Coming soon 占位 ── */
  .dk-ac-card-disabled { opacity: 0.62; }
  .dk-ac-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--dk-text-2, #8888AA);
    background: var(--dk-bg, #E5E6FC);
    border-radius: 999px;
    padding: 3px 9px;
  }
  .dk-ac-video-hint {
    font-size: 12px;
    color: var(--dk-text-2, #8888AA);
  }

  /* ── 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;
  }

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