:root {
  --pine: #123d32;
  --pine-2: #1d5d4b;
  --mint: #dff1e9;
  --paper: #f5f7f4;
  --white: #ffffff;
  --ink: #18211e;
  --muted: #718079;
  --line: #dfe6e2;
  --amber: #d58b28;
  --amber-soft: #fff4df;
  --red: #c84d4d;
  --red-soft: #fff0ee;
  --blue: #3e6ea8;
  --shadow: 0 16px 45px rgba(24, 55, 45, .10);
}
* { box-sizing: border-box; }
html { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--paper); }
body { margin: 0; min-width: 320px; }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; color: #ecf6f1; background: var(--pine); padding: 24px 18px 18px; display: flex; flex-direction: column; z-index: 30; }
.brand { display:flex; align-items:center; gap:12px; padding:0 8px 26px; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; color:var(--pine); background:#d7eddf; border-radius:12px 12px 12px 3px; font-weight:800; }
.brand strong,.brand span { display:block; }
.brand strong { font-size:18px; letter-spacing:.04em; }
.brand span { color:#9ec1b5; font-size:12px; margin-top:1px; }
nav { display:grid; gap:5px; }
.nav-item { width:100%; border:0; color:#b9d0c8; background:transparent; display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:9px; text-align:left; transition:.18s ease; }
.nav-item span { width:20px; font-size:17px; text-align:center; }
.nav-item:hover,.nav-item.active { color:white; background:rgba(255,255,255,.10); }
.nav-item.active { box-shadow: inset 3px 0 #9cd2bd; }
.sidebar-note { margin-top:auto; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); border-radius:10px; padding:12px; display:flex; align-items:center; gap:10px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#73d2a5; box-shadow:0 0 0 4px rgba(115,210,165,.12); }
.sidebar-note strong,.sidebar-note small,.user-card strong,.user-card small { display:block; }
.sidebar-note strong { font-size:12px; font-weight:500; }
.sidebar-note small { color:#8fb0a5; margin-top:2px; }
.user-card { margin-top:14px; padding:12px 6px 0; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:10px; }
.avatar { flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#d7eddf; color:var(--pine); font-weight:700; }
.user-card div:nth-child(2) { min-width:0; flex:1; }
.user-card strong { font-size:13px; }
.user-card small { color:#8fb0a5; font-size:11px; margin-top:2px; }
.user-card button { border:0; color:#a8c2b9; background:transparent; font-size:18px; }
main { min-width:0; }
.topbar { height:72px; position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 34px; background:rgba(245,247,244,.92); border-bottom:1px solid rgba(217,226,221,.8); backdrop-filter:blur(12px); }
.menu-button { display:none; border:0; background:transparent; font-size:22px; }
.search-wrap { max-width:540px; flex:1; height:40px; display:flex; align-items:center; gap:10px; padding:0 12px; background:#fff; border:1px solid var(--line); border-radius:9px; }
.search-wrap input { min-width:0; flex:1; border:0; outline:0; color:var(--ink); }
.search-wrap kbd { padding:2px 7px; color:#8a9691; background:#f2f4f3; border:1px solid #e0e5e2; border-radius:5px; font-size:10px; }
.top-actions { display:flex; align-items:center; gap:10px; }
.icon-button { width:40px; height:40px; position:relative; border:1px solid var(--line); border-radius:9px; background:white; }
.icon-button b { position:absolute; right:-3px; top:-3px; width:16px; height:16px; display:grid; place-items:center; color:white; background:var(--red); border-radius:50%; font-size:9px; }
.primary-button,.secondary-button,.ghost-button { border-radius:9px; padding:10px 15px; font-weight:600; border:1px solid transparent; }
.primary-button { color:white; background:var(--pine-2); box-shadow:0 6px 16px rgba(29,93,75,.18); }
.primary-button:hover { background:var(--pine); }
.secondary-button { color:var(--pine-2); background:var(--mint); }
.ghost-button { color:var(--ink); background:white; border-color:var(--line); }
.page-root { padding:30px 34px 48px; max-width:1600px; margin:0 auto; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.page-head h1 { margin:0; font-size:25px; letter-spacing:-.02em; }
.page-head p { margin:7px 0 0; color:var(--muted); font-size:14px; }
.date-chip { color:#53625c; background:white; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:12px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.metric { position:relative; overflow:hidden; min-height:138px; padding:20px; background:white; border:1px solid var(--line); border-radius:12px; }
.metric::after { content:""; position:absolute; right:-28px; bottom:-36px; width:100px; height:100px; border-radius:50%; background:var(--tint,#e8f4ef); }
.metric-label { color:var(--muted); font-size:13px; }
.metric-value { margin:12px 0 6px; font-size:27px; font-weight:700; letter-spacing:-.03em; }
.metric-note { color:var(--muted); font-size:11px; }
.metric-note strong { color:var(--pine-2); }
.grid-two { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr); gap:18px; margin-top:18px; }
.panel { background:white; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.panel-head { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 20px; border-bottom:1px solid var(--line); }
.panel-head h2 { margin:0; font-size:16px; }
.panel-head button { border:0; background:transparent; color:var(--pine-2); font-size:12px; }
.bar-chart { height:230px; padding:24px 20px 18px; display:flex; align-items:flex-end; gap:14px; }
.bar-col { height:100%; flex:1; min-width:22px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; }
.bar { width:100%; max-width:44px; height:var(--h); background:#c8dfd5; border-radius:5px 5px 2px 2px; transition:.2s; }
.bar-col:nth-child(6) .bar,.bar-col:nth-child(7) .bar { background:var(--pine-2); }
.bar-col:hover .bar { background:var(--amber); }
.bar-col span { color:#7c8984; font-size:10px; }
.feed { padding:6px 20px 14px; }
.feed-item { display:grid; grid-template-columns:32px 1fr auto; gap:11px; padding:13px 0; border-bottom:1px solid #edf1ef; align-items:start; }
.feed-item:last-child { border-bottom:0; }
.feed-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--mint); color:var(--pine-2); }
.feed-item strong,.feed-item small { display:block; }
.feed-item strong { font-size:12px; font-weight:600; }
.feed-item small { margin-top:4px; color:var(--muted); font-size:10px; }
.feed-item time { color:#9aa49f; font-size:10px; }
.table-panel { margin-top:18px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { color:#7c8984; background:#fafbfa; font-weight:500; text-align:left; white-space:nowrap; }
th,td { padding:13px 16px; border-bottom:1px solid #edf1ef; }
tbody tr:hover { background:#fbfcfb; }
.product-cell { display:flex; align-items:center; gap:10px; min-width:190px; }
.product-thumb { width:38px; height:38px; border-radius:8px; object-fit:cover; background:#edf1ef; }
.product-cell strong,.product-cell small { display:block; }
.product-cell small { margin-top:3px; color:var(--muted); }
.pill { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; color:var(--pine-2); background:var(--mint); font-size:10px; white-space:nowrap; }
.pill.warning { color:#9b641c; background:var(--amber-soft); }
.pill.danger { color:#a73e3e; background:var(--red-soft); }
.pill.neutral { color:#66726d; background:#eef1ef; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.filter-row { display:flex; gap:8px; flex-wrap:wrap; }
.filter-button { border:1px solid var(--line); background:white; color:#5f6c67; padding:8px 12px; border-radius:8px; font-size:12px; }
.filter-button.active { color:var(--pine-2); background:var(--mint); border-color:#bdd9cd; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.product-card { overflow:hidden; background:white; border:1px solid var(--line); border-radius:12px; transition:.18s ease; }
.product-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.product-media { position:relative; aspect-ratio:4/3; background:#eef2ef; overflow:hidden; }
.product-media img { width:100%; height:100%; object-fit:cover; transition:.35s; }
.product-card:hover img { transform:scale(1.035); }
.media-badge { position:absolute; right:9px; top:9px; padding:5px 8px; color:white; background:rgba(18,61,50,.88); border-radius:7px; font-size:10px; }
.product-info { padding:15px; }
.product-info h3 { margin:0 0 5px; font-size:14px; }
.sku { color:var(--muted); font-size:10px; }
.product-bottom { display:flex; align-items:end; justify-content:space-between; margin-top:16px; }
.product-bottom strong { font-size:16px; }
.product-bottom span { color:var(--muted); font-size:11px; }
.product-card button.card-action { width:100%; padding:10px; border:0; border-top:1px solid var(--line); background:#fbfcfb; color:var(--pine-2); font-size:12px; }
.simple-page .panel { min-height:480px; }
.empty-state { min-height:330px; display:grid; place-items:center; text-align:center; color:var(--muted); }
.empty-state div { max-width:330px; }
.empty-state b { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 14px; border-radius:16px; color:var(--pine-2); background:var(--mint); font-size:25px; }
.empty-state h2 { color:var(--ink); margin:0 0 7px; font-size:17px; }
.empty-state p { margin:0 0 18px; font-size:12px; line-height:1.8; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(11,29,23,.58); backdrop-filter:blur(4px); }
.modal-backdrop[hidden] { display:none; }
.modal { position:relative; width:min(780px,100%); max-height:90vh; overflow:auto; background:white; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.26); }
.modal-close { position:absolute; top:15px; right:15px; z-index:2; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:white; color:#52615b; font-size:20px; }
.modal-body { padding:28px; }
.modal-body h2 { margin:0 0 6px; font-size:21px; }
.modal-body>p { margin:0 0 22px; color:var(--muted); font-size:12px; }
.media-layout { display:grid; grid-template-columns:1.1fr .9fr; }
.media-showcase { min-height:420px; background:#e8eeea; }
.media-showcase img,.media-showcase video { width:100%; height:100%; min-height:420px; object-fit:cover; display:block; }
.product-detail { padding:34px 30px; }
.product-detail h2 { margin:0 0 6px; }
.product-detail .price { margin:20px 0; font-size:25px; font-weight:700; }
.detail-list { display:grid; gap:11px; margin:20px 0; }
.detail-row { display:flex; justify-content:space-between; gap:20px; padding-bottom:10px; border-bottom:1px solid var(--line); font-size:12px; }
.detail-row span:first-child { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { color:#56645f; font-size:12px; }
.field input,.field select,.field textarea { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:8px; outline:0; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#6ca891; box-shadow:0 0 0 3px rgba(108,168,145,.13); }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.quick-choice { min-height:118px; padding:18px; border:1px solid var(--line); border-radius:12px; background:white; text-align:left; }
.quick-choice b,.quick-choice span { display:block; }
.quick-choice b { width:36px; height:36px; display:grid; place-items:center; margin-bottom:14px; border-radius:9px; background:var(--mint); color:var(--pine-2); }
.quick-choice span { color:var(--muted); margin-top:5px; font-size:11px; }
.toast { position:fixed; left:50%; bottom:28px; z-index:200; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:11px 16px; border-radius:9px; color:white; background:#183d32; box-shadow:var(--shadow); font-size:12px; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media(max-width:1100px){ .metrics{grid-template-columns:repeat(2,1fr)} .product-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:820px){
  .app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;transform:translateX(-102%);width:240px;transition:.2s}.sidebar.open{transform:none}.menu-button{display:block}.topbar{padding:0 18px}.page-root{padding:24px 18px}.grid-two{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.search-wrap kbd{display:none}.media-layout{grid-template-columns:1fr}.media-showcase,.media-showcase img,.media-showcase video{min-height:300px}.product-detail{padding:24px}.quick-grid{grid-template-columns:1fr}
}
@media(max-width:560px){ .top-actions .icon-button{display:none}.top-actions .primary-button{padding:10px;font-size:0}.top-actions .primary-button::after{content:"＋";font-size:18px}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:15px;min-height:120px}.metric-value{font-size:21px}.page-head{align-items:flex-start}.date-chip{display:none}.product-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.toolbar{align-items:flex-start;flex-direction:column}.page-head h1{font-size:22px} }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}