:root { color-scheme: light; --blue:#1677ff; --navy:#102a56; --line:#dce8f8; --bg:#f5f9ff; }
* { box-sizing:border-box; }
body { margin:0; color:#183153; background:linear-gradient(180deg,#eef6ff 0,#fff 420px); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.watermark { position:fixed; inset:-35%; z-index:9999; display:grid; grid-template-columns:repeat(8,minmax(150px,1fr)); grid-auto-rows:58px; gap:18px 22px; align-content:center; transform:rotate(-18deg); pointer-events:none; user-select:none; opacity:.14; overflow:hidden; }
.watermark span { display:flex; align-items:center; justify-content:center; white-space:nowrap; font-size:16px; font-weight:800; color:#154e9b; text-shadow:0 1px 1px rgba(255,255,255,.72); }
.container { position:relative; z-index:1; width:min(1480px,calc(100% - 32px)); margin:auto; padding:36px 0 60px; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:26px; }
.eyebrow { color:var(--blue); font-weight:800; letter-spacing:.14em; font-size:12px; }
h1 { margin:6px 0; color:var(--navy); font-size:clamp(28px,4vw,46px); }
h2 { margin:0 0 16px; font-size:20px; color:var(--navy); }
.site-subtitle { margin:4px 0; color:#627895; font-weight:650; }
.muted { color:#71829b; }
.event-meta { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.event-meta span { background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 14px; box-shadow:0 5px 18px rgba(42,91,150,.07); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.spec-nav { display:flex; gap:9px; overflow-x:auto; padding:2px 2px 13px; margin-bottom:3px; scrollbar-width:thin; }
.spec-button { padding:10px 16px; color:#49617f; background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:10px; text-decoration:none; font-weight:700; white-space:nowrap; }
.spec-button.active { color:#fff; background:var(--blue); border-color:var(--blue); box-shadow:0 7px 20px rgba(22,119,255,.22); }
.card,.panel,.metric,.empty { background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 34px rgba(39,91,153,.08); }
.card { padding:22px; }
.card-title { display:flex; justify-content:space-between; font-weight:750; }
.status { width:10px; height:10px; border-radius:50%; display:inline-block; }.status.ok{background:#20b26b}.status.bad{background:#e25555}
.number { font-size:48px; line-height:1; font-weight:850; color:var(--blue); margin:18px 0 4px; }
.label { color:#6d819e; font-size:13px; }
.product { min-height:44px; font-weight:650; }
.card a { color:var(--blue); text-decoration:none; font-weight:650; }
.error { color:#c83d3d; font-size:13px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 16px; }
.metrics article { padding:18px; display:flex; flex-direction:column; gap:7px; background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 34px rgba(39,91,153,.08); }
.metrics span { color:#7387a3; font-size:13px; }
.metrics strong { font-size:26px; color:var(--navy); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.metric { padding:18px; display:flex; flex-direction:column; gap:7px; }.metric span{color:#7387a3;font-size:13px}.metric b{font-size:26px;color:var(--navy)}
.panel { padding:20px; }
.toolbar { display:flex; justify-content:space-between; gap:12px; margin:16px 0; }
.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
input,button { border-radius:9px; border:1px solid #cbdcf2; padding:9px 11px; font:inherit; }
input[type=number] { width:88px; }
button { cursor:pointer; color:white; background:var(--blue); border-color:var(--blue); font-weight:650; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.panel-head h2 { margin-bottom:4px; }
.panel-head span { color:#7387a3; font-size:13px; }
.top-panel { margin-bottom:16px; }
.top-limit-control label { color:#536b88; }
.sale-stats { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.sale-stats > span { padding:9px 12px; background:#eef6ff; border:1px solid #dbeafd; border-radius:10px; color:#657b98; }
.sale-stats b { margin-left:6px; color:var(--blue); font-size:18px; }
.top-sales-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:9px; }
.top-sale-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 13px; background:#f7faff; border:1px solid #e3edf9; border-radius:10px; }
.top-sale-item span { color:#7185a1; font-size:12px; font-weight:750; }
.top-sale-item b { color:var(--blue); font-size:20px; }
.recent-panel { margin-top:16px; }
.events-table { table-layout:fixed; }
.events-table .event-change { width:15%; }
.events-table .event-total { width:15%; }
.events-table .event-time { width:45%; }
.events-table .event-action { width:25%; }
.product-row { margin-top:16px; display:grid; grid-template-columns:minmax(135px,.7fr) minmax(105px,.45fr) minmax(300px,2.8fr) auto; gap:20px; align-items:center; }
.product-member { display:flex; gap:10px; align-items:center; }
.product-member > div,.product-total,.product-main { display:flex; flex-direction:column; gap:4px; min-width:0; }
.product-member b,.product-total b,.product-main b { color:var(--navy); }
.product-total b { color:var(--blue); font-size:25px; }
.product-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-label { color:#7a8da7; font-size:12px; }
.product-link { justify-self:end; color:#fff; background:var(--blue); border-radius:9px; padding:10px 14px; text-decoration:none; font-weight:700; white-space:nowrap; }
.table-wrap { overflow:auto; max-height:680px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { padding:11px 10px; border-bottom:1px solid #e8eff9; text-align:left; white-space:nowrap; }
th { position:sticky; top:0; background:#f4f8fe; color:#5f7391; z-index:1; }
.positive { color:#087f4d; font-weight:750; }.negative{color:#d04444;font-weight:750}.injected{opacity:.45;text-decoration:line-through}
.link-button { background:none; color:var(--blue); border:0; padding:0; font-size:13px; }
.empty { padding:24px; margin-bottom:16px; }
code { color:#075fc7; }
@media (max-width:900px){.metrics,.stats-grid{grid-template-columns:1fr 1fr}.top-sales-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}.product-row{grid-template-columns:1fr 1fr}.product-main{grid-column:1/-1}.product-link{justify-self:start}.hero{align-items:flex-start;flex-direction:column}.event-meta{justify-content:flex-start}.toolbar,.panel-head{align-items:flex-start;flex-direction:column}}
@media (max-width:520px){.container{width:min(100% - 18px,1480px);padding-top:20px}.watermark{grid-template-columns:repeat(6,minmax(120px,1fr));grid-auto-rows:52px;gap:14px}.metrics,.stats-grid{grid-template-columns:1fr 1fr}.metric{padding:14px}.metric b{font-size:22px}.top-sales-grid{grid-template-columns:1fr 1fr}.events-table .event-time{width:40%}.events-table .event-action{width:30%}.product-row{grid-template-columns:1fr}.product-main{grid-column:auto}.product-main b{white-space:normal}.product-link{width:100%;text-align:center}}