/* ============================================================
   贵金属柜台管理系统 · 金色主题设计系统（纯视觉层，不影响业务逻辑）
   设计规范来源：design/design-system.html · 2026-08-01
   ============================================================ */

/* ── 设计 Token ── */
:root{
  /* 品牌金 10 阶 */
  --gold-50:#FBF7EF;  --gold-100:#F5EBD7;  --gold-200:#EAD8B2;
  --gold-300:#DEC489;  --gold-400:#D2B064;  --gold-500:#C6A45C;
  --gold-600:#A9873F;  --gold-700:#8A6C31;  --gold-800:#6B5226;
  --gold-900:#4C3A1C;
  /* 中性墨 */
  --ink-900:#1A1814;  --ink-800:#262320;  --ink-700:#3B3733;
  --ink-600:#57524C;  --ink-500:#7A746D;  --ink-400:#9C958C;
  --ink-300:#C2BCB3;  --ink-200:#E2DDD4;  --ink-100:#F1EDE5;
  /* 背景与表面 */
  --bg:#F7F4EE;  --surface:#FFFFFF;  --surface-soft:#FBF9F4;
  /* 语义色 */
  --success:#2F9E5F; --success-bg:#E8F5EE;
  --warning:#D98A2B; --warning-bg:#FCF1E0;
  --danger:#D64545;  --danger-bg:#FCECEC;
  --info:#3D7ED9;    --info-bg:#EAF1FB;
  /* 阴影 */
  --shadow-sm:0 1px 3px rgba(26,24,20,.06),0 1px 2px rgba(26,24,20,.04);
  --shadow-md:0 4px 12px rgba(26,24,20,.08),0 2px 4px rgba(26,24,20,.05);
  --shadow-lg:0 12px 32px rgba(26,24,20,.12),0 4px 8px rgba(26,24,20,.06);
  /* 圆角 */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:999px;
  /* 字体 */
  --font:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",system-ui,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  /* 间距 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
}

/* ── Bootstrap 变量覆盖（全站换肤基础） ── */
:root{
  --bs-primary:var(--gold-600);
  --bs-primary-rgb:169,135,63;
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--ink-800);
  --bs-border-color:var(--ink-200);
  --bs-body-font-family:var(--font);
  --bs-link-color:var(--gold-700);
  --bs-link-hover-color:var(--gold-900);
  --bs-focus-ring-color:rgba(198,164,92,.25);
  --bs-btn-border-radius:var(--r-sm);
  --bs-card-border-radius:var(--r-md);
}

/* ── 全局基础 ── */
body{
  background:var(--bg);
  font-family:var(--font);
  color:var(--ink-800);
}
*:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }

/* ── 按钮 ── */
.btn{ border-radius:var(--r-sm); transition:all .18s ease; font-weight:500; }
.btn-primary{ background:var(--gold-600); border-color:var(--gold-600); color:#fff; }
.btn-primary:hover,.btn-primary:focus{ background:var(--gold-700); border-color:var(--gold-700); color:#fff; box-shadow:var(--shadow-md); }
.btn-outline-primary{ color:var(--gold-700); border-color:var(--gold-400); }
.btn-outline-primary:hover{ background:var(--gold-600); border-color:var(--gold-600); color:#fff; }
.btn-success{ background:var(--success); border-color:var(--success); }
.btn-success:hover{ background:#278a52; border-color:#278a52; }
.btn-danger{ background:var(--danger); border-color:var(--danger); }
.btn-danger:hover{ background:#b63a3a; border-color:#b63a3a; }
.btn-warning{ background:var(--warning); border-color:var(--warning); color:#fff; }
.btn-warning:hover{ background:#c27a22; border-color:#c27a22; color:#fff; }
.btn-info{ background:var(--info); border-color:var(--info); color:#fff; }
.btn-info:hover{ background:#326cb8; border-color:#326cb8; color:#fff; }
.btn-secondary{ background:var(--surface); border-color:var(--ink-300); color:var(--ink-800); }
.btn-secondary:hover{ background:var(--surface-soft); border-color:var(--ink-500); color:var(--ink-900); }
.btn-outline-secondary{ color:var(--ink-600); border-color:var(--ink-300); }
.btn-outline-secondary:hover{ background:var(--ink-100); color:var(--ink-900); border-color:var(--ink-400); }
.btn-outline-light{ border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.85); }
.btn-outline-light:hover{ background:rgba(255,255,255,.08); color:#fff; }
.btn-outline-warning{ color:var(--gold-700); border-color:var(--gold-300); }
.btn-outline-warning:hover{ background:var(--gold-100); color:var(--gold-800); border-color:var(--gold-400); }
.btn-outline-danger{ color:var(--danger); border-color:var(--danger); }
.btn-outline-danger:hover{ background:var(--danger); color:#fff; }
.btn-link{ color:var(--gold-700); }
.btn-link:hover{ color:var(--gold-900); }

/* ── 卡片 ── */
.card{ border-color:var(--ink-200); border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
.card-header{ border-bottom:1px solid var(--ink-200); background:var(--surface-soft); }
.card-title{ color:var(--ink-900); font-weight:600; }

/* ── 后台侧边栏（深墨 + 金色高亮） ── */
.sidebar{
  background:linear-gradient(180deg,#1A1814 0%,#242119 100%) !important;
  color:#E8E2D6;
}
.sidebar .logo h4{ color:#F5EDDD; }
.sidebar .logo small{ color:rgba(232,226,214,.45); }
.sidebar .nav-section{ color:rgba(232,226,214,.35); letter-spacing:.14em; }
.sidebar .nav-item{ color:rgba(232,226,214,.65); border-left:3px solid transparent; }
.sidebar .nav-item:hover{ background:rgba(255,255,255,.05); color:#F5EDDD; }
.sidebar .nav-item.active{
  background:linear-gradient(90deg,rgba(198,164,92,.18),transparent);
  color:var(--gold-300) !important;
  border-left-color:var(--gold-500);
}
.sidebar .nav-item.active .badge{ background:var(--gold-600); color:#fff; }
.sidebar .nav-item .badge{ background:rgba(255,255,255,.15); color:#E8E2D6; }

/* ── 后台内容区 ── */
.main-content .page-header{ border-bottom:1px solid var(--ink-200); }
.main-content .page-header h2{ color:var(--ink-900); }
.content-card{
  background:var(--surface);
  border:1px solid var(--ink-200);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.content-card .card-title{ color:var(--ink-900); border-bottom:2px solid var(--ink-100); }
.info-card{
  background:var(--surface);
  border:1px solid var(--ink-200);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.info-card .value{ color:var(--ink-900); }
.info-card .label{ color:var(--ink-500); }

/* ── 统计卡 ── */
.stat-card{
  background:var(--surface);
  border:1px solid var(--ink-200);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.stat-card .stat-number{ color:var(--ink-900); }
.stat-card .stat-label{ color:var(--ink-500); }
.stat-card.gold,.stat-card.gold-accent{ border-top:3px solid var(--gold-500); background:linear-gradient(180deg,#FDF8EC,var(--surface)); }
.stat-card.blue{ background:var(--info-bg); border-color:#c9dcf4; }
.stat-card.blue .stat-number{ color:#1a5a8a; }
.stat-card.purple{ background:#F0E8FE; border-color:#D9C5F0; }
.stat-card.purple .stat-number{ color:#6a3a8a; }
.stat-card.green{ background:var(--success-bg); border-color:#c5e0d0; }
.stat-card.green .stat-number{ color:#1a6a3a; }

/* ── 表格（后台 + PC 客户端） ── */
.table-responsive-custom{
  border:1px solid var(--ink-200);
  border-radius:8px;
  background:var(--surface);
}
.table-custom thead th{
  background:var(--surface-soft);
  color:var(--ink-600);
  border-bottom:2px solid var(--ink-200);
}
.table-custom tbody td{ border-bottom:1px solid var(--ink-100); }
.table-custom tbody tr:nth-of-type(even) td{ background:var(--surface-soft); }
.table-custom tbody tr:hover td{ background:var(--gold-50) !important; }
.table .thead-light th,.table thead th{ background:var(--surface-soft); color:var(--ink-600); }
.table td,.table th{ border-color:var(--ink-100); }
.table-hover tbody tr:hover{ background:var(--gold-50); }
/* 数字列等宽（克重/积分/编号） */
.mono,.stat-number,.wish-weight,td .badge,.num,.weight-num{ font-family:var(--mono); }

/* ── 表单控件 ── */
.form-control,.form-select{
  border:1.5px solid var(--ink-300);
  border-radius:var(--r-sm);
  font-family:var(--font);
}
.form-control:focus,.form-select:focus{
  border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(198,164,92,.18);
}
.form-control::placeholder{ color:var(--ink-400); }

/* ── 徽章（语义色映射） ── */
.badge{ border-radius:var(--r-full); font-weight:600; padding:4px 10px; }
.bg-success{ background-color:var(--success) !important; }
.bg-warning{ background-color:var(--warning) !important; }
.bg-danger{ background-color:var(--danger) !important; }
.bg-info{ background-color:var(--info) !important; }
.bg-primary{ background-color:var(--gold-600) !important; }
.bg-secondary{ background-color:var(--ink-500) !important; }
.bg-dark{ background-color:var(--ink-900) !important; }
.badge.bg-warning{ color:#fff; }
.badge.bg-warning.text-dark{ color:var(--ink-900) !important; background-color:var(--gold-200) !important; }

/* ── 弹窗 ── */
.modal-content{ border-radius:var(--r-md); border:1px solid var(--ink-200); box-shadow:var(--shadow-lg); }
.modal-header{ background:var(--surface-soft); border-bottom:1px solid var(--ink-200); }
.modal-header .modal-title{ color:var(--ink-900); font-weight:600; }

/* ── 提示条（复称差异） ── */
.reweigh-row td,.reweigh-row{ background:#FFF9EC !important; }
.reweigh-row td{ border:1px solid #FFE082; }

/* ── 告警 ── */
.alert{ border-radius:var(--r-md); }
.alert-success{ background:var(--success-bg); border-color:#c5e0d0; color:#1b5e20; }
.alert-danger{ background:var(--danger-bg); border-color:#f5c2c2; color:#b71c1c; }
.alert-warning{ background:var(--warning-bg); border-color:#f0d8a0; color:#7a5c00; }
.alert-info{ background:var(--info-bg); border-color:#c9dcf4; color:#1a5a8a; }

/* ── 下拉菜单 ── */
.dropdown-menu{ border-color:var(--ink-200); border-radius:var(--r-md); box-shadow:var(--shadow-md); }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--gold-50); color:var(--ink-900); }

/* ── 导航（PC 客户端） ── */
.navbar{ background:#1A1814 !important; }
.navbar-brand{ color:#F5EDDD !important; }
.navbar .nav-greeting{ color:rgba(232,226,214,.6) !important; }
.navbar .nav-greeting strong{ color:var(--gold-300); }

/* ── 移动端（client/mobile） ── */
body{ background:var(--bg); }
.bottom-nav{ background:var(--surface); border-top:1px solid var(--ink-200); }
.nav-tab{ color:var(--ink-400); position:relative; }
.nav-tab.active{ color:var(--gold-600); font-weight:600; }
.nav-tab.active::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--gold-400),var(--gold-600));
}
.nav-tab.active .bi{ color:var(--gold-600); }
.m-card{
  background:var(--surface);
  border:1px solid var(--ink-200);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.m-card-title{ color:var(--ink-900); border-bottom:1px solid var(--ink-100); }
.m-card-title .bi{ color:var(--gold-600); }
/* 移动端深墨渐变头部卡 */
.m-card.gold-hero,.gold-hero-card{
  background:linear-gradient(135deg,#1A1814,#3B3529) !important;
  border:none !important;
  color:#F5EDDD;
}
.m-card.gold-hero .label,.gold-hero-card .label{ color:rgba(245,237,221,.6); }
.m-card.gold-hero .num,.gold-hero-card .num{ color:var(--gold-300); font-family:var(--mono); }
/* 快捷操作宫格图标 */
.tool-icon.gold,.tool-icon.info{ background:var(--gold-100); color:var(--gold-800); }
.tool-icon.gold-main{ background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); color:#fff; box-shadow:0 2px 8px rgba(198,164,92,.35); }
.tool-item:hover .tool-icon{ transform:translateY(-2px); }
.tool-icon{ transition:transform .15s ease; }
/* 移动端状态徽章 */
.status-badge{ border-radius:var(--r-full); font-weight:600; }
/* 移动端按钮 */
.btn{ border-radius:var(--r-sm); }

/* ── 心愿墙 ── */
.wish-card{ border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
.featured-badge{ background:linear-gradient(135deg,var(--gold-400),var(--gold-600)) !important; color:#fff !important; }
.vote-btn.active.vote-like{ background:var(--success-bg); color:var(--success); border-color:var(--success); }
.vote-btn.active.vote-dislike{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }

/* ── 动效（尊重减少动态） ── */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ── 响应式微调 ── */
@media (max-width:768px){
  .content-card{ padding:14px; }
  .table-custom thead th{ font-size:12px; }
}