﻿/* ============================================================
 * 我的页 (个人中心) — 个人中心专用样式
 * 设计风格：V8.5 单色品牌青 · 克制庄重 / 长者友好 · 触控≥44px
 * 规范：全程使用 --v85-* / --fs-* / --z-* / --spacing-* 令牌，零硬编码色值与字号
 * 重构（2026-10-03）：对标京东/美团「我的页」——功能去重、信息分层、
 *       图标色收敛为 4 语义色（primary/warm/neutral/rose），布局全部收进本文件。
 * 第二轮增强（2026-10-03）：顶部个人区渐变、底部安全区、转场动效、时段问候。
 * ============================================================ */

/* ---------- 转场动效（京东/美团式轻快入场，尊重系统减弱动效） ---------- */
@keyframes myFadeUp{from{opacity:0;transform:translateY(0.5rem)}to{opacity:1;transform:none}}
.my-hero,.p12-section,.p12-tips,.p12-safe,.p12-legal{animation:myFadeUp 250ms ease both}
.my-hero{animation-delay:40ms}
.p12-section{animation-delay:120ms}
.p12-tips{animation-delay:160ms}
.p12-safe{animation-delay:200ms}
.p12-legal{animation-delay:240ms}
@media (prefers-reduced-motion:reduce){.my-hero,.p12-section,.p12-tips,.p12-safe,.p12-legal{animation:none;opacity:1;transform:none}}

