:root {
  --dashboard-ink: #172033;
  --dashboard-muted: #667085;
  --dashboard-border: #e4e7ec;
  --dashboard-purple: #6657d9;
  --dashboard-purple-light: #eeeafe;
  --dashboard-blue: #2970ff;
  --dashboard-green: #039855;
  --dashboard-orange: #e04f16;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--dashboard-ink); background: #f5f7fb; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
.hidden { display: none !important; }
.dashboardMain { max-width: 1540px; margin: 0 auto; padding: 32px 36px 54px; }
.dashboardHeader { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.dashboardHeader .eyebrow { margin: 0 0 7px; color: var(--dashboard-purple); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dashboardHeader h1 { margin: 0; font-size: 30px; letter-spacing: -.035em; }
.dashboardHeader p:not(.eyebrow) { margin: 8px 0 0; color: var(--dashboard-muted); font-size: 14px; }
.headerControls { display: flex; align-items: center; gap: 10px; }
.periodSwitch { display: flex; padding: 4px; border: 1px solid var(--dashboard-border); border-radius: 11px; background: #fff; }
.periodSwitch button, .refreshButton { min-height: 36px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 700; }
.periodSwitch button { padding: 0 14px; color: var(--dashboard-muted); background: transparent; }
.periodSwitch button:hover { color: var(--dashboard-ink); background: #f2f4f7; }
.periodSwitch button.active { color: #fff; background: var(--dashboard-purple); box-shadow: 0 3px 8px rgba(102,87,217,.25); }
.refreshButton { padding: 0 15px; color: #344054; border: 1px solid #d0d5dd; background: #fff; }
.refreshButton:disabled { cursor: wait; opacity: .55; }
.dashboardAlert { margin-bottom: 18px; padding: 13px 15px; color: #b42318; border: 1px solid #fecdca; border-radius: 10px; background: #fef3f2; cursor: pointer; }
.dashboardLoading { min-height: 340px; display: grid; place-items: center; color: var(--dashboard-muted); font-size: 14px; }
.contextLine { margin: -10px 1px 14px; display: flex; justify-content: space-between; color: #98a2b3; font-size: 12px; }
.metricGrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.metricCard { position: relative; min-height: 144px; padding: 21px; overflow: hidden; border: 1px solid var(--dashboard-border); border-radius: 15px; background: #fff; box-shadow: 0 3px 12px rgba(16,24,40,.035); }
.metricCard::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); }
.metricCard::after { content: ""; position: absolute; right: -38px; top: -48px; width: 130px; height: 130px; border-radius: 50%; background: var(--wash); }
.metricCard > * { position: relative; z-index: 1; }
.metricCard span { display: block; color: var(--dashboard-muted); font-size: 13px; font-weight: 650; }
.metricCard strong { display: block; margin: 10px 0 9px; font-size: 34px; line-height: 1; letter-spacing: -.04em; }
.metricCard small { font-size: 12px; }
.accentPurple { --accent: var(--dashboard-purple); --wash: #f1efff; }.accentBlue { --accent: var(--dashboard-blue); --wash: #edf4ff; }.accentGreen { --accent: var(--dashboard-green); --wash: #ecfdf3; }.accentOrange { --accent: var(--dashboard-orange); --wash: #fff4ed; }
.positive { color: #027a48; }.negative { color: #b42318; }.neutral { color: var(--dashboard-muted); }
.systemContribution { margin: 15px 0; padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #d9d6fe; border-radius: 13px; background: linear-gradient(100deg,#f7f5ff,#fff); }
.systemContribution > div, .systemValues { display: flex; align-items: center; gap: 12px; }
.systemIcon { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: #7f70d9; font-size: 12px; font-weight: 850; }
.systemContribution p { margin: 3px 0 0; color: var(--dashboard-muted); font-size: 12px; }
.systemValues span { padding-left: 18px; color: var(--dashboard-muted); border-left: 1px solid #ddd8fb; font-size: 12px; }.systemValues strong { margin-left: 5px; color: var(--dashboard-ink); font-size: 17px; }
.dashboardGrid { display: grid; gap: 15px; margin-top: 15px; }.wideLeft { grid-template-columns: minmax(0,1.75fr) minmax(320px,.8fr); }.equalColumns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboardCard { min-width: 0; padding: 20px; border: 1px solid var(--dashboard-border); border-radius: 15px; background: #fff; box-shadow: 0 3px 12px rgba(16,24,40,.035); }
.sectionHeading { min-height: 42px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sectionHeading h2 { margin: 0; font-size: 16px; letter-spacing: -.015em; }.sectionHeading p { margin: 5px 0 0; color: var(--dashboard-muted); font-size: 12px; }.sectionHeading > a { color: var(--dashboard-purple); font-size: 12px; font-weight: 700; text-decoration: none; }
.legend { display: flex; align-items: center; gap: 5px; color: var(--dashboard-muted); font-size: 11px; white-space: nowrap; }.legend span { width: 10px; height: 10px; margin-left: 7px; border-radius: 3px; }.legend .current { background: var(--dashboard-purple); }.legend .previous { background: #d9d6fe; }
.trendChart { min-height: 260px; margin-top: 6px; }.trendChart svg { display: block; width: 100%; height: 260px; overflow: visible; }.trendGrid { stroke: #eef0f3; stroke-width: 1; }.trendAxis { fill: #98a2b3; font-size: 10px; }.currentBar { fill: var(--dashboard-purple); }.previousBar { fill: #d9d6fe; }.chartEmpty { min-height: 240px; display: grid; place-items: center; color: #98a2b3; font-size: 13px; }
.conversionFunnel { margin-top: 14px; display: grid; gap: 13px; }.funnelMeta { display: flex; justify-content: space-between; font-size: 12px; }.funnelMeta span { color: #475467; }.funnelMeta strong { font-size: 15px; }.funnelTrack { height: 8px; margin: 6px 0 4px; overflow: hidden; border-radius: 999px; background: #f2f4f7; }.funnelTrack i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8878ea,#6657d9); }.funnelStage small { color: #98a2b3; font-size: 10px; }
.leaderboardCard { margin-top: 15px; padding: 20px 0 0; overflow: hidden; }.leaderboardCard > .sectionHeading { padding: 0 20px 13px; }.tableWrap { overflow-x: auto; }.leaderboardTable { width: 100%; border-collapse: collapse; font-size: 12px; }.leaderboardTable th { padding: 10px 14px; color: #667085; border-top: 1px solid var(--dashboard-border); border-bottom: 1px solid var(--dashboard-border); background: #f9fafb; text-align: right; font-weight: 700; white-space: nowrap; }.leaderboardTable th:first-child { min-width: 210px; text-align: left; }.leaderboardTable td { padding: 13px 14px; border-bottom: 1px solid #f0f1f3; text-align: right; white-space: nowrap; }.leaderboardTable td:first-child { text-align: left; }.leaderboardTable tr:last-child td { border-bottom: 0; }.leaderboardTable tbody tr:hover { background: #fafaff; }
.contributorName { display: inline-flex; align-items: center; gap: 10px; color: var(--dashboard-ink); text-decoration: none; }.contributorName:hover strong { color: var(--dashboard-purple); }.rank { width: 28px; height: 28px; display: grid; place-items: center; color: #667085; border-radius: 9px; background: #f2f4f7; font-size: 11px; font-weight: 800; }.rank.top1 { color: #9a6700; background: #fff4cc; }.rank.top2 { color: #475467; background: #eaecf0; }.rank.top3 { color: #9b4a16; background: #ffead5; }.primaryValue { color: var(--dashboard-purple); font-size: 15px; }.mutedValue { color: var(--dashboard-muted); }
.breakdownList { margin-top: 9px; display: grid; gap: 6px; }.breakdownRow { padding: 9px 8px; color: var(--dashboard-ink); border-radius: 9px; text-decoration: none; }.breakdownRow:hover { background: #f8f7ff; }.breakdownRow > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }.breakdownRow span { color: var(--dashboard-muted); }.breakdownTrack { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #f0f1f3; }.breakdownTrack i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#998df0,#6657d9); }
.recentAssets { margin-top: 8px; display: grid; }.recentAsset { min-width: 0; padding: 10px 5px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 11px; color: var(--dashboard-ink); border-bottom: 1px solid #f0f1f3; text-decoration: none; }.recentAsset:last-child { border-bottom: 0; }.recentAsset:hover { background: #fafaff; }.recentCover { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; color: #6657d9; border-radius: 9px; background: #eeebff; font-size: 11px; font-weight: 800; }.recentCover img { width: 100%; height: 100%; object-fit: cover; }.recentAsset strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }.recentAsset p { margin: 5px 0 0; color: var(--dashboard-muted); font-size: 11px; }.recentAsset time { color: #98a2b3; font-size: 10px; }
.issueList { margin-top: 9px; display: grid; gap: 7px; }.issueRow { padding: 10px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; color: var(--dashboard-ink); border: 1px solid #eef0f3; border-radius: 10px; text-decoration: none; }.issueRow:hover { border-color: #c9c3f6; background: #fafaff; }.issueRow.hasIssue { border-color: #fedf89; background: #fffcf5; }.issueCount { width: 34px; height: 34px; display: grid; place-items: center; color: #475467; border-radius: 9px; background: #f2f4f7; font-weight: 800; }.hasIssue .issueCount { color: #b54708; background: #fef0c7; }.issueRow strong { font-size: 12px; }.issueRow p { margin: 3px 0 0; color: var(--dashboard-muted); font-size: 10px; }.issueArrow { color: #98a2b3; }.allClear { padding: 12px; color: #027a48; border-radius: 10px; background: #ecfdf3; font-size: 12px; font-weight: 700; }
.emptyState { min-height: 110px; display: grid; place-items: center; color: #98a2b3; font-size: 12px; }.emptyState.compact { min-height: 90px; }

@media (max-width: 1180px) { .metricGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }.wideLeft { grid-template-columns: 1fr; }.dashboardGrid.equalColumns { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .dashboardMain { padding: 22px 16px 40px; }.dashboardHeader { align-items: flex-start; flex-direction: column; }.headerControls { width: 100%; align-items: stretch; flex-direction: column; }.periodSwitch { width: 100%; }.periodSwitch button { flex: 1; padding: 0 8px; }.metricGrid { grid-template-columns: 1fr; }.metricCard { min-height: 126px; }.systemContribution { align-items: flex-start; flex-direction: column; }.systemValues { width: 100%; justify-content: flex-end; }.systemValues span:first-child { border-left: 0; }.contextLine { align-items: flex-start; flex-direction: column; gap: 4px; }.dashboardCard { padding: 16px; }.leaderboardCard { padding-top: 16px; }.recentAsset { grid-template-columns: 42px minmax(0,1fr); }.recentCover { width: 42px; height: 42px; }.recentAsset time { display: none; }.sectionHeading { gap: 8px; }.legend { display: none; } }