:host {
  --brand: #E33DCF;
  --blue: #030FAA;
  --text: #111214;
  --muted: rgba(17, 18, 20, 0.65);

  --radius-xl: 22px;
  --shadow-card: 0 22px 46px rgba(17, 18, 20, 0.10);
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: 1px solid rgba(227, 61, 207, 0.16);
}

.parcelamento-page {
  position: relative;
  padding: clamp(14px, 3vw, 26px);
  min-height: calc(100vh - 70px);
  color: var(--text);
}

.page-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(0.2px);
  opacity: 0.20;
  pointer-events: none;
}

.blob-1 { width: 240px; height: 240px; top: 16px; left: -50px; background: var(--brand); }
.blob-2 { width: 280px; height: 280px; top: 140px; right: -80px; background: var(--blue); opacity: .14; }
.blob-3 { width: 220px; height: 220px; bottom: 30px; left: 20%; background: var(--brand); opacity: .10; }

.glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}

.page-header {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;

  .title {
    h2 { margin: 0; font-weight: 800; letter-spacing: -0.3px; }
    p { margin: 2px 0 0; color: var(--muted); }
  }

  .filters {
    padding: 14px;
    .form-label { font-weight: 700; color: rgba(17,18,20,.78); }
  }
}

.kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;

  @media (max-width: 992px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 520px) {
    grid-template-columns: 1fr;
  }

  .kpi-card {
    padding: 14px 16px;

    .kpi-label {
      display: block;
      font-size: 0.9rem;
      font-weight: 700;
      color: rgba(17,18,20,.70);
    }

    .kpi-value {
      display: block;
      font-size: 1.55rem;
      font-weight: 900;
      margin-top: 6px;

      small {
        font-size: 1rem;
        font-weight: 800;
        color: rgba(17,18,20,.70);
      }
    }

    .kpi-sub {
      display: block;
      margin-top: 6px;
      font-size: .86rem;
      color: var(--muted);
    }
  }
}

.charts {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.2fr 1fr;

  @media (max-width: 992px) {
    grid-template-columns: 1fr;
  }

  .chart-card {
    padding: 14px 16px;
    overflow: hidden;

    .chart-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;

      h5 {
        margin: 0;
        font-weight: 900;
        letter-spacing: -0.2px;
      }

      .muted {
        font-size: .9rem;
        color: var(--muted);
        white-space: nowrap;
      }
    }

    .chart-area {
      height: 360px;

      @media (max-width: 520px) {
        height: 320px;
      }
    }
  }
}

.loading {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
}