DataGovernanceDashboard/res/css/indexV2.cards.css

    .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;
    }