/* ==========================================================================
   立体视觉体系 · 前后台共用
   设计原则：
   1. 立体靠"多层次阴影"而非模糊——高性能，不发灰
   2. 动画用 transform + opacity，只动这两个属性，不触发重排
   3. 层级清晰：背景 < 卡片 < 悬浮 < 灯箱
   ========================================================================== */

:root{
  /* ---------- 层级阴影（立体核心）---------- */
  /* 贴地：极浅，用于贴在背景上的元素 */
  --sh-0: 0 1px 2px rgba(15,23,42,.05);
  /* 卡片：两层阴影 = 近处接触阴影 + 远处扩散 */
  --sh-1: 0 1px 2px rgba(15,23,42,.06),
          0 2px 6px -1px rgba(15,23,42,.06);
  /* 悬浮：三层，更明显的高度感 */
  --sh-2: 0 2px 4px rgba(15,23,42,.06),
          0 6px 16px -2px rgba(15,23,42,.10),
          0 12px 28px -6px rgba(15,23,42,.10);
  /* 按压：阴影收拢 = 压下去 */
  --sh-press: 0 1px 1px rgba(15,23,42,.10),
              inset 0 2px 5px rgba(15,23,42,.10);
  /* 深色面板（顶栏）内阴影 */
  --sh-dark: 0 1px 0 rgba(255,255,255,.06) inset,
             0 -1px 0 rgba(0,0,0,.06) inset;

  /* ---------- 渐变（用于立体的高光/暗面）---------- */
  --grad-card: linear-gradient(180deg,#ffffff 0%,#fdfdfe 100%);
  --grad-btn: linear-gradient(180deg,#374151 0%,#1f2937 55%,#111827 100%);
  --grad-btn-hover: linear-gradient(180deg,#4b5563 0%,#374151 60%,#1f2937 100%);
  --grad-dark: linear-gradient(180deg,#1f2937 0%,#111827 100%);
  --grad-primary: linear-gradient(180deg,#3b82f6 0%,#2563eb 52%,#1d4ed8 100%);
  --grad-green: linear-gradient(180deg,#10b981 0%,#059669 55%,#047857 100%);

  /* ---------- 圆角 ---------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* ---------- 动效曲线 ---------- */
  --ease: cubic-bezier(.22,1,.36,1);        /* 减速，用于入场 */
  --ease-out: cubic-bezier(.16,1,.3,1);     /* 更利落 */
  --ease-back: cubic-bezier(.34,1.56,.64,1);/* 轻微回弹，用于强调 */
  --t-fast: .16s;
  --t-mid: .28s;
  --t-slow: .42s;

  /* ---------- 颜色 ---------- */
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --line: rgba(15,23,42,.09);
  --line-2: rgba(15,23,42,.14);
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --brand: #111827;
  --primary: #2563eb;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
}

/* ---------- 入场动画：错峰上浮 ---------- */
@keyframes riseIn{
  from{ opacity:0; transform:translate3d(0,14px,0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes scaleIn{
  from{ opacity:0; transform:scale(.92) translate3d(0,8px,0); }
  to{ opacity:1; transform:scale(1) translate3d(0,0,0); }
}
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(37,99,235,.32); }
  70%{ box-shadow:0 0 0 10px rgba(37,99,235,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,99,235,0); }
}
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
@keyframes shimmer{
  0%{ background-position:-420px 0; }
  100%{ background-position:420px 0; }
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes checkPop{
  0%{ transform:scale(.2); opacity:0; }
  55%{ transform:scale(1.18); }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes barGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes slideDown{
  from{ opacity:0; transform:translate3d(0,-12px,0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}

/* 为列表项自动加错峰延迟（用 --i 变量控制） */
.stagger > *{ animation:riseIn var(--t-slow) var(--ease) both; }
.stagger > *:nth-child(1){ animation-delay:.02s; }
.stagger > *:nth-child(2){ animation-delay:.06s; }
.stagger > *:nth-child(3){ animation-delay:.10s; }
.stagger > *:nth-child(4){ animation-delay:.14s; }
.stagger > *:nth-child(5){ animation-delay:.18s; }
.stagger > *:nth-child(6){ animation-delay:.22s; }
.stagger > *:nth-child(7){ animation-delay:.26s; }
.stagger > *:nth-child(8){ animation-delay:.30s; }
.stagger > *:nth-child(9){ animation-delay:.34s; }
.stagger > *:nth-child(10){ animation-delay:.38s; }
.stagger > *:nth-child(n+11){ animation-delay:.42s; }

/* ---------- 通用立体卡片 ---------- */
.card-3d{
  background:var(--grad-card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
  position:relative;
  overflow:hidden;
}
/* 顶部高光：模拟受光边缘，制造"厚度" */
.card-3d::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  opacity:.8; pointer-events:none;
}
.card-3d:hover{
  transform:translate3d(0,-3px,0);
  box-shadow:var(--sh-2);
  border-color:var(--line-2);
}
.card-3d:active{
  transform:translate3d(0,0,0) scale(.995);
  box-shadow:var(--sh-press);
  transition-duration:var(--t-fast);
}

/* ---------- 立体按钮 ---------- */
.btn-3d{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line-2);
  background:var(--grad-btn);
  color:#fff;
  padding:9px 16px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:500; font-family:inherit;
  cursor:pointer; text-decoration:none;
  box-shadow:0 1px 2px rgba(15,23,42,.16),
             0 3px 8px -1px rgba(15,23,42,.18),
             inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             filter var(--t-fast) var(--ease);
}
.btn-3d:hover{ background:var(--grad-btn-hover); filter:saturate(1.1); }
.btn-3d:active{
  transform:translateY(1px) scale(.985);
  box-shadow:var(--sh-press);
}
.btn-3d:focus-visible{ outline:3px solid rgba(37,99,235,.4); outline-offset:2px; }

.btn-3d.light{
  background:linear-gradient(180deg,#ffffff,#f4f6fa);
  color:var(--text-1);
  box-shadow:0 1px 2px rgba(15,23,42,.07),
             0 2px 6px -1px rgba(15,23,42,.07),
             inset 0 1px 0 #fff;
}
.btn-3d.light:hover{ background:linear-gradient(180deg,#fff,#eef1f6); }
.btn-3d.light:active{ box-shadow:var(--sh-press); }

.btn-3d.primary{
  background:var(--grad-primary); border-color:#1d4ed8;
  box-shadow:0 1px 2px rgba(37,99,235,.24),
             0 4px 12px -2px rgba(37,99,235,.34),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-3d.green{
  background:var(--grad-green); border-color:#047857;
  box-shadow:0 1px 2px rgba(5,150,105,.22),
             0 4px 12px -2px rgba(5,150,105,.30),
             inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---------- 立体输入框 ---------- */
.input-3d{
  width:100%;
  padding:11px 13px;
  font-size:15px; font-family:inherit; color:var(--text-1);
  background:linear-gradient(180deg,#fdfdfe,#f7f9fc);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
  transition:border-color var(--t-fast), box-shadow var(--t-fast),
             background var(--t-fast);
}
.input-3d:focus{
  outline:none;
  background:#fff;
  border-color:var(--primary);
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04),
             0 0 0 3.5px rgba(37,99,235,.14);
}

/* ---------- 立体开关/标签 ---------- */
.chip-3d{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 13px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500; text-decoration:none;
  color:var(--text-2);
  background:linear-gradient(180deg,#fff,#f5f7fa);
  border:1px solid var(--line-2);
  box-shadow:0 1px 1.5px rgba(15,23,42,.06),
             inset 0 1px 0 #fff;
  transition:all var(--t-fast) var(--ease);
}
.chip-3d:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 8px -1px rgba(15,23,42,.12), inset 0 1px 0 #fff;
  color:var(--text-1);
}
.chip-3d:active{ transform:translateY(0) scale(.97); box-shadow:var(--sh-press); }
.chip-3d.on{
  background:var(--grad-btn); color:#fff; border-color:#111827;
  box-shadow:0 2px 5px -1px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- 骨架屏 ---------- */
.skeleton{
  background:linear-gradient(90deg,#eef1f6 25%,#f8fafc 50%,#eef1f6 75%);
  background-size:840px 100%;
  animation:shimmer 1.3s linear infinite;
  border-radius:var(--r-xs);
}

/* ---------- 加载转圈 ---------- */
.spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}

/* ---------- 徽标 ---------- */
.badge-3d{
  display:inline-flex; align-items:center; gap:4px;
  padding:2.5px 8px; border-radius:var(--r-xs);
  font-size:11px; font-weight:600; line-height:1.6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             0 1px 1.5px rgba(15,23,42,.08);
  transition:transform var(--t-fast) var(--ease);
}
.badge-3d:hover{ transform:translateY(-1px); }
.b-pending{ background:linear-gradient(180deg,#fff3e0,#ffe4c2); color:#9a5b00; }
.b-delivered{ background:linear-gradient(180deg,#dcfce7,#bbf7d0); color:#047857; }
.b-returned{ background:linear-gradient(180deg,#f1f5f9,#e2e8f0); color:#64748b; }
.b-exception{ background:linear-gradient(180deg,#fee2e2,#fecaca); color:#b91c1c; }

/* ---------- 提示条 ---------- */
.alert-3d{
  padding:12px 15px; border-radius:var(--r-md);
  font-size:14px; font-weight:500;
  display:flex; align-items:flex-start; gap:9px;
  animation:slideDown var(--t-mid) var(--ease-back) both;
  box-shadow:var(--sh-1);
}
.alert-3d.ok{
  background:linear-gradient(180deg,#ecfdf5,#d1fae5); color:#065f46;
  border:1px solid #6ee7b7;
}
.alert-3d.err{
  background:linear-gradient(180deg,#fef2f2,#fee2e2); color:#b91c1c;
  border:1px solid #fca5a5;
}
.alert-3d.warn{
  background:linear-gradient(180deg,#fffbeb,#fef3c7); color:#92400e;
  border:1px solid #fcd34d;
}

/* ---------- 统计数字 ---------- */
.stat-3d{
  background:var(--grad-card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 10px; text-align:center;
  box-shadow:var(--sh-1);
  position:relative; overflow:hidden;
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.stat-3d::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.5),transparent);
  opacity:0; transition:opacity var(--t-mid);
}
.stat-3d:hover{ transform:translate3d(0,-3px,0); box-shadow:var(--sh-2); }
.stat-3d:hover::after{ opacity:1; }
.stat-3d .v{
  font-size:24px; font-weight:700; letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#1e293b,#0f172a);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:scaleIn var(--t-slow) var(--ease-back) both;
}
.stat-3d .l{ font-size:11.5px; color:var(--text-3); margin-top:3px; }
.stat-3d.ok .v{ background:linear-gradient(180deg,#10b981,#047857);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-3d.no .v{ background:linear-gradient(180deg,#f59e0b,#b45309);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------- 深色顶栏（立体内阴影）---------- */
.topbar-3d{
  background:var(--grad-dark);
  box-shadow:var(--sh-dark),
             0 2px 8px rgba(15,23,42,.18),
             0 8px 24px -6px rgba(15,23,42,.22);
  position:relative; z-index:10;
}
.topbar-3d .btn-3d{
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.16); color:#e2e8f0;
  box-shadow:0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.12);
}
.topbar-3d .btn-3d:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.09));
}
.topbar-3d .btn-3d:active{ box-shadow:inset 0 2px 5px rgba(0,0,0,.3); }

/* ---------- 表格立体行 ---------- */
.tbl-3d{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-1);
}
.tbl-3d thead th{
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
  padding:12px 11px; text-align:left;
  font-size:12px; font-weight:600; color:var(--text-2);
  border-bottom:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 #fff;
  white-space:nowrap;
}
.tbl-3d tbody td{
  padding:12px 11px; border-bottom:1px solid var(--line);
  vertical-align:middle; font-size:13px;
  transition:background var(--t-fast);
}
.tbl-3d tbody tr{ transition:transform var(--t-fast) var(--ease); }
.tbl-3d tbody tr:hover{
  background:linear-gradient(180deg,#fafbfd,#f5f8fb);
  box-shadow:inset 3px 0 0 var(--primary);
}
.tbl-3d tbody tr:last-child td{ border-bottom:none; }

/* ---------- 图片立体缩略图 ---------- */
.thumb-3d{
  border-radius:var(--r-sm);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
  transition:transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
  cursor:zoom-in; display:block;
}
.thumb-3d:hover{
  transform:scale(1.08) translate3d(0,-2px,0);
  box-shadow:var(--sh-2);
  z-index:2;
}

/* ---------- 无障碍：尊重减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- 触屏设备去掉 hover 抬升，避免"粘住" ---------- */
@media (hover: none){
  .card-3d:hover, .stat-3d:hover, .chip-3d:hover{
    transform:none; box-shadow:var(--sh-1);
  }
}