/* ============================================================
   tech.css —— 浅色科技商务风（在 tokens/ui/console 之后引入）
   只覆盖变量与关键控件外观，不动结构；删掉这个 <link> 即回到默认皮肤。
   风格：白底 + 蓝灰网格 + 青蓝渐变主色 + 细描边卡片 + 轻发光
   ============================================================ */

body.tech {
  --bg: #f4f7fd;
  --bg-2: #eaf0fa;
  --surface: #ffffff;
  --surface-2: #f8faff;
  --text: #0e1c3a;
  --text-2: #4a5a7d;
  --text-3: #7d8bab;
  --text-4: #a9b4cc;
  --line: #e2e9f6;
  --line-2: #cfdcf2;
  --brand: #0ea5c6;
  --brand-hover: #0b8fae;
  --brand-active: #0a7c98;
  --brand-tint: rgba(14, 165, 198, .08);
  --brand-tint-2: rgba(14, 165, 198, .16);
  --ok: #0f9d63;   --ok-bg: #e6f7ef;
  --warn: #c47c07; --warn-bg: #fff5e3;
  --danger: #e0405a; --danger-bg: #fdedef;
  --gold: #d99a06; --gold-bg: #fff7e3;
  --shadow-xs: 0 1px 2px rgba(16, 34, 74, .06);
  --shadow-sm: 0 4px 14px rgba(16, 34, 74, .07);
  --shadow-md: 0 12px 30px rgba(16, 34, 74, .10);
  --shadow-lg: 0 22px 60px rgba(16, 34, 74, .16);

  /* 浅色科技底：淡蓝灰网格 + 两处极淡的青/靛辉光 */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(14, 165, 198, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 198, .045) 1px, transparent 1px),
    radial-gradient(900px 420px at 85% -10%, rgba(14, 165, 198, .10), transparent 60%),
    radial-gradient(760px 420px at 5% 108%, rgba(79, 124, 255, .10), transparent 60%);
  background-size: 32px 32px, 32px 32px, auto, auto;
  color: var(--text);
}

/* ---- 侧栏：浅色玻璃 + 青蓝激活胶囊 ---- */
body.tech .c-side {
  background: linear-gradient(180deg, #fbfdff 0%, #f1f6fe 60%, #e9f0fb 100%);
  border-right: 1px solid var(--line);
}
body.tech .c-brand { border-bottom-color: var(--line); }
body.tech .c-brand b { color: var(--text); }
body.tech .c-brand span { color: var(--text-3); }
body.tech .c-brand__mark {
  background: linear-gradient(135deg, #22d3ee, #4f7cff);
  box-shadow: 0 6px 16px rgba(34, 211, 238, .35);
}
body.tech .c-nav__label { color: #9aa8c6; }
body.tech .c-nav__item { color: var(--text-2); }
body.tech .c-nav__item:hover { background: var(--brand-tint); color: var(--brand-hover); }
body.tech .c-nav__item.is-active {
  background: linear-gradient(90deg, rgba(14, 165, 198, .14), rgba(79, 124, 255, .08));
  color: #0b7c96; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 198, .25);
}
body.tech .c-nav__item.is-active::before {
  background: linear-gradient(180deg, #22d3ee, #4f7cff);
  box-shadow: 0 0 10px rgba(34, 211, 238, .5);
}
body.tech .c-side__foot { border-top-color: var(--line); color: var(--text-3); }

/* ---- 顶栏：白玻璃 ---- */
body.tech .c-top {
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px) saturate(150%);
}
body.tech .c-crumb { color: var(--text-3); }
body.tech .c-crumb b { color: var(--text); }
body.tech .c-user:hover { background: var(--brand-tint); }

/* ---- 卡片：细描边 + 顶部青色渐变高光条 ---- */
body.tech .card { position: relative; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); overflow: hidden; }
body.tech .card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, rgba(34, 211, 238, .9), rgba(79, 124, 255, .55), transparent 72%);
}
body.tech .card__hd { border-bottom-color: var(--line); }
body.tech .page-hd h1 { color: var(--text); letter-spacing: .3px; }

