/* =====================================================================
   Kaspi 比价调价系统 · 科技感主题
   - 变量主题体系：全套 token 以 --kzp-* CSS 变量定义，深 / 浅两套
   - Bootstrap 5.3 原生深色模式：<html data-bs-theme="dark|light">
   - 默认深色；切换按钮写入 localStorage + 服务端 settings 表
   ===================================================================== */

/* ---------- 深色主题 token（默认） ---------- */
:root,
[data-bs-theme="dark"] {
  --kzp-bg-0: #12151C;          /* 页面底：深空炭灰 */
  --kzp-bg-1: #171b25;          /* 渐变收尾：炭灰 */
  --kzp-surface: #1b1f29;       /* 卡片底：炭灰 */
  --kzp-surface-2: #222836;     /* 抬升层：表头 / card-header */
  --kzp-surface-3: #2a3040;     /* 悬停层 */
  --kzp-border: #343b4f;        /* 边框线：炭灰蓝 */
  --kzp-border-soft: rgba(170, 178, 196, .14);
  --kzp-text: #F0EBDF;          /* 主文字：米沙白 */
  --kzp-text-2: #b7b2a4;        /* 次要文字：浅灰 */
  --kzp-text-3: #8b8778;        /* 辅助文字 */
  --kzp-accent: #f14635;        /* Kaspi 红：品牌点缀 */
  --kzp-accent-2: #ff7a54;      /* 点缀渐变尾 */
  --kzp-accent-dim: rgba(241, 70, 53, .13);
  --kzp-tech: #0E5CB5;          /* 哈萨克民族蓝：主品牌色 */
  --kz-gold: #C9A858;           /* 哑光浅金：民族点缀 */
  --kz-gold-dim: rgba(201, 168, 88, .12);
  --kz-orn-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12' viewBox='0 0 36 12'%3E%3Cg fill='none' stroke='%23C9A858' stroke-width='1' stroke-linecap='round' opacity='0.5'%3E%3Cpath d='M4 10.2 C4 4.8 7 2.6 9.6 3.5 C11.8 4.3 11.7 7.1 10 8 C8.6 8.7 7.2 7.8 7.5 6.4'/%3E%3Cpath d='M32 10.2 C32 4.8 29 2.6 26.4 3.5 C24.2 4.3 24.3 7.1 26 8 C27.4 8.7 28.8 7.8 28.5 6.4'/%3E%3C/g%3E%3Cpath d='M18 4 L19.8 6 L18 8 L16.2 6 Z' fill='%23C9A858' opacity='0.65'/%3E%3C/svg%3E");
  --kz-orn-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12' viewBox='0 0 36 12'%3E%3Cg fill='none' stroke='%230E5CB5' stroke-width='1' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M4 10.2 C4 4.8 7 2.6 9.6 3.5 C11.8 4.3 11.7 7.1 10 8 C8.6 8.7 7.2 7.8 7.5 6.4'/%3E%3Cpath d='M32 10.2 C32 4.8 29 2.6 26.4 3.5 C24.2 4.3 24.3 7.1 26 8 C27.4 8.7 28.8 7.8 28.5 6.4'/%3E%3C/g%3E%3Cpath d='M18 4 L19.8 6 L18 8 L16.2 6 Z' fill='%230E5CB5' opacity='0.7'/%3E%3C/svg%3E");
  --kz-orn-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='4' viewBox='0 0 24 4'%3E%3Cpath d='M0 2.6 Q6 1 12 2 Q18 3 24 1.6' fill='none' stroke='%23C9A858' stroke-width='1' opacity='0.55'/%3E%3C/svg%3E");
  --kzp-cyan: #45c8f5;
  --kzp-green: #3ddc97;
  --kzp-amber: #ffb020;
  --kzp-violet: #a78bfa;       /* 科技紫 */
  --kzp-soft-blue: rgba(14, 92, 181, .18);
  --kzp-soft-violet: rgba(167, 139, 250, .16);
  --kzp-soft-green: rgba(61, 220, 151, .16);
  --kzp-soft-red: rgba(241, 70, 53, .14);
  --kzp-soft-amber: rgba(255, 176, 32, .16);
  --kzp-nav-0: #0e1117;
  --kzp-nav-1: #161a23;
  --kzp-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --kzp-glow-red: rgba(241, 70, 53, .10);
  --kzp-glow-blue: rgba(14, 92, 181, .12);
  --kzp-input-bg: #161a23;

  /* Bootstrap 变量覆盖 */
  --bs-body-bg: var(--kzp-bg-0);
  --bs-body-color: var(--kzp-text);
  --bs-border-color: var(--kzp-border);
  --bs-secondary-color: var(--kzp-text-2);
  --bs-tertiary-color: var(--kzp-text-3);
  --bs-primary: #0E5CB5;
  --bs-primary-rgb: 14, 92, 181;
  --bs-link-color: #8fb0ff;
  --bs-link-color-rgb: 143, 176, 255;
  --bs-link-hover-color: #b9ccff;
  --bs-card-bg: var(--kzp-surface);
  --bs-card-border-color: var(--kzp-border);
  --bs-table-bg: transparent;
  --bs-table-color: var(--kzp-text);
  --bs-table-border-color: var(--kzp-border);
  --bs-table-striped-bg: rgba(139, 152, 180, .05);
  --bs-table-hover-bg: var(--kzp-accent-dim);
  --bs-dropdown-bg: var(--kzp-surface-2);
  --bs-dropdown-border-color: var(--kzp-border);
  --bs-dropdown-link-color: var(--kzp-text);
  --bs-dropdown-link-hover-bg: var(--kzp-surface-3);
  --bs-modal-bg: var(--kzp-surface);
  --bs-body-bg-rgb: 10, 16, 31;
  color-scheme: dark;
}

