/* ============================================================
   晋美云商城 · 后台视觉系统 V3
   ------------------------------------------------------------
   与前台共用同一套品牌语言（墨色 / 晋红 / 鎏金 / 宣纸），
   但后台偏「工具感」：更克制的信息密度、更清晰的状态色。
   ============================================================ */

:root {
  /* 墨色阶 */
  --ab-ink-900: #17120f;
  --ab-ink-800: #241c18;
  --ab-ink-700: #3a2f29;
  --ab-ink-600: #57493f;
  --ab-ink-500: #756558;
  --ab-ink-400: #9b8c7e;
  --ab-ink-300: #bfb3a5;
  --ab-ink-200: #ded5c8;
  --ab-ink-100: #eee8de;
  --ab-ink-050: #f7f3ec;

  /* 品牌 */
  --ab-pri: #8c2f24;
  --ab-pri-deep: #5c1c15;
  --ab-pri-light: #a8452f;
  --ab-pri-soft: #f2e6e2;
  --ab-gold: #b08d57;
  --ab-gold-lt: #d9bf90;
  --ab-gold-deep: #8a6d40;
  --ab-gold-soft: #f4ece0;
  --ab-jade: #4a6b52;
  --ab-teal: #3f6068;

  /* 纸面 */
  --ab-paper: #faf7f2;
  --ab-paper-2: #f3eee5;
  --ab-paper-3: #ebe4d8;
  --ab-white: #fffdfa;

  /* 语义别名（兼容旧变量名） */
  --pri: var(--ab-pri);
  --pri-deep: var(--ab-pri-deep);
  --gold: var(--ab-gold);
  --tx: var(--ab-ink-900);
  --tx2: var(--ab-ink-600);
  --tx3: var(--ab-ink-400);
  --line: rgba(90, 74, 60, .13);

  /* 动效 */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s;
  --t-mid: .34s;

  /* 纸纹 */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.032'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* ============================================================
   0.5 图标全局统一（所有页面共用）
   ============================================================ */
.ico-svg {
  display: block;
  flex-shrink: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* ============================================================
   1. 外壳与背景
   ============================================================ */
body {
  background:
    radial-gradient(1100px 600px at 12% -8%, #f3ede2 0%, transparent 60%),
    radial-gradient(900px 560px at 92% 108%, #e5ddd0 0%, transparent 58%),
    linear-gradient(165deg, #e9e2d7 0%, #d8d0c3 55%, #cdc4b5 100%);
  color: var(--ab-ink-900);
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.wrap {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* 全局纸纹 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}

/* ============================================================
   2. 侧边栏
   ------------------------------------------------------------
   注意：admin.css 里原选择器是 `.side .nav .ni`（深色侧栏配色，
   文字为白色系）。V3 侧栏改为浅色纸面，必须保持相同的前缀，
   否则会与 V2 规则打架导致「文字色 = 背景色」。
   ============================================================ */
.side {
  background: rgba(255, 253, 250, .74);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid rgba(90, 74, 60, .11);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .5) inset;
}

.side-brand {
  border-bottom: 1px solid var(--line);
  padding-bottom: 15px;
}
.side-brand .sb-t {
  font-family: "Songti SC", "Noto Serif SC", serif;
  letter-spacing: 3.5px;
  color: var(--ab-ink-900);
  font-weight: 700;
}
.side-brand .sb-s {
  color: var(--ab-gold-deep);
  letter-spacing: 2.6px;
}

/* ---------- 分组标题（原来继承深色版的低透明度白字，浅底上不可见） ---------- */
.side .nav .ng {
  font-size: 9.5px;
  color: var(--ab-gold-deep);          /* 原来是 rgba(255,255,255,.3)，浅底上等于隐形 */
  opacity: .85;
  padding: 14px 12px 6px;
  letter-spacing: 1.6px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 5px;
}

/* ---------- 导航项 ---------- */
.side .nav .ni {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 3px;
  margin: 1px 8px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--ab-ink-700);            /* 原来是 #fff 白字，浅底上等于隐形 */
  transition: all var(--t-fast) var(--ease);
  position: relative;
  border-left: 2px solid transparent;
  font-weight: 500;
}
.side .nav .ni:hover {
  background: rgba(140, 47, 36, .07);
  color: var(--ab-ink-900);
  transform: translateX(2px);
}
.side .nav .ni.on {
  background: linear-gradient(90deg, rgba(140, 47, 36, .12) 0%, rgba(140, 47, 36, .03) 100%);
  color: var(--ab-pri);
  border-left-color: var(--ab-pri);
  font-weight: 700;
}

/* 图标容器：固定尺寸，避免 SVG 撑开或挤掉文字 */
.side .nav .ni .ni-i {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0;                        /* 彻底屏蔽 emoji 字体残留 */
  color: var(--ab-ink-400);
  transition: color var(--t-fast) var(--ease);
}
.side .nav .ni .ni-i .ico-svg {
  width: 16px;
  height: 16px;
  display: block;
}
.side .nav .ni:hover .ni-i { color: var(--ab-pri-light); }
.side .nav .ni.on .ni-i { color: var(--ab-pri); }

/* 未读角标：改用 span 包裹，避免 flex 下被压缩变形 */
.side .nav .ni .ni-b {
  margin-left: auto;
  background: var(--ab-pri);
  color: #fff;
  border-radius: 9px;
  font-size: 9px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(140, 47, 36, .3);
}

/* 侧栏底部 */
.side .foot {
  border-top: 1px solid var(--line);
  padding: 13px 18px;
  font-size: 10px;
  color: var(--ab-ink-400);
  line-height: 1.8;
}

/* ============================================================
   3. 顶栏
   ============================================================ */
.top {
  background: rgba(255, 253, 250, .8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  height: 60px;
}
.top .tp-t {
  font-family: "Songti SC", "Noto Serif SC", serif;
  letter-spacing: 2.6px;
  font-weight: 700;
  color: var(--ab-ink-900);
}
.top .tp-s { color: var(--ab-ink-400); letter-spacing: 1px; }

/* ============================================================
   4. 卡片
   ============================================================ */
.card {
  background: var(--ab-white);
  border: 1px solid rgba(90, 74, 60, .1);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(35, 24, 18, .035);
  transition: box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover {
  box-shadow: 0 6px 24px rgba(35, 24, 18, .07);
  border-color: rgba(176, 141, 87, .26);
}
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ab-pri) 0%, var(--ab-gold) 100%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.card:hover::after { opacity: .8; }

.card-h {
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(250, 247, 242, .7) 0%, transparent 100%);
}
.card-h .ch-t {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--ab-ink-900);
}
.card-h .ch-s {
  font-size: 11px;
  color: var(--ab-ink-400);
  letter-spacing: .4px;
}
.card-b { padding: 18px; }

/* ============================================================
   5. 统计卡
   ============================================================ */
.stats { gap: 14px; }
.stat {
  background: var(--ab-white);
  border: 1px solid rgba(90, 74, 60, .1);
  border-radius: 3px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: all var(--t-mid) var(--ease);
}
.stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(35, 24, 18, .09);
}
/* 顶部彩条 */
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.stat.s1::before { background: linear-gradient(90deg, #8c2f24, #a8452f); }
.stat.s2::before { background: linear-gradient(90deg, #b08d57, #d9bf90); }
.stat.s3::before { background: linear-gradient(90deg, #4a6b52, #6b8f73); }
.stat.s4::before { background: linear-gradient(90deg, #3f6068, #5b8189); }

.stat .s-t {
  font-size: 11px;
  color: var(--ab-ink-500);
  letter-spacing: 1.4px;
  margin-bottom: 9px;
}
.stat .s-v {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 27px;
  font-weight: 700;
  color: var(--ab-ink-900);
  line-height: 1.1;
  letter-spacing: .5px;
}
.stat.s1 .s-v { color: var(--ab-pri); }
.stat.s2 .s-v {
  background: linear-gradient(135deg, #9a7b4a 0%, #c9a86e 34%, #e8d2a4 50%, #c9a86e 66%, #9a7b4a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat .s-v span { font-size: 12px; -webkit-text-fill-color: var(--ab-ink-500); margin-left: 2px; }
.stat .s-d {
  font-size: 10.5px;
  color: var(--ab-ink-400);
  margin-top: 7px;
  letter-spacing: .3px;
}

/* ============================================================
   5.5 排行榜 / 商品卡内 SVG 图标
   —— .ri 等容器原本设计给 emoji（font-size 生效），
      换成 SVG 后需显式给尺寸与配色，否则会撑破或过淡
   ============================================================ */
.rk .ri,
.gi {
  color: var(--ab-ink-400);
}
.rk .ri .ico-svg,
.gi .ico-svg {
  width: 100%;
  height: 100%;
  max-width: 26px;
  max-height: 26px;
  color: var(--ab-ink-400);
  transition: color var(--t-fast) var(--ease), transform var(--t-mid) var(--ease);
}
.rk:hover .ri .ico-svg,
.gi:hover .ico-svg {
  color: var(--ab-pri);
  transform: scale(1.08);
}
.rk:hover .ri {
  background: var(--ab-gold-soft);
  border-color: rgba(176, 141, 87, .4);
}

/* ============================================================
   6. 表格
   ============================================================ */
.tw { overflow: auto; }
.tw table { border-collapse: collapse; width: 100%; }
.tw thead th {
  background: linear-gradient(180deg, var(--ab-paper-2) 0%, var(--ab-paper-3) 100%);
  color: var(--ab-ink-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 11px 13px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.tw tbody td {
  padding: 11px 13px;
  font-size: 12px;
  color: var(--ab-ink-700);
  border-bottom: 1px solid rgba(90, 74, 60, .06);
  vertical-align: middle;
}
.tw tbody tr { transition: background var(--t-fast) var(--ease); }
.tw tbody tr:hover { background: rgba(250, 247, 242, .85); }
.tw tbody tr:last-child td { border-bottom: none; }

.mono {
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: -.2px;
}

/* ============================================================
   7. 徽章
   ============================================================ */
.bdg {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: .5px;
  font-weight: 600;
  white-space: nowrap;
}
.bdg.red { background: var(--ab-pri-soft); color: var(--ab-pri); border: 1px solid rgba(140, 47, 36, .2); }
.bdg.gold { background: var(--ab-gold-soft); color: var(--ab-gold-deep); border: 1px solid rgba(176, 141, 87, .26); }
.bdg.green { background: #e6efe7; color: #3d5c45; border: 1px solid rgba(74, 107, 82, .24); }
.bdg.blue { background: var(--ab-teal); color: #fff; border: none; }
.bdg.gray { background: var(--ab-paper-3); color: var(--ab-ink-600); border: 1px solid var(--line); }

/* ============================================================
   8. 按钮
   ============================================================ */
.abtn {
  border-radius: 2px;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  border: 1px solid var(--line);
  background: var(--ab-white);
  color: var(--ab-ink-700);
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.abtn:hover {
  border-color: var(--ab-gold);
  color: var(--ab-pri);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(35, 24, 18, .08);
}
.abtn:active { transform: translateY(0); }
.abtn.pri {
  background: linear-gradient(135deg, var(--ab-pri) 0%, var(--ab-pri-deep) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(140, 47, 36, .22);
}
.abtn.pri:hover { filter: brightness(1.1); box-shadow: 0 6px 18px rgba(140, 47, 36, .3); }
.abtn.gold {
  background: linear-gradient(135deg, var(--ab-gold) 0%, var(--ab-gold-deep) 100%);
  color: #fff;
  border-color: transparent;
}
.abtn.gold:hover { filter: brightness(1.1); }
.abtn.danger {
  background: transparent;
  color: #a8332a;
  border-color: rgba(168, 51, 42, .3);
}
.abtn.danger:hover { background: rgba(168, 51, 42, .07); border-color: #a8332a; }
.abtn.ghost { background: transparent; color: var(--ab-ink-500); }
.abtn.sm { padding: 6px 11px; font-size: 11px; }
.abtn.xs { padding: 4px 8px; font-size: 10px; letter-spacing: .3px; }
.abtn.block { width: 100%; justify-content: center; }

/* ============================================================
   9. 表单
   ============================================================ */
.f label {
  font-size: 10.5px;
  color: var(--ab-ink-500);
  letter-spacing: .8px;
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}
.f input, .f select, .f textarea {
  width: 100%;
  border: 1px solid rgba(90, 74, 60, .16);
  border-radius: 2px;
  padding: 8px 11px;
  font-size: 12px;
  color: var(--ab-ink-900);
  background: var(--ab-white);
  transition: all var(--t-fast) var(--ease);
  font-family: inherit;
}
.f input:focus, .f select:focus, .f textarea:focus {
  border-color: var(--ab-gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .16);
  outline: none;
}
.f input.mono { font-family: "SF Mono", Consolas, monospace; font-size: 11.5px; }

/* 拖拽项 */
.drag-item {
  background: var(--ab-white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 11px 13px;
  margin-bottom: 8px;
  cursor: grab;
  transition: all var(--t-fast) var(--ease);
  display: flex;
  align-items: center;
  gap: 10px;
}
.drag-item:hover {
  border-color: var(--ab-gold);
  box-shadow: 0 3px 12px rgba(35, 24, 18, .06);
  transform: translateX(2px);
}
.drag-item:active { cursor: grabbing; }
.drag-item.dragging { opacity: .45; border-style: dashed; border-color: var(--ab-pri); }
.drag-item .di-h { color: var(--ab-ink-300); display: flex; cursor: grab; }
.drag-item .di-n { font-size: 12.5px; font-weight: 600; color: var(--ab-ink-800); }
.drag-item .di-d { font-size: 10.5px; color: var(--ab-ink-400); margin-top: 2px; }
.drag-item .eye { color: var(--ab-ink-300); display: flex; }
.drag-item .eye.off { opacity: .4; }

/* ============================================================
   10. 易凯模块专用
   ============================================================ */
.log {
  background: #1a1512;
  color: #d4c8b8;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.85;
  padding: 16px;
  border-radius: 2px;
  overflow: auto;
  white-space: pre;
}
.log .k { color: #e0b98a; }
.log .v { color: #a8c8a0; }
.log .n { color: #d4a0c0; }
.log .c { color: #6f6459; }

/* 业务域开关卡 */
#ykDomains > div {
  transition: all var(--t-mid) var(--ease);
}
#ykDomains > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(35, 24, 18, .08);
}

/* 报文示例高亮 */
#ykSample .k { color: #e0b98a; font-weight: 500; }

/* ============================================================
   11. 图片库 / 上传区
   ============================================================ */
.up-box {
  border: 1.5px dashed rgba(90, 74, 60, .24);
  border-radius: 3px;
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t-mid) var(--ease);
  background: rgba(250, 247, 242, .5);
  color: var(--ab-ink-400);
}
.up-box:hover {
  border-color: var(--ab-gold);
  background: rgba(244, 236, 224, .5);
  color: var(--ab-pri);
}
.up-box.drag {
  border-color: var(--ab-pri);
  background: var(--ab-pri-soft);
  transform: scale(1.01);
}

.img-cell {
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--t-mid) var(--ease);
  background: var(--ab-white);
}
.img-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(35, 24, 18, .11);
  border-color: var(--ab-gold);
}

/* ============================================================
   12. 色板（颜色调整）
   ============================================================ */
.sw {
  width: 42px;
  height: 42px;
  border-radius: 2px;
  border: 1px solid rgba(90, 74, 60, .16);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.sw:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(35, 24, 18, .14); }
.sw input { position: absolute; inset: -8px; opacity: 0; cursor: pointer; }

/* ============================================================
   13. 视图切换动效
   ============================================================ */
.view {
  animation: viewIn .42s var(--ease) both;
}
@keyframes viewIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

/* 列表项错峰入场 */
.stagger > * {
  opacity: 0;
  animation: rowIn .5s var(--ease) both;
}
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .09s; }
.stagger > *:nth-child(3) { animation-delay: .14s; }
.stagger > *:nth-child(4) { animation-delay: .19s; }
.stagger > *:nth-child(5) { animation-delay: .24s; }
.stagger > *:nth-child(6) { animation-delay: .29s; }
.stagger > *:nth-child(7) { animation-delay: .34s; }
.stagger > *:nth-child(n+8) { animation-delay: .38s; }

@keyframes rowIn {
  0%   { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: none; }
}

/* ============================================================
   14. 提示 / 弹层
   ============================================================ */
.toast {
  background: var(--ab-ink-900);
  color: #f3ece2;
  border-radius: 2px;
  padding: 11px 20px;
  font-size: 12.5px;
  letter-spacing: .4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  border-left: 3px solid var(--ab-gold);
}

/* ============================================================
   15. 无障碍
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .stagger > *, .view { opacity: 1; }
}

/* ============================================================
   16. 窄屏
   ============================================================ */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr) !important; }
  #ykDomains { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .stats, #ykDomains { grid-template-columns: 1fr !important; }
  .grid2 { grid-template-columns: 1fr !important; }
}