/* ---------- 桌面端质感（hover 微反馈，移动端走 :active） ---------- */
@media (hover:hover){
    .p12-list-item:hover{background:var(--gray-50,#F1F5F9)}
    .p12-grid-item:hover .mi-ico{transform:translateY(-1px);box-shadow:0 2px 6px rgba(15,23,42,0.08)}
    .p12-list-item:hover .p12-list-arrow{transform:translateX(2px);color:var(--v85-primary,#1B5FB4)}
    .p12-section-more:hover{color:var(--v85-primary,#1B5FB4)}
    .p12-fold-head:hover{background:var(--gray-50,#F8FAFC)}
}

/* ---------- 顶部栏（京东式：左1定位 + 右排线性图标；滚动下滑出现/上滑隐藏，不遮挡内容） ---------- */
.mynav{display:flex;align-items:center;justify-content:space-between;height:3.5rem;padding:0 var(--v85-space-md,0.75rem);background:var(--bg-card,#FFF);border-bottom:1px solid var(--border-line,#e5e7eb);position:sticky;top:0;z-index:var(--z-sticky-header,150);transition:transform 220ms ease}
.mynav.mynav-hide{transform:translateY(-100%)}
.mynav-loc{display:inline-flex;align-items:center;gap:0.25rem;min-width:0;max-width:9.5rem;color:var(--v85-text-primary,#1e293b);font-size:var(--fs-sm,13px);font-weight:500;text-decoration:none;min-height:44px;cursor:pointer}
.mynav-loc i:first-child{color:var(--v85-primary,#0EA5E9);font-size:1.125rem;flex-shrink:0}
.mynav-loc i:last-child{color:var(--v85-text-tertiary,#9CA3AF);flex-shrink:0}
.mynav-loc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mynav-actions{display:flex;align-items:center;gap:0.125rem}
.mynav-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--v85-radius-full,50%);color:var(--v85-text-primary,#1e293b);font-size:1.375rem;text-decoration:none;transition:color 150ms ease,background 150ms ease}
.mynav-icon-btn:active{color:var(--v85-primary,#1B5FB4);background:var(--v85-primary-50,#EAF1FA)}
@media(hover:hover){.mynav-icon-btn:hover{color:var(--v85-primary,#1B5FB4);background:var(--v85-primary-50,#EAF1FA)}}

/* ---------- 顶部个人区（身份 + 资产合一，品牌青渐变，紧贴顶栏上移） ---------- */
.my-hero{background:var(--v85-gradient-my-header,linear-gradient(180deg,#BBDEFB 0%,#F0F9FF 40%,#F8FAFB 100%));border-radius:0 0 var(--hd-card-radius-lg,14px) var(--hd-card-radius-lg,14px);margin:0;padding:0.5rem 0 0;box-shadow:var(--hd-card-shadow,0 1px 3px rgba(15,23,42,0.08));overflow:hidden}
.my-identity{display:flex;align-items:center;padding:0.25rem var(--v85-space-md,0.75rem) 0.875rem;gap:var(--v85-space-md,0.75rem)}
.my-avatar-wrap{position:relative;flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:var(--v85-radius-full,50%);overflow:hidden;text-decoration:none;background:var(--color-bg-fill,#f3f4f6);border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px var(--v85-primary-200,#90CAF9),0 2px 6px rgba(15,23,42,0.10);padding:2px}
.my-avatar-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--v85-radius-full,50%)}
.my-avatar-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--v85-primary-light,#BBDEFB) 0%,var(--v85-primary-50,#EAF1FA) 100%)}
.my-avatar-ph i{font-size:28px;color:var(--v85-primary,#1B5FB4);line-height:1}
.my-identity-info{flex:1;min-width:0}
.my-greeting{font-size:13px;color:#475569;margin-bottom:0.25rem;line-height:1.4}
.my-name-row{display:flex;align-items:baseline;gap:0.375rem;margin-bottom:0.375rem}
.my-nickname{font-size:var(--fs-xl,18px);font-weight:var(--v85-weight-bold,700);color:var(--v85-text-primary,#1e293b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-member-id{font-size:var(--fs-xs,12px);color:var(--v85-text-tertiary,#94a3b8);font-weight:500;flex-shrink:0}
.my-badges{display:flex;align-items:center;gap:0.25rem;flex-wrap:wrap}
.my-badge{display:inline-flex;padding:0.125rem 0.5rem;border-radius:var(--v85-radius-pill,9999px);font-size:var(--fs-xs,12px);font-weight:500;line-height:1.4}
.my-badge--level{background:var(--bg-card,#FFF);color:var(--v85-primary-dark,#0E3F87);border:1px solid var(--v85-primary-100,#BBDEFB)}
.my-badge--honor{background:var(--color-hongfen-light,#fffbeb);color:var(--color-hongfen,#d97706);border:1px solid var(--amber-200,#FFE0B2)}
.my-edit-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:0.25rem;padding:0.375rem 0.75rem;border-radius:var(--v85-radius-sm,8px);border:1px solid var(--border-line,#e5e7eb);background:var(--bg-card,#FFF);color:var(--v85-text-secondary,#64748b);font-size:var(--fs-base,14px);font-weight:500;text-decoration:none;transition:border-color 150ms ease,color 150ms ease,background 150ms ease;min-height:2.75rem}
.my-edit-btn:active{border-color:var(--v85-primary,#1B5FB4);color:var(--v85-primary,#1B5FB4);background:var(--v85-primary-50,#EAF1FA)}
.my-edit-btn--login{border:none;background:var(--v85-primary,#1B5FB4);color:var(--v85-text-on-primary,#FFF);font-weight:var(--v85-weight-semibold,600);box-shadow:0 2px 8px rgba(8,145,178,0.25)}
.my-edit-btn--login:active{background:var(--v85-primary-dark,#0E3F87);color:var(--v85-text-on-primary,#FFF)}

/* ---------- 资产条（内嵌白底圆角条，登录后四列统一；未登录为登录引导条） ---------- */
.my-assets{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 var(--v85-space-md,0.75rem) 0.75rem;background:var(--bg-card,#FFF);border-radius:var(--ui-radius-md,12px);box-shadow:0 1px 3px rgba(15,23,42,0.06)}
@media(min-width:1024px){.my-assets{margin:0 1rem 1rem}}
.my-asset-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;padding:0.875rem 0.25rem;text-decoration:none;color:var(--v85-text-primary,#1e293b);min-height:4.5rem;position:relative;transition:background 150ms ease;border-radius:var(--ui-radius-md,12px)}
.my-asset-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--border-line,#F1F5F9)}
.my-asset-item:active{background:var(--v85-primary-50,#EAF1FA)}
.my-asset-val{font-family:var(--v85-font-heading,Rubik,sans-serif);font-size:var(--fs-xl,18px);font-weight:var(--v85-weight-bold,700);color:var(--v85-text-primary,#1e293b);line-height:1.2}
.my-asset-lb{font-size:var(--fs-xs,12px);color:var(--v85-text-secondary,#64748b);font-weight:500}
.my-asset-icon{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--v85-radius-md,12px);background:var(--v85-primary-50,#EAF1FA);color:var(--v85-primary,#1B5FB4);font-size:var(--v85-text-lg)}

/* ---------- 未登录引导条（京东式：登录后查看资产） ---------- */
.my-login-guide{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.875rem 1rem;min-height:4.5rem}
.my-login-guide-text{display:flex;flex-direction:column;gap:0.25rem;min-width:0}
.my-login-guide-title{font-size:var(--fs-base,14px);font-weight:var(--v85-weight-semibold,600);color:var(--v85-text-primary,#1e293b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-login-guide-sub{font-size:var(--fs-xs,12px);color:var(--v85-text-secondary,#64748b)}
.my-login-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1.25rem;border-radius:var(--radius-pill,9999px);background:var(--v85-primary,#1B5FB4);color:var(--v85-text-on-primary,#FFF);font-size:var(--fs-base,14px);font-weight:var(--v85-weight-semibold,600);text-decoration:none;min-height:2.75rem;transition:background 150ms ease}
.my-login-btn:active{background:var(--v85-primary-dark,#0E3F87)}
/* FIX-CHECK:20261008 京东式双入口：登录（实心主操作）+ 注册（描边次级）并排 */
.my-login-guide-actions{flex-shrink:0;display:flex;align-items:center;gap:0.5rem}
.my-login-btn--ghost{background:var(--bg-card,#FFF);color:var(--v85-primary,#1B5FB4);border:1px solid var(--v85-primary,#1B5FB4);padding:0.5rem 1rem}
.my-login-btn--ghost:active{background:var(--v85-primary-50,#EAF1FA);color:var(--v85-primary-dark,#0E3F87)}
/* 游客态昵称即登录入口：保持标题字号字重，但可点击并带主色 */
a.my-nickname--guest{color:var(--v85-primary,#1B5FB4);text-decoration:none}
a.my-nickname--guest:active{color:var(--v85-primary-dark,#0E3F87)}

/* ---------- 区块卡片通用 ---------- */
.p12-wrap{max-width:768px;margin:0 auto;background:var(--bg-page,#F9FAFB);min-height:100vh;padding-bottom:calc(var(--hd-bottom-nav-safe,5rem)+1rem)}
@media(min-width:768px){.p12-wrap{padding-left:1rem;padding-right:1rem;max-width:1100px}}
@media(min-width:1280px){.p12-wrap{padding-left:2rem;padding-right:2rem;max-width:1300px}}
.p12-section{background:var(--bg-card,#FFF);margin:0.375rem 0;border-radius:var(--ui-radius-lg,16px);overflow:hidden}
.p12-section-header{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem 0.625rem}
.p12-section-title{font-size:var(--fs-base,15px);font-weight:var(--v85-weight-semibold,600);color:var(--v85-text-primary,#111827)}
.p12-section-more{font-size:var(--fs-xs,12px);color:var(--v85-text-tertiary,#9CA3AF);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 0.25rem;transition:color 150ms ease}
.p12-section-more:active{color:var(--v85-primary,#0EA5E9)}

/* ---------- 图标统一（4 语义色 100 级底色，替代原 10 色 my-ico-*） ---------- */
.mi-ico{width:2.75rem;height:2.75rem;border-radius:var(--ui-radius-md,12px);display:flex;align-items:center;justify-content:center;font-size:1.375rem;flex-shrink:0;transition:transform 120ms ease,box-shadow 120ms ease}
.mi-ico-primary{background:var(--v85-primary-100,#BBDEFB);color:var(--v85-primary-dark,#0E3F87)}
.mi-ico-warm{background:var(--amber-100,#FFEDD5);color:var(--amber-800,#92400E)}
.mi-ico-neutral{background:var(--gray-100,#E2E8F0);color:var(--v85-text-secondary,#475569)}
.mi-ico-rose{background:var(--red-100,#FFE4E6);color:var(--color-danger,#BE123C)}
.p12-grid-item:active .mi-ico,.p12-list-item:active .mi-ico,.p12-msg-item:active .mi-ico{transform:scale(0.92)}

/* ---------- 服务分组 · 手拉式折叠卡片（默认收起，点击标题展开；箭头旋转；内容平滑展开） ---------- */
.p12-fold-head{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;cursor:pointer;min-height:44px;user-select:none;transition:background 150ms ease}
.p12-fold-head .p12-section-title{flex:1}
.p12-fold-arrow{color:var(--v85-text-tertiary,#9CA3AF);font-size:1.125rem;flex-shrink:0;transition:transform 220ms ease}
.p12-fold.open .p12-fold-arrow{transform:rotate(180deg)}
.p12-fold-body{max-height:0;overflow:hidden;transition:max-height 260ms ease}
.p12-fold.open .p12-fold-body{max-height:700px}
.p12-fold-link{flex-shrink:0;display:inline-flex;align-items:center;gap:0.125rem;font-size:var(--fs-xs,12px);color:var(--v85-text-tertiary,#9CA3AF);text-decoration:none;min-height:44px;padding:0 0.25rem;transition:color 150ms ease}
.p12-fold-link:active{color:var(--v85-primary,#1B5FB4)}
@media(hover:hover){.p12-fold-link:hover{color:var(--v85-primary,#1B5FB4)}}

/* ---------- 金刚区网格（8 宫格） ---------- */
.p12-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 0.25rem 0.5rem}
.p12-grid-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;padding:0.875rem 0.25rem;text-decoration:none;color:var(--v85-text-primary,#111827);min-height:44px;transition:background 0.15s}
.p12-grid-item:active{background:var(--v85-primary-50,#F0F9FF);border-radius:var(--ui-radius-md,12px)}
.p12-grid-label{font-size:var(--fs-xs,12px);color:var(--v85-text-secondary,#64748B);text-align:center;line-height:1.3}

/* ---------- 订单宫格 ---------- */
.p12-order-bar{display:flex;gap:0;padding:0 0 0.75rem}
.p12-order-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;padding:0.75rem 0.375rem;text-decoration:none;color:var(--v85-text-primary,#111827);position:relative;min-height:44px}
.p12-order-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--border-line,#E5E7EB)}
.p12-order-icon{font-size:1.5rem}
.p12-order-icon,.p12-msg-item-icon{width:2.75rem;height:2.75rem;border-radius:var(--ui-radius-md,12px);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.p12-order-icon.mi-ico{width:2.75rem;height:2.75rem;border-radius:var(--ui-radius-md,12px);font-size:1.375rem}
.p12-order-label{font-size:var(--fs-xs,12px);color:var(--v85-text-secondary,#64748B)}
.p12-order-badge{position:absolute;top:0.5rem;right:0.75rem;background:var(--color-danger,#DC2626);color:var(--v85-text-on-primary,#FFF);font-size:var(--fs-xs,11px);min-width:1rem;height:1rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;padding:0 0.25rem}

/* ---------- 三分系统轻提示（单行小字，入口已在资产条/常用功能） ---------- */
.p12-tips{margin:0.375rem 0;padding:0.5rem 1rem;background:var(--bg-card,#FFF);border-radius:var(--ui-radius-lg,16px);display:flex;align-items:center;justify-content:space-between;gap:0.5rem;min-height:44px}
.p12-tips-text{font-size:var(--fs-xs,12px);color:var(--v85-text-tertiary,#94A3B8);line-height:1.4}
.p12-tips-link{flex-shrink:0;display:inline-flex;align-items:center;gap:0.125rem;font-size:var(--fs-xs,12px);color:var(--v85-text-secondary,#64748B);text-decoration:none;min-height:44px;transition:color 150ms ease}
.p12-tips-link i{font-size:1rem;margin-left:0.125rem}
.p12-tips-link:active{color:var(--v85-primary,#1B5FB4)}

/* ---------- 服务分组列表 ---------- */
.p12-list{display:flex;flex-direction:column;padding-bottom:0.25rem}
.p12-list-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;border-top:1px solid var(--border-line,#F1F5F9);text-decoration:none;color:var(--v85-text-primary,#111827);min-height:44px;transition:background 0.15s}
.p12-list-item:active{background:var(--v85-primary-50,#F0F9FF)}
.p12-list-label{flex:1;font-size:13px;color:var(--v85-text-primary,#1E293B)}
.p12-list-arrow{color:var(--v85-text-tertiary,#9CA3AF);font-size:1rem;transition:transform 150ms ease,color 150ms ease}
.p12-num-badge{background:var(--color-danger,#DC2626);color:var(--v85-text-on-primary,#FFF);font-size:var(--fs-xs,11px);min-width:1rem;height:1rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;padding:0 0.25rem}

/* ---------- 消息通知宫格 ---------- */
.p12-msg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-bottom:0.5rem}
.p12-msg-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;padding:0.875rem 0.375rem;text-decoration:none;color:var(--v85-text-primary,#111827);min-height:44px;border-right:1px solid var(--border-line,#F1F5F9);position:relative}
.p12-msg-item:nth-child(4n){border-right:none}
.p12-msg-item-icon{font-size:1.375rem}
.p12-msg-item-label{font-size:var(--fs-xs,12px);color:var(--v85-text-secondary,#64748B)}
.p12-msg-item .p12-num-badge{position:absolute;top:0.5rem;right:0.625rem}

/* ---------- 安全与保障条 ---------- */
.p12-safe{display:flex;gap:0;margin:0.375rem 0;background:var(--bg-card,#FFF);border-radius:var(--ui-radius-lg,16px);overflow:hidden;padding:0 0.5rem}
.p12-safe-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;padding:0.875rem 0.25rem;text-decoration:none;color:var(--v85-text-secondary,#64748B);min-height:44px;position:relative;transition:background 150ms ease}
.p12-safe-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--border-line,#F1F5F9)}
.p12-safe-item i{font-size:1.375rem;color:var(--v85-text-tertiary,#9CA3AF)}
.p12-safe-item span{font-size:var(--fs-xs,12px)}
.p12-safe-item:active{background:var(--v85-primary-50,#EAF1FA)}
.p12-safe-item:active i{color:var(--v85-primary,#1B5FB4)}

/* ---------- 法律与关于 ---------- */
.p12-legal{display:flex;flex-wrap:wrap;gap:0.5rem 1rem;padding:1rem;background:var(--bg-card,#FFF);border-top:1px solid var(--border-line,#E5E7EB)}
.p12-legal a{font-size:var(--fs-xs,11px);color:var(--v85-text-tertiary,#9CA3AF);text-decoration:none}
.p12-legal a:active{color:var(--v85-primary,#0EA5E9)}