/* ---------- 浅色主题 token ---------- */
[data-bs-theme="light"] {
  --kzp-bg-0: #edf1f8;
  --kzp-bg-1: #e2e9f4;
  --kzp-surface: #ffffff;
  --kzp-surface-2: #f2f5fb;
  --kzp-surface-3: #e8eef9;
  --kzp-border: #d9e1f0;
  --kzp-border-soft: rgba(27, 39, 64, .10);
  --kzp-text: #1b2740;
  --kzp-text-2: #57678a;
  --kzp-text-3: #8b98b3;
  --kzp-accent: #f14635;
  --kzp-accent-2: #ff7a54;
  --kzp-accent-dim: rgba(241, 70, 53, .07);
  --kzp-tech: #2f6df6;
  --kzp-cyan: #0d9fd6;
  --kzp-green: #189a63;
  --kzp-amber: #d9870b;
  --kzp-violet: #7c5cd6;
  --kzp-soft-blue: rgba(47, 109, 246, .12);
  --kzp-soft-violet: rgba(124, 92, 214, .12);
  --kzp-soft-green: rgba(24, 154, 99, .12);
  --kzp-soft-red: rgba(241, 70, 53, .10);
  --kzp-soft-amber: rgba(217, 135, 11, .14);
  --kzp-nav-0: #101a30;
  --kzp-nav-1: #1c2c50;
  --kzp-shadow: 0 8px 24px rgba(27, 39, 64, .10);
  --kzp-glow-red: rgba(241, 70, 53, .08);
  --kzp-glow-blue: rgba(47, 109, 246, .08);
  --kzp-input-bg: #ffffff;

  --bs-body-bg: var(--kzp-bg-0);
  --bs-body-color: var(--kzp-text);
  --bs-border-color: var(--kzp-border);
  --bs-secondary-color: var(--kzp-text-2);
  --bs-tertiary-color: var(--kzp-text-3);
  --bs-primary: #f14635;
  --bs-primary-rgb: 241, 70, 53;
  --bs-link-color: #2f6df6;
  --bs-link-color-rgb: 47, 109, 246;
  --bs-link-hover-color: #1f55c4;
  --bs-card-bg: var(--kzp-surface);
  --bs-card-border-color: var(--kzp-border);
  --bs-table-color: var(--kzp-text);
  --bs-table-border-color: var(--kzp-border);
  --bs-table-striped-bg: rgba(27, 39, 64, .035);
  --bs-table-hover-bg: var(--kzp-accent-dim);
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-link-color: var(--kzp-text);
  --bs-modal-bg: #ffffff;
  --bs-body-bg-rgb: 237, 241, 248;
  color-scheme: light;
}

