/* =====================================================================
   beautify.css  ·  UI 深度美化（加法层，不修改原 styles.css 结构）
   作用域：视图切换淡入、卡片微动效、按钮质感、焦点环、空状态、骨架屏
   ===================================================================== */

/* ---------- 1. 视图切换淡入 ---------- */
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 入口页 / 管理后台：每次进入仍轻量淡入（不影响用户端手机壳） */
.entry-wrap,
.cs-content,
.panel,
.stat-card,
.review-item{animation:viewIn .26s cubic-bezier(.22,.61,.36,1) both}

/* 用户端手机壳：仅首次挂载播放进入动画，之后切换视图不再重播（消除每切一次闪一下） */
.phone-screen.animate-in,
.phone-screen.animate-in .task-card,
.phone-screen.animate-in .my-card,
.phone-screen.animate-in .earn-card,
.phone-screen.animate-in .acc-platform,
.phone-screen.animate-in .my-list,
.phone-screen.animate-in .task-list,
.phone-screen.animate-in .earn-page,
.phone-screen.animate-in .acc-page{animation:viewIn .3s cubic-bezier(.22,.61,.36,1) both}
.phone-screen.animate-in .task-card:nth-child(2),
.phone-screen.animate-in .my-card:nth-child(2){animation-delay:.04s}
.phone-screen.animate-in .task-card:nth-child(3),
.phone-screen.animate-in .my-card:nth-child(3){animation-delay:.08s}
.phone-screen.animate-in .task-card:nth-child(4),
.phone-screen.animate-in .my-card:nth-child(4){animation-delay:.12s}
.phone-screen.animate-in .task-card:nth-child(n+5),
.phone-screen.animate-in .my-card:nth-child(n+5){animation-delay:.14s}

/* ---------- 2. 卡片悬浮微动效 ---------- */
.task-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.task-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-l);border-color:var(--pc-a30,var(--line))}
.task-card.soldout:hover{transform:none}
.my-card,.earn-card,.acc-platform,.review-item{transition:transform .18s ease,box-shadow .18s ease}
.my-card:hover,.earn-card:hover,.review-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-l)}
.stat-card{transition:transform .18s ease,box-shadow .18s ease}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}

/* 平台标签选中态增加呼吸光圈 */
.ptab.on{box-shadow:0 0 0 3px var(--pc-a18,transparent)}
.sort-chip.on{box-shadow:0 0 0 3px var(--pc-a14,transparent)}

/* ---------- 3. 按钮质感 ---------- */
.btn,.btn-ghost{position:relative;overflow:hidden}
.btn-ghost:hover{transform:translateY(-1px)}
.btn-primary,.claim-btn,.sf-submit,.mini-btn.primary,.modal .mini-btn.primary{
  box-shadow:0 4px 14px rgba(59,111,240,.30)}
.claim-btn,.sf-submit{background-size:140% 140%;background-position:0 0;
  transition:transform .15s ease,filter .15s ease,background-position .4s ease}
.claim-btn:hover,.sf-submit:hover{background-position:100% 0;filter:brightness(1.04)}
.claim-btn:active,.sf-submit:active{transform:scale(.97)}
.mini-btn.ok{box-shadow:0 4px 14px rgba(14,173,105,.28)}
.tab-item:active,.btn-s:active{transform:scale(.95)}

/* 强调色微渐变（用户端主操作已用品牌色，这里仅增强可见性） */
.btn-s.primary{box-shadow:0 3px 10px var(--pc-a28,transparent)}

/* ---------- 4. 焦点可达性（键盘 Tab 高亮，不干扰鼠标） ---------- */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[data-a]:focus-visible,
.nav-item:focus-visible,
.tab-item:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.nav-item.on:focus-visible{outline-color:#fff}

/* ---------- 5. 空状态动效 ---------- */
.empty-icon{animation:floaty 3.4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.empty-icon svg{opacity:.8}

/* ---------- 6. 骨架屏 / 异步占位（图表、远程加载时复用） ---------- */
.skeleton{position:relative;overflow:hidden;background:#E9EDF4;border-radius:8px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shimmer 1.25s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.chart-box.loading{display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:12px}
.chart-box.loading::before{content:"";width:100%;height:100%;
  background:linear-gradient(90deg,#EDF0F5 25%,#F6F8FC 37%,#EDF0F5 63%);background-size:400% 100%;
  animation:shimmer2 1.3s infinite;border-radius:10px}
@keyframes shimmer2{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- 7. 顶部栏细节增强 ---------- */
.app-topbar{backdrop-filter:saturate(1.2)}
.phone-notch{box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* 列表分隔更柔和 */
table.tbl tr:not(:last-child) td{border-bottom:1px solid var(--line)}
.review-item:not(:last-child){border-bottom:1px solid var(--line)}

/* 选中态文字更清晰 */
::selection{background:rgba(59,111,240,.22)}

/* 细滚动条美化（后台主区） */
.cs-content::-webkit-scrollbar{width:8px}
.cs-content::-webkit-scrollbar-thumb{background:#C6CDD9;border-radius:4px}

/* ---------- 8. 降级：尊重系统“减少动态效果”偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}