*{box-sizing:border-box}
html,body{
  margin:0;padding:0;width:100%;height:100%;
  font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  background:#eef3f8;color:#1f2d3d;overflow:hidden
}
a{text-decoration:none;color:inherit}
:root{
  --bg:#eef3f8;
  --panel:#ffffff;
  --line:#dfe7f1;
  --text:#1f2d3d;
  --sub:#6b7a90;
  --blue:#2f6bff;
  --blue-weak:#edf4ff;
  --blue2:#6f9cff;
  --green:#16b26a;
  --orange:#ff9f43;
  --red:#f05252;
  --purple:#7a5cff;
  --shadow:0 8px 22px rgba(31,45,61,.07);
  --shadow-hover:0 14px 30px rgba(47,107,255,.12);
  --radius:16px;
}

#app{width:100vw;height:100vh;overflow:hidden;position:relative}
.screen-adapter{
  width:1920px;height:1080px;transform-origin:left top;
  position:absolute;left:0;top:0;
  background:linear-gradient(180deg,#f6f8fc 0%,#eef3f8 100%);
  overflow:hidden;
}
.screen{width:1920px;height:1080px;padding:16px 18px}

.topbar{
  height:58px;background:rgba(255,255,255,.92);
  border:1px solid rgba(223,231,241,.95);
  border-radius:16px;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
}
.topbar-left{display:flex;align-items:center;gap:12px}
.logo{
  min-width:84px;height:34px;padding:0 12px;border-radius:10px;
  background:linear-gradient(135deg,#2f6bff,#6f9cff);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:14px;letter-spacing:.3px;
}
.topbar-title h1{
  margin:0;font-size:24px;line-height:1;color:var(--text);
  font-weight:800;letter-spacing:.3px
}
.topbar-right{display:flex;align-items:center;gap:10px}
.ctrl{
  height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--text);font-size:13px;outline:none
}
.btn{
  height:36px;padding:0 14px;border:none;border-radius:10px;
  background:var(--blue);color:#fff;cursor:pointer;font-weight:700;
  box-shadow:0 8px 18px rgba(47,107,255,.18)
}

.mid-nav{
  height:42px;margin:8px 0 10px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:space-between;padding:0 10px
}
.mid-nav-left{display:flex;gap:6px;align-items:center}
.nav-tab{
  height:30px;padding:0 14px;border-radius:8px;border:1px solid transparent;
  display:flex;align-items:center;font-size:13px;color:#4b5d78;
  background:transparent;transition:.2s
}
.nav-tab:hover{background:#f3f7ff}
.nav-tab.active{
  background:linear-gradient(180deg,#edf3ff,#dfeaff);
  color:var(--blue);font-weight:700;border-color:#cfe0ff
}
.mid-nav-right{font-size:12px;color:var(--sub)}

.main{
  height:calc(100% - 58px - 42px - 18px);
  display:flex;flex-direction:column;gap:12px
}
.row{display:flex;gap:12px}
.col{display:flex;flex-direction:column;gap:12px}

.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:.2s
}
.panel.clickable{cursor:pointer}
.panel.clickable:hover{
  border-color:#bcd1ff;
  box-shadow:var(--shadow-hover);
  transform:translateY(-1px)
}
.panel-hd{
  height:42px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #edf2f7
}
.panel-title{
  font-size:15px;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:8px
}
.panel-title::before{
  content:"";width:5px;height:16px;border-radius:3px;
  background:linear-gradient(180deg,var(--blue),#78a6ff)
}
.panel-sub{font-size:12px;color:var(--sub)}
.panel-bd{padding:12px 14px;height:calc(100% - 42px)}
.chart{width:100%;height:100%}

.drill-flag{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 8px;border-radius:999px;
  background:rgba(47,107,255,.08);
  border:1px solid rgba(47,107,255,.12);
  color:#5d86ff;font-size:12px;font-weight:700
}
.drill-tip{
  position:absolute;right:12px;bottom:10px;font-size:12px;color:#5d86ff;
  background:rgba(47,107,255,.08);
  border:1px solid rgba(47,107,255,.14);
  padding:4px 8px;border-radius:999px
}
.hand-tip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;color:#5d86ff
}

.kpi-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kpi-card{
  min-height:110px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);
  padding:12px 14px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center
}
.kpi-title{font-size:13px;color:#62738a;font-weight:700;margin-bottom:8px}
.kpi-value-row{display:flex;align-items:flex-end;gap:8px;justify-content:center}
.kpi-value{
  font-size:24px;line-height:1;font-weight:800;color:#18263a;letter-spacing:.3px
}
.kpi-unit{font-size:14px;color:#63758b;font-weight:600;margin-left:2px}
.kpi-yoy{font-size:13px;font-weight:800;padding:3px 8px;border-radius:999px}
.up{color:var(--green);background:rgba(22,178,106,.1)}
.down{color:var(--red);background:rgba(240,82,82,.1)}
.flat{color:#7b8798;background:rgba(123,135,152,.12)}
.kpi-meta{margin-top:8px;font-size:12px;color:#6c7b8f}
.kpi-meta strong{color:#233247}

.metric-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.metric-item{
  border:1px solid #ebf0f6;background:#f9fbfe;border-radius:12px;padding:10px 12px
}
.metric-label{font-size:12px;color:#6e7d92;margin-bottom:6px}
.metric-main{display:flex;align-items:center;justify-content:space-between}
.metric-main strong{font-size:18px;color:#1e2d3f}
.metric-tag{padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700}
.tag-green{background:rgba(22,178,106,.1);color:var(--green)}
.tag-orange{background:rgba(255,159,67,.14);color:var(--orange)}
.tag-red{background:rgba(240,82,82,.12);color:var(--red)}
.tag-blue{background:rgba(47,107,255,.1);color:var(--blue)}

.table-wrap{width:100%;height:100%;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:12px;color:#243247}
thead th{
  background:#f6f9fc;color:#617289;font-weight:800;
  border-bottom:1px solid #e8eef5;padding:9px 6px;text-align:center
}
tbody td{
  border-bottom:1px solid #eef3f7;padding:8px 6px;text-align:center;
  white-space:nowrap
}
tbody tr:nth-child(even){background:#fbfdff}
tbody tr:hover{background:#f4f8ff}
.rank-no{
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff
}
.no1{background:#ff8f1f}.no2{background:#4b8bff}.no3{background:#14b46f}.noN{background:#9aa9bc}

.status-pill,.risk-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700
}
.s-good{background:rgba(22,178,106,.12);color:var(--green)}
.s-mid{background:rgba(255,159,67,.14);color:var(--orange)}
.s-bad{background:rgba(240,82,82,.12);color:var(--red)}
.s-blue{background:rgba(47,107,255,.1);color:var(--blue)}

.progress-line{
  width:100%;height:10px;background:#edf2f8;border-radius:999px;overflow:hidden
}
.progress-fill{height:100%;border-radius:999px}
.fill-blue{background:linear-gradient(90deg,#4a86ff,#7aa7ff)}
.fill-green{background:linear-gradient(90deg,#17b56d,#57d292)}
.fill-orange{background:linear-gradient(90deg,#ff9f43,#ffc165)}
.fill-red{background:linear-gradient(90deg,#f26666,#ff8f8f)}

.split-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.breadcrumb{font-size:12px;color:#6c7b8f;display:flex;align-items:center;gap:6px}
.breadcrumb span:last-child{color:#2a3b52;font-weight:700}

.legend-inline{display:flex;align-items:center;gap:14px;font-size:12px;color:#6b7a90}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-box{width:12px;height:12px;border-radius:4px}
.legend-plan{background:#e4ebf7}
.legend-actual{background:#2f6bff}

.bullet-list{display:flex;flex-direction:column;gap:10px;height:100%}
.bullet-row{display:grid;grid-template-columns:80px 1fr 60px;gap:10px;align-items:center}
.bullet-name{font-size:12px;color:#56677d;font-weight:700}
.bullet-track{position:relative;height:24px;display:flex;align-items:center}
.bullet-plan{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:18px;background:#e4ebf7;border-radius:999px
}
.bullet-actual{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:10px;background:#2f6bff;border-radius:999px
}
.bullet-rate{text-align:right;font-size:12px;color:#415268;font-weight:700}

.index-hero{
  height:180px;background:
    radial-gradient(circle at right top, rgba(47,107,255,.16), transparent 35%),
    linear-gradient(135deg,#ffffff,#f6f9ff);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  padding:24px 28px;display:flex;align-items:center;justify-content:space-between
}
.index-hero-left h2{
  margin:0;font-size:36px;line-height:1.2;font-weight:800;color:#1f2d3d
}
.index-hero-left p{
  margin:12px 0 0;font-size:14px;line-height:1.8;color:#6b7a90
}
.index-hero-right{
  display:grid;grid-template-columns:repeat(3,180px);gap:12px
}
.index-mini{
  height:92px;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:14px
}
.index-mini .label{font-size:12px;color:#6b7a90}
.index-mini .value{margin-top:8px;font-size:28px;font-weight:800;color:#1f2d3d}
.index-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px
}
.index-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:18px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s
}
.index-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(47,107,255,.10);
  border-color:#cfe0ff
}
.index-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.index-card .num{
  width:34px;height:34px;border-radius:10px;background:#edf4ff;color:#2f6bff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px
}
.index-card h3{margin:0;font-size:20px;color:#1f2d3d}
.index-card p{margin:10px 0 0;font-size:13px;line-height:1.7;color:#69798f}
.index-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 14px;border-radius:10px;
  background:#2f6bff;color:#fff;font-size:13px;font-weight:700;width:max-content
}

.section-kpi{height:110px}
.h-180{height:180px}.h-200{height:200px}.h-220{height:220px}.h-240{height:240px}.h-260{height:260px}.h-280{height:280px}.h-300{height:300px}.h-320{height:320px}.h-340{height:340px}.h-360{height:360px}
.w-24{width:24%}.w-33{width:33.333%}.w-38{width:38%}.w-40{width:40%}.w-42{width:42%}.w-45{width:45%}.w-50{width:50%}.w-55{width:55%}.w-58{width:58%}.w-60{width:60%}.w-62{width:62%}