/* ---------- 页面底 ---------- */
body {
  background:
    radial-gradient(1100px 380px at 88% -6%, var(--kzp-glow-red), transparent 60%),
    radial-gradient(900px 360px at 8% -4%, var(--kzp-glow-blue), transparent 55%),
    linear-gradient(180deg, var(--kzp-bg-1) 0%, var(--kzp-bg-0) 420px, var(--kzp-bg-0) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ---------- 顶栏 ---------- */
.app-navbar {
  background: linear-gradient(135deg, var(--kzp-nav-0) 0%, var(--kzp-nav-1) 100%);
  border-bottom: 3px solid var(--kzp-accent);
  box-shadow: 0 3px 14px rgba(2, 6, 18, .45);
}
.app-navbar .navbar-brand {
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 1.15rem;
}
.app-navbar .navbar-brand::before {
  content: "◈ ";
  color: var(--kzp-accent);
}
.app-navbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .72);
  border-radius: .5rem;
  margin: 0 .1rem;
  padding: .4rem .7rem;
  transition: background .15s ease, color .15s ease;
}
.app-navbar .navbar-nav .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}
.app-navbar .navbar-nav .nav-link.active {
  color: #fff;
  background: var(--kzp-accent-dim);
  box-shadow: inset 0 0 0 1px rgba(241, 70, 53, .45);
}
.app-navbar .navbar-text { color: rgba(255, 255, 255, .65); }
.app-navbar .navbar-toggler { border-color: rgba(255, 255, 255, .25); }
.app-navbar .navbar-toggler-icon {
  filter: invert(1);
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: .55rem;
  color: rgba(255, 255, 255, .8);
  border-color: rgba(255, 255, 255, .25);
}
.theme-toggle:hover { color: #fff; border-color: var(--kzp-accent); background: var(--kzp-accent-dim); }
.nav-actions { padding: .35rem 0; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--kzp-surface);
  border: 1px solid var(--kzp-border-soft);
  border-radius: .9rem;
  box-shadow: var(--kzp-shadow);
}
.card-header {
  background: var(--kzp-surface-2);
  border-bottom: 1px solid var(--kzp-border-soft);
  font-weight: 700;
  color: var(--kzp-text);
}
/* 统计卡片：数字 + 科技感点缀（Tabler 式"数字+迷你趋势位"排布思路，纯 CSS 实现） */
.card .fs-2.fw-bold {
  background: linear-gradient(120deg, var(--kzp-text) 55%, var(--kzp-tech) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .5px;
}
.card .fs-2.fw-bold.text-primary {
  background: linear-gradient(120deg, var(--kzp-accent) 20%, var(--kzp-accent-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card .fs-2.fw-bold.text-danger {
  background: linear-gradient(120deg, #ff5d4d, #ff9a6c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 不支持 background-clip:text 的内核回退为纯色，保证可读 */
@supports not (background-clip: text) {
  .card .fs-2.fw-bold,
  .card .fs-2.fw-bold.text-primary,
  .card .fs-2.fw-bold.text-danger {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* ---------- 仪表盘：差异化数据卡片 ---------- */
.stat-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--sc-soft) 0%, transparent 55%),
    var(--kzp-surface);
  transition: transform .16s ease, box-shadow .16s ease;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sc), transparent 85%);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kzp-shadow), 0 0 26px var(--sc-soft);
}
/* 四卡配色：店铺=蓝 / 商品=紫 / 调价SKU=绿 / 告警=红 */
.stat-blue   { --sc: var(--kzp-tech);   --sc-soft: var(--kzp-soft-blue); }
.stat-violet { --sc: var(--kzp-violet); --sc-soft: var(--kzp-soft-violet); }
.stat-green  { --sc: var(--kzp-green);  --sc-soft: var(--kzp-soft-green); }
.stat-red    { --sc: var(--kzp-accent); --sc-soft: var(--kzp-soft-red); }
.stat-ico {
  width: 46px; height: 46px;
  margin: .1rem auto .55rem;
  border-radius: .85rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--sc);
  background: var(--sc-soft);
  border: 1px solid var(--sc);
  box-shadow: 0 0 16px var(--sc-soft);
}
.stat-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .5px;
  color: var(--sc);
  text-shadow: 0 0 18px var(--sc-soft);
}
/* 告警为 0 时不刺眼：恢复主文字色 */
.stat-num-idle { color: var(--kzp-text); text-shadow: none; }
.stat-label {
  color: var(--kzp-text-2);
  font-size: .85rem;
  margin-top: .3rem;
}
.stat-card .card-body { position: relative; z-index: 1; }

