.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .kpi-card, .warning-card, .panel, .mini-panel { position: relative; border: 1px solid rgba(91, 180, 255, 0.26); border-radius: var(--radius); background: linear-gradient(180deg, rgba(24, 91, 132, 0.88), rgba(4, 33, 63, 0.9)), repeating-linear-gradient(0deg, rgba(108, 205, 255, 0.04), rgba(108, 205, 255, 0.04) 1px, transparent 1px, transparent 9px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08); overflow: hidden; } .kpi-card::before, .warning-card::before, .panel::before, .mini-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(87, 214, 255, 0.18), transparent 32%), radial-gradient(circle at 90% 20%, rgba(78, 127, 255, 0.14), transparent 28%); pointer-events: none; } .kpi-card { min-height: 104px; padding: 13px 14px 11px; } .kpi-label, .warning-label { position: relative; color: #c4e7ff; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 7px; } .kpi-value { position: relative; display: flex; align-items: baseline; gap: 6px; font-family: var(--num); font-size: 30px; font-weight: 900; line-height: 1; color: white; text-shadow: 0 0 20px rgba(88, 210, 255, 0.34); } .kpi-unit { color: var(--muted); font-size: 14px; font-weight: 700; } .kpi-desc { position: relative; margin-top: 8px; color: #9fc6db; font-size: 12px; line-height: 1.45; } .kpi-trend { position: absolute; right: 14px; top: 15px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: rgba(0, 20, 39, 0.45); color: #b8f4df; font-size: 12px; font-family: var(--num); } .kpi-trend.down { color: #ffb9aa; } .risk-band { position: relative; margin-top: 8px; height: 7px; border-radius: 999px; background: rgba(121, 185, 220, 0.18); overflow: hidden; } .risk-band span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--cyan)); } .warning-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .focus-row { display: grid; grid-template-columns: 430px minmax(0, 1fr) 430px; gap: 10px; margin-bottom: 10px; align-items: stretch; } .focus-indicators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .warning-card { min-height: 82px; padding: 10px 12px; border-color: rgba(255, 139, 61, 0.32); } .warning-card.high { border-color: rgba(255, 92, 102, 0.48); } .warning-card.high::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--red), var(--orange)); } .warning-name { position: relative; min-height: 24px; color: #ffb46f; font-size: 15px; font-weight: 900; line-height: 1.25; } .warning-lines { position: relative; display: grid; gap: 2px; margin-top: 5px; color: #c7e7f8; font-size: 12px; line-height: 1.36; } .warning-lines strong { color: white; font-family: var(--num); font-size: 14px; } .focus-row .warning-card { min-height: 94px; padding: 9px 10px; } .focus-row .warning-name { min-height: 22px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .focus-row .warning-lines { gap: 1px; font-size: 11px; } .focus-row .warning-lines strong { font-size: 13px; } .enterprise-trend-panel { min-height: 150px; margin-bottom: 10px; } .enterprise-trend-panel .panel-header { margin-bottom: 2px; } .enterprise-trend-panel .chart-box { overflow-x: hidden; } .indicator-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; align-items: stretch; } .indicator-strip .warning-card { min-height: 90px; padding: 9px 10px; } .indicator-strip .warning-name { min-height: 34px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .indicator-strip .warning-lines { gap: 1px; font-size: 11px; line-height: 1.3; } .indicator-strip .warning-lines strong { font-size: 12px; } .indicator-more-cell { position: relative; z-index: 1; display: grid; place-items: center; min-height: 90px; border: 1px solid rgba(91, 214, 255, 0.36); border-radius: var(--radius); background: rgba(4, 35, 64, 0.72); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .trend-panel.group-trend-panel { min-height: 150px; margin-bottom: 10px; } .trend-panel.group-trend-panel .panel-header { margin-bottom: 2px; } .trend-panel.group-trend-panel .chart-box { overflow-x: hidden; } .group-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr); gap: 12px; align-items: stretch; } .group-left-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 388px; } .group-left-stack .panel { min-height: 189px; } .group-left-stack .chart-box { overflow-y: hidden; } .usage-report-panel .table-wrap { max-height: 136px; } .usage-report-panel table { min-width: 620px; font-size: 12px; } .usage-report-panel th, .usage-report-panel td { padding: 7px 9px; } .usage-report-panel .panel-header { margin-bottom: 6px; }