/* app.css —— 全局设计令牌、基础布局与通用类（P16-T09）。
   明亮模式：蓝白卡片语言（浅蓝灰底 + 白色圆角卡 + 蓝色主色 + 图标胶囊侧栏）。
   暗色模式（html.dark）：会员卡黑金（暖黑底 + 雅金字 + 金渐变主色）。
   纯本地，无外网字体/CDN。认证页（登录/注册/找回）走 auth.css 自带的 --qa-* 令牌，不受本文件影响。 */
:root {
  --veei-primary: #2f6bff;
  --veei-primary-hover: #1f56e0;
  --veei-primary-active: #1846bd;
  --veei-primary-soft: #eaf1ff;
  --veei-success: #00a870;
  --veei-success-soft: #e6f7f0;
  --veei-warning: #ed7b2f;
  --veei-warning-soft: #fdf1e6;
  --veei-danger: #e5484d;
  --veei-danger-soft: #fdecec;
  --veei-text: #1d2129;
  --veei-text-sub: #4e5969;
  --veei-text-muted: #86909c;
  --veei-border: #e9ebf0;
  --veei-border-strong: #dcdfe6;
  --veei-bg: #f4f6fb;
  --veei-bg-card: #ffffff;
  --veei-bg-hover: #f5f8ff;
  --veei-header-bg: #ffffff;
  --veei-on-primary: #ffffff;
  --veei-radius: 12px;
  --veei-radius-sm: 8px;
  --veei-radius-pill: 10px;
  --veei-shadow: 0 1px 2px rgba(29, 33, 41, .04), 0 6px 18px rgba(29, 33, 41, .05);
  --veei-shadow-hover: 0 2px 6px rgba(29, 33, 41, .06), 0 10px 26px rgba(47, 107, 255, .10);
  --veei-tile-bg: #eef3ff;
  --veei-sidebar-w: 216px;
  --veei-header-h: 56px;

  /* Element Plus 对齐到本套令牌（EP 的 light-N 是预置色值，需逐个覆盖） */
  --el-color-primary: #2f6bff;
  --el-color-primary-light-3: #6d97ff;
  --el-color-primary-light-5: #97b5ff;
  --el-color-primary-light-7: #c1d3ff;
  --el-color-primary-light-8: #d5e1ff;
  --el-color-primary-light-9: #eaf0ff;
  --el-color-primary-dark-2: #2656cc;
  --el-color-success: #00a870;
  --el-color-warning: #ed7b2f;
  --el-color-danger: #e5484d;
  --el-color-error: #e5484d;
  --el-text-color-primary: #1d2129;
  --el-text-color-regular: #4e5969;
  --el-text-color-secondary: #86909c;
  --el-text-color-placeholder: #a9aeb8;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e9ebf0;
  --el-border-color-lighter: #eef0f4;
  --el-border-color-extra-light: #f2f4f8;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f4f6fb;
  --el-bg-color-overlay: #ffffff;
  --el-fill-color-light: #f7f9fc;
  --el-fill-color-lighter: #fafbfd;
  --el-fill-color-blank: #ffffff;
  --el-border-radius-base: 8px;
  --el-box-shadow-light: 0 6px 18px rgba(29, 33, 41, .10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  background: var(--veei-bg);
  color: var(--veei-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--veei-primary); text-decoration: none; }

/* 应用外壳：顶栏 + 侧栏 + 主区 */
.veei-app { min-height: 100vh; display: flex; flex-direction: column; }
.veei-header {
  height: var(--veei-header-h);
  background: var(--veei-header-bg);
  color: var(--veei-text);
  display: flex;
  align-items: center;
  padding: 0 20px 0 18px;
  gap: 14px;
  border-bottom: 1px solid var(--veei-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.veei-header .brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--veei-text);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.veei-brand-mark {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--veei-primary), #6d97ff);
  color: var(--veei-on-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.veei-brand-mark svg { width: 18px; height: 18px; }
.veei-header .spacer { flex: 1; }
.veei-header .user { font-size: 13px; color: var(--veei-text-sub); }
.veei-body { flex: 1; display: flex; min-height: 0; }
.veei-sidebar {
  width: var(--veei-sidebar-w);
  flex: 0 0 var(--veei-sidebar-w);
  background: var(--veei-bg-card);
  border-right: 1px solid var(--veei-border);
  overflow-y: auto;
  padding: 12px 10px;
  position: sticky;
  top: var(--veei-header-h);
  align-self: flex-start;
  height: calc(100vh - var(--veei-header-h));
}
.veei-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 4px;
  border-radius: var(--veei-radius-pill);
  color: var(--veei-text-sub);
  font-size: 14px;
  line-height: 1.4;
  transition: background .15s, color .15s;
}
.veei-sidebar a:hover { background: var(--veei-bg-hover); color: var(--veei-primary); }
.veei-sidebar a .v-icon, .veei-sidebar a svg { flex: 0 0 auto; opacity: .85; }
.veei-sidebar a.grp,
.veei-sidebar .grp {
  display: block;
  background: none;
  border-radius: 0;
  font-size: 12px;
  color: var(--veei-text-muted);
  padding: 14px 12px 6px;
  margin-bottom: 2px;
  letter-spacing: .5px;
}
.veei-sidebar a.grp:hover { background: none; color: var(--veei-text-muted); }
.veei-sidebar a.active {
  background: var(--veei-primary);
  color: var(--veei-on-primary);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(47, 107, 255, .24);
}
.veei-sidebar a.active:hover { background: var(--veei-primary-hover); color: var(--veei-on-primary); }
.veei-sidebar a.active svg { opacity: 1; }
.veei-main { flex: 1; padding: 20px 24px 28px; overflow-x: hidden; min-width: 0; }
.veei-page-title { margin: 0 0 18px; font-size: 20px; font-weight: 600; letter-spacing: .3px; }

/* 卡片 */
.veei-card {
  background: var(--veei-bg-card);
  border: 1px solid var(--veei-border);
  border-radius: var(--veei-radius);
  box-shadow: var(--veei-shadow);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.veei-card h3 { margin: 0 0 14px; font-size: 15px; }

/* 通用工具类 */
.veei-row { display: flex; gap: 12px; flex-wrap: wrap; }
.veei-col { flex: 1; min-width: 0; }
.veei-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.veei-muted { color: var(--veei-text-muted); font-size: 13px; }
.veei-tag {
  display: inline-block; padding: 1px 9px; border-radius: 6px;
  font-size: 12px; line-height: 20px;
  background: var(--veei-primary-soft); color: var(--veei-primary);
}
.veei-tag.ok { background: var(--veei-success-soft); color: var(--veei-success); }
.veei-tag.warn { background: var(--veei-warning-soft); color: var(--veei-warning); }
.veei-tag.err { background: var(--veei-danger-soft); color: var(--veei-danger); }
.veei-kpi { font-size: 26px; font-weight: 600; letter-spacing: .5px; color: var(--veei-text); }
.veei-empty { text-align: center; color: var(--veei-text-muted); padding: 40px 0; }
.veei-right { margin-left: auto; }
.veei-mt { margin-top: 16px; }
.veei-mb { margin-bottom: 16px; }

/* Dashboard 公用版式：欢迎条 / 图标 KPI / 快捷入口磁贴 */
.veei-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; margin-bottom: 16px;
  border: 1px solid var(--veei-border); border-radius: var(--veei-radius);
  background: linear-gradient(100deg, var(--veei-bg-card) 30%, var(--veei-primary-soft) 100%);
  box-shadow: var(--veei-shadow);
}
.veei-hero-title { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.veei-hero-sub { margin: 0; color: var(--veei-text-muted); font-size: 13px; }
.veei-stat { display: flex; align-items: flex-start; gap: 12px; }
.veei-stat-icon {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: var(--veei-tile-bg); color: var(--veei-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.veei-stat-label { color: var(--veei-text-muted); font-size: 13px; }
.veei-stat-value { font-size: 24px; font-weight: 600; line-height: 1.3; margin-top: 2px; }
.veei-stat-foot { font-size: 12px; color: var(--veei-text-muted); margin-top: 4px; }
.veei-up { color: var(--veei-success); }
.veei-down { color: var(--veei-danger); }
.veei-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.veei-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 8px; border-radius: var(--veei-radius);
  border: 1px solid var(--veei-border); background: var(--veei-bg-card);
  color: var(--veei-text-sub); font-size: 13px; cursor: pointer;
  transition: box-shadow .15s, transform .15s, color .15s, border-color .15s;
}
.veei-tile:hover { color: var(--veei-primary); border-color: var(--veei-primary); box-shadow: var(--veei-shadow-hover); transform: translateY(-2px); }
.veei-tile-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--veei-tile-bg); color: var(--veei-primary);
  display: inline-flex; align-items: center; justify-content: center;
}

/* 表单字段（供非 Element 的轻量页面复用） */
.veei-field { margin-bottom: 14px; max-width: 560px; }
.veei-field label { display: block; font-size: 13px; color: var(--veei-text-sub); margin-bottom: 6px; }
.veei-field input, .veei-field select, .veei-field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--veei-border-strong); border-radius: var(--veei-radius-sm);
  font-size: 14px; font-family: inherit; background: var(--veei-bg-card); color: var(--veei-text);
}
.veei-btn { padding: 8px 16px; border: none; border-radius: var(--veei-radius-sm); background: var(--veei-primary); color: var(--veei-on-primary); cursor: pointer; font-size: 14px; }
.veei-btn.ghost { background: #f0f2f5; color: var(--veei-text); }
.veei-btn:hover { background: var(--veei-primary-hover); }

/* 顶栏右侧：主题切换 + 头像/用户名下拉（Item2/Item3） */
.veei-header .veei-user-area { display: inline-flex; align-items: center; gap: 8px; color: var(--veei-text-sub); cursor: pointer; outline: none; }
.veei-header .veei-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--veei-primary); color: var(--veei-on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.veei-icon-btn { background: transparent; border: none; color: var(--veei-text-sub); font-size: 16px; cursor: pointer; padding: 5px 9px; border-radius: 8px; line-height: 1; }
.veei-icon-btn:hover { background: var(--veei-primary-soft); color: var(--veei-primary); }

/* 右下角浮标：组件示例入口（开发期调试页，不占侧栏菜单位） */
.veei-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--veei-bg-card); color: var(--veei-primary);
  border: 1px solid var(--veei-border-strong); box-shadow: var(--veei-shadow-hover);
  opacity: .78; transition: opacity .18s, transform .18s;
}
.veei-fab:hover { opacity: 1; transform: translateY(-2px); }

