/* ═══════════════════════════════════════
   A2UI 共享样式 — 化妆品原料工作台
   从 A2UI 组件库提取，集中管理
   ═══════════════════════════════════════ */

/* ── A2UI CSS 变量 ── */
:root {
  --arcoblue-1: 232,243,255; --arcoblue-2: 190,218,255; --arcoblue-3: 148,191,255;
  --arcoblue-4: 106,161,255; --arcoblue-5: 64,128,255; --arcoblue-6: 22,93,255;
  --arcoblue-7: 14,66,210;   --arcoblue-8: 7,44,166;    --arcoblue-9: 3,26,121;
  --arcoblue-10: 0,13,77;
  --blue-1: 232,247,255; --blue-2: 195,231,254; --blue-3: 159,212,253;
  --blue-4: 123,192,252; --blue-5: 87,169,251;  --blue-6: 52,145,250;
  --blue-7: 32,108,207;  --blue-8: 17,75,163;   --blue-9: 6,48,120;
  --blue-10: 0,26,77;
  --green-1: 232,255,234; --green-2: 175,240,181; --green-3: 123,225,136;
  --green-4: 76,210,99;   --green-5: 35,195,67;   --green-6: 0,180,42;
  --green-7: 0,154,41;    --green-8: 0,128,38;    --green-9: 0,102,34;
  --green-10: 0,77,28;
  --orange-1: 255,247,232; --orange-2: 255,228,186; --orange-3: 255,207,139;
  --orange-4: 255,182,93;  --orange-5: 255,154,46;  --orange-6: 255,125,0;
  --orange-7: 210,95,0;    --orange-8: 166,69,0;    --orange-9: 121,46,0;
  --orange-10: 77,27,0;
  --red-1: 255,236,232; --red-2: 253,205,197; --red-3: 251,172,163;
  --red-4: 249,137,129; --red-5: 247,101,96;  --red-6: 245,63,63;
  --red-7: 203,39,45;   --red-8: 161,21,30;   --red-9: 119,8,19;
  --red-10: 77,0,10;
  --purple-1: 245,232,255; --purple-2: 221,190,246; --purple-3: 195,150,237;
  --purple-4: 168,113,227; --purple-5: 141,78,218;  --purple-6: 114,46,209;
  --purple-7: 85,29,176;   --purple-8: 60,16,143;   --purple-9: 39,6,110;
  --purple-10: 22,0,77;
  --gray-1: 247,248,250; --gray-2: 242,243,245; --gray-3: 229,230,235;
  --gray-4: 201,205,212; --gray-5: 169,174,184; --gray-6: 134,144,156;
  --gray-7: 107,119,133; --gray-8: 78,89,105;   --gray-9: 39,46,59;
  --gray-10: 29,33,41;

  /* ── 语义色（Arco 色板引用） ── */
  --accent: rgb(var(--arcoblue-6));
  --accent-hover: rgb(var(--arcoblue-7));
  --accent-bg: rgb(var(--arcoblue-1));
  --success: rgb(var(--green-5));
  --success-bg: rgb(var(--green-1));
  --success-text: rgb(var(--green-9));
  --warning: rgb(var(--orange-5));
  --warning-bg: rgb(var(--orange-1));
  --warning-text: rgb(var(--orange-8));
  --danger: rgb(var(--red-5));
  --danger-bg: rgb(var(--red-1));
  --danger-text: rgb(var(--red-9));
  --link: rgb(var(--arcoblue-6));
  --link-hover: rgb(var(--arcoblue-7));

  /* ── 中性色 ── */
  --brand: #1A1A2E;
  --bg: rgb(var(--gray-1));
  --card: #FFFFFF;
  --border: rgb(var(--gray-3));
  --border-light: rgb(var(--gray-2));
  --text: rgb(var(--gray-9));
  --text-secondary: rgb(var(--gray-7));
  --text-muted: rgb(var(--gray-5));
  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-hover: 0 4px 16px rgba(0,0,0,.12);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 18px;
  --font: -apple-system, "PingFang SC", "Inter", sans-serif;
}
@keyframes a2-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes a2-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes a2-scale-in { from { transform: scale(.95); } to { transform: scale(1); } }

