:root{--color-primary: #1c82f8;--color-primary-dark: #096fdc;--color-sidebar: #061d2d;--color-sidebar-deep: #031727;--color-sidebar-line: rgba(255, 255, 255, .12);--color-page: #f3f4f6;--color-card: #ffffff;--color-text: #22262c;--color-muted: #8a8f99;--color-border: #e8eaee;--color-grid: #e8e8e8;--color-blue: #1f82ff;--color-cyan: #20c4df;--color-green: #45cf98;--color-purple: #a96be1;--color-violet: #7b74d4;--sidebar-width: 200px;--header-height: 56px;--page-gap: 8px;--card-radius: 6px;--shadow-soft: 0 1px 2px rgba(15, 35, 65, .04);--font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;background:var(--color-page);color:var(--color-text);font-family:var(--font-family);font-size:14px}button,input,select{font:inherit}button{border:0;cursor:pointer}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#1e5ca047;border-radius:999px}::-webkit-scrollbar-track{background:transparent}.dashboard-shell{min-width:1440px;min-height:100vh;background:var(--color-page)}.top-nav{position:fixed;top:0;left:0;z-index:20;display:flex;width:100%;min-width:1440px;height:var(--header-height);color:#fff;background:#1b86f8;box-shadow:0 1px 4px #0c39692e}.brand-block{position:relative;display:flex;align-items:center;width:var(--sidebar-width);height:100%;padding:0 17px 0 20px;background:linear-gradient(90deg,#1c98ff,#1984f5)}.brand-mark{position:relative;display:grid;place-items:center;width:42px;height:34px;color:#fff;filter:drop-shadow(0 0 2px rgba(255,255,255,.7))}.brand-dot{position:absolute;width:5px;height:5px;border:1px solid rgba(255,255,255,.9);border-radius:1px}.dot-1{left:15px;top:17px}.dot-2{left:25px;top:15px}.dot-3{left:25px;top:25px}.brand-copy{display:flex;flex-direction:column;gap:2px;margin-left:10px;line-height:1;white-space:nowrap}.brand-copy strong{font-size:13px;font-weight:700;letter-spacing:0}.brand-copy span{font-size:7px;font-weight:700;opacity:.75}.brand-menu{margin-left:auto}.nav-tabs{display:flex;height:100%}.nav-tab{display:grid;place-items:center;min-width:112px;height:100%;padding:0 24px;color:#fff;font-size:16px;background:transparent}.nav-tab.active{background:#004e9742}.nav-actions{display:flex;align-items:center;gap:18px;margin-left:auto;padding:0 18px;font-size:14px}.avatar{display:grid;place-items:center;width:24px;height:24px;color:#1b82f7;background:linear-gradient(180deg,#fff,#dceaff);border-radius:50%}.user-name{margin-left:-12px;font-size:15px}.sidebar{position:absolute;top:var(--header-height);bottom:0;left:0;z-index:15;display:flex;flex-direction:column;width:var(--sidebar-width);color:#ffffffb8;background:var(--color-sidebar)}.sidebar-search{display:grid;grid-template-columns:18px 1fr 18px;align-items:center;gap:12px;height:58px;padding:0 17px;color:#ffffff5c;font-size:14px;border-bottom:1px solid rgba(255,255,255,.02)}.menu-scroll{flex:1;overflow:hidden;padding-top:15px}.menu-root{display:grid;grid-template-columns:18px 1fr 18px;align-items:center;width:100%;height:38px;padding:0 17px;color:#ffffffd1;font-size:14px;text-align:left;background:transparent}.menu-root span{padding-left:4px}.menu-root.active,.menu-root:hover{color:#fff;background:#ffffff0d}.submenu{padding:13px 0 18px}.submenu-item{display:block;width:100%;height:44px;padding-left:42px;color:#ffffff9e;font-size:15px;text-align:left;background:transparent}.submenu-item.active,.submenu-item:hover{color:#fff}.menu-root--plain{margin-top:10px}.collapse-button{display:flex;align-items:center;justify-content:center;gap:7px;height:50px;color:#ffffffad;font-size:14px;background:var(--color-sidebar-deep);border-top:1px solid var(--color-sidebar-line)}.dashboard-main{width:calc(100% - var(--sidebar-width));min-height:100vh;margin-left:var(--sidebar-width);padding:calc(var(--header-height) + var(--page-gap)) var(--page-gap) var(--page-gap)}.filter-panel{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;background:var(--color-card);border-radius:var(--card-radius);box-shadow:var(--shadow-soft)}.update-copy{display:flex;align-items:center;gap:8px;color:#252930;font-size:14px}.update-copy strong{font-weight:500}.update-copy span{font-size:15px}.update-copy em{margin-left:14px;color:#8b8f96;font-style:normal}.filter-actions{display:flex;align-items:center;gap:9px}.filter-actions--small{gap:8px}.select-box{position:relative;display:block;width:240px;height:32px}.section-extra .select-box{width:120px}.filter-actions--small .select-box:first-child{width:170px}.filter-actions--small .select-box:last-child{width:106px}.select-box select{width:100%;height:100%;padding:0 32px 0 12px;color:#20242a;font-size:14px;background:#fff;border:1px solid #d6d7da;border-radius:4px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.select-box select:focus{border-color:var(--color-primary)}.select-arrow{position:absolute;top:50%;right:11px;color:#b9bdc3;pointer-events:none;transform:translateY(-50%)}.query-button{width:60px;height:32px;color:#fff;font-size:14px;background:var(--color-primary);border-radius:4px}.query-button:hover{background:var(--color-primary-dark)}.metric-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin-top:var(--page-gap);padding:16px;background:var(--color-card);border-radius:var(--card-radius);box-shadow:var(--shadow-soft)}.metric-card{position:relative;display:flex;align-items:center;min-width:0;height:74px;padding:0 12px;overflow:hidden;border-radius:6px}.metric-card--indigo{background:linear-gradient(105deg,#dfe8ff,#f2f6ff)}.metric-card--sky{background:linear-gradient(105deg,#d9efff,#f3fbff)}.metric-icon{display:grid;flex:0 0 auto;place-items:center;width:36px;height:36px;color:#fff;border-radius:4px}.metric-icon--indigo{background:linear-gradient(180deg,#85a8ff,#2b55da)}.metric-icon--sky{background:linear-gradient(180deg,#93d7ff,#50a8f2)}.metric-main{flex:1 1 auto;min-width:0;margin-left:9px}.metric-title{max-width:none;overflow:hidden;color:#7a7f88;font-size:14px;line-height:18px;text-overflow:ellipsis;white-space:nowrap}.metric-value-row{display:flex;align-items:baseline;gap:4px;margin-top:3px;padding-right:0;white-space:nowrap}.metric-value{color:#20242a;font-size:22px;font-weight:700;line-height:1}.metric-unit{color:#20242a;font-size:13px;white-space:nowrap}.metric-trend{position:absolute;right:12px;bottom:19px;display:flex;align-items:center;gap:2px;font-size:13px;white-space:nowrap}.metric-trend.is-up{color:#ff2230}.metric-trend.is-down{color:#0bb443}.trend-arrow{font-size:11px}.overview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 410px;grid-template-rows:302px 260px;gap:var(--page-gap);margin-top:var(--page-gap)}.project-grid{display:grid;grid-template-columns:minmax(0,2fr) 410px;gap:var(--page-gap);margin-top:var(--page-gap)}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--page-gap);margin-top:var(--page-gap)}.section-card{min-width:0;padding:16px;overflow:hidden;background:var(--color-card);border-radius:var(--card-radius);box-shadow:var(--shadow-soft)}.section-head{display:flex;align-items:flex-start;justify-content:space-between;min-height:31px;margin-bottom:4px}.section-title{margin:0;color:#20242a;font-size:18px;font-weight:700;line-height:1.2}.section-extra{flex:0 0 auto}.warn-text{margin:12px 0 8px;color:#ff202b;font-size:13px}.section-note{margin:0;color:#8a8f96;font-size:13px}.unit-label{color:#8a8f96;font-size:12px}.chart-box{width:100%;min-width:0}.overview-monitor{grid-column:3;grid-row:span 2}.warning-card{grid-column:1 / span 2}.monitor-card{padding-right:0;padding-bottom:0}.monitor-card .section-head{padding-right:16px}.tabs-bar{display:flex;gap:7px}.tab-button{flex:0 0 auto;min-width:74px;height:32px;padding:0 16px;color:#85898f;font-size:14px;line-height:32px;white-space:nowrap;background:#f2f2f3;border-radius:4px}.tabs-bar--compact .tab-button{min-width:78px;padding:0 12px}.tab-button.active{color:#fff;background:var(--color-primary)}.monitor-list{margin-top:18px;border-top:0}.monitor-item{position:relative;padding:0 16px 13px;border-bottom:1px solid #ececec}.monitor-item+.monitor-item{padding-top:15px}.monitor-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.monitor-title{display:flex;align-items:center;min-width:0;gap:5px;color:#20242a;font-size:14px;font-weight:600}.monitor-title svg{flex:0 0 auto;color:var(--color-primary);fill:var(--color-primary)}.monitor-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:42px;height:22px;padding:0 7px;font-size:13px;border-radius:4px}.status-badge--green{color:#0bb443;background:#edfff4;border:1px solid #74de98}.status-badge--blue{color:var(--color-primary);background:#eef7ff;border:1px solid #8cc9ff}.status-badge--purple{color:#7a33e6;background:#faf5ff;border:1px solid #c59cff}.progress-number{position:relative;width:44px;margin-top:10px;color:#333840;font-size:12px;text-align:center;transform:translate(-50%)}.stage-track{position:relative;height:8px;margin-top:7px;overflow:hidden;background:#f1f1f1;border-radius:999px}.stage-fill{position:absolute;top:0;left:0;height:100%}.stage-fill--green{background:#09b63d}.stage-fill--blue{background:linear-gradient(90deg,#09b63d 0 32%,var(--color-primary) 32% 100%)}.stage-fill--purple{background:linear-gradient(90deg,#09b63d 0 24%,var(--color-primary) 24% 72%,#8b73f1 72% 100%)}.stage-labels{display:flex;justify-content:space-between;margin-top:6px;color:#8a8f96;font-size:12px}.stage-labels .active{color:var(--color-primary)}.stage-labels span:first-child.active{color:#0bb443}.stage-labels span:last-child.active{color:#7a33e6}.project-summary{min-height:415px}.project-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:4px 0 18px}.project-chart-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}.sub-chart{min-width:0}.sub-title-row{display:flex;align-items:center;gap:12px;min-height:34px}.sub-title-row h3{position:relative;margin:0;padding-left:12px;color:#20242a;font-size:15px;font-weight:700;white-space:nowrap}.sub-title-row h3:before,.side-title:before{position:absolute;top:4px;left:0;width:3px;height:12px;content:"";background:var(--color-primary);border-radius:999px}.sub-title-row .tabs-bar{margin-left:0}.sub-title-row .unit-label{margin-left:auto}.mini-legend,.legend-line{display:flex;align-items:center;gap:14px;color:#5e6269;font-size:12px}.mini-legend{margin-left:auto}.mini-legend span,.legend-line span,.legend-toggle{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.mini-legend i,.legend-line i,.legend-toggle i{display:inline-block;flex:0 0 auto;width:10px;height:10px;border-radius:2px}.legend-toggle{min-width:0;padding:0;color:inherit;font:inherit;background:transparent}.legend-toggle:hover{color:var(--color-primary)}.legend-toggle.is-muted{opacity:.34}.donut-layout{display:grid;grid-template-columns:136px minmax(0,1fr);align-items:center;gap:12px;height:184px}.donut-layout .chart-box{min-width:0}.donut-legend{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;list-style:none}.donut-legend li{min-width:0;color:#5a5f66;font-size:12px;line-height:16px}.donut-legend .legend-toggle{align-items:flex-start;width:100%;text-align:left}.donut-legend i{flex:0 0 auto;width:10px;height:10px;margin:3px 6px 0 0;border-radius:2px}.donut-legend span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legend-blue{background:#278cf7}.legend-cyan{background:#20c4df}.legend-green{background:#4fd29c}.gauge-card{min-height:415px}.gauge-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 10px;margin-top:22px}.wide-card{margin-top:var(--page-gap)}.wide-card .section-head{margin-bottom:0}.section-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:34px;margin-bottom:6px}.legend-line{margin-left:auto}.legend-line--right{justify-content:flex-end}.ip-card{min-height:320px}.ip-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.65fr) minmax(260px,.65fr);gap:26px}.ip-main,.ip-side{min-width:0}.ip-main .sub-title-row{flex-wrap:wrap;gap:8px 12px}.ip-main .mini-legend{flex:0 1 100%;flex-wrap:wrap;max-width:100%;margin-left:0}.side-title{position:relative;margin:4px 0;padding-left:12px;color:#20242a;font-size:15px;font-weight:700}@media (max-width: 1439px){.dashboard-shell,.top-nav{min-width:1440px}}