/* ---- Element Plus 贴合：圆角、表格头、卡片描边 ---- */
.el-button { border-radius: var(--veei-radius-sm); }
.el-card { border-radius: var(--veei-radius); border-color: var(--veei-border); }
.el-card:not(.is-always-shadow):hover { box-shadow: var(--veei-shadow-hover); }
.el-dialog { border-radius: var(--veei-radius); }
.el-table { --el-table-header-bg-color: #f7f9fc; --el-table-border-color: var(--veei-border); }
.el-table th.el-table__cell { color: var(--veei-text-sub); font-weight: 600; }
.el-table .el-table__row:hover > td.el-table__cell { background: var(--veei-bg-hover); }
.el-tag { border-radius: 6px; }

/* ---- 暗色主题（html.dark）：会员卡黑金，暖黑底 + 雅金字 + 金渐变主色 ---- */
html.dark {
  color-scheme: dark;
  --veei-primary: #c9a227;
  --veei-primary-hover: #dab53c;
  --veei-primary-active: #e6c76a;
  --veei-primary-soft: rgba(201, 162, 39, .14);
  --veei-success: #7fa65b;
  --veei-success-soft: rgba(127, 166, 91, .16);
  --veei-warning: #d9a441;
  --veei-warning-soft: rgba(217, 164, 65, .16);
  --veei-danger: #d0695f;
  --veei-danger-soft: rgba(208, 105, 95, .16);
  --veei-text: #e8d5a3;
  --veei-text-sub: #cbb57c;
  --veei-text-muted: #9b8654;
  --veei-border: #352d1e;
  --veei-border-strong: #4a4028;
  --veei-bg: #131210;
  --veei-bg-card: #1b1811;
  --veei-bg-hover: #241f15;
  --veei-header-bg: #161309;
  --veei-on-primary: #1a1408;
  --veei-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .38);
  --veei-shadow-hover: 0 2px 8px rgba(0, 0, 0, .5), 0 10px 26px rgba(201, 162, 39, .14);
  --veei-tile-bg: rgba(201, 162, 39, .13);
  --veei-gold-bright: #e6c76a;
  /* Element Plus 关键变量 */
  --el-color-primary: #c9a227;
  --el-color-primary-light-3: #9a7c1e;
  --el-color-primary-light-5: #7e6518;
  --el-color-primary-light-7: #5f4c12;
  --el-color-primary-light-8: #4f3f0f;
  --el-color-primary-light-9: #3a2f0c;
  --el-color-primary-dark-2: #e0be55;
  --el-color-success: #7fa65b;
  --el-color-warning: #d9a441;
  --el-color-danger: #d0695f;
  --el-color-error: #d0695f;
  --el-bg-color: #1b1811;
  --el-bg-color-page: #131210;
  --el-bg-color-overlay: #221e15;
  --el-text-color-primary: #e8d5a3;
  --el-text-color-regular: #cbb57c;
  --el-text-color-secondary: #9b8654;
  --el-text-color-placeholder: #7c6a42;
  --el-border-color: #3f3724;
  --el-border-color-light: #352d1e;
  --el-border-color-lighter: #2a2418;
  --el-border-color-extra-light: #241f15;
  --el-fill-color: #241f15;
  --el-fill-color-light: #221d13;
  --el-fill-color-lighter: #1c1810;
  --el-fill-color-blank: #1b1811;
  --el-mask-color: rgba(8, 6, 2, .72);
  --el-box-shadow-light: 0 6px 20px rgba(0, 0, 0, .5);
}
html.dark body { background: var(--veei-bg); color: var(--veei-text); }
html.dark .veei-header { border-bottom-color: #2f2818; }
html.dark .veei-brand-mark { background: linear-gradient(135deg, #e6c76a, #a8830f); }
html.dark .veei-sidebar { border-right-color: var(--veei-border); }
html.dark .veei-sidebar a.active { box-shadow: 0 4px 14px rgba(201, 162, 39, .28); }
html.dark .veei-hero { background: linear-gradient(100deg, #1b1811 30%, #241f13 100%); }
html.dark .veei-hero-title { color: var(--veei-gold-bright); }
html.dark .veei-btn { background: linear-gradient(135deg, #e0be55, #c9a227); color: #1a1408; }
html.dark .veei-btn:hover { background: linear-gradient(135deg, #eccc6b, #d4ac2f); }
html.dark .veei-btn.ghost { background: #2a2418; color: var(--veei-text); }
html.dark .veei-field input, html.dark .veei-field select, html.dark .veei-field textarea { background: #221e15; border-color: var(--veei-border-strong); color: var(--veei-text); }
html.dark .el-button--primary {
  background: linear-gradient(135deg, #e0be55, #c9a227);
  border-color: #c9a227; color: #1a1408; font-weight: 500;
}
html.dark .el-button--primary:hover { background: linear-gradient(135deg, #eccc6b, #d4ac2f); border-color: #d4ac2f; color: #1a1408; }
html.dark .el-button--primary.is-plain { background: #241f13; color: #e0be55; border-color: #6b5617; }
html.dark .el-button--primary.is-plain:hover { background: #2f2818; color: #eccc6b; border-color: #8a6f1e; }
html.dark .el-table { --el-table-header-bg-color: #221d13; }
html.dark .el-card { box-shadow: none; }
html.dark .el-link { --el-link-text-color: var(--veei-text-sub); }