/* ── 基础重置 ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: 1.5; }

/* ── Lucide 图标尺寸 ── */
/* 注意：Lucide 初始化后 data-lucide 元素被替换为 <svg class="lucide">，所以用 .lucide 选择器 */
.lucide { width: 16px; height: 16px; stroke-width: 1.5; vertical-align: middle; display: inline-block; }
.a2-topbar .lucide { width: 16px; height: 16px; }
.a2-topbar .logo .lucide { width: 18px; height: 18px; }
.a2-topbar .search-box .lucide { width: 14px; height: 14px; }
.a2-topbar .actions .notif .lucide { width: 18px; height: 18px; }
.a2-sidebar .lucide { width: 16px; height: 16px; }
.a2-quick-card .lucide { width: 28px; height: 28px; }
.a2-stat-item .lucide { width: 20px; height: 20px; }
.a2-list .lucide { width: 18px; height: 18px; }
.a2-desc .head .lucide { width: 14px; height: 14px; }
.a2-badge .lucide { width: 10px; height: 10px; }
.a2-card-icon .lucide { width: 24px; height: 24px; }
.a2-table .lucide { width: 14px; height: 14px; }
.a2-page .lucide { width: 12px; height: 12px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
input, select, button, textarea { font-family: inherit; }

/* ── 页面布局 ── */
.layout { display: flex; min-height: calc(100vh - 52px); }
.a2-main { flex: 1; padding: var(--space-6); min-width: 0; max-width: 1400px; }
.a2-main-wide { max-width: none; }

/* ── 顶栏 TopBar ── */
.a2-topbar {
  height: 52px; background: var(--brand);
  display: flex; align-items: center;
  padding: 0 var(--space-5); gap: var(--space-3); flex-shrink: 0;
}
.a2-topbar .logo {
  color: #fff; font-weight: 700; font-size: var(--fs-lg);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.a2-topbar .logo i { width: 18px; text-align: center; font-size: 16px; }
.a2-topbar .spacer { flex: 1; }
.a2-topbar .search-box {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 17px;
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.6);
  transition: .15s; width: 280px;
}
.a2-topbar .search-box:focus-within { background: rgba(255,255,255,.25); }
.a2-topbar .search-box input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: var(--fs-sm); color: #fff;
}
.a2-topbar .search-box input::placeholder { color: rgba(255,255,255,.5); }
.a2-topbar .search-box i { font-size: 12px; }
.a2-topbar .actions { display: flex; align-items: center; gap: var(--space-4); }
.a2-topbar .actions .notif { position: relative; color: rgba(255,255,255,.6); cursor: pointer; font-size: 16px; }
.a2-topbar .actions .notif:hover { color: #fff; }
.a2-topbar .actions .notif .a2-badge-dot {
  position: absolute; top: -4px; right: -6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 10px; display: flex; align-items: center; justify-content: center;
}
.a2-topbar .actions .user { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.6); cursor: pointer; }
.a2-topbar .actions .user:hover { color: #fff; }
.a2-topbar .actions .user .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.a2-topbar .actions .user .name { font-size: var(--fs-sm); }

/* ── 浅色侧边栏 ── */
.a2-sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: var(--space-4) 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
  min-height: calc(100vh - 52px);
}
.a2-sidebar .brand { padding: var(--space-1) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.a2-sidebar .brand h2 { font-size: 15px; color: var(--text); font-weight: 600; }
.a2-sidebar .brand span { font-size: 11px; color: var(--text-muted); }
.a2-sidebar .grp h5 {
  font-size: 11px; color: var(--text-secondary);
  padding: var(--space-2) var(--space-5) var(--space-1);
  font-weight: 500; letter-spacing: .3px;
}
.a2-sidebar .opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--space-5); cursor: pointer;
  font-size: 13px; color: var(--text-secondary);
  transition: .15s; text-decoration: none;
  border-left: 3px solid transparent; margin: 1px 0;
}
.a2-sidebar .opt:hover { color: var(--accent); background: var(--accent-bg); }
.a2-sidebar .opt.active { background: var(--accent-bg); color: var(--accent); font-weight: 500; border-left-color: var(--accent); }
.a2-sidebar .opt i { width: 16px; text-align: center; font-size: 14px; }

/* ── 面包屑 Breadcrumb ── */
.a2-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.a2-breadcrumb a { color: var(--text-muted); }
.a2-breadcrumb a:hover { color: var(--accent); }
.a2-breadcrumb .sep { color: var(--border); font-size: 12px; }
.a2-breadcrumb .current { color: var(--text); font-weight: 500; }

