.mm-billing-card {
          background: var(--surface, #fff);
          border: 1px solid var(--border, #F1E3D8);
          border-radius: var(--card-radius, 16px);
          box-shadow: var(--shadow, 0 4px 24px rgba(31, 41, 55, .07));
          padding: 22px;
          margin-bottom: 20px;
          font-family: 'Sora', sans-serif;
        }

        .mm-billing-status {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 10px;
        }

        .mm-billing-status .plan-name {
          font-size: 20px;
          font-weight: 800;
        }

        .mm-billing-status .plan-meta {
          font-size: 13px;
          color: color-mix(in srgb, var(--text, #1F2937) 60%, transparent);
        }

        .mm-badge-pill {
          display: inline-block;
          font-size: 12px;
          font-weight: 700;
          padding: 4px 12px;
          border-radius: 999px;
        }

        .mm-badge-pill.active {
          background: color-mix(in srgb, var(--green, #069494) 15%, transparent);
          color: var(--green, #069494);
        }

        .mm-badge-pill.trialing {
          background: color-mix(in srgb, var(--accent, #FF8243) 15%, transparent);
          color: var(--accent, #FF8243);
        }

        .mm-badge-pill.canceled,
        .mm-badge-pill.expired,
        .mm-badge-pill.past_due {
          background: color-mix(in srgb, var(--red, #E4572E) 15%, transparent);
          color: var(--red, #E4572E);
        }

        .mm-upgrade-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
          margin-top: 16px;
        }

        @media (max-width:800px) {
          .mm-upgrade-grid {
            grid-template-columns: 1fr;
          }
        }

        .mm-upgrade-card {
          border: 1px solid var(--border, #F1E3D8);
          border-radius: 14px;
          padding: 16px;
          text-align: center;
        }

        .mm-upgrade-card h4 {
          margin: 0 0 6px;
          font-size: 14px;
        }

        .mm-upgrade-card .p {
          font-size: 18px;
          font-weight: 800;
          margin-bottom: 10px;
        }

        .mm-upgrade-card select {
          width: 100%;
          margin-bottom: 10px;
          padding: 6px;
          border-radius: 8px;
          border: 1px solid var(--border, #F1E3D8);
          font-family: 'Sora', sans-serif;
        }

        .mm-upgrade-card button {
          width: 100%;
          padding: 9px;
          border-radius: 10px;
          border: none;
          background: var(--accent, #FF8243);
          color: #fff;
          font-weight: 700;
          cursor: pointer;
          font-family: 'Sora', sans-serif;
        }

        .mm-history-table {
          width: 100%;
          border-collapse: collapse;
          font-size: 13px;
          margin-top: 10px;
        }

        .mm-history-table th,
        .mm-history-table td {
          padding: 9px 8px;
          text-align: left;
          border-bottom: 1px solid var(--border, #F1E3D8);
        }

        .mm-cancel-row {
          margin-top: 16px;
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
        }

        .mm-cancel-row button {
          padding: 9px 16px;
          border-radius: 10px;
          font-weight: 700;
          font-size: 13px;
          cursor: pointer;
          font-family: 'Sora', sans-serif;
          border: 1px solid var(--border, #F1E3D8);
          background: var(--bg, #F8FAFC);
          color: var(--text, #1F2937);
        }

        .mm-cancel-row button.danger {
          background: color-mix(in srgb, var(--red, #E4572E) 10%, transparent);
          border-color: var(--red, #E4572E);
          color: var(--red, #E4572E);
        }