/* ---------- 仪表盘：近7天趋势折线图（纯 SVG，颜色随主题走变量） ---------- */
.tl-tip { color: var(--kzp-text-3); font-size: .8rem; }
.trend-chart { width: 100%; }
.trend-chart svg { width: 100%; height: 230px; display: block; }
.tl-grid { stroke: var(--kzp-border-soft); stroke-width: 1; }
.tl-tick { fill: var(--kzp-text-3); font-size: 11px; }
.tl-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tl-success { stroke: var(--kzp-green); filter: drop-shadow(0 0 6px var(--kzp-soft-green)); }
.tl-blocked { stroke: var(--kzp-amber); filter: drop-shadow(0 0 6px var(--kzp-soft-amber)); }
.tl-area { fill: url(#tlAreaGrad); }
.tl-area-stop { stop-color: var(--kzp-green); }
.tl-dot { stroke: var(--kzp-surface); stroke-width: 2; }
.tl-dot-success { fill: var(--kzp-green); }
.tl-dot-blocked { fill: var(--kzp-amber); }
.trend-legend {
  display: flex; align-items: center; justify-content: center;
  gap: .45rem;
  color: var(--kzp-text-2);
  font-size: .85rem;
}
.tl-sw { width: 16px; height: 4px; border-radius: 2px; display: inline-block; }
.tl-sw-success { background: var(--kzp-green); box-shadow: 0 0 8px var(--kzp-soft-green); }
.tl-sw-blocked { background: var(--kzp-amber); box-shadow: 0 0 8px var(--kzp-soft-amber); }

/* ---------- 表格 ---------- */
.table {
  --bs-table-bg: transparent;
  color: var(--kzp-text);
  margin-bottom: 0;
}
.table thead th {
  background: var(--kzp-surface-2);
  color: var(--kzp-text-2);
  border-bottom: 2px solid var(--kzp-accent);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .4px;
  white-space: nowrap;
  padding: .65rem .75rem;
}
.table tbody td { padding: .6rem .75rem; vertical-align: middle; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--kzp-accent-dim); }
.table-sm tbody td { padding: .4rem .5rem; }
.table code {
  color: var(--kzp-cyan);
  background: rgba(69, 200, 245, .10);
  padding: .1em .4em;
  border-radius: .35em;
  font-size: .85em;
}
/* 紧凑表头圆角 */
.card .table thead th:first-child { border-top-left-radius: .55rem; }
.card .table thead th:last-child { border-top-right-radius: .55rem; }
/* 横向滚动兜底：小屏表格不撑破卡片 */
.card-body.p-0 { overflow-x: auto; }

/* ---------- 标题 ---------- */
h1, h2, h3 { font-weight: 800; letter-spacing: .5px; color: var(--kzp-text); }
h1::after, h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--kzp-accent), var(--kzp-accent-2));
  box-shadow: 0 0 12px var(--kzp-glow-red);
}