/* ── 卡片 Card ── */
.a2-card { background: var(--card); border-radius: 10px; padding: var(--space-5); box-shadow: var(--shadow); transition: .2s; border: 1px solid transparent; }
.a2-card:hover { box-shadow: var(--shadow-hover); }

/* ── 按钮 Button ── */
.a2-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; cursor: pointer; border: none; transition: .15s; white-space: nowrap; text-decoration: none; line-height: 1; }
.a2-btn-primary { background: var(--accent); color: #fff; }
.a2-btn-primary:hover { background: var(--accent-hover); color: #fff; }
.a2-btn-secondary { background: var(--accent-bg); color: var(--accent); }
.a2-btn-secondary:hover { background: var(--accent); color: #fff; }
.a2-btn-text { background: transparent; color: var(--text-secondary); }
.a2-btn-text:hover { color: var(--accent); }
.a2-btn-sm { height: 26px; padding: 0 10px; font-size: 11px; }
.a2-btn-block { width: 100%; justify-content: center; }
.a2-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ── 状态标签 StatusBadge ── */
.a2-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.a2-badge-green { background: var(--success-bg); color: var(--success-text); }
.a2-badge-blue { background: var(--accent-bg); color: var(--accent); }
.a2-badge-red { background: var(--danger-bg); color: var(--danger-text); }
.a2-badge-orange { background: var(--warning-bg); color: var(--warning-text); }
.a2-badge-gray { background: var(--border-light); color: var(--text-secondary); }

/* ── 标签 Tag ── */
.a2-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: default; white-space: nowrap; border: 1px solid; }
.a2-tag-blue { background: var(--accent-bg); color: var(--accent); border-color: rgb(var(--arcoblue-2)); }
.a2-tag-green { background: var(--success-bg); color: var(--success-text); border-color: rgb(var(--green-2)); }
.a2-tag-orange { background: var(--warning-bg); color: var(--warning-text); border-color: rgb(var(--orange-2)); }
.a2-tag-red { background: var(--danger-bg); color: var(--danger-text); border-color: rgb(var(--red-2)); }
.a2-tag-purple { background: rgb(var(--purple-1)); color: rgb(var(--purple-7)); border-color: rgb(var(--purple-2)); }
.a2-tag-gray { background: var(--border-light); color: var(--text-secondary); border-color: var(--border); }

/* ── 数据表格 DataTable ── */
.a2-table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border); }
table.a2-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
table.a2-table th { background: rgb(var(--gray-1)); padding: 12px 14px; text-align: left; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; font-size: var(--fs-sm); }
table.a2-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-light); color: var(--text); }
table.a2-table tr:last-child td { border-bottom: none; }
table.a2-table tr:hover td { background: rgb(var(--gray-1)); }

/* ── 分页 Pagination ── */
.a2-pagination { display: flex; align-items: center; gap: 4px; justify-content: center; padding: var(--space-4) 0; }
.a2-pagination .a2-page { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); transition: .1s; }
.a2-pagination .a2-page:hover { border-color: var(--accent); color: var(--accent); }
.a2-pagination .a2-page.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.a2-pagination .a2-page.disabled { opacity: .4; cursor: default; pointer-events: none; }
.a2-pagination .a2-page.ellipsis { border: none; cursor: default; min-width: 24px; }
.a2-pagination .info { font-size: 12px; color: var(--text-muted); margin-left: var(--space-3); white-space: nowrap; }

/* ── 筛选栏 HQFilter ── */
.a2-filter { background: var(--card); border-radius: var(--radius-lg); padding: var(--space-4); border: 1px solid var(--border); }
.a2-filter .row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.a2-filter input, .a2-filter select { height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); outline: none; transition: .15s; background: var(--card); }
.a2-filter input:focus, .a2-filter select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.a2-filter input { min-width: 180px; flex: 1; }
.a2-filter select { min-width: 130px; }