/* ---- 表单控件 ---- */
body.tech .input, body.tech .select, body.tech .textarea, body.tech .search, body.tech .stepper {
  background: #fff; border-color: var(--line-2); color: var(--text);
}
body.tech .input:hover, body.tech .select:hover, body.tech .search:hover { border-color: #b9cbe8; }
body.tech .input:focus, body.tech .select:focus, body.tech .textarea:focus, body.tech .search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint), 0 4px 14px rgba(14, 165, 198, .12);
}
body.tech .stepper button { background: #fff; }
body.tech .stepper button:hover { background: var(--brand-tint); color: var(--brand-hover); }

/* ---- 按钮：主按钮＝青蓝渐变 + 轻发光 ---- */
body.tech .btn { background: #fff; border-color: var(--line-2); color: var(--text-2); }
body.tech .btn:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-hover); }
body.tech .btn--primary {
  background: linear-gradient(135deg, #22d3ee, #4f7cff);
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 6px 18px rgba(34, 211, 238, .28);
}
body.tech .btn--primary:hover { filter: brightness(1.05); color: #fff; }
body.tech .btn--danger { background: #fff; border-color: #f3c3cb; color: var(--danger); }
body.tech .btn--danger:hover { background: var(--danger-bg); border-color: #eb9aa8; }
body.tech .btn--plain { border-color: transparent; background: transparent; }

/* ---- 表格 ---- */
body.tech .tbl th {
  background: linear-gradient(180deg, #f7faff, #eef4fd);
  color: #5c6c8f; letter-spacing: .3px;
  border-bottom: 1px solid var(--line);
}
body.tech .tbl td { border-bottom: 1px solid #eef2fa; }
body.tech .tbl tbody tr:hover { background: #f5faff; }
body.tech .tbl-id { color: #0b7c96; }
/* 行内可点单元格（照参考站 §40：蓝色文字 + 手型），命中热区是整个 td */
body.tech .tbl td.js-click { color: #0b7c96; }
body.tech .tbl td.js-click:hover { background: #eef7ff; }

/* ---- 分类树：青色短线导轨 ---- */
body.tech .tbl--tree .tree-lv2 > td { background: #f8fbff; }
body.tech .tbl--tree .tree-lv2 .tree-name { position: relative; padding-left: 30px; color: var(--text-2); }
body.tech .tbl--tree .tree-lv2 .tree-name::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 1px;
  background: linear-gradient(90deg, rgba(14, 165, 198, .8), transparent);
}
body.tech .tree-btn { color: var(--brand); }
body.tech .tree-btn:hover { background: var(--brand-tint); color: var(--brand-hover); }

/* ---- 标签：浅底 + 细描边 ---- */
body.tech .tag--ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #bfe9d4; }
body.tech .tag--warn { background: var(--warn-bg); color: var(--warn); border: 1px solid #f2ddb0; }
body.tech .tag--danger { background: var(--danger-bg); color: var(--danger); border: 1px solid #f7c9d1; }
body.tech .tag--info { background: rgba(34, 211, 238, .10); color: #0b7c96; border: 1px solid #bfe8f0; }

/* ---- 弹窗 / 下拉 ---- */
body.tech .modal__box { background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
body.tech .modal__hd { border-bottom-color: var(--line); }
body.tech .modal__ft { background: #f8faff; border-top-color: var(--line); }
body.tech .dd__menu { border-color: var(--line-2); box-shadow: var(--shadow-md); }
body.tech .dd__item:hover { background: var(--brand-tint); color: var(--brand-hover); }
body.tech .note { background: rgba(34, 211, 238, .08); color: #0b7c96; border: 1px solid #cdeaf2; }

/* ============================================================
   立体感加强层（放在最后，覆盖上面的平面规则）
   ============================================================ */

/* 1) 底色不再纯白：冷白偏蓝灰，页面有"下沉"感 */
body.tech {
  --surface: #fdfefe;
  --surface-2: #eff4fc;
  --line: #d5e0f2;
  --line-2: #c3d3ec;
  /* 底色加深一档：带蓝灰渐层 + 更明显的青/靛光晕，避免"苍白" */
  background-color: #e4ebf7;
  background-image:
    linear-gradient(rgba(14, 165, 198, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 198, .06) 1px, transparent 1px),
    linear-gradient(180deg, #eef4fd 0%, #e4ebf7 45%, #dbe4f4 100%),
    radial-gradient(1000px 460px at 88% -12%, rgba(14, 165, 198, .18), transparent 62%),
    radial-gradient(820px 460px at 2% 110%, rgba(79, 124, 255, .16), transparent 62%);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

/* 2) 卡片：渐变面 + 双层阴影 + 顶部高光（像一块浮起的面板） */
body.tech .card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 55%, #f3f8ff 100%);
  border: 1px solid #d5e0f2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 1px 2px rgba(16, 34, 74, .05),
    0 10px 24px -12px rgba(16, 34, 74, .18);
}
body.tech .card__hd {
  background: linear-gradient(180deg, #fbfdff, #f4f8fe);
  border-bottom: 1px solid #e2eaf8;
}

/* 3) 页签（chip）：胶囊做出厚度；选中的是渐变凸起 */
body.tech .chip {
  background: linear-gradient(180deg, #ffffff, #f0f5fd);
  border: 1px solid #d7e2f5;
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(16, 34, 74, .07);
  transition: transform .14s ease, box-shadow .14s ease, color .14s ease;
}
body.tech .chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 #fff inset, 0 6px 14px -6px rgba(16, 34, 74, .28);
  color: #0b7c96; border-color: #bfd4f2;
}
body.tech .chip.is-active {
  background: linear-gradient(180deg, #34cfe8 0%, #2f6ff0 100%);
  border-color: #2f6ff0; color: #fff; font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset,
    0 6px 16px -4px rgba(47, 111, 240, .55);
}
body.tech .chip.is-active .chip__n { opacity: .95; }

/* 4) 下划线页签（tabs）也有块面感 */
body.tech .tabs { border-bottom-color: #e2eaf8; }
body.tech .tabs__it { border-radius: 8px 8px 0 0; }
body.tech .tabs__it:hover { background: linear-gradient(180deg, #f6faff, transparent); }
body.tech .tabs__it.is-active {
  background: linear-gradient(180deg, #eef6ff, transparent);
  border-bottom-color: #2f6ff0;
}

/* 5) 分段控件（seg）：底槽内凹 + 选中项凸起 */
body.tech .seg { background: #e9f0fb; box-shadow: 0 1px 2px rgba(16, 34, 74, .08) inset; }
body.tech .seg__it.is-active {
  background: linear-gradient(180deg, #ffffff, #f2f7ff);
  box-shadow: 0 1px 0 #fff inset, 0 2px 6px -2px rgba(16, 34, 74, .28);
}

/* 6) 按钮：默认是"可点的小方块"，主按钮是凸起渐变 */
body.tech .btn {
  background: linear-gradient(180deg, #ffffff, #f3f7fd);
  border-color: #d7e2f5;
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(16, 34, 74, .07);
}
body.tech .btn:hover {
  background: linear-gradient(180deg, #ffffff, #eaf3ff);
  box-shadow: 0 1px 0 #fff inset, 0 6px 14px -6px rgba(16, 34, 74, .3);
}
body.tech .btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(16, 34, 74, .12) inset; }
body.tech .btn--primary {
  background: linear-gradient(180deg, #34cfe8 0%, #2f6ff0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 8px 18px -6px rgba(47, 111, 240, .55);
}
body.tech .btn--danger { background: linear-gradient(180deg, #fff, #fdf1f3); }

/* 7) 表头：抬起的浅蓝条；行 hover 有浮层感 */
body.tech .tbl th {
  background: linear-gradient(180deg, #f7fbff, #e8f0fd);
  box-shadow: 0 1px 0 #d8e3f6, 0 1px 2px rgba(16, 34, 74, .04) inset;
}
body.tech .tbl tbody tr { transition: background .12s ease, box-shadow .12s ease; }
body.tech .tbl tbody tr:hover {
  background: #f4faff;
  box-shadow: 0 1px 0 #e6eefb inset, 0 -1px 0 #e6eefb inset;
}
body.tech .tbl--wide tbody tr:hover td.td-acts { background: #f4faff; }

/* 8) 输入框：轻微内凹，聚焦时发光 */
body.tech .input, body.tech .select, body.tech .search, body.tech .textarea {
  background: linear-gradient(180deg, #fbfdff, #ffffff);
  box-shadow: 0 1px 2px rgba(16, 34, 74, .05) inset;
}

/* 9) 侧栏：白面板 + 右侧投影，和内容区分开 */
body.tech .c-side {
  /* 完全透明：左右共用同一张页面底纹（网格/渐层完全一致），只用 1px 细线分隔。
     不用 backdrop-filter —— 它会把下面的网格糊成一片灰，导致两边"色差"。 */
  background: transparent;
  backdrop-filter: none;
  border-right: 1px solid rgba(203, 216, 238, .9);
  box-shadow: none;
}
/* ≤1024px 侧栏变成覆盖式抽屉，必须给实底，否则页面内容会从抽屉里透出来 */
@media (max-width: 1024px) {
  body.tech .c-side {
    background: linear-gradient(180deg, #fbfdff 0%, #eef4fd 100%);
    border-right: 0; box-shadow: var(--shadow-lg);
  }
}
body.tech .c-brand { border-bottom: 1px solid rgba(213, 224, 242, .7); }
body.tech .c-side__foot { border-top: 1px solid rgba(213, 224, 242, .7); }

/* 10) 统计卡 / 空态等块面元素一起加厚 */
body.tech .stat {
  background: linear-gradient(180deg, #ffffff, #f7faff);
  border: 1px solid #dde6f6;
  box-shadow: 0 1px 0 #fff inset, 0 8px 20px -12px rgba(16, 34, 74, .22);
}

/* ============================================================
   紧凑化（13）：整体收间距 —— 控件高度 / 卡片 / 筛选 / 表格 / 弹窗
   ============================================================ */
body.tech {
  --ctl-h: 32px;
  --ctl-h-sm: 27px;
  --ctl-h-lg: 40px;
}
body.tech .c-content { padding: 14px 16px; }
body.tech .page-hd { margin-bottom: 10px; }
body.tech .page-hd h1 { font-size: 18px; }
body.tech .page-hd__sub { margin-top: 2px; font-size: 12.5px; }
body.tech .page-hd__actions { gap: 6px; }

body.tech .card__hd { padding: 10px 14px; }
body.tech .card__bd { padding: 12px 14px; }
body.tech .card__ft { padding: 10px 14px; }
body.tech .card__hd--tabs { padding: 8px 14px; }

body.tech .filters { gap: 8px 10px; }
body.tech .fld { gap: 4px; }
body.tech .fld__lb { font-size: 12px; }
body.tech .btn { padding: 0 12px; }
body.tech .btn--sm { padding: 0 9px; }
body.tech .btn--lg { padding: 0 18px; }

body.tech .chips { gap: 6px; padding: 1px; }
body.tech .chip { height: 26px; padding: 0 10px; font-size: 12.5px; }

body.tech .tbl { font-size: 13px; }
body.tech .tbl th { padding: 8px 12px; font-size: 12px; }
body.tech .tbl td { padding: 9px 12px; }
/* 卡片模式：ui.css 的卡片行距是紧凑的 6px，会被上面同优先级的 body.tech .tbl td 盖掉，
   这里按卡片设计恢复；断点与 ui.css 的卡片模式保持一致（≤640）。 */
@media (max-width: 640px) {
  body.tech .tbl--cards tbody td { padding: 6px 0; }
  body.tech .tbl--cards tbody td.td-ck { padding: 0; }                 /* 勾选框绝对定位，不要内边距 */
  body.tech .tbl--cards tbody td.td-main { padding: 2px 30px 8px 0; }  /* 商品主信息整行铺开 */
  body.tech .tbl--cards tbody td.td-acts { padding: 10px 0 0; }        /* 操作区与上面一条分隔线 */
  /* 右上角是勾选框，第一列编号要让位，不然会顶到勾选框上 */
  body.tech .tbl--cards tbody td[data-label="订单号"],
  body.tech .tbl--cards tbody td[data-label="编号"],
  body.tech .tbl--cards tbody td[data-label="商品编号"] { padding-right: 34px; }
}
/* 商品名格不再预留固定宽度：列宽跟着最长的名字收紧（原来是给缩略图留的 180px） */
body.tech .cell-goods { gap: 8px; min-width: 0; }
body.tech .cell-goods__img { width: 32px; height: 32px; }
body.tech .progress { height: 5px; }

body.tech .pager__btn { min-width: 28px; height: 28px; }
body.tech .modal__hd { padding: 12px 16px; }
body.tech .modal__bd { padding: 14px 16px; }
body.tech .modal__ft { padding: 10px 16px; gap: 8px; }
body.tech .stat { padding: 12px 14px; }
body.tech .stat__v { margin-top: 5px; font-size: 21px; }
body.tech .stat__ft { margin-top: 5px; }
body.tech .empty { padding: 36px 16px; }
body.tech .kv__i { padding: 9px 12px; }
body.tech .note { padding: 9px 11px; }