/* ---------- 按钮 ---------- */
.btn { border-radius: .6rem; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--kzp-accent), var(--kzp-accent-2));
  border: none;
  box-shadow: 0 4px 14px rgba(241, 70, 53, .35);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #d93a2b, #f4653f);
  box-shadow: 0 6px 18px rgba(241, 70, 53, .45);
}
.btn-success {
  background: linear-gradient(135deg, #189a63, var(--kzp-green));
  border: none;
}
.btn-outline-light { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- 表单 ---------- */
.form-control, .form-select {
  border-radius: .6rem;
  background-color: var(--kzp-input-bg);
  border-color: var(--kzp-border);
  color: var(--kzp-text);
}
.form-control::placeholder { color: var(--kzp-text-3); }
.form-control:focus, .form-select:focus {
  background-color: var(--kzp-input-bg);
  border-color: var(--kzp-accent);
  color: var(--kzp-text);
  box-shadow: 0 0 0 .2rem var(--kzp-accent-dim);
}
.form-text { color: var(--kzp-text-3); }
.form-label { color: var(--kzp-text-2); font-weight: 600; }
.input-group-text {
  background: var(--kzp-surface-2);
  border-color: var(--kzp-border);
  color: var(--kzp-text-2);
}

/* ---------- 徽标 ---------- */
.badge { border-radius: .5rem; padding: .35em .65em; font-weight: 600; letter-spacing: .3px; }
.bg-warning { --bs-bg-opacity: 1; }
/* 深色下 warning 徽标提亮，保证可读 */
[data-bs-theme="dark"] .badge.bg-warning { background-color: #b97a0c !important; }

/* ---------- 提示框 / 列表 / 分页 ---------- */
.alert { border-radius: .75rem; border: 1px solid var(--kzp-border-soft); }
.list-group-item { background: var(--kzp-surface); border-color: var(--kzp-border-soft); color: var(--kzp-text); }
.page-link { background: var(--kzp-surface); border-color: var(--kzp-border); color: var(--kzp-text-2); }
.page-link:hover { background: var(--kzp-surface-3); color: var(--kzp-text); border-color: var(--kzp-border); }
.dropdown-menu { border: 1px solid var(--kzp-border-soft); box-shadow: var(--kzp-shadow); }
.modal-content { border: 1px solid var(--kzp-border-soft); box-shadow: var(--kzp-shadow); }
.text-muted { color: var(--kzp-text-2) !important; }

/* 深色下兜底：个别模板残留的浅色工具类，保证可读 */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--kzp-surface-3) !important;
  color: var(--kzp-text) !important;
}
[data-bs-theme="dark"] .badge.bg-light { color: var(--kzp-text) !important; }
[data-bs-theme="dark"] tr.table-warning > * {
  background-color: rgba(255, 176, 32, .13) !important;
  color: var(--kzp-text);
  box-shadow: inset 0 0 0 999px rgba(255, 176, 32, .05);
}
/* 通用柔和徽标（未知状态兜底） */
.badge-soft {
  background: var(--kzp-surface-3);
  color: var(--kzp-text-2);
  border: 1px solid var(--kzp-border);
}

/* code / kbd */
code { font-size: .85em; }
p code, li code, td code { color: var(--kzp-cyan); }

/* 进度条 */
.progress { background: var(--kzp-surface-3); border-radius: .5rem; }
.progress-bar { background: linear-gradient(90deg, var(--kzp-accent), var(--kzp-accent-2)); }

/* 登录页 */
.login-wrap { max-width: 420px; margin: 12vh auto 0; }
.login-brand { text-align: center; margin-bottom: 1.25rem; }
.login-brand .logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 1rem;
  background: linear-gradient(135deg, var(--kzp-accent), var(--kzp-accent-2));
  color: #fff; font-size: 1.6rem; font-weight: 800;
  box-shadow: 0 8px 24px rgba(241, 70, 53, .4);
  margin-bottom: .75rem;
}

/* 页脚留白 */
.pb-5 { padding-bottom: 4rem !important; }

/* ---------- 小屏优先 ---------- */
@media (max-width: 576px) {
  .container-fluid.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
  h3 { font-size: 1.2rem; }
  .card .fs-2 { font-size: 1.5rem !important; }
  .app-navbar .navbar-brand { font-size: 1rem; }
  .table { font-size: .85rem; }
  .table thead th, .table tbody td { padding: .5rem .55rem; }
  .btn { font-weight: 600; }
  .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  /* 仪表盘小屏：卡片 2×2 堆叠、数字图标收紧、图表加高不压扁 */
  .stat-num { font-size: 1.7rem; }
  .stat-ico { width: 40px; height: 40px; font-size: 1.2rem; }
  .stat-label { font-size: .78rem; }
  .trend-chart svg { height: 260px; }
}

/* =====================================================================
   哈萨克轻奢全站升级（2026-10-16）
   - 深色 token 已在上方 :root,[data-bs-theme="dark"] 直接升级（--kzp-* 只改值不改名）
   - 本段为追加：全局字体 / 侧边栏 / 卡片 / 表格 / 按钮徽标 / 羊角纹点缀 / 移动端
   - 浅色主题 [data-bs-theme="light"] 未动；以下规则走变量，浅色自动降级
   - 红线：民族元素只做细节点缀，科技感优先；纹样绝不遮挡文字/按钮/输入框
   ===================================================================== */

/* ---------- 全局字体：西里尔 / 哈萨克字母清晰 ---------- */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, sans-serif;
}

/* ---------- 侧边栏布局（模板接入约定） ----------
   aside.app-sidebar
     .sidebar-brand（品牌）
     nav.sidebar-nav > a.nav-link（.active 为当前页）
     .sidebar-footer（底部，内放 .locale-switch 国旗盒）
   main.main-content（主内容区）
   button.sidebar-toggle（汉堡按钮，窄屏显示，切换 body.sidebar-open）
   .sidebar-backdrop（窄屏遮罩） */
.app-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 248px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--kzp-nav-0) 0%, var(--kzp-nav-1) 100%);
  border-right: 1px solid rgba(201, 168, 88, .20);
  box-shadow: 6px 0 28px rgba(0, 0, 0, .35);
  transition: transform .22s ease;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.15rem;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .5px;
  border-bottom: 1px solid rgba(201, 168, 88, .16);
}
.sidebar-brand::before {
  content: "◈";
  color: var(--kz-gold);
}
.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .8rem .7rem;
}
.app-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .85rem;
  margin-bottom: .2rem;
  border-radius: .65rem;
  border: 1px solid transparent;
  color: rgba(240, 235, 223, .66);
  font-weight: 600;
  font-size: .92rem;
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.app-sidebar .nav-link:hover {
  color: #fff;
  background: rgba(14, 92, 181, .18);
  border-color: rgba(14, 92, 181, .35);
}
.app-sidebar .nav-link.active {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(14, 92, 181, .92), rgba(14, 92, 181, .55));
  border-color: rgba(130, 175, 255, .55);
  box-shadow: 0 0 16px rgba(14, 92, 181, .35), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.sidebar-footer {
  position: relative;
  padding: .95rem .9rem;
  border-top: 1px solid rgba(201, 168, 88, .16);
}
/* 菜单底部分隔：羊角纹细线点缀 */
.sidebar-footer::before {
  content: "";
  position: absolute;
  top: -7px; left: 18px; right: 18px;
  height: 12px;
  background: var(--kz-orn-gold) repeat-x center / 36px 12px;
  opacity: .45;
  pointer-events: none;
}
/* 国旗盒：细金色民族线条边框（顶栏 / 侧边栏通用） */
.locale-switch {
  border: 1px solid rgba(201, 168, 88, .45);
  outline: 1px solid rgba(201, 168, 88, .14);
  outline-offset: 2px;
  border-radius: .6rem;
  padding: 2px;
}
.app-sidebar .locale-switch {
  display: flex;
  width: 100%;
  background: rgba(0, 0, 0, .25);
}
.app-sidebar .locale-switch .locale-flag { flex: 1 1 0; }
.locale-switch .locale-flag.active { outline: 2px solid var(--kz-gold); }
/* 主内容区自适应 */
.main-content {
  margin-left: 248px;
  min-height: 100vh;
}
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-106%); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: .6rem;
    border: 1px solid rgba(255, 255, 255, .25);
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 1.25rem;
    line-height: 1;
  }
  body.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1039;
    background: rgba(0, 0, 0, .55);
  }
}

/* ---------- 全站卡片：炭灰轻奢 ---------- */
.card {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(201, 168, 88, .18);
  box-shadow: var(--kzp-shadow), 0 0 18px rgba(201, 168, 88, .06);
  transition: box-shadow .18s ease, border-color .18s ease;
}
/* 卡片顶部：羊角纹细线 + 金蓝渐变（平时淡淡；stat 卡片保留原有配色条） */
.card:not(.stat-card)::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background:
    var(--kz-orn-wave) repeat-x center / 24px 4px,
    linear-gradient(90deg, transparent, rgba(201, 168, 88, .35) 25%, rgba(14, 92, 181, .45) 50%, rgba(201, 168, 88, .35) 75%, transparent);
  opacity: .65;
  pointer-events: none;
}
.card:hover {
  border-color: rgba(201, 168, 88, .45);
  box-shadow: var(--kzp-shadow), 0 0 26px rgba(201, 168, 88, .16), 0 0 34px rgba(14, 92, 181, .14);
}

/* ---------- 表格：极淡金隔行 + 表头羊角纹细线 ---------- */
.table { --bs-table-striped-bg: rgba(201, 168, 88, .05); }
.table tbody tr:nth-child(even) > * { background-color: rgba(201, 168, 88, .05); }
.table.table thead th {
  background:
    var(--kz-orn-wave) repeat-x bottom center / 24px 4px,
    var(--kzp-surface-2);
  padding: .65rem .75rem .85rem;
}

/* ---------- 按钮 / 输入框 / 徽标 / 分页：蓝金 ---------- */
.btn-primary {
  background: linear-gradient(135deg, #0b4a94, var(--kzp-tech));
  border: none;
  box-shadow: 0 4px 14px rgba(14, 92, 181, .40);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, var(--kzp-tech), #2f7bd9);
  box-shadow: 0 6px 18px rgba(14, 92, 181, .50);
  color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--kzp-tech);
  box-shadow: 0 0 0 .2rem rgba(14, 92, 181, .22);
}
.badge.bg-primary { background-color: var(--kzp-tech) !important; }
.page-item.active .page-link {
  background-color: var(--kzp-tech);
  border-color: var(--kzp-tech);
  color: #fff;
  box-shadow: 0 0 12px rgba(14, 92, 181, .35);
}

/* ---------- 仪表盘收敛：数字统一哈萨克蓝，差异化微光克制 ---------- */
.stat-num { color: var(--kzp-tech); text-shadow: 0 0 14px rgba(14, 92, 181, .30); }
.stat-num-hl { color: inherit; font-weight: 800; }
.stat-num-idle { color: var(--kzp-text); text-shadow: none; }
.stat-ico { box-shadow: 0 0 10px var(--sc-soft); }
.stat-card:hover { box-shadow: var(--kzp-shadow), 0 0 18px var(--sc-soft); }
/* 数据模块边角：羊角纹小点缀（右上 span 版，与右下 ::after 版错开位置） */
.stat-card { position: relative; }
.stat-corner {
  position: absolute;
  top: 10px; right: 12px;
  width: 30px; height: 10px;
  background: var(--kz-orn-gold) no-repeat center / contain;
  opacity: .30;
  pointer-events: none;
}
/* 数据模块边角：羊角纹小点缀 */
.stat-card .card-body::after {
  content: "";
  position: absolute;
  right: 12px; bottom: 10px;
  width: 34px; height: 11px;
  background: var(--kz-orn-gold) no-repeat center / contain;
  opacity: .35;
  pointer-events: none;
}

/* ---------- 分割线 / 小标题纹样工具类（模板按需使用） ---------- */
hr.kz-div {
  border: 0;
  height: 12px;
  margin: 1.25rem 0;
  background: var(--kz-orn-gold) repeat-x center / 36px 12px;
  opacity: .55;
}
.kz-orn { display: inline-flex; align-items: center; gap: .55rem; }
.kz-orn::before {
  content: "";
  width: 34px; height: 11px;
  flex: none;
  background: var(--kz-orn-gold) no-repeat center / contain;
  opacity: .45;
}

/* ---------- 移动端收紧 ---------- */
@media (max-width: 576px) {
  .card { border-radius: 12px; }
  .card-body { padding: .85rem; }
  .card:not(.stat-card)::before { left: 10px; right: 10px; }
  .stat-card .card-body::after { display: none; }
  .app-sidebar { width: 232px; }
}

/* 语言切换国旗（登录页/改密页也用，base.html 内联样式之外的通用版） */
.locale-flag{font-size:16px;line-height:1;padding:4px 6px;opacity:.55}
.locale-flag:hover{opacity:1}
.locale-flag.active{opacity:1;outline:2px solid var(--bs-primary);border-radius:6px}