:root {
  --ink:#292535;
  --muted:#777181;
  --line:rgba(68,56,83,.12);
  --paper:rgba(255,255,255,.86);
  --pink:#d9849c;
  --purple:#8d79b9;
  --gold:#ddb25f;
  --green:#73b394;
  --blue:#7899c1;
  --shadow:0 16px 46px rgba(70,53,84,.09);
}
*{box-sizing:border-box}
body{
  margin:0;color:var(--ink);min-width:320px;min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:
   radial-gradient(circle at 8% 2%,rgba(238,181,195,.26),transparent 28%),
   radial-gradient(circle at 92% 12%,rgba(195,180,230,.25),transparent 31%),
   linear-gradient(145deg,#fbf8f6,#f8f5fa 52%,#fbf9f3);
}
button,input,select{font:inherit}
button{cursor:pointer}
.shell{width:min(1500px,calc(100% - 42px));margin:auto;padding:36px 0}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.eyebrow,.panel-kicker{margin:0 0 7px;font-size:11px;font-weight:800;letter-spacing:.17em;color:#9a6d82}
h1{font-size:clamp(35px,4.6vw,62px);letter-spacing:-.055em;line-height:.96;margin:0}
h2,h3{margin:0;letter-spacing:-.025em}
.subtitle{color:var(--muted);margin:12px 0 0}
.sync-card{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1px solid var(--line);background:var(--paper);border-radius:18px;box-shadow:var(--shadow)}
.sync-card small,.sync-card strong{display:block}
.sync-card small{color:var(--muted);margin-bottom:3px}
.status-dot{width:11px;height:11px;background:#67b68e;border-radius:50%;box-shadow:0 0 0 7px rgba(103,182,142,.15)}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:5px;margin-bottom:16px;background:rgba(255,255,255,.64);border:1px solid var(--line);border-radius:17px}
.tab{border:0;background:transparent;color:var(--muted);padding:11px 18px;border-radius:12px;font-weight:800;white-space:nowrap}
.tab.active{background:var(--ink);color:white;box-shadow:0 8px 22px rgba(41,37,53,.17)}
.panel{border:1px solid var(--line);background:var(--paper);border-radius:23px;box-shadow:var(--shadow);backdrop-filter:blur(16px);padding:21px}
.toolbar{margin-bottom:22px}
.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:11px}
.filter-block label,.platform-filter legend{display:block;font-size:11px;font-weight:800;color:var(--muted);margin:0 0 7px 3px}
.filter-block input,.filter-block select{width:100%;height:43px;border:1px solid var(--line);border-radius:12px;background:white;padding:0 12px;color:var(--ink)}
.platform-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:14px}
.platform-filter{display:flex;flex-wrap:wrap;gap:14px 20px;border:0;padding:0;margin:0}
.platform-filter label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.platform-filter input{accent-color:var(--ink)}
.filter-actions{display:flex;gap:9px}
.filter-actions button{border:0;border-radius:12px;padding:11px 19px;background:var(--ink);color:#fff;font-weight:800}
.filter-actions .secondary{background:#eee9f0;color:var(--ink)}
.quick-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:13px;margin-top:13px;color:var(--muted);font-size:12px}
.ghost{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;color:var(--ink)}
.filter-note{margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
.tab-page{display:none}
.tab-page.active{display:block}
.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:24px 2px 14px}
.pill{border:1px solid var(--line);background:rgba(255,255,255,.8);border-radius:999px;padding:7px 12px;font-size:11px;color:var(--muted);white-space:nowrap}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:17px}
.kpi{position:relative;overflow:hidden;min-height:128px;padding:19px;border:1px solid var(--line);background:var(--paper);border-radius:20px;box-shadow:0 12px 34px rgba(70,53,84,.07)}
.kpi::after{content:"";position:absolute;width:86px;height:86px;border-radius:50%;right:-32px;bottom:-39px;background:linear-gradient(135deg,rgba(217,132,156,.42),rgba(141,121,185,.34))}
.kpi.accent{background:linear-gradient(145deg,rgba(255,244,247,.95),rgba(245,240,255,.96))}
.kpi span,.kpi strong,.kpi small{display:block;position:relative;z-index:1}
.kpi span{font-size:11px;color:var(--muted);font-weight:800}
.kpi strong{font-size:clamp(22px,2vw,31px);letter-spacing:-.045em;margin-top:10px}
.kpi small{font-size:11px;color:#99939e;margin-top:6px;line-height:1.45}
.positive{color:#23825a!important}
.negative{color:#bd4b5a!important}
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-bottom:17px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.chart-wrap{height:340px;position:relative}
.chart-wrap.tall{height:430px}
.alerts{display:grid;gap:10px}
.alert{padding:13px;border-radius:14px;background:#f6f2f7;border:1px solid var(--line);font-size:12px;line-height:1.55}
.alert strong{display:block;margin-bottom:4px}
.mini-cards{display:grid;gap:11px}
.mini-card{padding:15px;border:1px solid var(--line);border-radius:15px;background:#faf8fb}
.mini-card span,.mini-card strong,.mini-card small{display:block}
.mini-card span{font-size:11px;color:var(--muted);font-weight:800}
.mini-card strong{font-size:25px;margin-top:7px}
.mini-card small{font-size:11px;color:var(--muted);margin-top:5px}
.table-panel{margin-bottom:17px}
.table-wrap{overflow:auto;max-height:560px}
table{width:100%;border-collapse:collapse;min-width:820px}
th,td{padding:13px 11px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}
th{position:sticky;top:0;background:#faf8fb;color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase;z-index:2}
td.num,th.num{text-align:right}
.rank{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#eee9f1;font-weight:800}
.empty{text-align:center!important;color:var(--muted);padding:32px!important}
.shelf-card{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,2fr);gap:22px;align-items:center;margin-bottom:17px;background:linear-gradient(135deg,rgba(255,244,247,.95),rgba(247,243,255,.95))}
.shelf-primary strong{font-size:clamp(48px,7vw,82px);letter-spacing:-.07em;display:block;margin:9px 0}
.shelf-primary p:last-child{font-size:11px;color:var(--muted);line-height:1.5}
.shelf-comparison{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shelf-comparison>div{padding:17px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.72)}
.shelf-comparison span,.shelf-comparison strong,.shelf-comparison small{display:block}
.shelf-comparison span{font-size:11px;color:var(--muted);font-weight:800}
.shelf-comparison strong{font-size:28px;margin:8px 0}
.shelf-comparison small{font-size:11px;color:var(--muted)}
.error-box{padding:15px 18px;border:1px solid rgba(190,60,70,.22);background:#fff0f1;color:#8f3340;border-radius:15px;margin-bottom:16px;white-space:pre-wrap}
.loading-mask{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(250,247,249,.96);z-index:100}
.loading-mask.hidden{display:none}
.loader{width:42px;height:42px;border-radius:50%;border:4px solid #e8e0eb;border-top-color:var(--pink);animation:spin .8s linear infinite}
.loading-mask small{color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}
footer{display:flex;justify-content:space-between;gap:15px;margin-top:18px;padding:8px 2px;color:var(--muted);font-size:11px}
@media(max-width:1180px){
  .filter-grid{grid-template-columns:repeat(3,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .shell{width:calc(100% - 24px);padding-top:22px}
  .hero,.platform-row{flex-direction:column;align-items:stretch}
  .filter-grid{grid-template-columns:repeat(2,1fr)}
  .chart-grid{grid-template-columns:1fr}
  .shelf-card{grid-template-columns:1fr}
  .shelf-comparison{grid-template-columns:1fr}
  .sync-card{width:100%}
  footer{flex-direction:column}
}
@media(max-width:520px){
  .filter-grid,.kpi-grid{grid-template-columns:1fr}
  .chart-wrap{height:300px}
  .chart-wrap.tall{height:360px}
}