/* 控制台 —— 企业级浅色主题 */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink:#1c3049; --soft:#5b6d84; --line:#e3e9f1; --line2:#eef2f7;
  --bg:#f2f5fa; --panel:#fff;
  --blue:#1f4e8c; --blue-bright:#2f74c0; --accent:#e8f0fb;
  --teal:#0e7490; --ok:#16a34a; --warn:#d97706; --danger:#dc4b5e;
  --side:#0e2440; --side-hover:#16345c;
}
html, body { height:100%; }
body { font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased; font-size:14px; }

.layout { display:flex; min-height:100vh; }

/* ============ 侧边栏 ============ */
.side { width:216px; flex:none; background:linear-gradient(180deg,#0e2440,#0d1f38); color:#c4d5ec;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.side .brand { display:flex; align-items:center; gap:10px; padding:18px 18px 16px; color:#fff; font-size:15.5px; font-weight:700; }
.side .brand .mark { width:30px;height:30px;border-radius:8px;background:linear-gradient(140deg,#2a6cb4,#0e7490);
  display:flex;align-items:center;justify-content:center;font-size:14px; flex:none; }
.side .group { padding:10px 0 4px; }
.side .group > p { font-size:11px; letter-spacing:2px; color:#5f7ba0; padding:6px 20px; }
.side a.item { display:flex; align-items:center; gap:10px; padding:10px 20px; font-size:13.5px; color:#c4d5ec;
  border-left:3px solid transparent; }
.side a.item:hover { background:var(--side-hover); color:#fff; }
.side a.item.active { background:var(--side-hover); color:#fff; border-left-color:#4da3ff; }
.side a.item .ic { width:18px; text-align:center; flex:none; }
.side .me { margin-top:auto; padding:14px 18px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; }
.side .me b { display:block; color:#fff; font-size:13px; margin-bottom:3px; }
.side .me .role { color:#7fa5d4; }
.side .me a { color:#8fb1dd; cursor:pointer; }
.side .me a:hover { color:#fff; }

/* ============ 主区 ============ */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { background:var(--panel); border-bottom:1px solid var(--line); padding:0 26px; height:58px;
  display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:30; }
.topbar h1 { font-size:17px; letter-spacing:.5px; }
.topbar .crumb { font-size:12.5px; color:var(--soft); }
.topbar .spacer { flex:1; }
.provider-badge { font-size:12px; padding:4px 12px; border-radius:999px; background:var(--accent); color:var(--blue); }
.provider-badge.live { background:#e2f7f2; color:var(--teal); }
.icon-btn { border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 12px; font:inherit;
  font-size:12.5px; color:var(--soft); cursor:pointer; }
.icon-btn:hover { color:var(--blue); border-color:var(--blue-bright); }

.content { padding:24px 26px 44px; }

/* ============ 过滤条 ============ */
.filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:16px; }
.filters select, .filters input[type=text] { font:inherit; font-size:13px; color:var(--ink);
  border:1px solid #cdd8e6; border-radius:8px; padding:7px 11px; background:#fff; outline:none; min-width:130px; }
.filters select:focus, .filters input:focus { border-color:var(--blue-bright); }
.filters input[type=text] { min-width:200px; }
.filters .lbl { font-size:12px; color:var(--soft); }
.filters .spacer { flex:1; }

/* ============ 卡片 / KPI ============ */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:18px 20px; }
.panel h3 { font-size:14.5px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.panel h3::before { content:""; width:4px; height:15px; border-radius:2px; background:var(--blue-bright); }
.panel h3 .r { margin-left:auto; font-size:12px; font-weight:400; color:var(--soft); }

.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; margin-bottom:16px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:16px 18px; position:relative; overflow:hidden; }
.kpi::after { content:""; position:absolute; left:0; top:0; width:3px; height:100%; background:var(--blue-bright); opacity:.75; }
.kpi:nth-child(2)::after { background:var(--teal); } .kpi:nth-child(3)::after { background:var(--warn); }
.kpi:nth-child(4)::after { background:#9d7bff; } .kpi:nth-child(5)::after { background:#f2748c; }
.kpi:nth-child(6)::after { background:#0f766e; }
.kpi b { display:block; font-size:25px; font-weight:700; margin-top:5px; font-variant-numeric:tabular-nums; }
.kpi b em { font-style:normal; font-size:12px; color:var(--soft); font-weight:400; margin-left:3px; }
.kpi i { font-style:normal; font-size:12.5px; color:var(--soft); }
.kpi .trend { position:absolute; right:14px; top:14px; font-size:11px; color:var(--ok); }

/* ============ 表格 ============ */
.tbl-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; font-weight:500; font-size:12px; color:var(--soft); background:#f7f9fc;
  padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl th.sortable { cursor:pointer; user-select:none; }
.tbl th.sortable:hover { color:var(--blue); }
.tbl td { padding:10px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; }
.tbl tbody tr:hover td { background:#f8fafd; }
.tbl .num { font-variant-numeric:tabular-nums; }
.tbl .empty { text-align:center; color:var(--soft); padding:34px 0; }

.tag { display:inline-block; font-size:11.5px; padding:2px 10px; border-radius:999px; border:1px solid var(--line); color:var(--soft); background:#fff; }
.tag.st-已发货, .tag.st-已完成 { color:var(--ok); border-color:#bfe8cd; background:#f2fbf5; }
.tag.st-待发货 { color:var(--warn); border-color:#f3ddad; background:#fdf8ee; }
.tag.st-待付款 { color:var(--soft); }
.tag.st-已关闭, .tag.st-已取消 { color:var(--danger); border-color:#f3c7cd; background:#fdf3f4; }
.tag.ind { color:var(--blue); border-color:#c4d8f2; background:var(--accent); }
.tag.on { color:var(--ok); border-color:#bfe8cd; background:#f2fbf5; }
.tag.off { color:var(--soft); }
.tag.warn { color:var(--danger); border-color:#f3c7cd; background:#fdf3f4; }
.link { color:var(--blue-bright); cursor:pointer; }
.link:hover { text-decoration:underline; }
.mini-btn { font:inherit; font-size:12px; padding:4px 11px; border-radius:7px; border:1px solid #cdd8e6;
  background:#fff; color:var(--ink); cursor:pointer; margin-right:6px; }
.mini-btn:hover { border-color:var(--blue-bright); color:var(--blue); }
.mini-btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.mini-btn.primary:hover { filter:brightness(1.07); color:#fff; }
.mini-btn.danger { color:var(--danger); }
.mini-btn.danger:hover { border-color:var(--danger); }

.pager { display:flex; align-items:center; gap:10px; justify-content:flex-end; padding-top:14px; font-size:12.5px; color:var(--soft); }
.pager button { font:inherit; font-size:12.5px; padding:5px 12px; border-radius:7px; border:1px solid var(--line);
  background:#fff; cursor:pointer; color:var(--ink); }
.pager button:disabled { opacity:.4; cursor:default; }
.pager button:hover:not(:disabled) { border-color:var(--blue-bright); color:var(--blue); }

/* ============ 布局栅格 ============ */
.grid-2 { display:grid; grid-template-columns:1.05fr .95fr; gap:16px; }
.grid-2 > .panel { margin-bottom:16px; }

/* ============ 条形图 ============ */
.bars { display:flex; flex-direction:column; gap:10px; }
.bar-row { display:grid; grid-template-columns:100px 1fr 96px; gap:10px; align-items:center; font-size:12.5px; }
.bar-row .name { color:var(--soft); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-row .track { height:13px; border-radius:7px; background:#eef2f7; overflow:hidden; }
.bar-row .fill { height:100%; border-radius:7px; background:linear-gradient(90deg,#2f74c0,#4da3ff); transition:width .4s; }
.bar-row:nth-child(even) .fill { background:linear-gradient(90deg,#0e7490,#2fc6b0); }
.bar-row .val { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ============ 弹窗 ============ */
.mask { position:fixed; inset:0; background:rgba(10,25,48,.45); display:flex; align-items:center;
  justify-content:center; z-index:100; animation:fade .18s; }
@keyframes fade { from { opacity:0; } }
.modal { width:560px; max-width:94vw; max-height:88vh; overflow-y:auto; background:#fff; border-radius:14px;
  padding:24px 26px; box-shadow:0 30px 70px rgba(8,22,44,.35); animation:pop .18s; }
@keyframes pop { from { transform:translateY(12px); opacity:0; } }
.modal h4 { font-size:16.5px; margin-bottom:4px; }
.modal .sub { font-size:12.5px; color:var(--soft); margin-bottom:16px; }
.modal .row { display:flex; justify-content:space-between; gap:16px; padding:9px 2px; border-bottom:1px dashed var(--line2); font-size:13px; }
.modal .row b { font-weight:600; }
.modal .row .k { color:var(--soft); flex:none; }
.modal .form { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin:14px 0 20px; }
.modal .form .full { grid-column:1 / -1; }
.modal .form label { display:block; font-size:12px; color:var(--soft); margin-bottom:5px; }
.modal .form input, .modal .form select { width:100%; font:inherit; font-size:13.5px; padding:9px 11px;
  border:1px solid #cdd8e6; border-radius:8px; outline:none; }
.modal .form input:focus, .modal .form select:focus { border-color:var(--blue-bright); }
.modal .foot { display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.modal .items-tbl { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
.modal .items-tbl th { text-align:left; font-size:12px; color:var(--soft); padding:7px 8px; border-bottom:1px solid var(--line); }
.modal .items-tbl td { padding:8px; border-bottom:1px solid var(--line2); }

/* ============ Toast ============ */
.toast-box { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:200; display:flex;
  flex-direction:column; gap:8px; align-items:center; }
.toast-msg { background:#123a63; color:#fff; font-size:13px; padding:10px 20px; border-radius:9px;
  box-shadow:0 10px 26px rgba(8,22,44,.3); animation:pop .2s; }
.toast-msg.err { background:#a33246; }
.toast-msg.ok { background:#177a4b; }

/* ============ 状态点 ============ */
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.off { background:#9aa9bd; }

/* ============ 数据集成页专用 ============ */
.jst-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:16px; }
.step-card { background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:20px; }
.step-card .no { width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-bottom:10px; }
.step-card b { display:block; font-size:14.5px; margin-bottom:7px; }
.step-card p { font-size:12.5px; color:var(--soft); line-height:1.8; margin-bottom:12px; }
.step-card code { background:#f2f6fb; border:1px solid var(--line); padding:1px 7px; border-radius:5px; font-size:12px; color:#37517a; }
.step-card .do { display:flex; gap:8px; flex-wrap:wrap; }
.mono { font-family:Consolas, Menlo, monospace; }

@media (max-width: 1100px) { .grid-2, .jst-grid { grid-template-columns:1fr; } }
@media (max-width: 760px) { .side { display:none; } .modal .form { grid-template-columns:1fr; } }

/* ============ 通知铃铛 ============ */
.notif-bell { position: relative; }
.notif-bell summary { list-style: none; cursor: pointer; font-size: 18px; padding: 5px 10px;
  border-radius: 8px; border: 1px solid var(--line); background: #fff; position: relative; }
.notif-bell summary::-webkit-details-marker { display: none; }
.notif-bell .notif-count { position: absolute; top: -6px; right: -4px; min-width: 17px; height: 17px;
  border-radius: 9px; background: #e03131; color: #fff; font-size: 10px; line-height: 17px;
  padding: 0 4px; text-align: center; font-weight: 700; }
.notif-bell .notif-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 150;
  width: 340px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(18,58,99,.18); overflow: hidden; }
.notif-bell .notif-head { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.notif-bell .notif-head .link { font-size: 12px; }
.notif-bell .notif-list { max-height: 320px; overflow-y: auto; }
.notif-item { padding: 10px 16px; border-bottom: 1px solid var(--line2); font-size: 13px; }
.notif-item.unread { background: #f0f6ff; }
.notif-item b { display: block; margin-bottom: 3px; font-size: 13px; }
.notif-item p { color: var(--soft); font-size: 12px; line-height: 1.6; }
.notif-item .time { font-size: 11px; color: #93a5bb; margin-top: 3px; }
.notif-item.warning b { color: var(--warn); }

/* AI 设计工作台 */
.ai-app-card:hover { border-color: #7c3aed !important; box-shadow: 0 6px 18px rgba(124,58,237,.12); transform: translateY(-2px); }
.pdp-acts .p-ai-gen:hover { filter: brightness(1.1); }

/* 精细化选品卡片 */
.bs-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18,58,99,.12); }
.bs-card.selected { border-width: 2px; }