:root { --blue:#1677ff; --ink:#171a1f; --muted:#7a828e; --line:#e7e9ed; --page:#f5f6f8; --surface:#fff; --nav:#111a27; }
* { box-sizing: border-box; }
body { margin:0; background:var(--page); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
[v-cloak] { display:none; }
#app { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; width:224px; padding:28px 18px 22px; background:var(--nav); color:#fff; display:flex; flex-direction:column; z-index:20; }
.logo { height:56px; padding:0 10px; display:flex; align-items:center; gap:12px; font-size:19px; font-weight:700; }
.logo-mark { width:34px; height:34px; border-radius:10px; background:var(--blue); display:grid; place-items:center; font-size:16px; }
nav { margin-top:38px; display:grid; gap:8px; }
nav button { height:48px; padding:0 14px; border:0; border-radius:10px; background:transparent; color:#97a3b3; display:flex; align-items:center; gap:13px; cursor:pointer; font-size:14px; text-align:left; }
nav button:hover,nav button.active { background:#1c293a; color:#fff; }
nav svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
nav button:first-child svg { fill:currentColor; stroke:none; }
.sidebar-foot { margin-top:auto; padding:15px 13px; border-top:1px solid #263345; color:#8996a7; font-size:12px; display:flex; align-items:center; gap:8px; }
.env-dot { width:7px; height:7px; border-radius:50%; background:#f4b740; box-shadow:0 0 0 4px rgba(244,183,64,.12); }
main { margin-left:224px; min-height:100vh; padding:0 36px 48px; }
header { height:104px; display:flex; align-items:center; justify-content:space-between; }
header h1 { margin:0; font-size:25px; line-height:1.2; letter-spacing:-.5px; }
header p { margin:8px 0 0; color:var(--muted); font-size:12px; }
.refresh { height:38px; padding:0 15px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#3f4650; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.refresh svg,.search svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mock-banner { margin-bottom:22px; padding:13px 16px; border:1px solid #f1d78e; border-radius:10px; background:#fff9e9; color:#7a5b09; font-size:12px; }
.mock-banner strong { margin-right:10px; color:#4f3b08; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metrics article { min-height:142px; padding:22px; border:1px solid var(--line); border-radius:14px; background:#fff; display:flex; flex-direction:column; }
.metrics span { color:var(--muted); font-size:12px; }.metrics strong { margin-top:14px; font-size:29px; letter-spacing:-1px; }.metrics small { margin-top:auto; color:#a0a6ae; font-size:11px; }
.overview-grid { margin-top:18px; display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
.panel { min-height:350px; padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.panel-head h2 { margin:0; font-size:17px; }.panel-head p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.empty-panel { height:250px; display:grid; place-items:center; color:#9aa1aa; font-size:13px; }
.status-list { margin-top:28px; }.status-list div { height:48px; border-bottom:1px solid #eef0f2; display:flex; align-items:center; justify-content:space-between; font-size:13px; }.status-list span { display:flex; align-items:center; gap:10px; color:#505761; }.status-list i { width:8px; height:8px; border-radius:50%; background:#f4b740; }.status-list i.success { background:#2ca66f; }.status-list i.progress { background:var(--blue); }.status-list i.danger { background:#d95353; }
.quick-panel ul { margin:26px 0 0; padding:0; list-style:none; display:grid; gap:20px; }.quick-panel li { display:flex; align-items:flex-start; gap:14px; }.quick-panel li>span { flex:0 0 28px; height:28px; border-radius:8px; background:#eef5ff; color:var(--blue); display:grid; place-items:center; font-size:12px; font-weight:700; }.quick-panel strong { display:block; font-size:13px; }.quick-panel p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.toolbar { min-height:58px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.filter-tabs { display:flex; gap:4px; flex-wrap:wrap; }.filter-tabs button { height:34px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:#737b86; cursor:pointer; font-size:12px; }.filter-tabs button.active { background:#eaf3ff; color:var(--blue); font-weight:600; }
.search { width:280px; height:38px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#8d949d; display:flex; align-items:center; gap:8px; }.search input { flex:1; min-width:0; border:0; outline:0; font-size:12px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff; }
table { width:100%; min-width:1020px; border-collapse:collapse; } th { height:48px; padding:0 16px; background:#fafbfc; color:#858c96; font-size:11px; font-weight:500; text-align:left; white-space:nowrap; } td { height:86px; padding:10px 16px; border-top:1px solid #edf0f2; color:#444b55; font-size:12px; vertical-align:middle; } td strong { color:#262b31; font-weight:600; }
.product-cell { min-width:250px; display:flex; align-items:center; gap:12px; }.product-cell img { width:54px; height:54px; border-radius:9px; background:#f5f6f8; object-fit:contain; }.product-cell div { display:flex; flex-direction:column; gap:6px; }.product-cell span,.subtext { display:block; margin-top:5px; color:#8c939d; font-size:11px; }
.status-tag { display:inline-flex; height:25px; padding:0 9px; border-radius:7px; align-items:center; background:#fff5dc; color:#866100; font-size:11px; white-space:nowrap; }.status-tag.success { background:#eaf8f1; color:#207c52; }.status-tag.progress { background:#eaf3ff; color:#1469d8; }.status-tag.danger { background:#fff0f0; color:#bd4141; }
.text-button { border:0; background:transparent; color:var(--blue); cursor:pointer; font-size:12px; }.table-empty { height:260px; color:#9aa1aa; text-align:center; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.product-card { min-height:360px; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; }.product-card>img { width:100%; height:220px; background:#f7f8fa; object-fit:contain; }.product-card-copy { padding:18px; }.product-card-copy>span { color:#87909b; font-size:11px; }.product-card h2 { margin:5px 0 0; font-size:18px; }.product-card p { margin:8px 0 18px; color:#777f89; font-size:12px; }.product-card-copy>div { display:flex; align-items:center; justify-content:space-between; }.product-card strong { color:var(--blue); font-size:14px; }.product-card em { color:#8a919a; font-size:11px; font-style:normal; }
.drawer-backdrop { position:fixed; inset:0; z-index:50; background:rgba(17,26,39,.28); display:flex; justify-content:flex-end; }.drawer { width:480px; max-width:92vw; height:100%; padding:0 28px 28px; background:#fff; box-shadow:-20px 0 50px rgba(20,27,36,.12); overflow:auto; animation:slideIn .2s ease-out; }.drawer-head { height:86px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }.drawer-head div { display:flex; flex-direction:column; gap:4px; }.drawer-head span { color:#8b929c; font-size:11px; }.drawer-head strong { font-size:15px; }.drawer-head button { width:36px; height:36px; border:0; border-radius:9px; background:#f5f6f8; color:#59616c; cursor:pointer; font-size:22px; }.drawer-product { padding:24px 0; display:flex; align-items:center; gap:20px; }.drawer-product img { width:118px; height:118px; border-radius:14px; background:#f6f7f9; object-fit:contain; }.drawer-product h2 { margin:0; font-size:20px; }.drawer-product p { margin:8px 0 12px; color:#7b838e; font-size:12px; }.drawer-product strong { color:var(--blue); font-size:15px; }
dl { margin:0 0 24px; padding:8px 18px; border-radius:12px; background:#f8f9fa; } dl div { min-height:48px; padding:10px 0; border-bottom:1px solid #e8eaed; display:grid; grid-template-columns:90px 1fr; gap:14px; align-items:center; } dl div:last-child { border:0; } dt { color:#858c96; font-size:11px; } dd { margin:0; color:#3d444d; font-size:12px; line-height:1.5; }
.field { display:block; margin-top:18px; }.field>span { display:block; margin-bottom:8px; color:#555d67; font-size:12px; font-weight:600; }.field input,.field textarea { width:100%; border:1px solid var(--line); border-radius:9px; outline:0; color:#2c3137; font-size:12px; }.field input { height:40px; padding:0 12px; }.field textarea { height:86px; padding:11px 12px; resize:vertical; }.field input:focus,.field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,119,255,.09); }
.drawer-actions { margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }.drawer-actions button { min-height:40px; padding:0 16px; border-radius:9px; cursor:pointer; font-size:12px; }.primary-action { border:1px solid var(--blue); background:var(--blue); color:#fff; }.secondary-action { border:1px solid var(--line); background:#fff; color:#444b55; }.terminal-state { margin-top:26px; padding:18px; border-radius:9px; background:#f6f7f9; color:#8a919b; text-align:center; font-size:12px; }
.toast { position:fixed; left:50%; bottom:42px; z-index:100; transform:translateX(-50%); padding:11px 18px; border-radius:9px; background:#17202d; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.2); font-size:12px; }
@keyframes slideIn { from { transform:translateX(30px); opacity:.5; } }
@media (max-width:1100px) { .metrics { grid-template-columns:1fr 1fr; }.overview-grid { grid-template-columns:1fr; }.product-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) { .sidebar { width:72px; padding:22px 10px; }.logo { padding:0; justify-content:center; }.logo>span:last-child,nav button:not(.active)::after,.sidebar-foot { display:none; } nav button { justify-content:center; padding:0; font-size:0; } nav svg { width:22px; height:22px; } main { margin-left:72px; padding:0 18px 36px; } header { height:88px; }.metrics,.product-grid { grid-template-columns:1fr; }.toolbar { align-items:stretch; flex-direction:column; }.search { width:100%; }.mock-banner { line-height:1.6; } }