/* ── 统计网格 StatGrid ── */
.a2-stat-grid { display: grid; gap: var(--space-3); }
.a2-stat-grid-2 { grid-template-columns: repeat(2,1fr); }
.a2-stat-grid-4 { grid-template-columns: repeat(4,1fr); }
.a2-stat-item { background: var(--card); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); border: 1px solid var(--border); text-align: center; }
.a2-stat-item .lbl { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.a2-stat-item .val { font-size: 28px; font-weight: 700; }
.a2-stat-item .val.g { color: var(--success); }
.a2-stat-item .val.b { color: var(--accent); }
.a2-stat-item .val.o { color: var(--warning); }
.a2-stat-item .val.r { color: var(--danger); }
.a2-stat-item .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── 分段器 Segmented ── */
.a2-segmented { display: inline-flex; gap: 0; padding: 3px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.a2-segmented .opt { padding: 5px 14px; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--text-secondary); transition: .1s; border: none; background: transparent; white-space: nowrap; }
.a2-segmented .opt:hover { color: var(--text); }
.a2-segmented .opt.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* ── 描述列表 Description ── */
.a2-desc { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.a2-desc .head { padding: 12px var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--fs-base); font-weight: 600; }
.a2-desc .grid { display: grid; gap: 0; }
.a2-desc .grid-1 { grid-template-columns: 1fr; }
.a2-desc .grid-2 { grid-template-columns: 1fr 1fr; }
.a2-desc .grid .item { display: flex; padding: 10px var(--space-4); border-bottom: 1px solid var(--border); }
.a2-desc .grid .item:last-child { border-bottom: none; }
.a2-desc .grid .item .label { width: 100px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.a2-desc .grid .item .value { flex: 1; font-size: 12px; color: var(--text); }
.a2-desc .grid-1 .item .label { width: 120px; }

/* ── 进度条 ProgressBar ── */
.a2-progress-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.a2-progress-bar .fill { height: 100%; border-radius: 4px; transition: width .4s; }
.a2-progress-bar .fill.g { background: var(--success); }
.a2-progress-bar .fill.o { background: var(--warning); }
.a2-progress-bar .fill.r { background: var(--danger); }

/* ── 列表 List ── */
.a2-list { display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.a2-list .item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); transition: .1s; border-bottom: 1px solid var(--border); }
.a2-list .item:last-child { border-bottom: none; }
.a2-list .item:hover { background: var(--bg); }
.a2-list .item .icon-box { width: 28px; flex-shrink: 0; text-align: center; margin-top: 2px; }
.a2-list .item .body { flex: 1; min-width: 0; }
.a2-list .item .body .title { font-size: var(--fs-sm); font-weight: 500; }
.a2-list .item .body .desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.a2-list .item .body .meta { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.a2-list .item .right { flex-shrink: 0; }

/* ── 区块标题 HQSectionHead ── */
.a2-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.a2-section-head .info .title { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.a2-section-head .info .title i { color: var(--accent); }
.a2-section-head .actions { display: flex; gap: var(--space-2); }

/* ── 快捷操作卡片 QuickCard ── */
.a2-quick-card { background: var(--card); border-radius: var(--radius); padding: var(--space-6) var(--space-5); box-shadow: var(--shadow); transition: .2s; border: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; text-decoration: none; color: inherit; }
.a2-quick-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: var(--accent); }
.a2-quick-card i { font-size: 28px; color: var(--accent); }
.a2-quick-card .label { font-size: var(--fs-base); font-weight: 500; }
.a2-quick-card .desc { font-size: 11px; color: var(--text-muted); }

/* ── 工具类 ── */

/* ── 间隙工具类（space-y-*：子元素间垂直间距） ── */
.space-y-1 > * + * { margin-top: var(--space-1); }
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.grid { display: grid; }
.grid > * { min-width: 0; }
.grid-cols-2 { grid-template-columns: repeat(2,1fr); }
.grid-cols-3 { grid-template-columns: repeat(3,1fr); }
.grid-cols-4 { grid-template-columns: repeat(4,1fr); }
.col-span-2 { grid-column: span 2; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mt-1 { margin-top: var(--space-1); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.ml-2 { margin-left: var(--space-2); }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: var(--space-1); }
.text-sm { font-size: var(--fs-sm); }
.mb-1 { margin-bottom: var(--space-1); }
.text-xl { font-size: var(--fs-xl); }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.gap-6 { gap: var(--space-6); }
.block { display: block; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shrink-0 { flex-shrink: 0; }
.text-4xl { font-size: 36px; line-height: 1.1; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
.text-green { color: var(--success); }
.text-red { color: var(--danger); }
.text-orange { color: var(--warning); }
.shrink-0 { flex-shrink: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }