.upcoming .card {
        padding: 12px;
      }
      .kpi-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
        gap: var(--gap);
      }
      .grp {
        display: grid;
        grid-template-rows: auto repeat(4, minmax(52px, 1fr));
        background: var(--card);
        border-radius: var(--r);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        overflow: hidden;
      }
      .gh {
        background: #f1f3f5;
        padding: 9px 16px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #343a40;
        border-bottom: 1px solid #dee2e6;
      }
      .gr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 10px 16px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 13px;
      }
      .gr:last-child {
        border-bottom: 0;
      }
      .gr span {
        color: var(--tx2);
        min-width: 0;
      }
      .gr b {
        font-size: 14px;
        text-align: right;
        overflow-wrap: anywhere;
      }
      .gr.tot {
        grid-row: 5;
        background: #eef3fb;
        border-left: 4px solid var(--c1);
      }
      .gr.tot span {
        color: var(--tx);
        font-weight: 700;
        font-size: 12px;
      }
      .gr.tot b {
        font-size: 16px;
      }
      .basic-breakdown {
        display: grid;
        gap: var(--gap);
        margin-top: var(--gap);
      }
      .basic-head {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        margin-bottom: 4px;
      }
      .basic-head span {
        color: var(--tx2);
        font-size: 12px;
      }
      .basic-loan {
        background: var(--card);
        border-radius: var(--r);
        padding: 16px 18px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }
      .basic-loan-hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 8px;
      }
      .basic-loan-hd > div {
        display: flex;
        flex-direction: column;
      }
      .basic-loan-hd strong {
        font-size: 15px;
      }
      .basic-loan-hd small {
        color: var(--tx2);
        font-size: 12px;
      }
      .basic-loan-hd span {
        color: var(--c1);
        font-size: 12px;
        font-weight: 700;
      }
      .basic-progress {
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: #e9ecef;
        overflow: hidden;
        margin-bottom: 12px;
      }
      .basic-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--c1), #7aa2e6);
      }
      .basic-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 0;
      }
      .basic-grid div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        border-left: 1px solid #dee2e6;
        border-bottom: 1px solid #f1f3f5;
      }
      .basic-grid div:nth-child(even) {
        background: #f8f9fa;
      }
      .basic-grid div:first-child {
        border-left: 0;
        padding-left: 0;
      }
      .basic-grid div:last-child {
        border-bottom: 0;
      }
      .basic-grid span {
        color: var(--tx2);
        font-size: 12px;
      }
      .basic-grid b {
        font-size: 13px;
        text-align: right;
      }
      .kpi {
        background: var(--card);
        border-radius: var(--r);
        padding: 16px 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }
      .kpi .l {
        font-size: 12px;
        color: var(--tx2);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .kpi .v {
        font-size: 22px;
        font-weight: 700;
        margin-top: 2px;
      }
      .kpi .n {
        font-size: 11px;
        color: var(--tx2);
      }
      .kpi.hi {
        border-left: 4px solid var(--c1);
      }
      @media (max-width: 768px){
        .kpi {
          padding: 12px 14px;
        }
        .kpi .v {
          font-size: 18px;
        }
        .kpi-row {
          grid-template-columns: 1fr;
          gap: 10px;
        }
        .grp {
          grid-template-rows: none;
        }
        .gr.tot {
          grid-row: auto;
        }
        .upcoming .card {
          overflow: visible;
        }
        .upcoming table,
        .upcoming tbody {
          display: block;
        }
        .upcoming thead {
          display: none;
        }
        .upcoming tbody {
          display: grid;
          gap: 8px;
        }
        .upcoming tr {
          display: block;
          padding: 8px 10px;
          border: 1px solid #eee;
          border-radius: 6px;
        }
        .upcoming td {
          display: grid;
          grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
          gap: 8px;
          text-align: left;
          white-space: normal;
          overflow-wrap: anywhere;
          padding: 6px 0;
        }
        .upcoming td::before {
          content: attr(data-label);
          color: var(--tx2);
          font-size: 11px;
          font-weight: 400;
          text-transform: uppercase;
        }}